「Timeline」 - スケジュール管理、年表作成だっておてのもの
MITの「Smile」プロジェクトが提供する「Timeline」ライブラリを利用して、スケジュール表や年表など(以下ではまとめて年表と呼ぶ)をつくる方法を紹介します。
「Smile」はJavaScriptで書かれています。
オープンソースなので、ソースコードを読んでAjaxの勉強もできそうです。
「Smile」を利用して、年表を作るために、以下の3つのファイルを
準備します。
(A)「sample.html」: 年表を表示するためのHTML形式のファイル
(B)「sample.js」: 年表を出力するためのJavaScriptを記述したファイル
(C)「sample.xml」: 年表に表示するイベントを記述したxml形式のファイル
それぞれの、コードを以下に示します。
(A)「sample.html」
<html>
<head>
<title>smile timeline sample</title>
<!-- smile APIをロードする -->
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
<!-- 「sample.js」をロードする -->
<script src="smileTest.js" type="text/javascript"></script>
</head>
<!-- イベントをロードする -->
<!-- onLoad()、onResize()イベントは「sample.js」内で定義されている
<body onload="onLoad();" onresize="onResize();">
<center>
<!-- timelineを表示するための領域を設定する -->
<!-- idは「sample.js」ファイル内の
document.getElementById("my-timeline")で指定したものと同じものにする
-->
<div id="my-timeline" style="width: 700px; height: 200px; border: 1px solid #aaa"></div>
</center>
</body>
</html>
(b)「sample.js」
var tl;
function onLoad() {
// イベントソースを指定オブジェクトを生成する
var eventSource = new Timeline.DefaultEventSource();
// bandを2つ利用する
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 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: "Jun 28 2006 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
// 2つのbandを同期させる
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
// 年表を生成する
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
// 年表にイベントを読み込む
// イベントの内容は「sample.xml」に記述されている
Timeline.loadXML("sample.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);
}
}
(C)「sample.xml」
このファイルは、属性名を見るだけで分かっていただけると思います。
<?xml version="1.0" encoding="UTF-8"?>
<data>
<event
start="Jan 11 2007 21:00:00 GMT"
end="Feb 11 2007 23:59:59 GMT"
isDuration="true"
title="日本語もつかえます"
image=""
link="http://kazuhiro.ty.land.to/blog/"
>
ポップアップウィンドウの内容はここにかきます。
＆lt；a href="http://kazuhiro.ty.land.to/blog/"＆gt;リンクも張れます＆lt;/a＆gt;
</event>
</data>
(注)
「＆」は実際には、半角です。
以上、(A)(B)(C)の3つのファイルを同じディレクトリに配置して、
ブラウザで「sample.html」にアクセスすると年表が現れます。
年表は、見栄えや機能をカスタマイズすることができます。
詳しくは、「Timeline Documentation」を参照してください。
(参考)
「How to Create Timelines」
