クライアントから年表的なコンテンツの提案依頼を受けまして、いい機会なので最近目にするタイムライン実装のjqueryプラグインを試してみました。
今回試したのは以下のプラグインです。
実装サンプル（別ウインドウで開きます）
検索してみたところ、日本語で設置の解説をしているサイトを見つけきれなったので英語読みながら、あと、実装例（ダレナノ-TOKIO、SMAP、嵐）をひとつだけ見つけたので、それも参考にしつつ、なんとか実装してみました。以下、ざざっと説明します。
なお、実際にアップしたフォルダの構成等は、プログラムで直にパス指定している箇所なんかもあって、上手く動くように試行錯誤した結果たどり着いたものを書いているので、正解かどうかはわかりません。サンプルも本当はこのエントリーのひとつとしてこの記事内に表示しようとしてみたのですが、パスがうまく通らないみたいでエラーになってしまいまして、別ページとして逃げています。後日の課題としたいと思います。
例によってなんとなく動いたからラッキー程度で捉えていただけると幸いです。
ファイルのダウンロード
ダウンロードはこちらからのようです。
個別に必要なファイルが落とせるのだと思いますが、僕はzipをまとめて落としました。解凍すると、下図の構造で全てのファイルが含まれたフォルダができます。
実際に使用する（僕が使用した）のは、枠で囲ったcssとjsのフォルダです。
設置
公式の設置方法はこちらです。
まずは、以下のようにアップロードします
解凍したフォルダの[ css/aristo ]の中身全て » [ テンプレフォルダ/css ]
解凍したフォルダの[ js ]の中身全て » [ テンプレフォルダ/js ]
※UIで使われる画像ファイルや、jqueryの細かいライブラリなどがcssファイルやプログラム中で呼び出されているので、もしフォルダの構成を変える場合は注意が必要です。
jQueryや、jQueryUIのjsを自分で落として用意する的なことを書いてあるのですが、実際には先ほどアップしたファイルに全て含まれて居ますので別に用意する必要は無いです。既に既存のコンテンツでそれらを使用している場合は、バージョンと、jQueryUIの内容に注意ください。
で、それらを踏まえて、実際に僕が書いたのが以下です。
ヘッダ
<link rel="stylesheet" type="text/css" href="テンプレートフォルダ/css/jquery-ui-1.8.5.custom.css"> <link rel="stylesheet" type="text/css" href="テンプレートフォルダ/js/timeglider/Timeglider.css"> <script type="text/javascript" src="テンプレートフォルダ/js/jquery.js"></script> <script type="text/javascript" src="テンプレートフォルダ/js/jquery-ui.js"></script> <script type="text/javascript" src="テンプレートフォルダ/js/timeglider-0.1.4.min.js"></script> <script type="text/javascript">
$(document).ready(function () { var tg1 = $("#placement").timeline({ "min_zoom":15, "max_zoom":60, "initial_timeline_id": "history", "data_source":"http://wald-grun.biz/blog/feed/json" }); }); </script>
それぞれのパラメータはなんとなくそれっぽい数字でいいと思います。initial_timelinの値は、json中のヘッダ部分に記述するidと一致している必要があります。
jsonファイルはwordpressのコンテンツをJSONで書き出すプラグインを使用して実装しています。こちらもカスタマイズが必要ですが、詳細は後述します。
本文
<div id="placement" style="height:400px;width:750px;margin:2em auto;"></div>
HTMLへの記述はこれだけです。意外に少ないのですが、逆に結構な量のHTMLを動的にjsで書き出してるってことなので、カスタマイズしようと思ったら大変ですね。
JSONプラグインの設置とカスタマイズ
さて、上記jQueryプラグインはデータソースとしてJSONファイルが必要なので、wordpressのJSONプラグインを使いました。公式プラグインディレクトリで公開されています。
作成された方のサイトはこちら
プラグインの設置自体は管理画面の新規追加から簡単にできます。難関はJSON形式のカスタマイズでした。
今回使ったjQueryプラグインで求められる形は以下の通りです。
[{
"id": "開始の記述で設定したidと揃えます",
"title": "生成される年表のタイトルとして表示されます",
"description": "生成される年表に説明として表示されます",
"focus_date": "1977-07-01 12:00:00",//初期位置です。指定した日付を中央にします。
"initial_zoom": "30",//拡大縮小の初期値です
"events": [{
"id": "j01",//恐らく何でもいいかと
"title": "コンテンツタイトル ",//
"startdate": "1970-11-17 12:00:00",//イベントの表示開始位置です
"importance": "50",//文字の大きさなどに反映されるようです。必須。
"icon": "triangle_green.png"//表示されるイベント名の先頭に差し込まれます。
}, {
//繰り返し
}],
"legend": [{//凡例です。
"title": "post",
"icon": "triangle_green.png"
}]
}]
JSONデータのカスタマイズは、feed-json-template.phpを書き直す必要があります。
feed-json-template.phpの一部を、以下のように書き直しました。
//元のソース
$single = array(
'id' => $id ,
'title' => get_the_title() ,
'permalink' => get_permalink(),
'content' => get_the_content(),
'excerpt' => get_the_excerpt(),
'date' => get_the_date('Y-m-d H:i:s','','',false) ,
'author' => get_the_author() ,
);
//改変したソース
$single = array(
'id' => $id ,
'title' => get_the_title(),
'startdate' => get_the_date('Y-m-d H:i:s','','',false) ,
'importance' => '30'
);
//元のソース
$single["categories"] = $categories;
//改変したソース
$single["icon"] = bloginfo("template_url")."/images/mark_".$categories.".png";
※取得したカテゴリ名を画像ファイル名とし、カテゴリごとにタイトルに付記されるアイコンを区別させようとしてます。が、実は画像の準備ができなかったので動作確認はしてません。
今回必要とするJSONデータには、先頭と最後に設定値を入れる必要があるので、以下の箇所で挿入します。
//元のソース
$json = json_encode($json);
//改変したソース
$before = '[{
"id": "history",
"title":'.json_encode(get_bloginfo('name')).',
"description": '.json_encode(get_bloginfo('description')).',
"focus_date": "'.$focusdate.'",
"initial_zoom": "30",
"events":';
$after = ',
"legend": [{
"title": "post",
"icon": "triangle_green.png"
}]
}]';
$json = $before.json_encode($json).$after;
開始の括弧と先頭の設定を$beforeに、最後の設定値と閉じ括弧を$afterに入れて、最後に結合しています。
以上を改変したfeed-json-template.phpを元の場所にアップし、ブログURLに/feed/jsonとつけるとJSONデータを取得できます。上記には書いていませんが、postの1ページあたりの表示数の影響を受けるので、query_postsで全てを表示にする処理もいれています。
書き間違っていなければこれで設置は完了のはずです。動かなかったらご指摘ください。