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

白石俊平（あゆた）
2008-04-07 17:00:00
Googleスプレッドシートからデータを読み込んでグラフ化し、これをガジェットにしてiGoogleなどに貼り付けられると便利ですよね？ 本稿ではGoogle Visualization APIとGoogleガジェットを組み合わせる方法を解説します。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

前回のサンプルをガジェット化する

　前回の記事で、Googleスプレッドシートからデータを読み込んでグラフ化することにトライし、まずはHTMLファイルとして動作するものを作成した。後編となる今回は、これをGoogleガジェット化し、スプレッドシートが提供するほかのガジェットと同様に振る舞うようにしてみよう。

　まずは単純にGoogleガジェット化してみよう。Googleガジェットの作成方法に詳しくない方は、日本語の記事も多く公開されているのでそちらを参考にしていただきたい。拙著ではあるが、「5分で学ぶGoogle Gadget開発」という記事も参考になるかもしれない。

　ではまず、前回作成したサンプルの<body>～</body>の部分をコピペして、以下のようなガジェットソースコードを作成する。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="サンプルVisualizationガジェット" scrolling="true">
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // Visualization APIの読み込み
      google.load("visualization", "1");

      ...(略)...
    </script>
  ]]>
</Module>

　このソースコードを公開し、iGoogleに貼付けてみよう。

ガジェット化したサンプル ガジェット化したサンプル

　いとも簡単に、Googleガジェット化が完了だ。めでたしめでたし。

　……という形でこの記事を締めくくるわけにはいかない。このガジェットは、Googleスプレッドシートが提供しているガジェットのような、いくつかの機能を備えていないからだ。

  • 新着記事
  • 特集
  • ブログ