iGoogleガジェット制作の基本

ガジェットのtype

　ガジェットの本体（動作部分）は、Contentタグ部分に記述していきます。このContentタグのtype属性には、"html"もしくは"url"を指定します。

　type="html"を指定すると、Contentタグの中にCDATAとして、HTMLやJavaScriptを記述することができます。iGoogle上にガジェットとして表示される際は、iframeとしてページに追加されます。

　そのため、JavaScriptやHTMLの名前空間はガジェット内で保証されるので、ガジェット間でのJavaScriptのグローバル変数やHTMLのid属性値の衝突は発生しません。1ページ目で紹介したHello worldガジェットもこのタイプのガジェットになります。

　type="url"を指定すると、href属性が必須となります。このガジェットは、href属性に指定したURLのページをiframeとして表示するガジェットになります。

　通常、ガジェットを作成する場合は、type="html"のガジェットを作成します。

　type="html"のガジェットの方がGoogleが提供するガジェットのJavaScriptライブラリを簡単に利用することができます。Googleが提供するJavaScriptライブラリは、クロスドメインのRSSを簡単に取得できたり、ガジェット内にタブのUIを提供したり、ユーザの情報を保存できたりと、便利なものがそろえられています。

　type="url"を選択するときは、すでに公開している（されている）Webアプリケーションをガジェットにしたい場合にしましょう。特に、そのWebアプリケーションがログインを必要とするものであれば、type="url"で作る方が適しています。

　また、Googleガジェットにはtype="html-inline"というガジェットも存在します。

　inlineという名前が示す通り、この指定をされたガジェットはiGoogleのページにinline要素として表示されます（type="html"はcontentsタグの中身がHTMLとして評価されiframeで表示されます）。iGoogleのページにinline要素として表示できるので、iGoogleのページのデザインを変更したり、画像を変更したりと、かなり自由なことができるものでした。そのため、セキュリティ上の観点から、新規でこのタイプのガジェットをコンテンツディレクトリに登録することができなくなっています。

　例えば、このガジェット「Custom iGoogle Skins」は、iGoogleのデザインを変更するガジェットになります。

ガジェットの上で外部JavaScriptライブラリや画像の利用

　type="html"のガジェットの場合、contentタグの中に、HTMLとJavaScriptを使ってガジェットのコンテンツを記述してきます。その際、外部JavaScriptファイルとしてprototye.jsやjQueryといったライブラリを読み込んで利用したり、サーバ上の画像を表示したりすることができます。

　ただし、JavaScriptファイルや画像ファイルのURLの指定先は、絶対パスを指定するようにしてください。相対パスで指定されていた場合、iGoogle上にガジェットとして表示されたときに、リンク切れが発生し、正しく動作しません。