本日は、 iGoogle ガジェット（Google Universal ガジェット）で利用できる JavaScript 拡張機能の後編として、機能別ライブラリの使用方法をご紹介・・・するつもりだったのですが、すべてのライブラリを網羅していたら例のごとく livedoor blog の文字数制限にひっかかるような気がしてきたので、ライブラリごとに別記事にすることにしました。こうしたほうが、後からライブラリが追加された場合も記事にしやすいですしね（ｗ。それに伴い、前回の記事のタイトル・内容も少々変更しました。ご了承ください。

ということで、本日は機能別ライブラリの基本的な利用方法と、 SetPrefs, Dynamic Height の 2 つのライブラリをご紹介します。これらのライブラリは使い方も非常に簡単なので、機能別ライブラリの入門用には最適でしょう。

それでは、まずは全般的なお話から始めましょう。

前回の記事では標準で利用可能な JavaScript 関数・クラスをご紹介しましたが、 Google Universal ガジェットではさらに高度な機能を実現する追加のライブラリがいくつか提供されています。それが機能別ライブラリです（公式ドキュメントには「Feature-Specific JavaScript Libraries」と書いてありますが、勝手に意訳しています＾＾；）。これらは標準状態では利用できませんが、ガジェットのソースファイルに特定の宣言（詳細は後述）を記述することで使えるようになります。これらのライブラリを活用することで、通常では困難な機能を実現したり、使いやすい UI を簡単に構築したりできます。とても便利なものが揃っているので、ぜひ使ってみてください。

現在のところ、以下のライブラリが提供されています。

これらは API のアップデートに伴って増えていますので、今後も便利なライブラリが続々と追加されることでしょう。楽しみですね。

前述のとおり、機能別ライブラリを利用するためには、ガジェットのソースファイル内で使用するライブラリを宣言する必要があります。具体的には、 ModulePrefs 要素の子要素として Require 要素を記述し、その feature 属性でライブラリを指定します。以下のような感じです。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="タブライブラリを読み込む例" height="200">
    <Require feature="tabs"/>
  </ModulePrefs>
 
  <!-- ...その他の記述... -->
 
</Module>

URL タイプのガジェットでは、さらに所定の方法で JavaScript ファイルを読み込む必要がありますのでご注意ください。具体的な方法は前回の記事でご紹介していますので、そちらをご参照ください。

SetPrefs ライブラリは、インラインでないガジェットにおいて JavaScript によるユーザー設定の変更を可能にするものです。ユーザー設定についてはユーザー設定の詳細をご参照ください。 SetPrefs ライブラリを利用するには、以下の Require 要素を記述します。

<Require feature="setprefs"/>

あとは、前回の記事でご紹介したのと同じ方法で _IG_Prefs クラスの set メソッドや setArray メソッドを利用すれば OK です。当然ながら、変更するユーザー設定項目はあらかじめ UserPref 要素で宣言しておかねばなりません。例えば、 "title" というユーザー設定項目に "Animal" という文字列を、 "items" という項目に ["dog", "cat", "mouse"] という配列保存するには、以下のようにします。

var prefs = new _IG_Prefs(__MODULE_ID__);
prefs.set("title", "Animal");
prefs.set("items", ["dog", "cat", "mouse"]);

さらに実践的な利用法は、後のサンプルガジェットをご参照ください。

こちらもインラインガジェットの利点をその他のガジェットにも提供するライブラリです。インラインでないガジェットは IFRAME で表示されるため、デフォルトではガジェットの高さが固定になってしまいます。表示内容が動的に変化するガジェットの実装にあたり、この制限は非常に厄介なものでした。しかし、このライブラリを利用することで、ガジェットの高さを表示内容に合わせてリサイズできるようになります。 Require 要素の記述は以下のようになります。

<Require feature="dynamic-height" />

Dynamic Height ライブラリを読み込むことで、 _IG_AdjustIFrameHeight() というグローバル関数が追加されます。

_IG_AdjustIFrameHeight([高さ])

この関数は、呼び出した時点の表示内容がすべて収まる高さにガジェットをリサイズします。表示内容を変更した後に呼び出せば、常にガジェットを最適な高さに保つことができるというわけです。引数の高さは非公式の機能ですが、整数を指定するとガジェットの高さがその値になります。サンプルガジェットで使っていますので、参考にしてください。

SetPrefs と Dynamic Height の両ライブラリを利用した簡単なガジェットを作ってみました。テキストボックスにガジェットの高さ（ピクセル数）を入力して「適用」ボタンをクリックすると、ガジェットがリサイズされます。入力した高さはユーザー設定に保存されるため、ページをリロードしても前回の高さが再現されます。Web ページに埋め込んだガジェットでは効果が出ないので、実際にご自分の iGoogle に追加してお試しください。以下のボタンで簡単に追加できます。

ガジェットの見た目はこんな感じ。単にテキストボックスとボタンがひとつずつあるだけです。

ソースは以下のようになっています。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="SetPrefs &amp; Dynamic Height"
               title_url="http://webos-goodies.jp/archives/51001788.html"
               height="25">
    <Require feature="setprefs"/>
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref name="height" datatype="hidden" default_value="25"/>
  <Content type="html">
    <![CDATA[

<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__);
function fit()
{
  var height = _max(Number(_gel('height').value), 25);
  _gel('height').value = height;
  _gel('wrap').style.height = height + 'px';
  _IG_AdjustIFrameHeight();
  prefs.set('height', height);
}
_IG_RegisterOnloadHandler(fit)
</script>

<div id="wrap" style="overflow: hidden;">
  <form onsubmit="fit();return false;">
    <input id="height" type="text" size="8" value="__UP_height__"/>
    <input type="submit" value="驕ゥ逕ィ"/>
  </form>
</div>

    ]]>
  </Content>
</Module>

ほとんど説明するまでもないかもしれませんが、肝は fit 関数です。この関数内でテキストボックスの内容を読み取り、その値を _IG_AdjustIFrameHeight 関数に渡してガジェットをリサイズしています。その後、 _IG_Prefs クラスの set メソッドで "height" というユーザー設定に高さを保存しています。その他にも Google Universal ガジェット特有の関数をいくつか使用していますが、それらに関しては前回の記事をご参照ください。

以上、本日は SetPrefs, Dynamic Height ライブラリの使い方をご紹介しました。これらを使えば、インラインでないガジェットの不満点の多くが解消されます。機能別ライブラリは他にもまだまだありますので、今後はそれらを個別にご紹介していこうと思います。どうぞご期待ください！（＾＾）