YiiをJSのTimelineウイジェット対応にしてみる

SIMILE projectのJavascript「年表」

MITのSIMILEプロジェクトからスピンオフしたものとして、SIMILE-Widgetsというのがあって、データの視覚化補助のためのウイジェットコードがいくつか提供されている。

その中にTimelineというJavascriptを使った「年表」生成コードがあって、これを使ってみたくなった。

http://www.simile-widgets.org/timeline/

昔々はこの手の(広義の)グラフ生成が必要なときはJpGraphのようなGDライブラリを使ったサーバサイドスクリプトを使うことが多かったと思うが、ここ数年はJSでやっちゃうことが普通になってきているので、自分も遅まきながら利用者として参加してみる。

timelineコードの構造

http://d.hatena.ne.jp/sideroad/20090719/1248016731に実際の作成記事。

本家なら、http://code.google.com/p/simile-widgets/wiki/Timeline_GettingStarted

を見ればいい。

(1)apiを読み込む:<head>の中に<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>があること(自サーバにapi-???.jsを設置しない場合)。

(2)<body>の表示したい場所にdiv要素でid属性を指定する。

(3)上のdivのidは、document.getElementById("id名")インスタンスで用いられる。

(4)Timeline.createでid名のオブジェクトを作る。

(5)バンド情報:Timeline.createBandInfo関数で設定

(6)eventSourceインスタンスを生成する。

(7)Timeline.createの引数にはeventSourceインスタンスを指定。バンド情報を登録。

(8)eventSource名.loadJSONやeventSource名.loadXMLなどでデータを読み込む

(8-bis)通信を介してデータ読み込みの場合はTimeline.loadJSONなどがある。

(9)描画出力は id名.layout関数。

なおTimelineのデータ構造はhttp://code.google.com/p/simile-widgets/wiki/Timeline_EventSources にて学習できる。

その中のBasic Event Attributesの項目に

  • start
  • latestStart
  • earliestEnd
  • durationEvent
  • title

があり、Additional Event Attributesの項目に

  • icon
  • image
  • link
  • color
  • tapeImage tapeRepeat
  • textColor
  • caption
  • classname
  • description

があるのでこれらを使う。

Yiiからの呼び出し

Yiiからこれを呼び出してみる。

とりあえずの例示


処理内容

Yiiをつかう:その3で書いたように、本サイトは

{{記法名称=なにか=なにか}}

という風な二重の波括弧で囲った独自簡易記法をHTML本文に書けるようにしているので、今回もその記法を用いて処理する。

{{timeline=定義・データファイル名}}という記述を考えてみる。

簡易記法処理用のファイルは

protected/extensions/htmlparse/views/timeline.php

である。

この行に

{{timeline=contemporary}}

という一行を書くと、上のtimeline.php内の処理が実行される。

contemporaryは定義、データファイル名(の一部)で、簡易記法は、{{timeline=contemporary}}を書いているHTMLファイルと同じパスに作ったYAMLファイル

timeline.data.contemporary.yml(データファイル)

timeline.contemporary.js(対応するJSファイル)

で処理する。

YAMLデータファイルの一部

events:
 -
   start: "1972"
   title: "札幌冬季五輪"
   link: "http://ja.wikipedia.org/wiki/%E6%9C%AD%E5%B9%8C%E3%82%AA%E3%83%AA%E3%83%B3%E3%83%94%E3%83%83%E3%82%AF"
   image: "http://www1.hokkaido-jin.jp/zukan/story/05/images/05-08-ph1.jpg"

   start: "1964"
   title: "東京五輪"

YAMLデータはyaml_parse_fileで配列化した後、json_encodeでJSON化する。

データ記述にYAMLを使うのは、視認性に優れていて個人的に扱いやすいからである。残念ながらtimelineはYAMLに対応していないので再度JSON化してtimelineのJavascriptに入れる。

    $data = JSON化データ;
    $js = get_file_contents(timeline.contemporary.jsフルパス)
    $script = "var timeline_data=".$data.";".$js;
    Yii::app()->clientScript->registerScript("timeline", $script, CClientScript::POS_LOAD);

最後のYii::app()->clientScript->registerScriptによって、上の$scriptはHTMLの末尾に

/*<![CDATA[*/
jQuery(window).load(function(){
  var timeline_data=略

のような形式で出力されているはず。

以上の処理後、protected/extensions/htmlparse/views/timeline.phpは、上のJavascript用のID名を記述したdiv

echo '<div id="timeline" style="margin-left:3em;height: 350px; border: 1px solid #aaa"></div>';

を返して終了する。このdivが、HTMLの{{timeline=contemporary}}を記述した部分にreplaceされているはず。

なお上の$script変数に入れているJavascriptの記述は

http://simile-widgets.googlecode.com/files/timeline_local_example_1.0.zip

に入っているコード例のほぼコピペである。


this file --> last modified:2012-05-10 23:32:40