WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

Google Personalized Homepage ガジェットの作り方 : ガジェット設定の詳細

本日は Google Personalized Homepage ガジェットの作り方の続きです。これまでの記事で Google Gadgets 作成の基本的な手順はお分かりいただけたと思うので、本日から Google Gadgets を記述する XML ファイルの詳細なスペックを見ていきたいと思います。

本日は、最も基本的な記述であるガジェット設定(ModulePrefs 要素の属性)についてご紹介しようと思います。ガジェット設定の記述はガジェットの動作に影響するだけでなく、ガジェットディレクトリに登録した際に表示される内容も含まれています。個人で使用するだけならほとんどの記述は省略可能ですが、ガジェットディレクトリに登録して広く使ってもらうためには、よく理解しておく必要があります。

ガジェット設定の内容

第一回でもご紹介したとおり、ガジェット設定は Google Gadgets を定義する XML ファイル内に記述した ModulePrefs 要素の属性として指定します。私の勝手な区分ですが、これらの属性は影響する場所によって以下の三種類に分けられると思います。

  • ガジェットの動作に影響する属性
  • ガジェットディレクトリの表示内容を指定する属性
  • 作者情報を指定する属性

以下、この種類ごとに属性をご紹介していきます。

ガジェットの動作に影響する属性

まずはガジェットの動作に影響する属性です。これらの属性を指定することによって、ガジェットの外見や動作をカスタマイズできます。このタイプの属性には以下のものがあります。

属性名記述内容データ型
titleガジェットのタイトルバーに表示される文字列string
title_urlタイトルバーをクリックしたときの飛び先 URLurl
render_inlineガジェットの表示方法(廃止)enum
heightガジェットの高さ(ピクセル数)uint
widthガジェットの幅(ピクセル数)uint
scalingリサイズ時に縦横比を維持するかどうかbool
scrollingスクロールバーの表示 ON/OFFbool

表中の「データ型」は値として記述できる内容を表現しており、それぞれ、任意の正の整数(uint)、true または false(bool)、任意の文字列(string)、有効な URL (url)、既定の文字列(enum)となっています。それぞれの属性の詳細は以下のとおりです。

title
ガジェットのタイトルバーに表示される文字列です。省略可。
title_url
ガジェットのタイトルバーをクリックしたときの飛び先 URLです。任意の URL を指定できますので、ガジェットの説明ページや関連サービスのトップページなどを設定すると良いでしょう。省略するとリンクは設定されません。
render_inline
インライン表示が可能かどうかの指定です。インライン表示に関してはの詳細は後述します。 "required"(インライン必須), "optional"(どちらも可), "never"(インラインでは動作しない)が指定できます。省略可能で、デフォルトは "never"です。この属性は廃止されました。現在はインラインの指定は Content 要素で指定するようになっています。詳細は後述します。
height
ガジェットの高さを指定する正の整数です。省略可能で、デフォルトは 200 です。
width
ガジェットを任意の Web ページに貼るための HTML コードを生成する際の、デフォルトの横幅です。その他の場所に配置する際は無視されます。省略可能で、デフォルトは 320 です。
scaling
ブラウザーがリサイズされたときにガジェットサイズの縦横比を維持するかどうかを示す bool 値です。自動的に調整するなら true、高さを固定するなら false を指定してください。もっとも、現在は効果がないように思えますが・・・。省略可能で、デフォルトは "true" です。
scrolling
表示内容が表示領域からはみ出る場合にスクロールバーを表示するかどうかを指定する bool 値です。 false を設定すると表示内容は表示領域でクリップされ、ユーザーが見ることはできなくなります(ブラウザーによってはマウスホイールなどでスクロールできる場合があります)。省略可能で、デフォルトは false です。

これらの属性は、ガジェットの動作に必要なものを適宜記述していけば良いでしょう。ガジェットディレクトリに登録する際でも、title, title_url 以外は省略可能です。

ガジェットディレクトリの表示内容を指定する属性

次に、ガジェットディレクトリでの表示に影響する属性をご紹介します。まずは一覧表です。

属性名記述内容データ型
directory_titleガジェットディレクトリで表示されるタイトルstring
descriptionガジェットディレクトリで表示される説明文string
author作者の名前string
author_email作者のメールアドレスstring
author_affiliation作者の所属組織string
autor_location作者の居住地string
screenshotスクリーンショット画像の URLurl
thumbnailサムネール画像の URLurl
singletonガジェットが複数追加できるかどうかbool

表中のデータ型の意味は前述のとおりです。それぞれの属性の詳細は以下のとおりです。

directory_title
ガジェットディレクトリに登録した際、タイトルとして使用される文字列です。省略した場合は title の内容が表示されます。省略可能ですが、 title がユーザー設定による置換を含んでいる場合は指定が必須になります。ユーザー設定による置換については、ユーザー設定をご紹介するときに触れる予定です。
description
ガジェットの説明文です。
author
ガジェット作者の名前です。
author_email
ガジェット作者のメールアドレスです。スパム防止のため、プライベートなアドレスは使わないほうがよいでしょう。
author_affiliation
作者の所属組織です。個人で作った場合は省略してかまわないようです(参考:Google Groups のスレッド)。
author_location
作者の居住地です。 "Tokyo, Japan" とかでしょうか。あまり詳細に書く必要はないようです。
screenshot
ガジェットのスクリーンショット画像の URLです。ガジェットディレクトリの詳細表示で使用されます。画像の横幅は 280 pixel 固定で、高さはガジェットを使用したときの自然な値にする、となっています。その他にもいろいろと条件がありますので、それらは後述します。
thumbnail
ガジェットのサムネイル画像の URL です。ガジェットディレクトリに表示されます。画像サイズは 120x60 でなければなりません。その他の条件は後述します。
singleton
ガジェットが複数追加できるかを示す bool 値です。 true を指定すると、ガジェットがすでに登録してある場合はガジェットディレクトリの表示が灰色になり、 "Added" と表示されるようになります。ただし、この指定をしても URL の直接入力による登録は禁止できないので、依然として複数登録に対処する必要はあります。詳細は Writing Robust Gadgets を参照してください。

これらの属性はガジェットディレクトリに登録しないのであれば指定する意味はありません。しかし、ガジェットディレクトリに登録するならばすべてを指定することが推奨されています。もっとも、登録されているソースを覗くと必ずしもすべて記述してあるわけではないので、基準はけっこう曖昧なようです。

作者情報を指定する属性

最後は、ガジェット作者の情報を指定する属性です。ガジェットディレクトリとは別にガジェット開発者の紹介ページ(日本のページにはまだ一人も登録されていないので、英語ページにリンクしています)があり、そこに表示する情報です。

属性名記述内容データ型
author_photo作者の顔写真の URLurl
author_aboutme作者の自己紹介string
author_link作者の Web サイトの URL などurl
author_quote格言の引用(?)string

表中のデータ型の意味は前述のとおりです。それぞれの属性の詳細は以下のとおりです。

author_photo
作者の顔写真として掲載される画像の URL です。画像サイズは 70x100 でなければなりません。その他の条件は後述します。
author_aboutme
作者の自己照会文です。 500 文字以内に収めることが推奨されています。
author_link
作者の Web サイトとして掲載される URL です。
author_quote
自己紹介文の後に "Quote:〜" として表示される文章です。日本的には、座右の銘とかを書けばいいんですかね(^^;。 300 文字以内に収めることが推奨されています。

これらの属性の指定は任意ですので、開発者紹介ページに掲載されなくてもよければ省略可能です。

ガジェットタイプの指定

ModulePrefs の属性ではありませんが、関連事項としてガジェットのタイプ指定についてご紹介しておきます。 Google Gadgets には、以下の 3 つのタイプがあります。

タイプ表示方法
HTML ガジェットXML に記述された HTML を IFRAME 内で表示
URL ガジェット他のサーバーの HTML を IFRAME 内で表示
インラインガジェットXML に記述された HTML を DIV 内で表示

それぞれに特徴があり、 Content 要素とその内容の記述方法が異なります。

HTML ガジェット

HTML ガジェットは最も一般的なガジェットです。Content 要素の type 属性に "html" を指定すると、このタイプになります。

<Content type="html">
  <![CDATA[
    ガジェットの表示内容...
  ]]>
</Content>

この場合、「ガジェットの表示内容」に記述した HTML が IFRAME の内部に表示されます。個々のガジェットごとに独立したドメインが使われるのでセキュリティーが高く、またひとつのガジェットでエラーが発生しても Google Personalized Homepage 本体や他のガジェットの動作に影響を与えないという利点があります。とくに理由がなければ、このタイプを選択するのがベストです。

URL ガジェット

URL ガジェットは、他のサイトで動作している Web アプリケーションの機能を利用する場合に便利です。 Content 要素の type 属性に "url" を指定するとこのタイプになり、 href 属性で表示内容を格納した Web ページの URL を指定します。

<Content type="url" href="表示するページ" />

この場合、「表示するページ」に記述した URL のページがそのままガジェット内に表示されます(実際にリクエストされる URL にはいくつかの CGI パラメータが付加されます)。もちろん IFRAME を使います。 URL ガジェットの利点は Remember The Milk ガジェットを考えるとよくわかります。すでになんらかの Web サービスを展開しており、その機能を利用したガジェットを作成したい場合に有効です。 URL ガジェットでも HTML ガジェットとほぼ同等の機能が利用できますが、利用方法は少々複雑になります。詳細に関しては、折に触れてご紹介していきます。

インラインガジェット

インラインガジェットは最も高度なガジェットです。 HTML ガジェットと同様に Content 要素内に記述した内容を表示しますが、 IFRAME を使わず、 Google Personalized Homepage 本体にの HTML にそのまま埋め込みます。ページ内のすべての要素にアクセスできますから、 Tabs ガジェットのように Google Personalized Homepage そのものの機能拡張も行えます。

反面、もし記述ミスなどで誤動作すると、 Google Personalized Homepage そのものが使えなくなってしまう恐れがあります。また、ユーザーの Cookie 情報などもすべて取得できますので、悪意を持てばユーザーの Google アカウントを乗っ取ることもできてしまいます。このため、ガジェット製作者の責任は非常に大きなものになります。安易にインラインガジェットを作ってしまうと、利用者に敬遠されることもあるかもしれません。さらに機能面でも、 Google Personalized Homepage 以外で使えないというデメリットがあります。以下に、 HTML ガジェットとインラインガジェットの主な相違点をまとめておきます。 URL ガジェットの性質は所属ドメインを除いて HTML ガジェットと同じです。

相違点HTML ガジェットインラインガジェット
表示方法IFRAME 内ページに直接埋め込み
所属ドメイン*.gmodules.comwww.google.co.jp
ガジェット外部の操作不可能可能
Cookie の盗聴不可能可能
Google Desktop での使用可能不可能
Page Creator での使用可能不可能
任意ページでの使用可能不可能
バグの影響該当ガジェット内のみページ全体に影響
登録時の審査簡単厳格

※「登録時の審査」とは、ガジェットをガジェットディレクトリに登録する際の審査のことです。

インラインガジェットの基本的な作成方法は HTML ガジェットとほぼ同様で、 type 属性に "html-inline" と指定するだけです。

<Content type="html-inline">
  <![CDATA[
    ガジェットの表示内容...
  ]]>
</Content>

ただし、各 HTML 要素の id, class 属性、 JavaScript の変数名などの名前空間を Google Personalized Homepage 本体(および他のインラインガジェット)と共有するため、特別な配慮が必要となります。このあたりの事情を完全に理解して作成するようにしてください。

画像の条件

最後に、スクリーンショットやサムネール、作者の顔写真などのに使用する画像の条件をご紹介します。

共通の条件

以下の条件はすべての画像データに共通です。

  • 画像ファイルは公開 Web サーバー上の robots.txt でブロックされていない場所になければなりません。
  • フォーマットは PNG が推奨されていますが、 GIFJPG も使用可能です。

これらの条件を満たさないと画像が正常に表示されないと思われますので、気をつけてください。

スクリーンショットに特有の条件

スクリーンショット画像はそのガジェット消費するページ上のスペースの予測を可能にするという役割があるため、少々追加の条件があります。条件は、通常のガジェットとインラインガジェットで異なっています。

通常のガジェット
タイトルバーも含めてガジェット全体が写っており、余分な余白を含まないスクリーンショットの画像。
インラインガジェット
主な機能を表現するキャプチャー画像。代わりにユーザー設定の編集ウインドウを開いた状態の画像でも良い。

また、いずれの場合もリサイズや縁取りなどの加工はしてはならないとされています。

本日は、 Google Gadgets のガジェット設定について詳細をご紹介しました。これらのパラメータを把握すれば、ガジェットディレクトリに登録できる「まっとうな」 Google Gadgets を作ることができます。次回は、ユーザーが設定可能なパラメータを定義する「ユーザー設定」についてご紹介しようと思います。できることの幅がだいぶ広がりますので、お見逃しなく!

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles