2008-07-17 (Thu) [長年日記]
▲ html5jp_graphs_plugin
Web標準に準拠しつつ新しい機能をふんだんに使ったクールなライブラリを提供しているHTML5JPさんというサイトがあります。
HTML5JPさんが提供しているJavaScriptを使ってWebページにグラフを組み込めるライブラリを、簡単にRailsから使うためのプラグインを嫁が公開しました。
最近ではグラフ描画というとGoogle Chart APIなんかがよく使われますが、 そういったWeb APIと比較したhtml5jp_graphs_pluginの特徴は次になります。
- リクエスト数の制限や開発者IDの埋め込みなどWeb APIにまつわる面倒な制約が無い
- 画像ではないので転送量が軽い
- クライアントサイドで処理するのでサーバ側は軽い
- Canvasを活用したグラデーションが綺麗(not IE6)
- 凡例のラベル文字に日本語(以外のマルチバイト文字も)埋め込める
- Canvasを使うので古いブラウザでの動作が微妙。Google Canvasでエミュレートする。IE6、FF2では重いようだ。逆にFF3やSafariでは軽快
特に日本語が自由に使えるのは嬉しいところ。なかなか漢字が使えるようにならないGoogle Chart APIに対して大きなアドバンテージではないでしょうか。 Google SpreadSheetがやってるような苦労が垣間見られる工夫は不要です。
小槌でも使っています。以前はgdchartというCの拡張ライブラリを使ってグラフを画像で出力していましたが、 負荷がかかるとcoreも吐かずに落ちるので困ってました。それもhtml5jp_graphsの採用によって解決しています。
html5jp_graphsプラグインはRails 2.0/2.1でテストされています。
HTML5JPではレーダー、円、折線、棒の4種類のグラフが公開されていますが、 html5jp_graphsプラグインひとつですべての形式のグラフ出力に対応します。 これは統一性のあるAPIでライブラリI/Fを公開されているHTML5JPさんに拠るところが大きいです。
HTML5JPグラフはJavaScriptですから直接Railsアプリに組み込むのも簡単です。直接つかわずにhtml5jp_graphsプラグインを使うメリットは次が挙げられます。
- インストールが簡単でRailsの規約に則ったディレクトリに配備してくれます
- Rails用のヘルパーがあるのでERBテンプレートからの呼び出しが容易
- 各グラフ形式にあまり依存しない統一されたRuby APIを提供
- ライセンスが自由なのでHTML5JP、プラグインともどもアプリケーションといっしょにソースコードを配布しやすい
では簡単に使い方を紹介しましょう。
html5jp_graphsの使い方
Rails 2.1以降なら次のコマンドでgitリポジトリからプラグインをインストールできます。 プラグインを導入したいRailsアプリケーションのRAILS_ROOTで実行します。
ruby script/plugin install git://github.com/nay/html5jp_graphs.git
Rails 2.0ではvendor/plugin配下にgitコマンドを使ってcloneします。
cd vendor/plugin git clone git://github.com/nay/html5jp_graphs.git
インストールができたらグラフを表示したいページを出力するコントローラとビューを生成します。
> ruby script/generator controller Mona rank
レイアウトを用意し、HTMLヘッダですべてのJavaScriptをロードするようにします。javascript_inculde_tagヘルパーに:allを指定するのが簡単です。
app/views/layout/application.html.erb
<html>
<head>
<title><%= @title %></title>
<%= javascript_include_tag :all %>
</head>
<body>
<%= @content_for_layout %>
</body>
</html>
実際に、html5jp_graphsプラグインに必要なJavaScriptライブラリは次になります。 必要なものだけをincludeしても良いです。
- 必須 ... prototype.js
- 必須 ... excanvas.js, excanvas-compressed.js
- 棒グラフ … vbar.js
- レーダーチャート … radar.js
- 円グラフ … circle.js
- 折線グラフ … line.js
グラフ描画をするコントローラでhtml5jp_graphsヘルパーの利用を指定します。
app/controllers/mona_controller.rb
class MonaController < ApplicationController helper :html5jp_graphs def rank end end
テンプレートのグラフを描画したい場所でhtml5jp_graphsのヘルパーを呼び出します。 このサンプルでは円グラフを描いています。引数には配列でラベルと値を組み合わせた配列を渡します。
app/views/mona/rank.html.erb
<% @title = 'Mona No.1' -%> <h1>真のモナ決定戦</h1> <p>本当のモナを決める</p> <%= pie_chart([["山本モナ",50],["モナー",30],["モナOS",10],["チョコモナカ",10]]) %>
サンプルを実行(http://localhost:3000/mona/rank にアクセス)した結果が画像のようになります。
簡単ですがhtml5jp_graphsプラグインの紹介でした。 他の形式のグラフもほとんど同様に扱うことができます。 詳しくは次のドキュメントを参照してください。
Railsプラグイン部分に関してなにか不明な点があればお気軽にお問い合わせください。パッチ提供もウェルカムです。 最後に非常に実用的かつクールなライブラリを提供しているHTML5JPのfutomiさまに深く感謝いたします。ありがとうございます。
