©2009 Google - Code サイト ホーム - 利用規約 - プライバシー ポリシー - サイト ディレクトリ
Google Code が利用できる言語: English - Español - 日本語 - 한국어 - Português - Pусский - 中文(简体) - 中文(繁體)
| 
日本語 | ログイン
Themes API を使うと、iGoogle のカスタム デザインを作成できます。これにより、何千万人ものユーザーが自分のホームページをさらにカスタマイズすることができます。テーマのデザインは動的です。1 日のうちに何度も変更して、視覚的な物語、メッセージなどを何でも伝えることができます。
このドキュメントは iGoogle への追加機能による変更点が反映されています。New! や Updated! が付いている箇所は内容が以前のバージョンから変更されたことを表します。
このドキュメントでは、iGoogle ユーザー インターフェース (UI) の 2 つのバージョンについて説明します。 それらは iGoogle サンドボックス に含まれるオリジナル UI と新しい UI です。古い UI は時間とともに新しい UI に置き換えられます。このドキュメントに記載されている設定のほとんどは、両方の UI バージョンに適用されますが、どちらか一方にのみ適用される設定もあります。
テーマとは iGoogle ページ用のカスタム デザインです。テーマは、背景やテキストの色などの iGoogle ページ属性のキー値ペアを含めた基本的な XML ファイルで定義します。ヘッダーの背景と iGoogle ロゴの色を設定するだけの簡単なテーマも、複数の画像と動的な動作を含めたテーマも定義できます。
テーマには 1 つ以上の「スキン」を含めます。スキンはテーマに含める属性のデザインを指定します。これにより、iGoogle ページの 1 つのデザインが作成されます。複数のスキンを持つテーマは動的テーマです。時間によって iGoogle ページのデザインが変化します。
各スキンは、それぞれ異なる ConfigMap (構成マップ) によってテーマの XML ファイルに表されます。テーマは実際には、構成マップの集合です。
ここでテーマの XML ファイルの基本構文を示す簡単な例を説明します。スキンは <ConfigMap> タグの中に定義されることに注意してください。1 つのテーマに複数のスキンを定義可能で、スキンはそれぞれ <ConfigMap> セクション内に定義されます。1 つの テーマには少なくとも 2 つの <ConfigMap> セクションが必要です。 1 つはメタデータ用のセクションで、もう 1 つは 1 つ以上のスキンのデザイン属性用のセクションです。次に例を示します。
<?xml version="1.0" encoding="UTF-8" ?>
<ConfigMaps>
<ConfigMap type="Skin">
<Meta name="title">Simple Theme</Meta>
<Meta name="description">Simple theme example.</Meta>
<Meta name="author">Rowan</Meta>
<Meta name="author_email">Rowan@gmail.com</Meta>
<Meta name="thumbnail">http://gmodules.com/ig/images/skins/ig_thumb_beach.jpg</Meta>
</ConfigMap>
<ConfigMap type="Skin">
<Attribute name="header.background_color">teal</Attribute>
<Attribute name="header.logo">white</Attribute>
<Attribute name="header.link_color">blue</Attribute>
<Attribute name="header.text_color">black</Attribute>
<Attribute name="gadget_area.gadget.header.background_color">teal</Attribute>
</ConfigMap>
</ConfigMaps>
属性とメタデータ フィールドのすべての一覧はリファレンスをご覧ください。
テーマの XML ファイルの作成には、ワードパッドなど、どのテキスト エディタでも使用できます。
テーマをテストするには、公開サーバー上でその XML ファイルとテーマの画像をホストする必要があります。たとえば、Google Gadgets Editor や Google Code (詳しくは こちら をご覧ください) を使用して、テーマ XML と画像ファイルをホストできます。
テーマ リソースをホストした後、iGoogle URL の後に ?skin=<theme-url> を追加して、そのテーマをテストできます。たとえば上記の簡単な例を iGoogle 国際版で次のようにテストできます。
http://www.google.co.uk/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xml
注: 新しいユーザーの場合は、設定ボックスの [ページを表示] をクリックしてテーマをテストする必要があります。
最新の iGoogle 機能を使ってテーマをテストするには、まず http://www.google.com/ig/sandbox にアクセスしてサンドボックスに登録します。次に、iGoogle URL の後に ?skin=<theme-url> を追加して、テーマを再度テストします。たとえば登録後に次の URL にアクセスすれば、簡単な例をサンドボックスでテストできます。
http://www.google.com/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xml
テーマのデザインを適切にテストするには、必ず自分の Google アカウントにログインします。チャットのような新しい機能を含む、ページのすべての領域を確認します。
iGoogle テーマは、ヘッダーとフッターの画像に加えて、ページのさまざまな部分のために XML テンプレートで定義するスタイルで構成されます。テーマの作成手順は次のとおりです。
以降では、この手順について詳しく説明します。
テーマの作成を始める前に、Google のプログラム ポリシーを確認してください。このガイドラインには、次の点が記載されています。
iGoogle ページは、ヘッダー、左ナビゲーション、コンテンツ領域、フッターのセクションから構成されます。
テーマは 1 日に何度でも変更できることを忘れないでください。ですからデザインを 1 つ作成しただけで終わりにするのではなく、動的テーマを作成してください。
ヘッダーは iGoogle の上部のグラフィック領域です。ここには、iGoogle のロゴ、検索ボックス、テキスト、リンクなどが含まれます。タブを含めることもできます (ユーザーの iGoogle バージョンによる)。たとえば iGoogle の Tea House のテーマを次に示します。
ヘッダーは次のレイヤで構成されます。
ヘッダーを設計し、タイルを作成する前に、ヘッダーのレイヤをどのように構成するかを把握しておきます。必ずしもすべてのレイヤを使用する必要はありません (詳細は後で述べます)。ヘッダーの要素は、次の順序で配置されます。
<Attribute name="header.background_color">teal</Attribute><Attribute name="header.tile_image.url">http://www.example.com/tile_img.jpg</Attribute><Attribute name="header.center_image.url">http://www.example.com/center_img.jpg</Attribute>ヘッダー画像の高さは 175 ピクセルです。したがって、タイルと中央画像の高さも 175 ピクセルにする必要があります。中央画像の幅は 640 ピクセル以上とする必要があります。画像の幅の上限はありませんが、ファイル サイズは 40 KB 以下にしてください (ヒント: 小さい画像の方が読み込みが早く、人気が高くなる傾向があります)。
ヘッダー画像のサイズが固定なので、さまざまな画面解像度やサイズ変更されるブラウザ ウィンドウに応じて、ヘッダー画像がシームレスに調整されるよう構成する必要があります。このような柔軟性を持たせるために、次のいずれかの手法を使ってヘッダーを構成できます。
ここからは、これらの手法について詳しく説明します。
ヘッダー画像の背景を、1 色で塗りつぶすことができます。ページの幅が広がると、この色がヘッダー画像の両側に表示されます。ヘッダーと背景色の変わり目をシームレスにするために、ヘッダー画像の左右の端が同じ色に溶け込むようにする必要があります。そしてその色を背景に使用できます。例を次に示します。
 |
レイヤ 1: 背景色 - 背景色として黒を選択する レイヤ 2: ヘッダー タイル - タイルなし レイヤ 3: ヘッダー画像 - ヘッダー画像の端を黒にする。これにより背景色とヘッダー画像が一致します。 レイヤ 4: ロゴと検索ボックス Simplicity is Complex: by John Maeda |
何枚も反復する画像を敷きつめてヘッダー全体の背景となるタイルを作成できます。タイルの両端で絵柄を合わせて、境界やつなぎ目がわからないように画像を敷きつめる必要があります。次に透明な中央画像を使って背景の上にオブジェクトを配置し、その他の部分は背景が透けて見えるように透明にします。例を次に示します。
 |
レイヤ 1: 背景色 - 背景色は選択しない レイヤ 2: ヘッダー タイル - ヘッダー タイルは 900 ピクセル。これを、左右に反復する。雲と草原の背景がシームレスに連続するようにタイルの端を合わせる。 レイヤ 3: ヘッダー画像 - ヘッダー タイルと同じようにヘッダー画像も 900 ピクセル。ヘッダー タイルは透明な .gif にする必要がある。 レイヤ 4: ロゴと検索ボックス Bus Stop by Google |
これは中央のタイルが不透明の中央画像で重ねられる点を除いて 2 番目の手法と同じです。中央画像からタイルへの変わり目をシームレスにするために、中央画像の左端とタイルの右端を合わせ、中央画像の右端とタイルの左端を合わせます。iGoogle ページでタイルと中央画像の位置を合わせるために、タイル画像を中央画像の背後に均等に収める必要があります。中央画像の幅が 900 ピクセルの場合、タイルの幅は 900 ピクセル (タイル 1 枚)、300 ピクセル (タイル 3 枚) などにしてください。これによって、ページのサイズが変更されても、タイルと中央画像がシームレスな画像となるように並びます。
例を次に示します。
 |
レイヤ 1: 背景色 - 背景色は選択しない レイヤ 2: ヘッダー タイル - 木のタイルの幅は 300 ピクセル。木と空がシームレスに連続するようにタイルの端を合わせる。 レイヤ 3: ヘッダー画像 - 不透明のヘッダー画像は 900 ピクセル (3 枚のヘッダー タイルを合わせた幅)。背景と前景がシームレスに合成されるようにタイルの中の木をヘッダー 画像の木に合わせる。 レイヤ 4: ロゴと検索ボックス Tea House by Google |
Themes API を使用して、ヘッダー、フッター、コンテンツ領域 (API では「ガジェット領域」と呼びます) 内のテキストとリンクの色を指定できます。たとえば次のスニペットでは、ヘッダー内のリンクとテキストの色が白に設定されます。色はコンテンツ領域のリンクの色と同じように 16 進数値を使って設定できます。
<Attribute name="header.link_color">white</Attribute>
<Attribute name="header.text_color">white</Attribute>
<Attribute name="gadget_area.gadget.header.background_color">#00B366</Attribute>
リンクはすべて同じ色で、ページ上で読めるようにしてください。リンクには次のものがあります。
iGoogle のバージョンによっては次のリンクも含まれます。
プレーン テキストの色を選択します。リンクされていないテキストはすべて同じ色で、ページ上で読めるようにしてください。テキストには次のものがあります。
iGoogle のバージョンによっては次のテキストも含まれます。
どのテーマにも iGoogle ロゴを含める必要があり、ロゴはページ上ではっきり見える必要があります。テーマに iGoogle ロゴを指定するには、header.logo 属性を使用します。この属性には、次の値のいずれかを設定します。
original -- オリジナルの多色の iGoogle ロゴですが背景は透明です。ロゴを指定しないと、背景が白のオリジナルのロゴがテーマに表示されます。これはほとんどのデザインに適してはいません。 beveled_original -- オリジナルの多色の iGoogle ロゴで、立体的です。color -- サポートされているロゴの色のうちの 1 色です。すべての色の一覧は、リファレンスをご覧ください。 beveled_color -- サポートされているロゴの色のうちの 1 色で、立体的です。 次に例をいくつか示します。
白い平らなロゴ:
<Attribute name="header.logo">white</Attribute>
黄色い立体的なロゴ:
<Attribute name="header.logo">beveled_yellow</Attribute>
オリジナルの立体的なロゴ:
<Attribute name="header.logo">beveled_original</Attribute>
タブは左ナビゲーション に移動します。Google は新しい機能を iGoogle ユーザーに展開中ですが、ユーザーによってはタブが表示されたり、左ナビゲーションが表示されたりします。当面、両方の値を指定することをお勧めします。
Themes API を使用して、iGoogle タブの次の特性を変更できます。
たとえば次のコードは
<Attribute name="gadget_area.tab.selected.background_color">white</Attribute>
<Attribute name="gadget_area.tab.selected.text_color">blue</Attribute>
<Attribute name="gadget_area.tab.unselected.background_color">gray</Attribute>
<Attribute name="gadget_area.tab.unselected.text_color">black</Attribute>
<Attribute name="gadget_area.tab.border_color">navy</Attribute>
次のタブのデザインを設定します (青緑色のヘッダーを背景にして表示されています)。
注: これは水平タブに代わるものです。
Themes API を使用して、左ナビゲーションの次の特性を変更できます。
例を次に示します。
<Attribute name="navbar.background_color">#FFF9BF</Attribute>
<Attribute name="navbar.border_color">blue</Attribute> <Attribute name="navbar.icons.icon_color">aqua</Attribute> <Attribute name="navbar.tab.selected.link_color">teal</Attribute> <Attribute name="navbar.tab.unselected.link_color">teal</Attribute> <Attribute name="navbar.tab.unselected.border_color">teal</Attribute>
Themes API を使用して、チャット機能の次の特性を変更できます。チャット リストは左ナビゲーションの最下部に表示されます。
例を次に示します。
<Attribute name="navbar.contacts.contact_color">#FF8080</Attribute> <Attribute name="navbar.contacts.status_color">#FF8080</Attribute> <Attribute name="navbar.contacts.hover_background_color">#FF0000</Attribute> <Attribute name="navbar.contacts.card.border_color">#B30000</Attribute> <Attribute name="gadget_area.chat.header.background_color">#FFBFBF</Attribute> <Attribute name="gadget_area.chat.header.highlight.background_color">#FF8080</Attribute>
Themes API を使用して、コンテンツ領域の次の特性を変更できます。コンテンツ領域は、ページ上のガジェットを表示する部分です。
たとえば次のコードは
<Attribute name="gadget_area.gadget.body.link_color">#00B366</Attribute> <Attribute name="gadget_area.border_color">#007D48</Attribute> <Attribute name="gadget_area.gadget.border_color">#007D48</Attribute> <Attribute name="gadget_area.gadget.header.background_color">#BFFFE4</Attribute> <Attribute name="gadget_area.gadget.header.text_color">#00B366</Attribute>
コンテンツ領域の次の配色を作成します。
注: これは、ボタン アイコンのカスタム画像を指定するオプションに取って代わります。
Themes API を使用して、ガジェットのヘッダーに表示されるボタンを変更できます。指定するボタンの色の値については、API リファレンスをご覧ください。
例を次に示します。
<Attribute name="gadget_area.icons.icon_color">#ffaa00</Attribute>
フッターのデザインは省略可能で、ヘッダーのデザインと同様に指定します。リンクとテキストの色は変更可能で、高さと幅に制限があり、フッターでも同様にタイルを使用できます。
フッターのデザインには次の 3 つのオプションがあります。
<Attribute name="footer.background_color">gray</Attribute>footer.tile_image.url 属性を使用してフッターの背景タイルを指定します。次に例を示します。<Attribute name="footer.tile_image.url">http://www.example.com/footer_img.jpg</Attribute><Attribute name="footer.center_image.url">http://www.example.com/footer_center_img.jpg</Attribute>
フッター内のリンクとテキストの色も変更できます。たとえば次のコードは、フッターのリンクの色を白に、フッターのテキストの色を黒に設定します。
<Attribute name="footer.link_color">white</Attribute> <Attribute name="footer.text_color">black</Attribute>
フッターには、自分の名前、サイン、ロゴなどの帰属表示を含めることもできます。帰属表示領域は、フッターの右上隅の 50 x 100 ピクセルです。詳しくはプログラム ポリシーをご覧ください。attribution.image.url 属性を使用して、帰属表示の画像を追加します。例を次に示します。
<Attribute name="attribution.image.url">http://www.example.com/my_attribution_image.jpg</Attribute>
ヘッダーの画像、ロゴ、テキストの色などはすべて 1 日中、時刻に合わせて変更できることを忘れないでください。デザインはいくつでも自由に作成できます (夜間に変更してもあまり見てもらえないこと、画像が多すぎるとすべての画像をユーザーが見られない可能性があることに注意してください)。
動的テーマを作成するには、異なる時間に対して、異なるスキンを作成します。各スキンは必要な条件をすべて備えている必要があります。つまりどのスキンにも属性をすべて定義する必要があります。<Trait> タグを指定して、特定のスキンを適用する時間を指定します。例を次に示します。
<ConfigMap type="Skin">
<Trait name="TimeOfDay">12am-1am</Trait>
...attributes...
</ConfigMap>
<ConfigMap type="Skin">
<Trait name="TimeOfDay">1am-2am</Trait>
...attributes...
</ConfigMap>
....
有効な時間の範囲は 12am～12am です。終了時刻が開始時刻よりも前の場合は、登録時にエラーが発生します。たとえば 11pm～5am の時間を指定したいとします。この時間の指定は正しくありません。正しく指定するには、2 つの Traits に分けて、1 つを 11pm～12am の TimeOfDay とし、もう 1 つを 12am～5am の TimeOfDay とします。
特定の言語と国用にローカライズしたメタデータ フィールドを組み込むことで、世界中のユーザーがテーマにアクセスしやすくなります。ローカライズできる項目は次のとおりです。
title。テーマ ディレクトリに表示されるタイトルです。description。テーマと、どう変化するかの説明です。 thumbnail。テーマのプレビューを表示するためにテーマ ディレクトリに表示するサムネイルです。 screenshot。テーマに関するページのテーマ ディレクトリに表示するスクリーンショットです。これらのフィールドをローカライズするには、サポートする言語と国ごとに <ConfigMap> をテーマの XML ファイルに追加します。言語または国をテーマに含めない場合、テーマ ディレクトリのデフォルトは、言語も国も指定されていない 1 番目の <ConfigMap> に設定されます。例を次に示します。
<ConfigMaps>
<!-- These values are the defaults for all countries -->
<ConfigMap type="Skin">
<Meta name="title">Simple Theme</Meta>
<Meta name="description">Simple theme example.</Meta>
<Meta name="author">Rowan</Meta>
<Meta name="author_email">Rowan@gmail.com</Meta>
<Meta name="thumbnail">http://mysite.com/images/ig_thumb_beach.jpg</Meta>
<Meta name="screenshot">http://mysite.com/images/ig_screenshot_beach.jpg</Meta>
</ConfigMap>
<!-- Localized fields, which will replace the defaults for language ja, and country jp -->
<ConfigMap type="Skin">
<Trait name="Language">ja</Trait>
<Trait name="Country">jp</Trait>
<Meta name="title">単純なテーマ</Meta>
<Meta name="description">単純なテーマの例</Meta>
<Meta name="thumbnail">http://mysite.com/images/thumb_beach_jp.jpg</Meta>
<Meta name="screenshot">http://mysite.com/images/screenshot_beach_jp.jpg</Meta>
</ConfigMap>
言語と国の両方を必ずしも指定する必要はありません。どちらか一方のみを指定することができます。たとえばフランス語を使用するすべてのユーザーに対して <ConfigMap> を作成したり、フランス語を使用するカナダのユーザーに限定して <ConfigMap> を作成したりできます。これは、作成者がターゲット ユーザーをどの程度具体的に特定しているかによって異なります。
Language の有効な値は ISO639-1 の 2 桁の言語コードです。Country には ISO 3166-1 alpha-2 コードが使用されます。iGoogle がサポートする国と言語について詳しくは、iGoogle Supported Languages and Countries をご覧ください。
Themes API を使用して、自分と友だちのために簡単なデザインを作成できます。ただし iGoogle のテーマ ディレクトリにテーマを登録しないと、テーマの作成とテストで説明したように、URL を通してテーマを「テスト モード」で適用することしかできません。より多くのユーザーとテーマを共有し、ユーザーがそのテーマを iGoogle に継続して適用できるようにするために、テーマを iGoogle テーマ ディレクトリに登録する必要があります。テーマを iGoogle テーマ ディレクトリに登録するには、興味を引く、洗練されたデザインで、プログラム ポリシーに記載されているガイドラインに従っていることを確認する必要があります。また、すべてのメタデータ フィールドを組み込んで、テーマで使用するすべての画像が一般に公開されるようにする必要があります。
テーマの準備ができたら、こちらに登録します。Google がテーマを承認し、テーマ ディレクトリに含めると、その画像は Google によりコピーされ、ホストされます。したがって、あなたのホストへのトラフィックを心配する必要はありません。
テーマの登録に問題が生じた場合は、構文がすべて正しいこと、テーマの XML ファイルに空行が含まれていないことを確認します。ご質問やご意見がございましたら、Themes API グループ にアクセスしてください。
既に登録したテーマを変更したい場合、同じ URL を使用してそのテーマをもう一度登録します。約 1～2 週間で更新されます。