skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
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」サンプル
記事作成：2007年07月11日
▼Google Mapライクな年表を作成するjavascriptAPI「Timeline」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：rubyで一行掲示板
次の記事：Movable Typeの管理ページ用プラグイン
