本文へジャンプ

うまい棒を大量にもらったので、MT6のChart APIでグラフにしてみた

Posted by Mizuko Takizawa

うまい棒を大量にもらったので、MT6のChart APIでグラフにしてみた

思いがけずうまい棒を90本ゲットしまして、小腹が満たされたついでに、せっかくなのでMovable Type 6のChart APIを使って「うまい棒、何味が好き?」結果をグラフにしてみることにします。

コメント機能で投票フォームを作る

投票フォーム(アンケートフォーム)というと、phpをガリガリと書いたりして構築するところなのでしょうが、今回はMovable Typeのコメント機能を使って簡易的なものを。

まずは、カスタムフィールドにコメント用のラジオボタンを追加。
テンプレートタグは、「umaiBo」という名前にしました。

<$mt:umaiBo$>

次に、公式サイトに掲載されている、以下のカスタムフィールド表示用タグを、「テンプレートモジュール > コメント」の良き位置(<form>〜</form>の中)に貼り付けます。




<$mt:CustomFieldName$>
<$mt:CustomFieldHTML$>
profile_<$mt:CustomFieldName dirify="1"$>
<$mt:Include module="フォームフィールド" id="$custom_field_id" class="" label="$custom_field_name"$>

※不要なMTMLタグは適宜削除、または<mt:Ignore>してください。

すると、<$mt:CustomFieldHTML$>から、ラジオボタン用に以下のタグが生成されました。

.
.
  • . . .

今回は名前等の入力フィールドは特に必要ないので、ラジオボタンとコメント用のテキストフィールドだけを残し、CSSで見た目を整えてフォームは完成。

* 注意点 *

  • コメント機能を利用する場合は「mt.js」が必須。

Chart APIを使う

いよいよChart APIを組み込んで、グラフ描画の準備をします。

まずは、Movable Type 6に同梱されているChart APIの関連ファイルとjQuery(ver.1.9.1以上)を読み込みます。
※関連ファイルはmt-staticディレクトリに入っていますので、ファイルディレクトリの指定は<$mt:StaticWebPath$>で対応できるかと思います。

CSS


Script



次に、グラフを表示するエリアにそれなりのID名をつけたdivを用意。
予め、読み込み先のDOMの幅と高さはそれぞれ300pxに指定されているので、好みの数値に上書きしておきます。

フォームから入力された値を渡す

グラフの値はJSON形式で指定します。

サンプル

{
"x": "2014-01-30",
"y": 1
}, {
"x": "2014-01-31",
"y": 2
}

x軸をうまい棒の味にして、y軸に投票数を...ということで、投票数を集計してJSONで出力し、Chart API用のscriptに読み込みます。

// 投票された味(カスタムフィールド「umaiBo」)の配列を区切り文字「,」で変数にセット

"<$mt:umaiBo$>"

'use strict';
jQuery(document).ready(function($) {
var arr = [], _current = null, _cnt = -1,
// 投票された味の配列
arr_umaibo = [<$mt:Var name="favorite_flavor"$>],
// 全味の配列
arr_flavor = [
"めんたい", "コンポタ", "チーズ", "ピザ",
"テリヤキバーガー", "サラミ", "やさいサラダ", "チキンカレー",
"とんかつソース", "エビマヨ", "たこ焼き", "牛タン塩",
"オニオンサラダ", "なっとう", "シュガーラスク"
],
// 全味と投票された味の配列を結合してソート
arr_all = arr_umaibo.concat(arr_flavor).sort(),
i = -1, len = arr_all.length, _graph_json;
// 全味を出力し、さらに味ごとの投票数をカウントアップ
for (; ++i <= len;) {
if (arr_all[i] !== _current) {
if (_cnt >= 0) {
arr.push({
x: _current, // 味
y: _cnt // 投票数
});
}
_current = arr_all[i];
_cnt = 0; // 1回目は種類を出力するだけなので「0」を
} else {
_cnt += 1;
}
}
// JSON用に成型
_graph_json = JSON.parse(JSON.stringify(arr, null , "\t"));
// 成型したJSONからグラフを出力
var config = {
data: _graph_json,
autoResize: true,
chartColors: '#8200e7'
}
var range = {
dataType: 'general',
length: 15
}
new MT.ChartAPI.Graph(config, range).trigger('APPEND_TO', jQuery('#graph'));
});

JS監修:Kentaro.Otsuka

テストしてみましょう。
試しに、味の王道「チーズ」をポチッと。

図1 - うまい棒を大量にもらったので、MT6のChart APIでグラフにしてみた

コメントを入力してから投票.。 . . .

図2 - うまい棒を大量にもらったので、MT6のChart APIでグラフにしてみた

ページが更新され、更地だったグラフエリアに1票が投じられました。
グラフエリアにマウスを乗せると各項目の投票結果も表示されます。

投票後に生成されたJSONはこんなかんじ。

{
"x": "チーズ",
"y": 1
},
{
"x": "たこ焼き",
"y": 0
},
{
"x": "とんかつソース",
"y": 0
},
.
.
.

グラフ部分はsvgで出力されます。
※さすがにものすごい長いタグなので、掲載は省略。。。

ある程度投票が集まると、こんなかんじに↓

図3 - うまい棒を大量にもらったので、MT6のChart APIでグラフにしてみた

グラフのタグはsvgですが、svgがサポートされていないIE8以下のブラウザではVMLに書き換えられるので安心ですね。
スタンダードな「棒グラフ(Bar Charts)」以外に、「線グラフ(Line Charts)」「円グラフ(Donus Charts)」等の生成も可能です。

まとめ

今回は、コメント機能を使うというトリッキーな方法でグラフを出力してみましたが、Movable Typeで使うからには、Data APIと連携して動的に出力する等、「ならでは」な使い方をしたいところですね。

なお、Chart APIは元々jQueryのグラフ描画プラグイン「morris.js」をベースにしていますので、グラフ描画についてはこちらも参考にどうぞ。
※Chart API内では、一部使用出来ないオプションもあるとのことです。

最後に、個人的な「うまい棒好きな味」を勝手にお伝えしようと思っていたのですが...結局決められませんでした。
日々変わる今日食べたい1本。
朝の情報番組は、うまい棒占いへのスイッチを検討したほうが良いかもしれません。
ごちそうさまでした。

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr