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

白石俊平（あゆた）
2008/04/07 17:00

Googleスプレッドシートからデータを読み込んでグラフ化し、これをガジェットにしてiGoogleなどに貼り付けられると便利ですよね？ 本稿ではGoogle Visualization APIとGoogleガジェットを組み合わせる方法を解説します。

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

　前回の記事で、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スプレッドシートが提供しているガジェットのような、いくつかの機能を備えていないからだ。

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
開発環境 Internet Explorer Ajax Tips Linux 仮想化 モバイル UI RIA CSS Webデザイン Mozilla Flash Google クラウド Windows Vista セキュリティ Java ブラウザ ソフトウェア開発 Database Safari HTML 脆弱性 オープンソース Microsoft Opera アプリケーション マイクロソフト Mac OS X データベース 小技 WebKit インストール Firefox 3 iPod touch JavaScript Webサービス Firefox OS リファレンス Apple iPhone Chrome Windows XP プログラミング言語 Off Topic Windows 7 iPhone 3G Windows
  • 話題のタグを見る »