昔作ったサービスとかで利用した事のあるTimelineJSのバージョンが上がって使い勝手がよくなったっぽいので、もう一度使ってみる。
TimelineJSはWordPressプラグインもあるようだけど、今回は別サイトにWordPressで作成したブログの更新情報を載せたかったので、その方法を記載してみた。
※プラグインのほうも使おうとしてみたんだけど、タグを入れてみてもうまく動作しない。。こっちのほうはもうちょっと調査が必要かな。
1.お目当てのライブラリをダウンロード
TimelineJS – Document Historyの右下にあるTimelineJSの「Download」からソースをダウンロード
2.自分のサイトに設置
ダウンロードしたファイルを解凍すると、色々なフォルダ・ファイルがあるけど、実際に使うのはcompiled配下のものだけなので、compiled/cssとcompiled/jsあたりを適切に配置する。
(compiled/libはjqueryなので、すでに設置先のサイトにインクルードしている場合は不要)
3.WordPressのプラグインを追加
TimelineJSで利用するデータは、googlespreadsheetとjsonに対応している。
今回はjsonのほうを利用。
デフォルトだとjsonでの更新情報配信をすることができないので、Feed JSONプラグインをインストール。
このプラグインの説明は、以前のエントリー「WordPressでFeed JSONプラグインを利用して、feed情報をjson形式で取得してみた」を参照
4.配信用のjsonを作成
プラグインのインストールで、更新情報をjsonで出力できるようにはなったけど、そのままでは利用できないので、TimelineJSのフォーマットに合わせてあげる必要がある。
やり方はいろいろあると思うけど、とりあえずブログのタイトルと更新日と見出し記事を取り込んでみた。
var timeline = {"timeline":
{"headline":"ブログをタイムライン表示してみる",
"type":"default",
"startDate":"2012,4,1",
"text":"TimelineJSを利用して、ブログの内容をタイムライン表示してみた。",
"date" : []
}
};
var callback = function(json) {
$.each(json, function() {
var date = this.date.replace(/-/g,",");
var tmp = {
"startDate": date,
"headline" : this.title,
"text" : this.excerpt,
}
timeline.timeline.date.push(tmp);
});
}
これでデータの準備は完了。
5.TimelineJSの設定
先ほどのデータを利用して、こんな感じにする。
var timeline_config = {
width : "80%",
height: "80%",
source: timeline,
css : 'css/timeline.css',
js : 'js/timeline-min.js'
}
そしてbody内に以下を記述
<div id="timeline-embed"></div> <script type="text/javascript" src="js/timeline-embed.js"></script>
これで完成。
