mixiアプリ » 技術仕様（RESTful API方式） » PC » タブを使ってみよう
タブを使ってみよう
mixiアプリの表示領域は、とても広いとは言えません。ユーザに快適な体験を提供するために、UIとしてタブを使うと、すっきりと整理された情報提供を行うことができます。
OpenSocialでは、タブを簡単に利用するための機能を規定しています。mixiアプリにおいてもこのタブ機能を利用することができます。
タブ機能の利用方法
mixiアプリにおいてタブ機能を利用するためには、APIで規定されたいくつかの機能を使う必要があります。それらを駆使することで、タブの設置はもちろん、選択されているタブが変更された際のイベントハンドラの登録や、タブの見た目を変更することも可能です。
タブ機能の利用宣言
OpenSocialにおいて、タブ機能は「tabs」という名前で規定されています。タブ機能を利用するために、Gadget XMLファイル内でRequire要素により、タブ機能を利用することを明記します。
<Module>
<ModulePrefs ...>
<Require feature="tabs" />
</ModulePrefs>
</Module>
DOM要素の準備
タブ機能を使って表示するコンテンツを、DOM要素として作成しておきます。以下のDOM要素が必要です。
- タブを配置するためのdiv要素（1つ）
- 各タブの内容となるdiv要素(１つ以上)
これらは、Gadget XMLファイルに静的に記述された要素、あるいはJavaScriptにより動的に生成した要素のどちらでも構いません。静的に記述する例として、以下を示します。
<div id="tabs"></div> <div id="ranking">Here's written the ranking.</div> <div id="news">Here's written what's new.</div>
タブの作成
準備した各DOM要素を使ってタブを作成する際に、以下のAPIを利用します。
- gadgets.TabSet() – タブ全体を作成、管理する。
- gadgets.TabSet.addTab() – タブを追加する。
先ほど紹介したDOM要素の記述例を使ったタブの作成コードを、以下に示します。
var tabs = new gadgets.TabSet(__MODULE_ID__, null, document.getElementById("tabs"));
var ranking = {
contentContainer: document.getElementById("ranking"),
callback: function() {
// do something...
}
};
tabs.addTab("Ranking", ranking);
var news = {
contentContainer: document.getElementById("news"),
callback: function() {
// do something...
}
};
tabs.addTab("News", news);
まず、gadgets.TabSetオブジェクトを生成します。その際、第3引数にタブを配置する位置となるDOM要素を指定します。
各タブを作成する際に、まずタブの情報を持つオブジェクト(上記のranking, news)を生成します。その際に指定可能なプロパティとして、以下があります。
- contentContainer – タブの内容となるDOM要素
- callback – タブが選択された際に呼び出されるイベントハンドラ関数
- tooltip – ツールチップヘルプの文字列
これらのプロパティ値を持つオブジェクトを作成した後、addTab()関数を使ってタブを追加登録します。その際、第1引数にはタブに表示する名称を、第2引数には先ほどのオブジェクトを指定します。これを登録したいタブの個数分行います。
以上の処理により、タブが表示されます。登録されたタブをクリックして選択すると、callbackプロパティに指定したコールバック関数が呼び出されます。
タブの配置位置の変更
タブUI全体の中で、各タブの配置位置を設定することができます。そのために、gadgets.TabSet.alignTabs()関数を利用します。
var tabs = ...;
tabs.alignTabs("left", 5);
alignTabs()関数の第1引数は、”left”, “center”, “right”のいずれかの文字列をセットします。また、第2引数は、タブUIの両端からの余白ピクセル数となります。
選択されているタブの取得
現在選択されているタブを、APIにより取得することができます。
var selected = tabs.getSelectedTab();
先ほど生成したgadgets.TabSetオブジェクトのgetSelectedTab()関数を呼び出すことで、選択されているタブの情報を得ることが可能です。getSelectedTab()関数の結果は、gadgets.Tabオブジェクトとなります。例えば、このオブジェクトのgetCallback()関数により、イベントハンドラとして登録されている関数オブジェクトを得ることができますので、以下のようにすることで、明示的にコールバック関数を実行することも可能です。
var selected = tabs.getSelectedTab(); var callback = selected.getCallback(); callback.call();
デザインの変更
描画されたタブのUIは、3つの部分から成り立っています。これらの部分を構成するDOM要素を、APIを利用して取得することができます。
- 複数のタブを持つコンテナ – gadgets.TabSet.getHeaderContainer()
- それぞれのタブ – gadgets.Tab.getNameContainer()
- タブのコンテンツ – gadgets.Tab.getContentContainer()
それぞれの取得結果のDOM要素のstyle属性を操作することで、タブのデザインをmixiアプリ独自に変更することが可能です。