Google Mapライクな年表を作成するjavascriptAPI「Timeline」

｜

｜

｜

Webで会社や個人の沿革を作成することが多いと思いますが、表現方法はそれほど多くはありません。
SIMILEが提供するTimeline APIを使用することで、Google Mapsのように滑らかな遷移が可能な年表（タイムライン）を作成することが出来ます。

使用方法
まず、<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>をhead内に挿入します。
次にタイムラインを作成したい場所に以下を書きます。
<div id="id名" style="height: 150px; border: 1px solid #aaa"></div>
タイムラインの幅や高さ、罫線をstyleで指定していますので、好みの大きさや色にしてください。
またid名としているところは後ほど指定するid名と同じにしてください。

さらにbody要素は以下のようにonLoadなどを指定します。
<body onload="onLoad();" onresize="onResize();">

これで基本的なHTMLは完成です。

次にタイムラインの構造をjavascriptで作成します。
var tl; function onLoad() { 　　var eventSource = new Timeline.DefaultEventSource(); 　　var bandInfos = [ 　　　　Timeline.createBandInfo({ 　　　　　　　　　　eventSource: eventSource, 　　　　　　　　　　date: "Aug 14 2007 00:00:00 GMT", //中心にくる日時（上）　　　　　　　　　　width: "70%", 　　　　　　　　　　intervalUnit: Timeline.DateTime.MONTH, 　　　　　　　　　　intervalPixels: 100 　　　　}), 　　　　Timeline.createBandInfo({ 　　　　　　　　　　showEventText: false, 　　　　　　　　　　trackHeight: 0.5, 　　　　　　　　　　trackGap: 0.2, 　　　　　　　　　　eventSource: eventSource, 　　　　　　　　　　date: "Aug 14 2007 00:00:00 GMT", //中心にくる日時（下）　　　　　　　　　　width: "30%", 　　　　　　　　　　intervalUnit: Timeline.DateTime.YEAR, 　　　　　　　　　　intervalPixels: 200 　　　　}) 　　]; 　　bandInfos[1].syncWith = 0; 　　bandInfos[1].highlight = true; 　　tl = Timeline.create(document.getElementById("id名"), bandInfos); //divで指定したid名を記入　　//タイムラインの中身の作成の仕方は後ほど説明　　Timeline.loadXML("タイムラインの中身.xml", function(xml, url) { eventSource.loadXML(xml, url); }); } var resizeTimerID = null; function onResize() { 　　if (resizeTimerID == null) { 　　　　resizeTimerID = window.setTimeout(function() { 　　　　　　resizeTimerID = null; 　　　　　　tl.layout(); 　　　　}, 500); 　　} }
最後にタイムラインの中身をxmlで記入します。
サンプルで使用しているxmlデータは以下の通りで、3通りあります。
ここでは基本となる一つを記載しています。
なおxmlはUTF-8で保存してください。
<data> <event start="Aug 15 2007 00:00:00 GMT" //出来事の開始日時 end="Aug 30 2007 23:59:59 GMT" //出来事の終了日時 isDuration="true" //期間を濃い色で表示 title="夏休み" //出来事の題名 image="" //表示したい画像 > 待ちに待った夏休みの到来 <a href="http://www.skuare.net/">skuare.net</a> //出来事の説明（リンクもタグをエスケープさせることで表示可能） </event>
注意：javascriptとxmlデータは同じディレクトリに置かないと、エラー：uncaught exception: Permission denied to call method XMLHttpRequest.openが出ます。
Google Mapライクな年表を作成するjavascriptAPI「Timeline」サンプル