Googleガジェットの作り方

はじめに
入門編
おわりに

以下、執筆中。。。

応用編
- コンテンツのタイプについて
- リモートのWebサービスを使おう
- ガジェットの状態を保存する
- ガジェットの高さを調整
- 日本語の記述（国際化）
- シンジケーション（自分のWebページでの利用）

はじめに

ここではGoogleユニバーサルガジェットの作成方法について説明します。

GoogleデスクトップガジェットのAPIについてはGoogle Japanが日本語ドキュメントを提供していますが、ユニバーサルガジェットのAPIについては英語版が提供されているのみで、公式な日本語版がありません（2006.10.23現在）。英語版ドキュメントは以下で公開されています。

http://www.google.com/apis/gadgets/index.html

入門編

入門編では、ガジェット開発に最低限必要と思われる内容を記載します。「HTML、XML、JavaScriptを少しなら知っている」という方を対象として説明します。

とりあえず「Hello!World」

基本中の基本のHello!Worldガジェットの作成からいきましょう。まずは、ガジェット作成からパーソナライズドホームに追加するまでの流れを理解するために、Hello!Worldガジェットを作成してパーソナライズドホームに追加する手順を説明します。

１．Google ガジェットを作成する。

Hello! World ガジェットを作成します。以下がそのコードです。

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

コードの解説はこちらで行うこととして、まずはこのコードをhello.xmlという名前で保存します。

２．Google ガジェットをアップロードする。

インターネット上でアクセス可能なサイトに１．で作成したファイルをアップロードします。インターネット上でアクセス可能ならどこでもいいんですが、あてがない場合はGoogle Baseにでもアップロードしましょう。私の場合は、Google Page Creatorをアップロード先として利用しています。どちらもGoogleのWebサービスであり、無償で利用できます。hello.xmlについては以下のURLにアップロードしてあります。

http://hogematomo.googlepages.com/hello.xml

３．「ホームページにコンテンツを追加する」ページに移動する。

自分のパーソナライズドホームページにログインした後、ホームページにコンテンツを追加するのページに移動します（パーソナライズドホームページの左上の「他にもこのページに追加 ≫」から移動できます）。

４．パーソナライズドホームページに追加する。

このページの検索フォームの右側に、「URLを指定して追加」というリンクがあります。こちらをクリックするとURL入力用フォームが現れます。ここに２．でアップしたガジェットのURLを入力し、「追加」ボタンをクリックします。先ほど２．で紹介したURLをコピペして「追加」ボタンをクリックしてみてください。

このとき、「Googleが開発したものではない機能を・・・」というダイアログが表示されます。このメッセージはGoogleが開発したものでないサードパーティ製のガジェットを追加する際に表示されます。気にせずOKをクリックしてください。以上でガジェットをパーソナライズドホームに表示させることができます。

これでガジェットがパーソナライズドホームページに追加されました。

自作ガジェットの場合、パーソナライズドホームページでの表示結果を見て修正を行い、再度ガジェットをアップして更新し、また表示結果を見て...という手続きを繰り返すことになると思います。この際に注意が必要なのは、ガジェットは通常キャッシュされるため、ガジェットをアップロードしてもその変更がパーソナライズドホームページにすぐには反映されないという点です。この問題を回避するため、ガジェット開発用にDeveloper Moduleが準備されています。Developer Moduleについては後ほどこちらで紹介します。

ソースコードの解説

さきほどのHello！World ガジェットのソースコードを再掲します。

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

解説：

先頭の<?xml...はこのファイルがXML1.0で書かれており、文字コードがUTF-8であることを示しています。
<Module>はガジェット全体を定義するタグです。ここらへんまでは決まりきったお約束です。
<ModulePrefs ... >はガジェットの設定を記載します。ここではtitleだけを定義していますが、他にもいろいろな設定が可能です。詳細は応用編で解説します（予定）。
<Contnt type="html">はコンテンツのタイプがHTMLであることを示しています。
<![CDATA[ ...]]>で表示したい内容を記述することができます。ここに書かれた内容が出力されます。HTMLやJavaScriptが記述可能です。
</Content>, </Module>それぞれContentタグ、Moduleタグの終わりを示します。ちなみに、上記の例ではModulePrefsタグにはこの終了タグがありませんが、XMLでは<タグ名></タグ名>のかわりに<タグ名 />で終了タグを省略することができます。

Developer Moduleについて

ここで、Developer Moduleについて説明しておきます。Developer Moduleはガジェット開発用のガジェットです。見た目はこんな感じです。

パーソナライズドホームページへの追加は、「Add to Google」をクリックし、表示されたページの「今すぐ追加」をクリックしてください。

このガジェットは以下の機能を有しています。

１．キャッシュ利用のON/OFF

ガジェット開発者としては最も重要な機能です。ガジェットは通常キャッシュされてしまうため、ガジェットの変更→アップロードを行ってもすぐには変更が反映されません。Developer Moduleを使ってキャッシュをOFFにすることで、変更がすぐに反映されるようになります。キャッシュのON/OFFは、CachedチェックボックスをON/OFFすることで設定します。

２．URLでガジェットを追加

Add a module:テキストボックスにURLを記入してガジェットを追加できます。まだコンテンツディレクトリで公開していない開発中のガジェットをパーソナライズドホームに追加するのに便利です。

３．ガジェットの一覧

パーソナライズドホームページに配置されているガジェットを一覧で表示します。

４．インラインモジュールかどうかの表示

各ガジェットがインラインモジュールかどうかをチェックボックスで表示しています。

５．おしらせの表示

API仕様変更など、Googleガジェットに関するお知らせがある場合にガジェットに表示されます。

改変してみよう

Hello!World ガジェットlを改変して、もう少し変わったことのできるガジェットにしてみましょう。以下のように編集します。変更部分は赤いところです。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello!!" />
  <Content type="html">
    <![CDATA[
      <img src="http://hogematomo.googlepages.com/nanikore.gif"></img>
      <form action="http://www.google.co.jp/search" target="_blank" >
        <input type=hidden name=hl value=ja>
        <input name=q>
        <input type=submit value="search">
      </form>
    ]]>
  </Content>
</Module>

パーソナライズドホームページに追加するとこんな感じになります。

Google検索ガジェットです。このガジェットをパーソナライズドホームページに追加するには、「Add to Google」ボタンをクリックしてください。パーソナライズドホームに追加後、キーワードを入力して「search」ボタンを押してください。検索結果が別ウィンドウ（もしくは別タブ）で表示されましたか？このように、ガジェットの本体部分には通常HTMLのbodyタグの内側に記述する内容を記述します。通常のHTMLでかけるものはほぼ全て書くことができます。JavaScriptのようなスクリプトも大丈夫ですし、もちろんCSSも大丈夫です。

HTML、JavaScript、CSSなどについてはここでは説明しきれませんので、関連リンクに参考になるページのリンクを紹介しておきます。

また、上記のソースコードを以下に置いておきます。

http://hogematomo.googlepages.com/google.xml

コードの解説

HTMLでフツーに使われるIMGタグとFORMタグを使用しています。説明の必要もないかもしれませんが、一応書いておきます。

<img src="…"></img>で画像を表示させています。src=で画像のURLを指定します。
<form action="…" target="_blank" >で入力フォームを定義します。action=でフォームの送信先を指定します。また、target="_blank"で結果の表示先を別ウィンドウにすることを指定します。
<input type=hidden name=hl value=ja>隠れパラメータです。画面上は見えません。言語が日本語であることを表しています。
<input type=text name=q>送信する検索キーワードを入力するテキストボックスを表します。
<input type=submit value="search">検索開始ボタンです。
</fom>フォームの終了タグです。

カスタマイズできるようにしよう

次に、ユーザの好みに合わせてガジェットをカスタマイズできるようにしてみましょう。
以下のように変更します。色つき部分が変更部分です。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="__UP_title__" />
  <UserPref name="title" display_name="gadget title" required="false" default_value="Hello!!"/>
  <UserPref datatype="bool" name="hide_image" display_name="hide image" required="false" default_value="false"/>
  <UserPref datatype="enum" name="bgcolor" display_name="bg color" default_value="white">
    <EnumValue value="white"/>
    <EnumValue value="red"/>
    <EnumValue value="orange"/>
    <EnumValue value="blue"/>
    <EnumValue value="green"/>
    <EnumValue value="purple"/>
  </UserPref>
  <Content type="html">
    <![CDATA[
      <div id=image_space></div>
      <form action="http://www.google.co.jp/search" target="_blank" >
        <input type=hidden name=hl value=ja>
        <input name=q>
        <input type=submit value="search">
      </form>
      <script language="JavaScript">
      
      </script>
    ]]>
  </Content>
</Module>

う～ん、半分以上が追記or変更部分になってしまいました。ちょっと追跡が大変かもしれませんががんばってください。よく見るとそれぞれはそんなややこしいことは書いてありません。

パーソナライズドデスクトップへ追加するとこんな感じになります。さきほどとどこが違うかわかりますか？

そうです。タイトルの右側に「編集」という文字列が増えています。これをクリックするとこうなります。

なんか入力できそうですね。これをユーザ設定フォームと呼ぶことにします。ここにユーザ設定を入力することで、ガジェットをカスタマイズすることができます。ためしにhide imageを「ON」, bg colorを「blue」に設定してSaveボタンを押すとこんな感じになります。

コードの解説

全体の把握

新しく書き加えた部分が多いので、まずは全体を把握しておきます。

緑色の部分がユーザが設定可能なパラメータを指定する部分です。この部分はGoogle側で解釈して、先ほどのユーザ設定フォームを出力してくれます。
赤色の部分がユーザが設定した結果を画面に反映する部分です。JavaScriptで書かれています。
青色の部分はタイトルです。このように__UP_(ユーザ設定名)__とかくと、ユーザ設定を参照できます。
オレンジの部分は画像を挿入する箇所をブラウザに教えるための目印のようなものです。JavaScriptでこのタグのid属性で指定された文字列が参照され、ここに画像が挿入されます。

＊本来divタグはHTMLのブロック要素であることを指定するタグなのですが、このようにHTMLを動的に変更する場合の目印に使われることが多いです。

次に、緑色と、赤色の部分の詳細を見ていきます。

ユーザ設定定義（UserPrefタグ)

緑色部分は先にも述べたとおり、ユーザが設定可能なパラメータを指定する部分です。UserPrefタグの属性によってパラメータがどのようなものであるかを指定しています。UserPrefタグの属性について以下に説明します。

属性	説明
datatype	パラメータのタイプを指定します。string, bool, enum, hidden, locationのいずれかの値をとります。省略されるとstringとなります。
name	ガジェットが設定されている値を参照するためのキーワード（文字列）を指定します。
display_name	ユーザ設定フォームでの表示用文字列を指定します。
required	このフィールドの入力が必須かどうかをブール値で指定します。trueにすると、ガジェット追加時にユーザ設定フォームが開いた状態になり、ユーザが何か入力しないとガジェットが動作を開始しません。
default_value	デフォルト値を指定します。

datatype属性の取りうる値についてまとめます。

値	説明
string	文字列です。このタイプが指定されると、ユーザ設定フォームにテキストボックスが表示されます。
bool	trueもしくはfalseのどちらかの値をとるブール値です。このタイプが指定されるとユーザ設定フォームにチェックボックスが表示されます。
enum	列挙選択です。このタイプが指定されるとユーザ設定フォームにプルダウンメニューを表示します。
hidden	隠しパラメータです。格納される値は文字列になります。ユーザが変更する必要のない値（ガジェットの内部データ）を保存するのに使います。ユーザ設定フォームには出力されません。
location	GoogleMap ガジェット用です。場所情報用のフォームが表示されます。

enumについてもう少し詳しく説明します。datatypeにenumを指定した場合、EnumValueタグでプルダウンメニューに表示される値を記述します。たとえば,blueもしくはredのどちらかを選択させる場合には、以下のように記述します。

<UserPref datatype=enum　name="bgcolor" display_name="bg color" default_value=blue>
　<EnumValue value="blue"/>
　<EnumValue value="red"/>
</UserPref>

以上で緑部分がどのような意味を持つか理解するための準備が整いました。改めて見直してみましょう。まず最初の行です。

<UserPref name="title" display_name="gadget title" required="false" default_value="Hello!!"/>

ガジェットのタイトル部分に表示される文字列を指定するための設定です。

データタイプは未指定なので、stringになります。
値参照用のキーワードは「title」です。
ユーザ設定フォームに表示される文字列はガジェット titleになります。
requiredはfalseです。入力必須ではありません。
デフォルト値は「Google Search」に設定されています。

次の行はこのようになっています。

<UserPref datatype="bool" name="hide_image" display_name="hide image" required="false" default_value="false"/>

画像を隠すかどうかを指定するための設定です。

データタイプはboolです。
値参照用のキーワードは「hide_image」です。
ユーザ設定フォームに表示される文字列は「hide image」です。
requiredはfalseです。入力必須ではありません。
デフォルト値はfalseです。

最後のUserPrefタグです。

<UserPref datatype="enum"　name="bgcolor" display_name="bg color" default_value="white">
　<EnumValue value="white" />
　<EnumValue value="red" />
　<EnumValue value="orange" />
　…
</UserPref>

バックグラウンドカラーを指定するための設定です。

データタイプはenumです。
値参照用のキーワードは「bgcolor」です。
ユーザ設定フォームに表示される文字列は「bg color」になります。
requiredはfalseです。入力必須ではありません。
デフォルト値は「white」に設定されています。

JavaScript部分の解説

次に、赤色のJavaScriptの部分です。以下にscriptタグの部分だけを再掲します。

<script language="JavaScript">

</script>

JavaScriptを記述する場合には、このようにscriptタグで囲み、そのすぐ内側でHTMLのコメントアウト（<!- -->）を記述します。コメントアウトは記述しなくても動きますが、JavaScriptに対応していないブラウザのための配慮です。

さて、JavaScriptの最初の行

var prefs = new _IG_Prefs(__MODULE_ID__);

で _IG_Prefsクラスのインスタンスを作成しています。_IG_PrefsクラスはUserPrefで設定された値を読み出したり、ガジェットが設定値を書き込むためのクラスです。ガジェットから設定値を書き込むためには、ModulePrefsタグの内側にいくつか必要事項を追記する必要がありますが、それはまた別の機会に説明します。今はガジェットが設定値を読み込むところを説明します。

_IG_Prefsクラスのインスタンスの生成の際に、__MODULE_ID__という引数を渡しています。この文字列は、ガジェットの実行時にガジェットを一意に表す識別子に変換されます。これにより、他のガジェットの設定値とまざらないで自分の設定値を読み取ることができるのですが、ここは「_IG_Prefsの引数には__MODULE_ID__を渡すきまりになっている」と理解してしまってかまいません。

続く２行

　var bgcolor = prefs.getString("bgcolor");
　var hide_image = prefs.getBool("hide_image");

で設定値を読み込みます。getString()で文字列を、getBool()でブール値を読み込みます。datatypeがbool以外の場合はgetString()（もしくは、整数であればgetInt()でも可）で設定を読みます。それぞれの引数にはUserPrefタグのname属性で指定したキーワードを指定します。

設定値を使用して、ガジェットをカスタマイズします。まず

　document.body.style.backgroundColor = bgcolor;

の行で、背景色を指定します。読み込んだbgcolorをHTMLドキュメントの背景に設定しています。documentオブジェクトはDOMインターフェースを提供しており、CDATA[...]の内側のHTMLにdocumentオブジェクトを介してアクセスすることが可能です。上記の例にある背景色の変更もDOMインターフェースを使用しています。DOMについては関連リンクのページに参考になるページを紹介することとして、説明は省略します。

次の３行で、画像を表示するかどうかを決めています。

　if(!hide_image){
　　　_gel("image_space").innerHTML = "<img src=\"http://hogematomo.googlepages.com/nanikore.gif\"></img>";
　}

_gel("image_space")は、ガジェット用APIのひとつでdocument.getElementById("image_space")と同じです。この関数呼び出しで、HTML中の「image_space」というIDを持つタグを探してそのタグに対応するElementオブジェクトを返します。上記の例では、divタグにimage_speceというIDが付与されているので、DIVタグに対応するElementオブジェクトが返されます。

次にinnerHTMLプロパティですが、これは、そのタグの内側にあるHTML文字列を表します。これに文字列を代入すると、ブラウザ画面上で、そのタグの位置に代入した文字列が表示されます。このしくみによって動的にHTMLを書き換えることができるわけです。

上記の例では、IMGタグをdivタグの内側に書き込んでいますので、ブラウザ画面上で、divタグのある位置に画像が表示されることになります。