Google Chart APIで作成する電力使用状況グラフ：クラウドとgaedirectでできる緊急対応マッシュアップ（2）（3/3 ページ）

» 2011年05月12日 00時00分公開

[清野克行，有限会社サイバースペース]

前のページへ 1|2|3 　　　　　　

グラフデータの登録・参照・更新

　gaedirectでの登録・参照・更新処理プログラミングについては前回紹介しているので、基本的な処理手順は問題ないと思いますが、今回サンプルでのいくつかのポイントを簡単に見ていきます。

プロパティ項目の変数定義

　今回のサンプルでは、全てのプロパティ項目をデフォルトの文字列（String）としているため、登録・参照・更新が共通になります。

　また今回は、プロパティ数が多いことから、【1】でプロパティ並びの変数「props」を定義しています。ここで定義されたpropsは【3】【4】【8】【9】のgaedirectによるデータストアアクセスで共通に使用されています。

タグでのデフォルト値設定

　今回のようなサンプルでは、登録データは毎回の登録で同じデータ値になることが多い項目が、かなりあります、このような項目は登録での画面入力を少しでも省略できるようにするためにリスト下部のタグ記述でvalue値として指定あります。

　もしvalue値が登録ごとに変更がないような場合は、プログラムでの定数として定義し、クラウドのデータストアに登録しないで済ます方法もあると思いますが、ここではグラフ表示で使用されるパラメータ値はすべてクラウド上のデータストアに登録しています。

参照処理での配列使用

　このサンプルではデータ項目（プロパティ）数が多いので、【4】の参照処理では配列を使用して、コード数削減を行っています。

　まず、プロパティ名は表示フィールドのID値名でもあるわけですが、これを【2】で配列変数の「prop」にセットしています。次に、【5】でサーバからのレスポンスデータを配列「dat」にセットし、これで配列データの準備が完了します。【6】では、表示項目の数だけ繰り返して【7】で表示処理を行っています。【7】の表示処理では、表示フィールド（タグ）のID値を「prop[i]」でセットし、そのタグへの表示データを「dat[i]」でセットしています。

gaedirectのデータをグラフ表示

　さて、ようやく今回のメインテーマと言えるグラフ表示の処理に入ります。この部分はリスト2の（D）の部分で行われていますが、ここでも配列を使用してコード数削減を行っています。【9】の参照メソッドで受信したグラフ表示用データを【10】で配列「dat」にセットし、【11】でChart APIで表示するパラメータ設定用の変数「parm」を初期化しています。

　paramへのパラメータ設定は【12】のfor文でパラメータ数だけ繰り返し行います。【13】では簡略形式で条件判断を行っていますが、「(i)」でiの値を評価して真（1またはそれ以上）の場合は、「&」を変数parmに追加し、偽（i==0）の場合は何も行いません。

　その後、【14】で「パラメータ名=値」の組をparmに追加していき、結局次のようなデータ並びの文字列を生成して【15】でChart APIを使用した表示処理を行っています。

parm = 'cht='+cht+'&chtt='+chtt+'&chts='+chts+ '&chdl='+chdl+'&chco'+chco+ '&chs='+chs….

Google Chart APIの使い方

　グラフ描画ではChart APIを使用していますが、Chart APIはグーグルが提供しているグラフ作成用のWebサービスでJavaScriptからアクセスして使用できます。

　【15】では生成されたパラメータと値の組を指定してChart APIでグラフを描画していますが、今回使用したパラメータは次のような意味を持っています。


パラメータ	意味	設定例
cht	グラフのタイプ	lcで折れ線グラフ
chtt	グラフのタイトル	-
chts	chttのカラーとフォントサイズ	-
chdl	折れ線グラフ描画の凡例	-
chco	折れ線グラフのカラー	-
chs	図のサイズ	700x400
chg	グリッド線	4,10（[x軸のステップサイズ],[y軸のステップサイズ],[分断線],[空白線]）
chxt	複数軸ラベル（軸タイプ）	x,y
chxr	座標軸のレンジ（値範囲）	0,0,24\|1,0,5000
chxl	複数軸ラベル（軸ラベル）	0:\|0\|1\|2\|3\|4\|5\|6\|7\|8\|9\|10\|11\|12\|13\|14\|15\|16\|17 \|18\|19\|20\|21\|22\|23\|24\|1:\|0\|1000\|2000\|3000\|4000\|5000
chxp	座標軸ラベルの位置	-
chco	チャートの色	ffc266
chd	グラフポイントの値	-
chds	グラフの最小、最大値	-
chm	図形マーカー	o（円）
表1　今回のサンプルで使用したChart APIのパラメータ

　なお、Chart APIでのパラメータ指定に関する詳しい内容については、英文ですがGoogleの公式サイトを参照してください。さまざまなチャートサンプルが掲載されており、画面上からパラメータ値を変更して画面表示の変更を確認できる画面なども用意されています。

図9　Google Code PlaygroundでAnnotated Time Lineを選択した例

　パラメータ数がかなり多いように見えますが、今回サンプルのように日単位グラフを表示する場合は、前にも触れたように値固定で変化のないものもあるので、データストアに登録するパラメータの数はもっと減らせます。実際に登録されているパラメータは、やや細かくて見づらいかもしれませんが、図8の内容が正確な値で、gaedirectで登録されたものです。

　ここで、グラフ図上に折れ線を複数（ここでは前日と今日の2種類）登録する場合は、指定するパラメータ値を「今日|前日」のように「|」で区切ることで区別しています。

gaedirectの環境構築は、もう少し待って

　今回はgaedirectでの、簡易セキュリティ対応とグラフ描画を紹介しましたが、次回はGoogle Maps APIでの地図描画への応用を取り上げる予定です。広域に渡る緊急時には、地図上にポイントを指定して情報を提供することも効果的で、よく行われていますが、このような情報もgaedirectで容易にクラウド化でき、それによってアクセスの集中で閲覧不能などにはならない強固なシステムになり得ます。

　またgaedirectの機能については、次回は条件検索機能を紹介します。gaedirectの条件検索ではGAEでサポートされる、下記の条件検索機能はすべて実行できます。