本日は、 iGoogle ガジェットで使える機能別ライブラリの中から、 Tabs ライブラリをご紹介します。その名のとおり、ガジェット内にタブを表示して表示内容を切り替えられるようにするものです。既存のガジェットでは、 Interesting Items For You で使われていますね。前回の記事でご紹介した SetPrefs, Dynamic Height ライブラリと違い、簡単な手順で高度な GUI を実現する、わりと派手めなライブラリです。ガジェットの表示面積は限られていますから、うまく活用して多くの情報をコンパクトにまとめたいですね。

それでは、さっそく使い方を見ていきましょう。なお、機能別ライブラリの基本事項については前回の記事でご紹介しています。機能別ライブラリにはじめて触れる方は、最初にそちらをご参照ください。

前回の記事でもご紹介したとおり、機能別ライブラリを利用するにはガジェットのソースファイルに Require タグを記述する必要があります。また、 Tabs ライブラリ単独でも利用可能ですが、 SetPrefs ライブラリと併用するとタブの選択状態が自動的に保存され、前回の選択状態が再現されるようになります。これらのフル機能を利用するための記述は以下のようになります。

<ModulePrefs ... >
  <Require feature="tabs"/>
  <Require feature="setprefs"/>
</ModulePrefs>
<!-- カレントタブを保存するユーザー設定を用意する -->
<UserPref name="selectedTab" datatype="hidden"/>

Tabs と SetPrefs のライブラリを読み込むように宣言し、タブの選択状態を保存するためのユーザー設定項目 "selectedTab" の宣言も行っています。このユーザー設定の名前は固定ですのでご注意ください。さらに、タブを正常に表示するための CSS をインポートしなければなりません。以下の記述をガジェットの HTML 記述部分のどこかに挿入してください。

<style type="text/css">
@import url(http://www.google.com/ig/tablib.css);
</style>

これで Tabs ライブラリが利用できるようになります。

Tabs ライブラリを利用するには、まずは以下のようにして IG_Tabs クラスのインスタンスを作成する必要があります。

var tabs = new _IG_Tabs(モジュールID[, 選択するタブ[, コンテナ要素]]);

モジュールID は __MODULE_ID__ に固定です（URL ガジェットを除く）。選択するタブは初期状態で表示するタブの名前です。コンテナ要素を指定すると、タブがその要素の内部に表示されるようになります。省略するとガジェットの最上部に表示されます。

IG_Tabs 関数でインスタンスを作成したら、後述のメソッドでタブの作成などを行うことになります。

_IG_Tabs クラスには以下のメソッドがあります。

addTab(タブの名前[, オプション])

タブを新規作成します。タブの名前はタブに表示する文字列で、 HTML を含めることもできます。オプションの詳細は後述します。返り値として表示内容を格納した div 要素（コンテンツ div）の ID が返るので、それを使って作成後に表示内容を追加・変更できます。

addDynamicTab(タブの名前, コールバック関数)

コールバック関数によって内容が動的に生成されるタブを新規作成します。タブの名前はタブに表示する文字列、コールバック関数はタブが選択されるたびに呼ばれる関数です。返り値は addTab と同じです。

getTabs()

すべてのタブオブジェクトを格納した配列を返します。タブオブジェクトの詳細は後述します。

getSelectedTab()

現在選択されているタブオブジェクトを返します。タブオブジェクトの詳細は後述します。

setSelectedTab(インデックス)

インデックスで指定したタブを選択し、必要ならコールバック関数を実行します。インデックスは一番左のタブを 0 とした番号です。タブの配置を変えるとそれに伴ってインデックスも変化するので注意してください。

moveTab(タブ1, タブ2)

指定した 2 つのタブを入れ替えます。タブ1、タブ2はいずれも setSelectedTab の引数と同じインデックスです。

removeTab(インデックス)

インデックスで指定したタブを削除します。インデックスは setSelectedTab の引数と同じです。

alignTabs(モード[, オフセット])

タブの配置方法を指定します。モードは "left", "center", "right" のいずれかの文字列（必ず小文字）で、それぞれ左寄せ、中央寄せ、右寄せを指定します。オフセットは左寄せまたは右寄せのときにガジェットの端とタブの間のピクセル数を指定します。デフォルトは 3px です。

displayTabs(フラグ)

すべてのタブ、および内容の表示を制御します。フラグに true を指定すると表示、 false なら非表示となります。

getHeaderContainer()

タブを格納するコンテナ要素を返します。 IG_Tabs の第 3 引数で指定した要素、もしくは Tabs ライブラリが自動で作成した要素です。

単純にタブを表示するだけであれば、ドキュメントのロード時に addTab, addDynamicTab のどちらかでタブを作成するだけで OK です。あとの制御はすべてライブラリがやってくれます。具体的な記述についてはサンプルガジェットのソースをご覧ください。

前述の addTab メソッドの第 2 引数には以下の要素を持ったオブジェクトを指定できます。

contentContainer

タブの表示内容を格納した既存の HTML 要素を指定します。

callback

タブが選択された際に呼び出されるコールバック関数を指定します。

tooltip

タブにマウスカーソルを重ねたときに表示されるツールチップの表示文字列を指定します。

index

タブの挿入位置をインデックスで指定します。 setSelectedTab の引数と同じものです。

例えば、以下のコードは、 ID が "tab_content" である HTML 要素を表示内容とするタブを「タブ」という名前で 3 番目に追加し、ツールチップに「タブの説明」と表示します。

tabs.addTab("タブ", {
  contentContainer: _gel("tab_content"),
  tooltip: "タブの説明",
  index: 2
});

また、 addTab メソッドの特殊な形として次のような呼び出し方もあります。

addTab(タブの名前, 表示内容のID[, コールバック])

タブの名前は通常の addTab と同じです。表示内容のIDはタブが選択されたときに表示される HTML 要素の ID です。前述の contentContainer が要素のオブジェクトそのものを指定するのに対して、こちらは ID 属性の文字列を指定します。もし該当する HTML 要素が存在しない場合は自動的に作成します。コールバックは通常の addTab に指定するものと同じです。

getSelectedTab, getTabs メソッドが返すタブオブジェクトは個々のタブの情報を格納しており、以下のメソッドを使ってそれらを取得できます。

getName()

タブの表示文字列を返します。

getNameContainer()

タブの表示に使われている HTML 要素を返します。 style 属性で個々のタブの表示スタイルを変更したり、 innerHTML への代入でタブの名前を変更するのに使えます。

getContentContainer()

タブの表示内容を格納する HTML 要素を返します。

getCallback()

タブが選択されたときに呼び出されるコールバック関数を返します。

getIndex()

タブのインデックスを返します。 setSelectedTab の引数と同じものです。

addTab, addDynamicTab メソッドで指定するコールバック関数は、以下の形式になります。

function(tabId) { ... }

tabId はコンテンツ div の ID です。この div に DOM API や innerHTML を使って内容を設定することで、タブの表示内容を変更できます。返り値はありません（無視されます）。

タブのデザインは CSS をオーバーライドすることである程度制御できます。 Tabs ライブラリが使用するクラス名には以下のものがあります。

実際のカスタマイズ例はこちらのページを参照してください。

サンプルとして、静的な内容やコールバックで生成した動的な内容をいろいろ取り混ぜたガジェットを作ってみました。 SetPrefs ライブラリも併用していますが、 Web ページに埋め込んだガジェットではユーザー設定が保存されないので、下のガジェットでは効果が出ません。そのあたりはご自分の iGoogle に追加してお試しください。

ソースコードは以下です。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Tabs"
               title_url="http://webos-goodies.jp/archives/51032475.html"
               height="120">
    <Require feature="setprefs"/>
    <Require feature="tabs"/>
  </ModulePrefs>
  <UserPref name="selectedTab" datatype="hidden"/>
  <Content type="html">
    <![CDATA[

<style type="text/css">
@import url(http://www.google.com/ig/tablib.css);
</style>

<script type="text/javascript">
function dynamicContent(tabId)
{
  var t = _gel(tabId)
  if(typeof(t.initialized) == "undefined")
  {
    var e = document.createElement('div')
    e.className = "sec";
    e.innerHTML = 'コールバックによる動的なコンテンツ';
    t.appendChild(e);
    t.initialized = true;
  }
}
function init()
{
  var tabs = new _IG_Tabs(__MODULE_ID__);
  _gel(tabs.addTab("InnerHTML")).innerHTML = '<div class="sec">innerHTML によるコンテンツ</div>';
  tabs.addTab("div", "hidden_div1");
  tabs.addTab("div+callback", "hidden_div2", dynamicContent);
  tabs.addDynamicTab("callback", dynamicContent);
}

_IG_RegisterOnloadHandler(init);
</script>

<style type="text/css">
.sec { font-size:12px; border: solid 1px gray; padding:4px; margin: 4px; }
</style>

<div class="sec">静的な内容はすべてのタブに表示されます。</div>

<div class="sec" id="hidden_div1" style="display:none;">divによるコンテンツ</div>
<div class="sec" id="hidden_div2" style="display:none;">divによるコンテンツ</div>

    ]]>
  </Content>
</Module>

本日は、 Google Universal ガジェットでタブ・インターフェースによる表示内容の切り替えを実現する方法をご紹介しました。小さなガジェット内に多くの情報を収めるためには、かなり有効なライブラリだと思います。ぜひ活用してください。次回は、ドラッグ＆ドロップを実現する Drag ライブラリをご紹介します。非常に簡単なコーディングでドラッグ＆ドロップの機能を付加できますので、お見逃しなく。