nlog(n): ブログに変更履歴を残したい

Sat October 16, 2004

ブログに変更履歴を残したい

記事を公開した後、内容を修正したいことがある。修正箇所を明確にするためのタグとしては <ins> と <del> がある。しかし修正が残してある文書は(正しいことかも知れないが)読みづらい。そこで、必要なときだけ修正箇所が見られるようなページ構成を Javascript を使って実装する。

■ ■ ■

記事を公開した後、内容を修正したいことがある。Wikipedia を見ると、各記事の「履歴」には今までどのように更新されてきたが全て残されている。この点で Wiki ベースのシステムはよくできている。このサイトのように Movable Type で構築されている場合、更新した箇所と日時を全て記録しておくことはできない。

記事に間違いを発見することがある。コメントを頂いて修正することも多い。修正したいが、そのまま修正するとどこが間違っていたかが分からなくなってしまう。しかし、修正だらけの記事は読みたくない。まとめると、次のようになる。

コメントしてくれた人には、修正箇所が明記されていなければ失礼になる
初めて読む人には、修正箇所が明記されている記事は読みづらい

通常は修正箇所が表示されず、必要に応じて表示されるような構成にしたい。

HTML には、挿入箇所を明示するための <ins> タグと、削除箇所のための <del> タグが用意されている(Paragraphs, Lines, and Phrases(jp))。このタグが履歴の記録に使えそうである。<ins> と <del> タグには datetime 属性を持たせることができる。datetime 属性の値は、日時を「yyyy-mm-ddThh:mm:ss+09:00」という書式で指定する (+09:00 は日本時間の場合)。例えば、<ins datetime="2004-10-16T17:04:31+09:00">挿入をマークアップ</ins> のようにする。この書式は、MovableType の編集画面の日時表示「yyyy-mm-dd hh:mm:ss」の形式にとても似ている。これに「T」と「+09:00」を追加すればよい。

Vine Linux 2.6 であれば(GNU の date コマンドであれば)、date コマンドに「-I」または「--iso-8601」オプションをつけることで、この書式にかなり近い日時表示が得られる。ただし、最後が「+0900」になっているので、注意が必要である。コロンを入れて「+09:00」としなければならない。(コロンなしの「+0900」でも ISO 8601 としては問題ないが、datetime 属性としては認められていない)

$ date -Iseconds ↵
2004-10-16T17:04:31+0900

一般的な date コマンドの書式は、次のようになるだろう。

$ date +'%Y-%m-%dT%H:%M:%S+09:00' ↵
2004-10-16T17:04:31+09:00

<ins> と <del> タグでマークアップされた箇所の表示は、スタイルを指定しない場合ブラウザのデフォルト設定が優先される。次のような指定となっていることが多いようだ。

ins { text-decoration: underline; }
del { text-decoration: line-through; }

この設定のままだと、挿入部分と削除部分のような表示となる。しかし、修正が入った文書は読みづらい。「必要に応じて」修正部分が分かるようにしたいので、スタイルシートに手を加えることにする。

通常表示用のスタイルシート「style-site.css」に、次の項目を追加する。追加部分には文字修飾をせず、削除部分は表示しないようにしている。

ins { text-decoration: none; }
del { display: none; }

修正部分表示用のスタイルシートを新規に用意する。ファイル名を「styles-history.css」とし、内容には次の項目を書いておく。変更部分の表示は、それぞれ挿入部分と削除部分のようになる。

ins {
   text-decoration: none;
   background-color: #FFD5EA;
   }
del {
   display: inline;
   text-decoration: line-through;
   background-color: #D5EAFF;
   }

スタイルシートの読み込みは、Javascript を使うことにする (nlog(n): 印刷用ページを作るにはと同じ)。

まず、個別記事用の Individual Entry Template を編集し、ヘッダに赤色部分を追記する。「styles-site.css」の後に書くのがポイント。

同じテンプレートの本文に、リンクのための記述を追加する。表示のためのアイコンは Button Maker :: Kalsey Consulting Group で作成した。

保存して再構築すれば完了である。ページの右上にが表示され、クリックするとに切り替わる。それと同時に~~削除箇所と~~ 挿入箇所の表示方法が変わるようになる。