SIMILE timeline を使ってみる

今日は Timeline をやっています。
ホントは仕事です。
いやホントに。

Timeline は MIT で作っている、簡単に年表が作れる Ajax ツール
(webアプリでもないし、なんて言うんだろう、こういうの)。
このリンク先を見ていただくと分かるのですが、
SIMILE | Timeline
年表がぐりぐりとマウスで動かせます。
イベントをマウスでクリックすると、ポップアップ風に窓が開いて詳細表示。
んまぁなんか可愛いわ。

使い方はこちら。
超簡単でし。
SIMILE | Timeline | Documentation | How to Create Timelines
イベントのデータたちは XML を作って食わせればおk。
固定ファイルじゃなくても、ダイナミックに XML を作成して、
毎回描画させることができます。

残念ながら、javascript のソースをもりもり使うので、
エキブロには入れられません。
面白いのにー。

@nifty では、Ajax じゃなくて flash ですが、
似たようなことをやっています。
@nifty TimeLine - ソーシャル・タイムライン
で、みんなで年表作り。
軸は自由に作れるので、自分のダイエット記録をつけている人もいるみたい。
公表したほうが励みになるのかも。
一番人気は 日本史・合戦タイムライン(笑)
戦国好きな人っていますよねー。
アツい年表ができています。
下の広い年表を見ると、
鎌倉時代、戦国時代と幕末に合戦が集中しているのが分かりますね。
いやそれとも、その時代が好きな人が、集中的に登録したんでしょうか(笑)

昭和のニュースも楽しいですが、
1965 年までしかありません。
うーん、昭和 64 年までやって欲しいんだけどな。

えー、で、Timeline に話を戻して、使う上での Tips 。

ソース


ソース一式はこちらから。
Revision 1431: /timeline
でも、これ以外に、SIMILE Ajax パッケージが必要なので、それも落とす。
Revision 1431: /ajax

ソースの配置


上記2つ(timeline、ajax)をどう配置するのが正しいのか良く分からない。
timeline は主になるパッケージだから良いとして、問題は ajax のほうですよ。
でも、ソース中(timeline実行前)にこう書いておけば、どこにおいてもおk。
<script language="javascript">
var SimileAjax_urlPrefix = "http://foo.bar.co.jp/ajax/src/webapp/api/";
</script>

ディレクトリ最後のスラッシュは必要。
これが、SimileAjax.urlPrefix という変数に設定されて、
SilimeAjax.urlPrefix + "scripts/json.js"
なんて感じに実行されるようなので。

ちなみにソース中には
 http://127.0.0.1:9999/ajax/api/simile-ajax-api.js
こんな風に書いてある箇所があるので、
まぁこんな風に配置することを意図しているのでしょうな。

入力 XML ファイル


XML は UTF-8 で書きます。
日本語も問題なくおk。
ポップアップに出す中身は HTML エンティティで書くこと。
タグを書くときは、&lt;、&gt; のように書くのね。

年表のスケール(timezone が正の値のとき正しく動かない件)


初期表示時に中心に来る日時を
Timeline.createBandInfo の date で設定するのだが、
例では GMT になっている。
JST と書いても、どうやら華麗にスルーされるぽい。
そんなときは、こんな風に timezone を設定。
 bandInfos = [
    Timeline.createBandInfo({
        timeZone:  9,
        ...
    }),
    ...

ところが、これだと以下のページにあるように、
SimileのTimelineが、タイムゾーンが正の場合に正しく動作しない。 - こせきの技術日記
12月 が2回表示されるみたいなバグがある。
私の場合は 10月が2回並んだ後に12月が2回並んでた(笑)
ぱっと見わからないのだけど、
右に左にスクロールすると発生する。
特に年をまたぐ数ヶ月が危険。
12月、1月と31日が2ヶ月続いたり、日数の少ない2月があったりするせいかと。

1日試行錯誤して、原因を探ってみたのだけど、なかなか根が深い。
もういい! JST だけど GMT のつもりで動いてくれ!と思ったのだが、
設定上は何も指定していないのに、勝手に時刻が+9になる。
apache サーバの動いているロケールなども関係あるかもしれない。
内部処理で、日時の文字列を getUTCDate() することが多いのだが、
勝手にロケールを見て+9しちゃうもんだから、
特にロケール設定しなくても、時刻がずれるのだろう。
うーん。

しかもポップアップの timezone もずれとるがな。
参考:[#TIMELINE-70] time zone in event popup bubble is incorrect - Issue Tracker

とりあえず見た目を揃えたい


とりあえず、見た目の整合性が取れているように設定するにはこんな感じ。
・ apache はあきらめて日本語ロケール(JST)で動かす
・ createBandInfo では timeZone は設定しない
・ createBandInfo の時刻は以下のように設定。
    date: "Jul 30 2008 00:00:00 GMT",
  GMT をつけないと、29日15時 が中心に表示される。
・ timeline/src/webapp/api/scripts/sources.js 中
  Timeline.DefaultEventSource.Event.prototype 中の fillTime で、
  appendChild している文字列から、全部 /GMT/ を削除する処理を追加
  (上記「参考」への対処)
・データの XML の event の日時は、例えば以下のように書く
    <event start="Jul 30 2008 00:00:00 GMT" title="タイトル">
  本当は JST の日時なのだが、GMT とつけることで、30日0時 の位置に表示。
  ポップアップの日時も、30日0時 になる。
  これを GMT+0900 なんて書いたり、何もつけなかったりすると、
  29日15時 の位置に表示され、
  ポップアップの日時も 29日15時にされてしまう。
※apache を日本語ロケールで動かしていない人は、また違うと思う。

まだ作業中なんで、またなにかあったら追記する。
[PR]
by xiaoxia | 2008-07-29 12:52 | ソフトウェア | Comments(0)

ダメ女プログラマ&主婦&腐女子&バイオリン弾き


by 小霞