rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

D3.jsでブログ更新状況をGitHubカレンダーっぽく見える化できるWPcalendarを試してみた

      2015/05/20   Web, ブログ ,

  • このエントリーをはてなブックマークに追加
  • Pocket

GUNMAGISGEEK さんで公開されている、ブログの更新状況を GitHub のカレンダー風に表示するという「WPcalendar」、以前から何度か見せてもらって面白そうだなあと思っていたので、当ブログでもやってみました。

インストール

まず下記の GitHub リポジトリからソースをチェックアウトします。

ソースの一部を自分のブログに合わせてちょっと書き換えます。

まず、index.html の L161 にある日付アーカイブのリンク先を変更します。

また、index.html の L222 にある Google Analytics のアカウント(「_gaq.push([‘_setAccount’, ‘UA-xxxxxxx-xx’]);」とある箇所)
も自分のものに変えておきます。

あとは GitHub のページの使い方に書かれている通りにコマンドを実行すれば OK です。

さて、こんな感じにでき上がりました。こうしてデータが分かりやすく見える化されると楽しいですね〜。一昨年から一念発起してブログ頑張ってる自分がよく分かりました(笑)

GitHub風カレンダー

データを自動更新できるようにしてみる

さて、このカレンダーに表示する元データは WordPress からエクスポートされる xml を使っているわけですが、せっかくブログの更新状況を表示するものなのでデータを自動更新できるようにしてみました。

まずデータのエクスポートには WordPress のコマンドラインツール「WP-CLI」を使います。

エクスポートする対象は公開されている投稿記事のみとしたいので、こんなオプション指定で wp export コマンドを実行します。

–dir で指定したディレクトリに、DB名と日付の入った xml(例:dbname.wordpress.2015-05-18.0.xml)がエクスポートされます。

ただ、wp export のエクスポートデータは –post_type=post を指定していても、投稿に使われている画像ファイルデータ(post_type=attachment)まで含めて出力されてしまいます。( ※元のソースを見る限り、画像データも固定で出力しているようなので・・・。)

そこで、wpxml2json.js を一部修正して、post_type が post のデータだけ json に変換するようにします。

ここまでの一連の処理を実行するシェルスクリプトを用意します。

あとはシェルスクリプトを cron でスケジューリングしておきます。毎日お昼に実行するとしたらこんな感じですね。

以上でデータが自動更新されて見えるようになります。よろしければお試しください。

今後はこのカレンダーを覗くのが楽しみになりそうです!

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

アクセス解析
先月の結果は?2015年4月のAnalyticsアクセス数レポートです。

毎月公開しております当ブログのアクセス解析レポート、2015年4月分を紹介します …

Analytics
若干アクセス数が回復して一安心…。2014年10月のアクセス数レポートです。

ついこないだ記事書いたばかりの気がしますがもう一ヶ月経ったんですね。。2014年 …

ブログ
今年の目標ブログ記事数を100→150に上方修正してみる

そういえば、今年1月にこんなことをつぶやいていたことをふと思い出しました。 今年 …

アドベントカレンダー
ブログ持ってるなら絶対オススメ!アドベントカレンダーに参加する5つのメリット

もうすぐ12月を迎えるにあたって、Adventar、Qiita といった今年のア …

アドベントカレンダー
Adventar、Qiitaのアドベントカレンダーから気になるものを10個紹介します

明日から12月ということで、いよいよ各アドベントカレンダーも始まりますねー。 今 …

クリスマス
いよいよ始まる!今年参加するアドベントカレンダーを5つまとめてみた

今日は11月30日で明日からもう12月・・・。ということはいよいよアドベントカレ …

だるまどり
当ブログの昨年ふりかえり&今年の目標です

もう一月も後半に差し掛かる中ですが、ようやくこのブログの今年初エントリとなりまし …

ブログ
はてブ100ブックマーク超えの記事を書く時に気を付けたこと

先日当ブログで書いたある記事が、ありがたいことに初めて100以上のはてなブックマ …

アドベントカレンダー
アドベントカレンダー2014の登録が続々始まってます。今年は何に参加しようかな。

もう11月か早いなあ・・・と耽っていたのも束の間、ネット上でははやアドベントカレ …

Analytics
今年の出足やいかに!?2015年1月のアクセス数レポートです。

毎月公開している当ブログのアクセスレポート、今年一発目の2015年1月分です。 …