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

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

使用方法
まず、<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」サンプル

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:Movable Typeの管理ページ用プラグイン