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

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