UIとjQueryプラグインをサンプルを交えて紹介していきます。今回は、グラフ表示をテーマにしたjQueryプラグインを紹介します。Visualize」を解説します。HTML5のcanvas要素を使って見栄えの良いグラフを描画するプラグインで、折れ線グラフ・棒グラフ・円グラフなど多くの種類のグラフを描くことができます。豊富なオプションにより、大きさや色などを自在に変化させることができ、好みのデザインで表示させることができます。執筆時点のjQueryの最新版は、1.7.2です。第1回を参考に、ダウンロードしてください。jQueryプラグインの基本的な使い方は、第3回を参照してください。サンプルでは、htmlファイルと同じ階層に「plugins」というフォルダを作成し、使用するプラグイン関連のファイルはここにまとめて配置し、説明を進めます。「Scripts」フォルダにはjQuery本体を配置しておきます。Visualize」で使用する画像データを配置しています。Visualizeプラグインは、HTML5のcanvas要素を呼び出して、見栄えの良いグラフをHTML表示できるプラグインです。このプラグインはテーブルを読み込んで、グラフを作成します。シンプルな折れ線グラフを表示させた状態を図1に示します。Visualizeプラグインのダウンロードサイト上の「ZIP」アイコンをクリックし、zipファイルをダウンロードして保存し、解凍します。解凍したフォルダ内の「js」フォルダからプラグイン本体の「visualize.jQuery.js」とHTML5のcanvas要素を呼び出す「excanvas.js」を「plugins」フォルダ下に配置します。解凍したフォルダ内の「css」フォルダと「images」フォルダをそのままコピーして使用します。Explorer(以下IE)上で使用できるようにするため、「enhance.js」というJavascriptファイルが必要になります(IE6以降に対応)。enhance.jsのダウンロードサイトからzipファイルをダウンロードして保存し解凍します。解凍したフォルダ内にある「enhance.js」を「plugin」フォルダ下に配置します。Visualizeプラグインの使用例をリスト1に示します。</tbody></table></body></html>「2.プラグインの呼び出し」では、まずIEでHTML5のcanvas要素を使用できるようにする「enhance.js」を呼び出します。その後canvas要素をIE6以降の全てのバージョンで使用できるようにするため、enhance関数を用います。「enhance({});」の「{}」の中に「loadscripts:[]」と記載し、「[]」の中でJavascriptファイルを呼び出していきます。最初に「excanvas.js」を呼び出して、canvas要素が使用できるようにします。'all'」は全てのIEバージョンで使用できるようにするための設定値です。今回はHTML5の連載ではないので、詳細は省略します。その後「Scripts」フォルダ内のjQuery本体「jquery-1.7.2.min.js」を呼び出して、次に「plugin」フォルダ内のjQueryプラグイン「visualize.jQuery.js」を呼び出します。最後に呼び出している「plugin」フォルダ内の「line.js」の中でプラグインの設定を行います。「line.js」のサンプルデータをリスト2に示します。Visualizeプラグインを機能させます。セレクター部分に「'table'」といった形でテーブル要素を指定します。bodyタグ内のtableタグのテーブル要素がグラフ化されます。テーブル要素は、既定値では列項目が横軸となります。横軸に入ることになります。行項目を横軸にしたい場合は後述のオプションで変えることができます。メソッド部分に「visualize」を設定しています。オプションを設定する部分は「type」はグラフのタイプを指定するオプションで、ここでは折れ線グラフを表示したいので「type:'line'」と指定します。グラフの幅を420ピクセルに指定するため「width:'420px'」、グラフの高さを300ピクセルに指定するため「height:'300px'」と指定します。元のスクリプト「jQvisualize_line.html」の「enhance({});」の中身を見て行くと、「loadStyles:[]」で、プラグインで用いるcssファイルを呼び出します。「enhance({});」の後のstyleタグは表を左、グラフを右に表示するためのものです。bodyタグ内ではtableタグを使ってテーブルデータを設定しています。Visualizeプラグインに読み込まれて、グラフが表示されます。VisualizeプラグインのCSSフォルダ内にあり、リスト2で呼び出されている「visualize-dark.css」は黒を基調としたグラフの背景です。一つ「visualize-light.css」というCSSファイルが用意されていて、こちらは白を基調としたグラフの背景です。「visualize-light.css」を使ってグラフを表示させたところを図2に示します。Visualizeプラグイン適用後(折れ線グラフ表示・白基調背景)白基調背景を使うには、リスト1のスクリプトの「enhance({});」内の「loadStyle:[]」部分で呼び出すCSSファイルを「./css/visualize-light.css」に変更するだけです。</script>「jQvisualize_line2.html」はこの部分以外「jQvisualize_line.html」と同じです。