d3.jsでWordPress投票プラグインを作成中

　最近流行のd3.jsを使って記事の評価を受け付けるWordPress投票プラグインを作成中です(まだ公開までは至ってない)

　最近、d3.jsというのが流行のようです。

D3.js – 日本語ドキュメント
　jQueryとかのようなJavaScriptのライブラリですが、モダンブラウザの機能を活かしてデータを視覚化させるのに便利なライブラリという位置づけのようです。

　視覚化には最近のブラウザでは標準サポートされているSVG(Scalable Vector Graphics)を使うようで、X,Y座標してうんぬんということをやってグラフを書いていくんですが、d3.jsでは大量に座標があっても扱いやすいようなコードの書き方がサポートされています。

　なかなか独特ですが、書き方はチュートリアルを見るとわかります。慣れれば簡単です。

D3 入門 | スコット・マレイ | alignedleft

　特にスケール機能が便利。これは入力する値の範囲と出力するグラフのサイズを指定すると、いい感じにグラフに収まる座標を返してくれる機能で、うまく作ればiPhoneとか画面サイズが違う端末でも破綻無く表示しくれたりします。今回作った投票のグラフもiPhoneで普通にみることができました。凄い。

　そんなわけで、記事の評価を投票して、その結果をSVGのグラフでうにょーんと表示させるのを記事の一番下にくっつけています。

　こういう投票画面つけました。ハートのボタンか×のボタンを押すと…

　冒頭の~~手抜きの~~フラットデザインを意識したシンプルでモダンなグラフがぐいーんというアニメーションとともに表示されます。投票数もおしゃれに表示されます。d3.jsにはこういったアニメーション表示に便利な機能もついています。というかSVGタグ便利だな。

　ショートコードを投稿に貼り付けると投票ランキングも出るような機能もつけた。

　とりあえずシンプルにただ出すだけ。id適切につけてCSSでカスタムできるようにしよう。今の所[]で囲んで「vote_chart_rank」と入れるとランキングが出るようにしている。実際に記事に入れると↓のような感じで今のランキングが出てくる。決め打ちで今の所上位10位まで表示。

[vote_chart_rank]

　投票データは投稿データのカスタムフィールドにいれるようにしました。以前作った投票システムはMySQLを直接検索させていたけど、WordPressの関数で柔軟に条件検索ができるんですね。こちら参考にさせていただました。ありがとうございます!

　投票数順にソートできなくてハマッタ。カスタムフィールドを数値でソートする↓助かりました。

　ちなみに以前作った時の投票システム。XOOPS版で当時プラグインの作り方もわからなかった。

　設定画面で各種メッセージを変更できるようにするところまではできた。なんせWordPressのプラグイン初めてだし、d3.jsもはじめてだし、PHPもそんなに使ったことないので、いろいろハマりまくる(笑)

　Chromeのディベロッパーツールが開発には使えますね。JavaScriptで動的に見た目が変わるのをどうやってデバッグしようかと思ったら、右クリックして要素の検証で変わっていくのが見れるんですね。

　しばらくはこのサイトでテスト稼動して、汎用的に使えるレベルになったら公開しようかと思います。

Getting Started with D3[Kindle版]

Mike Dewar O’Reilly Media 2012-06-27