時系列でデータを並べるWeb部品”SIMILE Timeline”が面白い。
GoogleMapが情報に緯度経度を持たせて表現するとしたら、TimeLineは情報を年表で表現する。
サムネールを使えるし、詳細情報のポップアップもする。リンクを埋め込むこともできれば、年表のラインやポイントの色なんかも指定できる。
凄いのは、文字列検索で、年表に表示する情報を絞り込んだり、ハイライト表示できること。
データはXMLで持っているのだが、なんならサーバから動的に生成するXMLでも良い。
面白い使い方として、GoogleMapと年表を繋げて、地震の履歴を表現しているサイトがあった。
年表をWebのインタフェースに使うというと、図書、新聞、雑誌、映像記録、写真を時系列で検索する用途が思いつく。
とりあえず、今後本格的に使う準備として、日本語化と使えるプロパティの整理を行った。
■日本語化
・UTF-8対応
html,jsなど関連ファイルをutf-8で保存し直し
・ロケールに日本語を追加
timeline_2.3.1\src\webapp\api\timeline-api.jsに
var supportedLocales = [
"ja", // Japanese ←これを追加
・フィルタ、ハイライトなどの文字列を日本語に変更
src\webapp\examples\examples.jsをUTF-8で保存
ラベル文字列やボタン文字列を日本語に変更
■スタイルシートの統合
フォルダ単位でコピーして簡単に扱いたいので、他のファイルへの依存を減らす。
（@importをやめ、一つのcssファイルに統合）
■外部参照の禁止
ネット接続を前提としないため、パラメータを設定する
＜script＞
Timeline_ajax_url="../../../ajax/api/simile-ajax-api.js";
Timeline_parameters='bundle=true';
＜/script＞
■XMLで使えるプロパティ→DataFormat
・ライン、ポイント共通
title
start
end
isDuration="true" or "false"
color="red"
image="http://.......png"
link="http://......html"
caption
classname（動作未確認）
thumbnail（動作未確認）
・ライン
latestStart
earlistEnd
tapeImage="***.png"
tapeRepeat="repeat-x"
・ポイント
icon
■日付時刻のフォーマット
正しい表記 ： Nov 15 1907 00:00:00 GMT-0900
正しくない表記 ： 1907/11/15 00:00:00 GMT-0900 （FireFox、IE、Safariで動作、）
正しくない表記 ： 11 15 1907 00:00:00 GMT-0900 （FireFoxで動作、IE,Safariで動作しない）
正しくない表記 ： 1907-11-15 00:00:00 GMT-0900（FireFox,IE,Safariで動作しない）
正しい表記 ： 2009
正しい表記 ： 2009/6/25 GMT-0900
※年指定だけでもちゃんと動作する。時刻を特に指定しなくてもいいが、GMT-0900”はきちんと指定しておきたい。
■ポップアップの表示カスタマイズ
これを探すのに時間が掛かった。
timeline-bundle.cssの中に定義されている、.timeline-event-bubble-***を変更すればOK。
例えば、時刻表示がうっとおしいという場合は、
.timeline-event-bubble-time {
color: #aaa; ←fffにすれば白になって、背景と同色になるので消える
font-size:smaller; ←小さくしてしまって目立たなくする
}
