先日、ついに iGoogle Themes API が公開され、 iGoogle の外観を自由にカスタマイズできるようになりました。 iGoogle 関連で久々の大きな機能追加ということで、これはご紹介しないわけにはいきません。作り方もガジェットよりずっと簡単なので、ぜひオリジナルテーマの作成に挑戦してください！

iGoogle テーマは、ガジェットと同様に XML ファイルとして作成します。と言っても構造は非常に単純なので、 XML に関する知識はほとんど必要ありません。普通に HTML が書ける知識があれば、簡単に作成できます。ただし、タグ名の大文字小文字を区別することには注意してください。

iGoogle テーマファイルの全体的な構成は、以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<ConfigMaps>
  <ConfigMap type="Skin">
    <!-- ひとつめのスキンの定義 -->
  </ConfigMap>
  <ConfigMap type="Skin">
    <!-- ふたつめのスキンの定義 -->
  </ConfigMap>
  <!-- 以下、必要なだけスキンを記述する -->
</ConfigMaps>

ここでスキンと言っているのは、単体で iGoogle の画面を構成できる、ひとまとまりの設定群です。 iGoogle では時間帯によって表示を切り替える「ダイナミックテーマ」が使えるため、複数のスキンを記述できるようになっています。常に一定の表示を行うだけなら、スキンはひとつでかまいません。

iGoogle テーマの XML ファイルで使用するタグは、以下の 5 つだけです。

ConfigMaps, ConfigMap タグの使い方は前述の例のとおりです。そして ConfigMap タグの中に残りの Meta, Trait, Attribute タグを記述することで、各種パラメータを設定します。それら 3 つのタグの書式はいずれも同じ、以下のようになります。

<Attribute name="名前">値</Attribute>

名前は設定するパラメータ名、値はそのパラメータに設定する URL や文字列です。

詳細は後述しますが、 Attribute タグで指定できるパラメータは多岐にわたります。しかし、そのすべてを記述する必要はなく、指定がないパラメータにはデフォルト値が適用されるようです。例えば、ロゴを黄色に変えるだけのテーマは以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<ConfigMaps>
  <ConfigMap type="Skin">
    <Attribute name="header.logo">beveled_yellow</Attribute>
  </ConfigMap>
</ConfigMaps>

以下のリンクで実際に表示できますので、お試しください。

http://www.google.co.jp/ig?skin=http://webos-goodies...

あとは、少しずつ必要なパラメータを変更していくだけで、オリジナルテーマのできあがりです。簡単でしょう？ :)

iGoogle Themes API で最も重要なのが Attribute タグで、表示関連のカスタマイズの機能を一手に担っています。設定できるパラメータは多数あるので、カテゴリごとに分けてご紹介します。

ヘッダ部分では、文字色や iGoogle ロゴの変更が行えるほか、背景に表示する画像も指定できます。画像を表示する場合、 iGoogle のヘッダが以下の 4 つのレイヤーで構成されていることを知っておく必要があるでしょう。

1. 背景色。前景・背景画像の双方が透明のピクセルはこの色になります。
2. 背景画像。ブラウザの画面が画像の横幅より広い場合、左右がリピートしてタイル状に配置されます。
3. 前景画像。ブラウザの画面が画像の横幅より広い場合でもリピートせず、余った部分は透明（背景画像 or 背景色）になります。
4. iGoogle ロゴや文字列など。

このような構成になっているのは、ブラウザの横幅が広い場合でも破綻しないようにするためです。前景画像の左右の端が背景画像（もしくは背景色）とうまく繋がるようにすることで、横幅に関わらずシームレスなヘッダ画像を表示できます。具体的には既存のテーマを Firebug などで調査してみてください。

ヘッダ画像関連のパラメータには以下のものがあります。

header.logo

iGoogle ロゴの色をこちらのリストから選んで指定します。

header.text_color

通常テキストの色を指定します。

header.link_color

リンクの色を指定します。

header.center_image.url

前景画像の URL を指定します。横幅は 640 ピクセル以上、縦は 175 ピクセルきっかりにしてください。

header.tile_image.url

背景画像の URL を指定します。横幅は任意ですが、縦は 175 ピクセルでなければなりません。

header.background_color

背景色を指定します。

タブに関しては、選択・非選択それぞれのタブの文字色、背景色、それにボーダーカラーが指定できます。タブに表示されるメニューボタンはガジェットのタイトルバーと同じもの（gadget_area.menu_icon.image.url, gadget_area.menu_icon.hover_image.url）が使われるようです。

gadget_area.tab.border_color

タブのボーダーカラーを指定します。

gadget_area.tab.selected.text_color

選択状態のタブの文字色を指定します。

gadget_area.tab.selected.background_color

選択状態のタブの背景色を指定します。

gadget_area.tab.unselected.text_color

非選択状態のタブの文字色を指定します。

gadget_area.tab.unselected.background_color

非選択状態のタブの背景色を指定します。

ガジェット領域では、タブ領域との区切り線の色、タイトルバーの文字色、背景色、各ボタン画像、ガジェットの外枠の色、ガジェット内のリンクの色などが指定できます。タイトルバーの各アイコンは 12x12 固定です。また、以下でハイライトと書いているのは、マウスカーソルが重なったときの状態です。

gadget_area.border_color

ヘッダ（タブ）とガジェット領域の間のボーダーラインの色を指定します。

gadget_area.gadget.header.text_color

タイトルテキストの色を指定します。

gadget_area.gadget.header.background_color

タイトルバーの背景色を指定します。

gadget_area.menu_icon.image.url

メニューボタン（通常）に使う画像の URL を指定します。

gadget_area.menu_icon.hover_image.url

メニューボタン（ハイライト）に使う画像の URL を指定します。

gadget_area.collapse_icon.image.url

最小化ボタン（通常）に使う画像の URL を指定します。

gadget_area.collapse_icon.hover_image.url

最小化ボタン（ハイライト）に使う画像の URL を指定します。

gadget_area.expand_icon.image.url

最大化ボタン（通常）に使う画像の URL を指定します。

gadget_area.expand_icon.hover_image.url

最大化ボタン（ハイライト）に使う画像の URL を指定します。

gadget_area.delete_icon.image.url

クローズボタン（通常）に使う画像の URL を指定します。

gadget_area.delete_icon.hover_image.url

クローズボタン（ハイライト）に使う画像の URL を指定します。

gadget_area.gadget.border_color

ガジェットのまわりのボーダーラインの色を指定します。

gadget_area.gadget.body.link_color

ガジェット内のリンクの色を指定します。たぶん適用されるのはインラインガジェットのみです。そしてインラインガジェットはもう作れない・・・（´ー｀；

最後にフッタです。ヘッダと同じように背景色、背景画像、前景画像が指定できるほか、テキスト・リンクの色、それに作者のロゴ画像などが指定できます。

footer.text_color

通常テキストの色を指定します。

footer.link_color

リンクの色を指定します。

footer.attribution.image.url

作者の名前やマークを入れるための画像の URL を指定します。サイズは 100x50 ピクセル固定です。フッタの右側に表示されます。

footer.center_image.url

前景画像の URL を指定します。横幅は 640 ピクセル以上、縦は 175 ピクセルきっかりにしてください。

footer.tile_image.url

背景画像の URL を指定します。横幅は任意ですが、縦は 175 ピクセルでなければなりません。

footer.background_color

背景色を指定します。

以上のように、 iGoogle テーマでは iGoogle の各部分の色を指定するパラメータがあります。それらのパラメータに指定できる値は、カラーコード（#xxxxxx か RGB(x,x,x) の形式）、もしくは aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow のいずれかの色名です。

画像を指定するパラメータには、単純に画像ファイルの URL を設定すれば OK です。ただし、必ず完全な URL でなければならず、相対パスなどは使えません。画像形式は PNG 推奨ですが、 GIF, JPEG も使用可能です。

公式 iGoogle テーマのほとんどは時間帯によって表示が切り替わりますよね。そのようなテーマを「ダイナミック・テーマ」と呼びます。 iGoogle Themes API にも、もちろん同様の機能があります。ダイナミック・テーマを作成するには、テーマファイルで複数のスキンを定義し、それぞれのスキンの表示時間帯を Trait タグでします。ひとつのスキンに Traits タグを複数記述することもできますが、その場合は時間が早い順に並べなければなりません。例えば、午前 6 時から午前 9 時までと、午後 3 時 30 分から午後 6 時 30 分までに表示するスキンなら、以下のように記述します。

<ConfigMap type="skin">
  <Trait name="TimeOfDay">6am-9am</Trait>
  <Trait name="TimeOfDay">3:30pm-6:30pm</Trait>
  <!-- 必要な Attribute タグを記述 -->
</ConfigMap>

このようにしてすべての時間帯のスキンを用意すれば、ダイナミック・テーマのできあがりです。現在のところ設定できるパラメータは上記の "TimeOfDay" のみで、時間帯以外で切り替える方法は用意されていません。公式テーマには天気によって表示が切り替わるものなどもあったはずなので、ぜひそういった機能も用意してほしいですね。

作成したテーマを実際に iGoogle に適用するには、 XML ファイルや画像ファイルなどを Web サーバーにアップロードして公開しなければなりません。無料のレンタルサーバーやプロバイダが提供するホームページサービスでもたいていは大丈夫ですから、可能ならそういったサービスを利用するのが手軽でしょう。

もし Web スペースが用意できない場合は、こちらのページの「いろいろな公開方法」でご紹介している方法が使えるはずです。また、 Google Gadget Editor を利用する方法もあります。

せっかく作成したテーマも、自分で使っているだけではもったいないですよね。ぜひテーマディレクトリに登録して、みんなが簡単に使えるようにしましょう。そのためには、テーマファイルにメタ情報（主にディレクトリに表示するための情報）をテーマファイルに含めなくてはなりません。

具体的には、 ConfigMaps タグ内の先頭にダミーの（Attribute や Trait を含まない） ConfigMap タグを作成し、その中に Meta タグを利用して以下のパラメータを設定します。

title

ディレクトリに表示されるタイトルです。

description

ディレクトリの個別ページ（サムネイルをクリックすると表示されるページ）に表示される説明文です。

author

ディレクトリに表示される作者名です。

author_email

作者のメールアドレスです。ディレクトリの作者ページ（個別ページの作者名をクリックすると表示されるページ）で公開されるのでご注意ください。

author_location

作者の所在地です。

author_affiliation

作者の所属組織です。個別ページや作者ページで作者名に続いて表示されます。

thumbnail.url

ディレクトリで表示されるサムネイル画像の URL を指定します。サイズは 410x70 ピクセル固定です。

Screenshot.url

ディレクトリの個別ページで表示される画像の URL を指定します。サイズは 680x116 ピクセル固定です。

以下は先ほどのロゴを黄色にするだけの iGoogle テーマにメタ情報を追加したものです。

<?xml version="1.0" encoding="UTF-8"?>
<ConfigMaps>
  <ConfigMap type="Skin">
    <Meta name="title">Example</Meta>
    <Meta name="description">メタ情報の記述例</Meta>
    <Meta name="author">伊藤</Meta>
    <Meta name="author_email">support@webos-goodies.jp</Meta>
    <Meta name="author_location">Tokyo, Japan</Meta>
    <Meta name="author_affiliation">WebOS Goodies</Meta>
    <Meta name="thumbnail.url">http://webos-goodies.jp/igtheme/thumbnail.png</Meta>
    <Meta name="Screenshot.url">http://webos-goodies.jp/igtheme/screenshot.png</Meta>
  </ConfigMap>
  <ConfigMap type="Skin">
    <Attribute name="header.logo">beveled_yellow</Attribute>
  </ConfigMap>
</ConfigMaps>

パラメータは title, description, author, author_email が必須で、その他は省略可能です。ディレクトリでの見栄えなどを考えると、サムネイルやスクリーンショットは指定したほうが良いとは思いますが。

テーマファイルにメタ情報を含めたら、あとはこちらのページからテーマファイルの URL を登録するだけです。 iGoogle ガジェットのときと同様、掲載されるまでには少し（数週間くらい？）時間がかかると思います。気長に待ってください。

以上で iGoogle テーマファイルの書式はほぼ網羅したと思いますが、他にもテーマを作成する際に知っておくと便利なことがいくつかあります。最後にそららをご紹介しましょう。

テーマファイルの記述方法がわかっても、その表示結果を確認する方法がなければ、作りようがありませんよね。もちろん、表示確認の方法が用意されています。やり方は簡単で、以下のように iGoogle の URL に "skin" パラメータを追加するだけです。

http://www.google.co.jp/ig?skin=テーマファイルのURL

この URL にアクセスすると、指定したテーマファイルを適用した iGoogle ページが表示されます。設定自体は書き換えないので、通常の（"skin" パラメータを指定していない） iGoogle ページにアクセスすれば、元のテーマに戻ります。テーマファイル作成時は、この方法で表示を確認しながらカスタマイズしていくと良いでしょう。

新しい iGoogle テーマ作成時のテンプレートとして使えるファイルがこちらからダウンロードできます。コメント付きで各設定が記述されている XML ソースファイルと各ボタン画像（.psd データ付き）が含まれているので、とても参考になります。

また、親ディレクトリにも参考になりそうなファイルがいくつか保存されていますので、覗いてみるのも良いでしょう。ただし、これらは公式に提供されているものではないので、勝手に使うのはまずいと思います。あくまで参考程度にしてください。

これとは別に、 iGoogle テーマで自由に利用できるボタン画像も提供されています。こちらのページに掲載されている URL をテーマファイルに記述するだけで利用できますので、有効に活用しましょう！

なんと、既に iGoogle テーマ作成ツールを公開されている方がおられます！

iGoogleのテーマXMLを作成するbookmarklet (でぃべろっぱーず・さいど)

ブックマークレットを iGoogle のページで実行すると、編集フォームが開いて各パラメータを指定できます。指定したパラメータはリアルタイムで iGoogle のページに反映され、テーマファイルの XML を自動生成してくれます。素晴らしいツールです。 iGoogle テーマ作成のお供に、ぜひどうぞ。

以上、本日は新しく公開された iGoogle Themes API の詳細をご紹介しました。 iGoogle のテーマ変更機能は他のポータルサイトと比べても抜群に表現力が高いので、とくに絵心のある方には最高のプラットフォームだと思います。まだディレクトリには Google 謹製のテーマしか掲載されていない状態なので、アピールするには絶好のチャンス。日本人のセンスを活かしたテーマを世界に向けて発信してみませんか！