【D3.js + node.js】 ブログのデータをGithub風のカレンダーに表示する

最終更新日

wpcalendar

example

WordPressもくもく勉強会@群馬 #1で作成したものです。
サンプルコードが公開されているのでそれを元に作成しました。

Githubのカレンダー表示機能はD3.jsで作成されているのですが、そのBlog版のようなものです。
↓これ
githubcalenar

色がついているセルが記事を描いた日、同じ日に書いた記事が多いほど濃い緑色で表示されるようになってます。
セルにマウスオーバーすると記事のタイトルが表示されクリックするとその日のブログ記事へ飛びます。

カレンダーにしてみると、ブログ記事を頑張って書いた月とそうでもない月が一瞥できてなかなか面白いですね。

データセットの作成

WordPressのダッシュボードから「ツール→エクスポート」を選択し、投稿記事をエクスポートします。
エクスポートしたxmlファイルをnode.jsを使ってjsonに変換しました。
変換スクリプトは、以前RSSリーダーを作った際のコードを利用。
(XMLのパースにfeedparserモジュールを使ってます)

下記を実行してjsonファイルを作成します。

このデータを使ってカレンダーを表示します。

カレンダー表示

基本、上記サンプルコードをちょっと弄っただけという。

一番込み入っているのが、日付セルを月ごとにPathで区切る処理(月境界pathジェネレーター)なのですが、ここら辺はサンプルコードから丸写しです。
ツールチップの吹き出し表示は下記、CSS吹き出しジェネレーターで作成しました。

cssarrowplease

下方の吹き出しが見づらかったり、日付のセルにマウスオーバーするとdocumetnのサイズがおかしくなったり、一番最後の記事データにnullが入っていたりとバグだらけでまったく完成してないんですが、もくもく会の成果発表では素知らぬ顔して「できました」と報告してきました(^^;)

【余談】
今回はGithubを使ってカレンダーを作成しながら細かくコミットを区切り、あとからコミットログを確認した際に作成過程が分かるようにってのを狙ったのですが、途中pushするのを忘れたり、最後の方でコミットのメッセージを考えるのが面倒になりすべて「fix」で済ますなど残念な結果となりました。……もうちょっと、ちゃんと使えるようになりたい。