はじめてのiGoogleガジェット開発

2007年11月11日プログラミングTIPS

どうも、「公開APIを利用したサンプルサイトを作っていくよ」管理人のZAPAです。
今日は、マッシュアップツールを作るための第一歩として、「iGoogleガジェット」の開発方法を解説します。

「Googleからのプレゼントが届いたよー！！！」に登場した、iGoogleガジェット。

「ガジェット大好き！」って人も、「これからの時代はガジェットだ！」って人も、「ガジェットって何だろう？」って人も、これからの時代は自分でガジェットを作れるとカッコイイと思うよ！！

iGoogleガジェットに興味を持っても、開発情報を調べるのはなかなか大変です。
公式サイトに重要な情報はたくさん載っていますが、コンパクトにiGoogleガジェット開発方法を理解できるページがありませんでした。
公式ドキュメントをマジメに読むと30分以上かかり、やる気がそがれてしまいますので、ここに「iGoogleガジェット開発方法」を簡単にまとめておきます。
プログラミングできる人なら、「Hello,world」が作れるようにさえなれば、後は知りたい情報をピンポイントで調べていけば何とかなるはずです。

というわけで、「iGoogleガジェットの開発環境」、HTMLで「Hello,world」、JavaScriptで「こんにちは」、「iGoogleガジェット公開方法」などを解説していきます。

1. iGoogleガジェットとは
2. iGoogleガジェット開発に必要なもの
3. iGoogleガジェット開発の流れ
4. iGoogleガジェットでHello,world(HTML版)
5. iGoogleガジェットでこんにちは(JavaScript版)
6. iGoogleガジェット公開方法
7. さいごに

1. iGoogleガジェットとは

iGoogleガジェットとは

「iGoogleガジェット」とは、「iGoogle」で利用できるミニアプリケーションのことです。

iGoogleとは

「iGoogle」とは、Googleが提供しているパーソナライズドホームと呼ばれる個人に特化したWebサービスのことで、Googleのアカウントを作成してログインすることで利用できるようになります。

Googleアカウント作成方法：Googleにアクセスし、「ログイン」をクリック。そして、「今すぐアカウントを作成する」をクリック。メールアドレスやパスワードなどを入力してアカウントを作成。Gmailなら、そのままGoogleアカウントとして利用可能。

GoogleアカウントからiGoogleのページに行くと、このようなパーソナライズドホーム画面が現れます。（下の画像はテーマを選択してある状態）

iGoogleパーソナライズドホームでは、自分の好きなiGoogleガジェットを並べて表示させることができます。「コンテンツを追加」から好きなガジェットを追加し、ドラッグアンドドロップで位置を並べ替えられます。このiGoogleガジェットは、たくさんの人に開発され公開されているほか、自分で作って利用することもできます。
つまり、自分でiGoogleガジェットを開発できるようになれば、自分の好きなホームページを作れるというわけです。

iGoogleガジェットの構成要素

iGoogleガジェットは以下の3要素で構成されています。
・XML
・HTML
・JavaScript
Web技術としては基本中の基本、枯れた技術なので、戸惑うことなく開発に専念できます。（多分）
また、開発したiGoogleガジェットは、そのままGoogleデスクトップ用のガジェットとしても利用することができます。

2. iGoogleガジェット開発に必要なもの

ガジェット開発のためにお金や開発環境を用意するとなると大変ですが、今現在PCでインターネットをしている人なら、すでにほとんど全て揃っているはずです。

開発に必要なもの

開発時に必要なものは、主に以下になります。

Webブラウザ: 実行、テスト、確認に必要。IE,Firefoxなど。
テキストエディタ: ソースコードの編集、保存に必要。文字コードUTF-8で保存できるタイプのエディタ。
スクラッチパッド: 開発、実行、テスト、デバッグ用のツール。ブラウザで直接プレビューできる超便利ツール。
Google ガジェット API - 概要: Google ガジェット API 開発者向けのドキュメント。英語版が最新。

開発の基本となるのは、スクラッチパッドです。
Webブラウザ上で直接プレビューできる便利ツールで、開発ツールなどをダウンロードする必要さえありません。

公開に必要なもの

公開時に新たに必要になるものは、主に以下になります。

Eメールアドレス: 作者のメールアドレスが必要。「アカウント名+igoogle@gmail.com」のGmailを利用するのが楽。
画像作成ソフト: ガジェット公開時のロゴ、スクリーンショット画像作成などに必要。ペイントやフォトショップなど。
公開用のサーバー or Google ガジェットホスティング: 自分のサーバーにガジェットをアップロードするか、「Google Page Creator」にアップロード。

開発したまま、公開しないことも可能ですが、公開する場合は以上のものが必要になります。

3. iGoogleガジェット開発の流れ

iGoogleガジェット開発の流れは以下のようになります。

1.ガジェット記述用のXMLファイルの作成 (***.xml)
↓
2.ソースコードの編集 (書式に沿って)
↓
3.スクラッチパッドでプレビュー、テスト (ソースコードを貼り付けてテスト)
↓
4.完成したら、XMLファイルをアップロード (自サーバーかGoogleサーバー)
↓
5.iGoogleにガジェットを読み込んで動作確認
↓
6.公開する場合は、コンテンツディレクトリへ登録

「テキストエディタでソースコードを編集し、スクラッチパッドに貼り付けプレビューしてテスト」を繰り返していきます。
直接スクラッチパッドで編集していっても構いませんが、ブラウザでページを移動していたりすると消えてしまうことがあるので、テキストエディタで編集した方が無難です。

他に開発でわからないことがあれば、以下のページで確認します。

公式ドキュメント: Google ガジェット API - 概要
コンテスト時の開発方法解説: iGoogleガジェットコンテスト
ユーザーインタフェース作成: Google ガジェット API - ユーザーインターフェース
リモートコンテンツの操作: Google ガジェット API - リモートコンテンツ
Google ガジェット API リファレンス: Google ガジェット API - API リファレンス
デバッグ: Google ガジェット API - 開発者向けツール

4. iGoogleガジェットでHello,world(HTML版)

それでは、ようやくiGoogleガジェット開発に移ります。
はじめてのiGoogleガジェット開発は、お決まりの「Hello,world」で解説します。

いきなりですが、以下のソースコードで「Hello,world」が表示できます。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="hello world example" /> 
  <Content type="html">
     <![CDATA[ 
       Hello, world!
     ]]>
  </Content> 
</Module>

見てわかるとおり、iGoogleガジェットはXMLファイルとして作成します。
<Module>タグで中を囲い、<ModulePrefs>タグにタイトルなどのガジェットに関する情報（詳しくは後述します）を含めます。
そして、CDATAセクション内のテキストを XML として処理しないように、「<![CDATA[ 〜〜〜 ]]> 」の間にHTMLコンテンツを記述します。
この中には、通常のHTMLタグやJavaScriptコードを含めることができます。
つまり、このソースコードをひな形にCDATAセクション内をいじるだけで、iGoogleガジェットが開発できるということです。
HTMLしかわからない人でも、iGoogleガジェット開発は可能です。

それでは、上のソースをスクラッチパッドに貼り付けてください。

そして、「Preview」をクリックしてプレビューしてみてください。

このように、「Hello,world」が表示されれば完成です。

アップロード用のXMLファイルを作る場合は、「***.xml」という任意のファイル名でUTF-8で保存します。
保存したXMLファイルをブラウザなどで開けば、簡易的な文法チェックもできます。

5. iGoogleガジェットでこんにちは(JavaScript版)

上の「Hello,world」は、HTMLのみを使ったガジェット作成でしたが、今度はHTMLとJavaScriptを使って表示します。iGoogleガジェットコンテスト｜ガジェットを作ってみようの内容を元に解説します。

ということで、またいきなりですが、以下のソースコードで「こんにちは」が表示できます。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Picture Picker" height="100">
<Require feature="dynamic-height"/>
  </ModulePrefs>
  <Content type="html">
     <![CDATA[

<div style="font-size: 80%; line-height: 1.4;">
  <div id="out"></div>
</div>

<script type="text/javascript">
_gel("out").innerHTML = "こんにちは";
_IG_AdjustIFrameHeight();
</script>

     ]]>
  </Content>
</Module>

見てわかるとおり、今度はCDATAセクション内にdivタグとJavaScriptコードがあります。
JSコードの_gel関数は、getElementByIdの簡略版の関数です。
ガジェットAPI関数_gelを使ってIDがoutのdivタグを取り出し、innerHTMLで「こんにちは」を表示しています。
このように、iGoogleガジェットには始めから便利なガジェットAPI関数が用意されています。（ガジェットAPIの関数については、Google ガジェット API - API リファレンスに詳しく載っています）
もちろん、自分の好きなコードを動かすこともできます。

その他、上のソースコードにはガジェットの高さ調節のためのコードが含まれています。
ModulePrefsタグにheight属性を付けてデフォルトの高さを指定し、ModulePrefsタグの<Require feature="dynamic-height"/>で高さ調節をしています。
JavaScriptでは、ガジェットAPIの関数_IG_AdjustIFrameHeightを呼び出し、現在のガジェットの内容に合わせて高さを調節してあります。

それでは、上のソースをスクラッチパッドに貼り付けてプレビューしてみてください。
日本語でも問題なく「こんにちは」が表示されれば完成です。
アップロード用のXMLファイルを作る場合は、「***.xml」という任意のファイル名でUTF-8で保存します。

このガジェット開発の続きは、RSSとHTMLの読み込みサンプルで解説されていますので、興味のある方はどうぞ。

6. iGoogleガジェット公開方法

基本的な開発方法がわかったところで、「iGoogleガジェットの公開方法」を説明します。
詳細はGoogle ガジェット API - 公開のページに書かれていますが、流れとしては以下のようになります。

1.開発したガジェットを十分テストする
↓
2.ガジェット公開用の画像を作成する
↓
3.<ModulePrefs>属性にメタ情報を含める
↓
4.自サーバーかGoogleサーバーにXMLファイルをアップロードする

4.コンテンツディレクトリに登録する

テスト内容は、「Google ガジェット API - 公開」に、デバッグ方法は「Google ガジェット API - 開発者向けツール」に載っています。
デバッグには、Firefoxの利用が勧められています。

テストが完了したら、書式に沿ってガジェット公開用の画像を作成します。
screenshot画像は、横幅280ピクセルの画像（PNG推奨）を用意します。

↑ツンデレマップ！ガジェットの例↑

thumbnail画像は、120x60 ピクセルの画像（PNG推奨）を用意します。

↑ツンデレマップ！ガジェットの例↑

テストが完了し、公開用の画像も用意できたら、ガジェットXMLの<ModulePrefs>属性にメタ情報を含めます。
iGoogleガジェットコンテスト｜ガジェットを作ってみように載っていたサンプルは、このようになっていました。

<ModulePrefs title="Picture Picker"
  description="__MSG_description__"
  author="Kazuto Sato"
  author_email="gadget.sample@gmail.com"
  screenshot="https://igooglecon.jp/files/picturepicker/screenshot.png"
  thumbnail="https://igooglecon.jp/files/picturepicker/thumbnail.png"
  author_location="Tokyo, Japan"
  author_affiliation="igooglecon.jp"
  title_url="https://igooglecon.jp/files/picturepicker/"
  height="100">

属性については以下で説明します。

ガジェットのメタ情報（必須）

ガジェット公開に必要なメタ情報です。
詳しくは、Google ガジェット API - 公開をご覧ください。

description	ガジェットの説明文
author	作者名
author_email	メールアドレス
screenshot	スクリーンショット画像URL（横幅280 ピクセル。PNG、GIF、JPG画像）
thumbnail	サムネイル画像URL（120x60 ピクセル。PNG、GIF、JPG画像）
author_location	住所
author_affiliation	所属企業など（省略OK）
title_url	ガジェットタイトルのリンク（紹介ページURL）

作者のメタ情報（載せたい場合のみ）

作者のメタ情報を載せたい場合は、以下の情報も含めます。

author_photo	作者の画像URL（70×100ピクセル。PNG、GIF、JPG画像）
author_aboutme	自己紹介（500文字以内）
author_link	作者のサイトURL
author_quote	好きな引用文（300文字以内）

ガジェットのアップロード

作成したガジェットXMLファイル、画像ファイルをアップロードします。
自分用のサーバーを持っている人は、そのサーバーにアップロードします。
サーバーがない人はGoogleのサーバー

Google Page Creator

にアップロードします。
アップロードすれば、そのURLを指定してそのまま利用できるようになるみたいです。（未確認）

アップロードしたら、iGoogleのページで、アップロードしたガジェットを登録して動作を確認してみましょう。

ガジェットの登録

ガジェットのアップロードが完了したら、他の人にも利用できるように、作ったガジェットを登録します。

Google ガジェット API - ガジェットの送信

URLを送信すると、エラーがある場合はその場で表示されます。

登録が済んだら、Googleで正式に登録してくれるまで待ちましょう。
無事登録が完了すると、iGoogleのコンテンツ追加で登録できるようになり、このように設置できます。

7. さいごに

「iGoogleガジェット」の開発方法は、それほど難しくありません。
基本的な「Hello,world」のやり方さえわかれば、後はHTMLやJavaScriptが得意な人だったら、いくらでもガジェットが作れるはずです。
あまりアイディアが浮かんでこない場合は、

iGoogleガジェットコンテスト｜受賞作品決定！　審査結果の発表

を見て、他にどんなガジェットが開発されているのか参考にしてみてください。

ZAPAブログ2.0