カテゴリー
WordPress サイト構築 自作ソフト

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

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のグラフでうにょーんと表示させるのを記事の一番下にくっつけています。

投票UI

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

d3.jsで作るWordPress投票プラグイン

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

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

投稿ランキングもプラグインで

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

[vote_chart_rank]

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

WordPress - query_posts, get_postsでカスタムフィールド(meta_key)の値でソートする - Qiita [キータ]

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

WordPress でカスタムフィールドの値でソートする際に数値としてソートする方法 | ウェブル

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

XOOPSモジュール版WordPressのAjaxを使った投票システムをグラフ表示に | A-tak.com

 

Voting Chart設定画面 

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

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

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

この記事を書いた人: A-tak

A-tak.com(えいたっく どっとこむ)の管理人。
Apple野郎なおっさんでしたが、ちょっと最近のAppleには飽き気味。
A-tak.comは2002年2月から運営(前身のサイトは1999年3月から)。今年で18年目!

Youtube / Twitter / Mastodon / Facebook

コメントは受け付けていません。