WPのPOST上でGoogle Visualization APIのサンプルを動かしてみた
February 8, 2009 – 8:01 pm1週間前のエントリー「プラグインrunPHPを導入してBMI計算用画面を作ってみた」で、ブログの投稿記事（POST）上でphpが動作できるようにしたという話を書いた。こうなると、POST上でJavaScriptが動作、できればGoogle Visualization APIが動作できればと思って、いろいろ試してみた。結果、Googleが提供しているサンプルが、POST上でも、簡単に動作することが分かった。
動作例： 何はさておきGoogle Visualization APIのExampleのひとつ「Bar Chart」を実際に動作させてみよう。以下の例、少なくとも、私のPC上（Widows-XP,Browser:IE7）では問題なく動作している。
POST内でJavaScriptを使うためには？： 上記のExampleを動作させるには、当然のことながら、POST上でJavaScriptが使えるようにしなければならない。このあたりのこと、WordPressのCodexに書いてあった（Using Javascript）。ここで述べられていることを私が理解した範囲でまとめると、POSTのなかにScriptを書き下さないで、JavaScript fileを作り、POSTから呼び出せばよろしいということのようだ。
JavaScriptファイルの作成： ブログツールを置いているディレクトリ上にscriptsなるディレクトリを作成し、この中にgoogle.jsと名づけたJavaScriptファイルを作成。このファイルの内容は、Exampleに示されているscript部分をそのままコピーしたもの。参考のために、その内容をそのまま示すと以下：
google.load("visualization", "1", {packages:["barchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
}
POST上での記述： POSTのエディターのタグを[HTML]にして、bar chartを配置しようとする位置に以下を挿入（上記の動作例の部分に下記が挿入されている）：
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="/scripts/google.js"></script>
<div id="chart_div"></div>
これだけで、めでたくWordPressのPOST上で「動作例」に示したようなBarChartが書けた。実に簡単、私にとっては大きな前進だ。
6 Trackback(s)