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

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