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にログインしてコメントする

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