Google Visualization APIでGoogleスプレッドシートをガジェットにしてみた

白石俊平(あゆた)
2008-04-07 17:00:00
  • このエントリーをはてなブックマークに追加

Visualization APIが提供するガジェットサポート

 という訳で、「ユーザがデータソースURLを設定できるようにする」「データの自動リロード間隔を指定できるようにする」といった機能を我々のサンプルにも追加してみよう。

 これらはすべてガジェットの設定に関する話だ。よって、ガジェットのXMLに「UserPref」要素を追加していくという作業になる。

ユーザがデータソースURLを設定できるようにする

 これは、「_table_query_url」というユーザ変数を追加するだけだ。

<UserPref name="_table_query_url" display_name="データソースURL" required="true"/>

 たったこれだけで、前ページでお見せしたような、データソースURLの設定項目がガジェットに追加される。

データの自動リロード間隔を指定できるようにする

 これは、「_table_query_refresh_interval」というユーザ変数を指定することで実現できる。変数の値は、数値を秒単位で指定することになる(0を指定すると自動リロードなし)。

 ユーザの利便性を考えて、更新間隔を選択リストから選べるようにするのであれば、次のようなコードになる(datetype=enumとすることで、値をリストから選択できるようになる)。

<UserPref name="_table_query_refresh_interval" display_name="更新間隔(分)" default_value="0" datatype="enum" required="false">
  <EnumValue value="0" display_value="なし"/>
  <EnumValue value="60" display_value="1"/>
  <EnumValue value="3000" display_value="5"/>
  <EnumValue value="1800" display_value="30"/>
</UserPref>

スプレッドシート上のガジェットがリアルタイムに同期されるようにする

 自動リロードの話が出たついでに、もうひとつTIPSを紹介しておきたい。上で紹介したのは、あくまで「スプレッドシートへの更新を、iGoogle(など)上でのガジェットが読み込む間隔」に関する設定だ。ただし、スプレッドシート上にガジェットを貼付けた場合は特別だ。その場合は、「一定間隔での更新」ではなく、データの変更をガジェットに対してリアルタイムに反映するようにすることもできる。

 そのために必要な設定は、<ModulePrefs>内で「idi」と「locked-domain」を読み込む設定をすればよいとのことだ。

<ModulePrefs title="サンプルVisualizationガジェット" scrolling="true">
  <Require feature="idi"/>
  <Require feature="locked-domain"/>
</ModulePrefs>

ユーザ設定値を利用して、クエリを作成する

 上のような設定項目を追加したら、クエリ(google.visualization.Query)の作成部分を変更し、ユーザの設定値を利用してデータソースに問い合わせを行うようにする。といっても全く難しいものではなく、以前は以下のようにしてQueryオブジェクトを作成していた部分を、

var query = new google.visualization.Query(
  "http://spreadsheets.google.com/tq?key=pH0SDrXYNnF4enlSHpVHDSQ");
// B列は掲載日、C列は原稿料
query.setQuery("select B, C order by B");

 以下のように変更するだけだ。

var prefs = new _IG_Prefs();
var gadgetHelper = new google.visualization.GadgetHelper();
var query = gadgetHelper.createQueryFromPrefs(prefs);
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]