先週、ついに次世代 iGoogle が日本語で利用可能になりました（次世代 iGoogle についてはこちらの記事をご参照ください）。まだ重要な機能が動作しないこともありますが、いよいよ本格的な公開に向けて準備が進んでいるということなのでしょう。

さて、この次世代 iGoogle 、新機能の核となるのはやはり OpenSocial によるソーシャル機能なのですが、ガジェットのコア API に関しても OpenSocial の仕様に合わせてアップデートや機能強化が行われています。とくに canvas view や外部コンテンツへのアクセス機能の強化などは、従来型のガジェットにとっても非常に魅力的な機能だと思います。

そこで本日は、すでに旧 Gadgets API を習得している方を対象にして、新旧 API の違いをまとめてご紹介することにしました。旧 Gadgets API を活用されていた方なら、これを読むだけですんなりと新 API に移行できることでしょう。ぜひご一読いただき、次世代 iGoogle を活用したガジェット作成に挑戦してください！

※ 新 API では、旧 API に存在した機能のいくつかがサポート外になっています。記事中ではそれを「この機能は廃止された」と表現していますが、これはあくまで新 API の仕様から削除されたということで、 iGoogle 上で使えなくなるわけではありません。 Google は旧 API も当面の間はサポートしていくと表明していますので、ご安心ください。

ご存知のように iGoogle ガジェットのソースは XML 形式になっています。この XML の仕様も若干追加されていて、ガジェットのアイコンの指定やファイルのプリロードなど、興味深いものがいくつかあります。しかし、残念ながらこれらは今のところ機能していないように見えるので、今回は割愛させていただきます。興味のある方は以下のページをご参照ください。

http://code.google.com/apis/gadgets/docs/reference.html

XML spec の仕様追加で最大のものは canvas view に関するもので、これは非常に重要なので少し詳しくご紹介します。

次世代 iGoogle ではタイトルバーに最大化ボタンが新設され、ひとつのガジェットのみを最大化して表示することが可能になりました。その最大化した状態を canvas view と言います。これに対して、従来の複数のガジェットを並べて表示する状態を home view と呼びます。 canvas view には home view とはまったく別の内容を表示することができますので、大きい画面を活用して本格的な Web アプリケーションの構築が可能になります。

もうひとつ canvas view の大きな利点として、広告表示が可能な点が挙げられます。これまではサービス利用規約によって iGoogle ガジェット内の広告表示は禁止されていたのですが、この制限が緩和され、 canvas view には広告を表示できることになりました。詳細は FAQ の「収益化」の部分をご参照ください。

今後の iGoogle ガジェット開発では canvas view をいかに活用するかが大きなポイントになってくるでしょう。基本的な使い方を以下でご紹介しますので、ぜひ実際に試してみてください。

ガジェットで canvas view をサポートするには、 Content タグの view 属性を指定します。 home view と canvas view で別々の内容を表示する場合は、以下のように 2 つの Content タグを記述し、それぞれの view 属性で表示すす view を指定します。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Home / Canvas view sample" height="50" />
  <Content type="html" view="home">
    <![CDATA[
      Home
    ]]>
  </Content>
  <Content type="html" view="canvas">
    <![CDATA[
      Canvas
    ]]>
  </Content>
</Module>

canvas view をサポートしていない現行 iGoogle では、 view 属性を省略した Content タグか、それがなければ先頭の Content タグが使用されます。従って、上記の例では Home view の内容が表示されることになります。

view 属性には複数の view をコンマ区切りで記述できますので、 home / canvas view （および現行 iGoogle）で同じ内容を表示したい場合は、以下のように記述できます。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Home / Canvas view sample" height="50" />
  <Content type="html" view="home, canvas">
    <![CDATA[
      どの view でも同じ内容が表示される
    ]]>
  </Content>
</Module>

また、 views 機能別ライブラリを読み込むと、現在の view の取得や他の view への切り替えなどを行うメソッドが使えます。以下は現在のビューを表示するガジェットです。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="テスト" height="46">
    <Require feature="views" />
  </ModulePrefs>
  <Content type="html" view="home,canvas">
    <![CDATA[
      <script type="text/javascript">
        document.open();
        document.write(gadgets.views.getCurrentView().getName());
        document.close();
      </script>
    ]]>
  </Content>
</Module>

スクリプトで view を切り替える際には、新しい view にパラメータを引き渡すことも可能です。いろいろと面白いことができそうですね。そのあたりの詳細は以下のリファレンスをご参照ください。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.views.html

旧 API では JavaScript API のほとんどがグローバルな名前空間で定義されており、ライブラリとしては少々行儀の悪いものでした。その反省からか、新 API ではすべてのクラス・関数が gadgets という名前空間内に移動されており、そのために見た目がまったく違うものになっています。

また、とくに外部コンテンツへのアクセス周りなどは構成も大きく変わっていて面倒ですが、その分機能も強化されていますので、頑張ってマスターしてください。

ユーザー設定の取得・更新を行う _IG_Prefs クラスは、 gadgets.Prefs に名称変更されました。使い方は同じで、機能別ライブラリの setprefs を読み込まないと set メソッドが使えないのも従来どおりです。さらに getFloat, getCountry, getLang, getModuleId といったメソッドが増えています。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.Prefs.html

また、こちらの記事でご紹介したユーザー設定の共有機能が公式に取り入れられたようです。使い方もまったく同じです。

http://code.google.com/apis/gadgets/docs/basic.html#Userprefs

_IG_Fetch〜系の関数は廃止され、 gadgets.io.makeRequest というメソッドに統合されました。 OAuth による認証、 JSON の解析、 HTTP リクエストヘッダのカスタマイズ、 GET 以外のメソッドへの対応など、大幅な機能強化が図られています。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.io.html#makeRequest

多機能になったために使い方が少々わかりづらいのですが、単純にファイルを文字列として読み込むだけなら、以下のように実装できます。

var params = []
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
gadgets.io.makeRequest('http://www.exapmle.com/foo.txt', function(response) {
  alert(response.text);
}, params);

gadgets.io.makeRequest の第二引数に指定するパラメータによって、さまざまな機能が利用できます。詳細は開発ガイドを参照してください。ちなみに開発ガイドにはフィードの読み込みまだが実装されていないという記述がありますが、試してみたところ普通に動くようです。たぶん OpenSocial のドキュメントをコピペしたまま直していないのでしょう。

ドキュメントの読み込みが完了した際に呼び出される関数を指定する _IG_RegisterOnloadHandler 相当のメソッドとして、 gadgets.util.registerOnLoadHandler が用意されています。使い方もまったく同じです。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.util.html#registerOnLoadHandler

ガジェットで使用する画像、外部 CSS ファイル、外部 JavaScript ファイルなどの読み込みを高速化するため、旧 API では _IG_GetImage, _IG_GetCachedUrl という 2 つの関数が用意されていました（昔は _IG_GetImageUrl というのもあったはずですが、いつの間にかなくなってますね）。

これらのうち _IG_GetImage は廃止され、 _IG_GetCachedUrl 相等の gadgets.io.getProxyUrl に統一されたました。ただしキャッシュの更新間隔を指定するオプションは廃止されています。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.io.html#getProxyUrl

従って、 _IG_GetImage の機能が必要なときは自分で実装することになります。たぶんこんな感じじゃないでしょうか。

function _IG_GetImage(url) {
  var e = document.createElement('IMG');
  e.src = gadgets.io.getProxyUrl(url);
  return e;
}

ちなみに、現在の sandbox では既存のガジェットでも _IG_GetImage が使えなくなっているようです。たぶんバグではないかと思いますが、既存のガジェットで _IG_GetImage を使っている方は、念のため修正しておくことをお勧めします。

以下のユーティリティー関数は軒並み廃止されているようです。

_gel, _gelstn, _toggle, _esc, _unesc, _hesc, _trim, _uc, _min, _max, _args

これらのほとんどは代替となる関数もないので、必要ならば同等の関数を自分で定義する必要があります。いずれも実装は非常に簡単なので、さほどの負担にはならないでしょう。

_hesc, _args については、それぞれ gadgets.util.escapeString, gadgets.util.getUrlParameters がほぼ同機能を提供しています。 gadgets.util には他にも便利な関数がいくつかありますので、確認しておきましょう。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.util.html

Require タグで読み込むことで利用可能になる機能別ライブラリも、 gadgets 名前空間への移動に伴う名称変更が行われています。しかし、こちらは標準 API と違って仕様はほぼそのままなので、把握するのはとても簡単です。

ただ、残念なことに drag, grid, analytics, finance といったライブラリは廃止されたようです。最初に書いたように当面の間は旧 API も利用可能ですが、これらのライブラリは使わないようにしたほうが無難かもしれません。

ガジェットのサイズ（高さ）を動的に変更する _IG_AdjustIFrameHeight は、 gadgets.window.adjustHeight に変更されました。第一引数にピクセル数を与えることで、明示的に高さを指定することもできます。実はこの第一引数は旧 API でも密かにサポートされていたんですけどね。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.window.html#adjustHeight

ガジェットのタイトルを変更する _IG_SetTitle も gadgets.window.setTitle に変更されました。使い方はまったく同じです。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.window.html#setTitle

_IG_Tabs クラスは gadgets.TabSet クラスに変更され、 getSelectedTab メソッドなどで取得できる tab object には gadgets.Tab という正式なクラス名が与えられました。 gadgets.TabSet クラスのメソッドには以下の変更があります。

• 3 引数の addTab, addDynamicTab は廃止。
• moveTab は swapTab に変更。機能は同じ。
• 旧 API にあった選択状態の自動保存は廃止されるようです。

ただし、実際には swapTab メソッドはまだ実装されておらず、開発ガイドでは旧仕様の addTab が解説されているなど、混乱した状態です。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.TabSet.html

_IG_MiniMessage クラスは gadgets.MiniMessage クラスに変更されました。メソッドなどの仕様は変わっていないようです。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.MiniMessage.html

旧 API ではグローバル関数として実装されていましたが、 gadgets.flash 名前空間に移動されました。仕様も以下のように変更されています。

_IG_EmbedFlash

gadgets.flash.embedFlash に変更されました。第一、第二引数は同じですが、従来はオプションだった Flash プレイヤーのバージョンを第三引数に指定するようになりました。第四引数は Flash に引き渡すパラメータです。

_IG_GetFlashMajorVersion

gadgets.flash.getMajorVersion に変更されました。

さらに、 Google 側でキャッシュした .swf を読み込む gadgets.flash.embedCachedFlash が新設されました。使い方は embedFlash と同じです。

http://code.google.com/intl/ja/apis/gadgets/docs/reference/gadgets.flash.html

以前こちらの記事でご紹介したガジェット間通信機能「pubsub」が正式機能として取り入れられました。従来は UserPref タグを拡張するという、ちょっと無理矢理な仕様でしたが、新 API では他のライブラリと同様に JavaScript API になっています。

http://code.google.com/apis/gadgets/docs/reference/#gadgets.pubsub

具体的な使用方法の説明がないのではっきりしませんが、おそらく以下のようにして使うのだと思います。

1. 受信側のガジェットで gadgets.pubsub.subscribe を呼び出し、コールバック関数を登録しておく。
2. 送信側のガジェットで gadgets.pubsub.publish を呼び出し、メッセージを送信する。
3. 受信側で登録したコールバック関数がメッセージを引数にして呼び出される。

まだ実際に検証はできていないので、時間を見て試してみたいと思っています。

以上、本日は次世代 iGoogle で利用可能になる新 Gadgets API を、旧 API からの変更点を中心にしてご紹介しました。次世代 iGoogle は米国でも正式公開されていませんので、ほとんど未開拓のフロンティアです。ガジェット開発者にとっては大きなチャンスと言えるでしょう。ぜひ今のうちからノウハウを蓄積して、正式公開に備えましょう！

そうそう、次世代 iGoogle の最新情報は Gadgets API Japan グループでお届けしています。まだ参加されていない方は、この機会にご参加ください。