Timeline を毎年の今頃の投稿を眺めるのに使う
SIMILE Timeline を使って，「毎年の今頃の投稿」を串刺し表示する。
去年や一昨年の今頃は何をしていただろうか? というのが気になることがある。Movable Type であれば bradchoate.com: MTOnThisDay プラグインで「去年や一昨年の『本日この日』」の投稿を表示することができる。MT4/MTOS 用のバージョンも公開されている (OnThisDay)。この OnThisDay の機能に加え，前後の日に幅を持たせたのが，LastYearEntries プラグインである (「去年の今頃はこんな記事を書いていました」を実現するMovableTypeプラグイン：LastYearEntries - Open MagicVox.net)。「去年や一昨年の『本日このあたりの日』」の投稿を表示することができる。
さて，「去年や一昨年の今日はどんな記事を書いていたのか?」というのを単に知りたいだけではなく，積極的に使いたいことがある。例えば，毎年同じ日に同じテーマで記事を書きたいときである。このブログであれば，ブログを開始した日や (1月26日)，禁煙記念日がある (6月20日)。こういう日に限っては，行き当たりばったりに記事を書いていては間に合わない。当日になって「あ，このテーマで書かなくちゃ」と気がつくのでは遅い。LastYearEntries プラグインは，この用途にぴったりなのだが対応バージョンは MTOS/MT4 のため，このブログの MT 2.661 はバージョンが古過ぎるので残念ながら使えない。
そこで，タイムラインを表示する SIMILE Widgets | Timeline を使って，「本日このあたりの日」を表示することにする。
必要なものは，データ，スクリプト，HTML ドキュメントである。データは Movable Type のテンプレートを使って用意する。スクリプトはサンプルをもとに手書きする (Timeline_GettingStarted - simile-widgets)。
方針としては，1つの xml データを用意し，これを各年に分けて多段表示する。中心は各年の今日にする。何年分のデータがあるかは自動判定が難しいので，手書きする。手抜きで手書き (スマン)。1年に1度書き換えなければならない。
まずインストールするディレクトリを決定する。インストールすると言っても，データと，JavaScript と，スクリプトを呼ぶ HTML ドキュメントの3つだけなので，大したことはないが，これが気に入ったら Timeline スクリプトをインストールすることになると思うので，ディレクトリは用意した方がいい。ここでは，次のディレクトリにする。
SIMILE Timeline のソースは，Downloads - simile-widgets - Project Hosting on Google Code から入手できる。現時点での最新バージョンは 2.3.0。ソースの他，ドキュメントや例題などの全部入り timeline_source_v2.3.0.zip をダウンロードし，展開する。timeline_2.3.0 というディレクトリ以下に展開される。
Linux ならば，「timeline」というシンボリックリンクを作ってリンク先を「timeline_2.3.0」にしておくと，使用しているバージョンが明確になり，かつバージョンアップする際にシンボリックリンクを張り直すだけでよいので (スクリプトを呼び出す側のソースを変更しなくてよいので)，便利である。
次のファイルを上のディレクトリに保存する。
表示に使うデータは，Movable Type のテンプレートを使って生成する。このサイトは MT 2.661 であるが，MT のバージョンには関係なく使える。MTOS/MT4 でも OK。出力先は，上で決めたディレクトリ内の xml ファイルにする。
ここではタイトルの先頭についているブレットを，カテゴリ別に色分けするようにしている。ブレットの画像は timeline_2.3.0/src/webapp/api/images/ 以下に用意されているので，これをカテゴリの名前に変更して使う (nlog(n): Master Archive にカテゴリ表示をつけるには の要領)。色分けしない場合は，上のコード内の「icon="..."」の属性の記述を丸ごと削除するだけでよい。
文字セットは UTF-8 を使う。EUC-JP だと，文字セットの指定をしても文字化けしてしまう。サイトが EUC-JP な人は，プラグインなどを使って (nlog(n): Podcast は UTF-8 で)，UTF-8 に変換する。
データを表示するための Javascript onthisday.js では，今年の「年」を取得するのに，getFullYear() を使っている。
いつもここは迷うところ。
getYear() は古いブラウザにも対応しているが，2000年以降は返す値がブラウザによって異なる (getYear)。getFullYear() は正しい西暦を返すが古いブラウザは対応していない。もうそんなブラウザを使っている人はいないかな (Netscape 3 とか)?
「date0」には今日の日付をセットし，「date1」に去年，「date2」に2年前，「date3」に3年前というようにセットしている。
このブログは開始してから6年になるので，onLoad() 関数内の bandInfos に6年分を書く。毎年1年分を追加しなければならないという欠点がある。Timeline.createBandInfo 内の width は，意味としては「幅」であるが，その年の表示の「縦の長さ」である。「width: 80」は縦を80ピクセルにするという指定である。「intervalPixels」は横幅の指定で，1日の横幅をピクセル数で指定する。
あまり見かけない設定に次がある。
syncWith に「1」を指定すると，各バンドの動きが同期しなくなる。もし同期させてしまうと，初期表示は問題がないが，マウスを使った瞬間に去年や一昨年の今日が今年の今日になってしまう。これは利点でもある反面，マウスを使うと各年が独立に動いてしまうという欠点にもなっている。各年をまとめてマウスでドラッグできるような，上手い方法はないものか…。highlight に false を指定することで，通常は最下段の大局的タイムラインに見られるような，中央がハイライトされている効果を抑止している。
…としていたのだが，これらを明示的にコードに書くと，IE6 が「Stack overflow」メッセージを出す。この記述を残したままでも，「onResize」の記述を消せば IE6 でもエラーはでない。Firefox 3.0 ではエラーなしに表示される。原因が不明なので，このコードは明示しないことにした。
タイムラインの表示をする HTML ドキュメントは，Javascript を呼んでいるだけである。スタイルで指定している高さ「style="height: 640px;"」は，onthisday.js スクリプトの Timeline.createBandInfo の width の合計である。
少し注意をする点としては，SIMILE Timeline の例にある，
は実用上問題ないのだが、(X)HTML的に valid でない (bodyタグ に onresize属性はない) ので (javascript: onresizeイベントハンドラの登録 (groundwalker.com))，
として，これを onthisday.js 内に記述している。
出来上がった「本日このあたりの日」はこれである nlog(n) - On this day。タイトルの数が多いので，表示されるまでにかなり時間がかかる。
Posted by n at 2009-08-04 21:53 | Edit | Comments (0) | Trackback(0)
Master Archive Index
Total Entry Count: 1957
