連載

2010年5月17日

Titaniumで始めるモバイルアプリ作成の基礎知識：Web技術でネイティブアプリを作れるTitanium（2）（3/3 ページ）

iPad/iPhone VS Androidに戸惑っているWebデザイナ／開発者のために、Web技術でネイティブアプリを作れるオープンソースの開発ツールを紹介し、その利点や使い方を連載で解説します

[立薗理彦，＠IT] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

app.jsのソースコードを読む

新規作成されたプロジェクトのapp.jsです。

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

　最初に、画面の背景色を指定しています。「Titanium」がTianium API全般のネームスペースで「UI」に、UI構築に関連したAPIがまとめられています。

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

　UIパーツの「TabGroup」を作成しています。iPhoneアプリでよく見かける画面下部のタブバーを作成します。

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
 
var label1 = Titanium.UI.createLabel({
        color:'#999',
        text:'I am Window 1',
        font:{fontSize:20,fontFamily:'Helvetica Neue'},
        textAlign:'center',
        width:'auto'
});
 
win1.add(label1);

　「Titanium.UI.Window」オブジェクトを作成した後「Titanium.UI.Label」オブジェクトを作成してWindowに追加しています。Windowオブジェクト自体は、タブの1つ1つの項目を構築する「Titanium.UI.Tab」に内包されています。

　2つ目のタブ項目については、繰り返しなので省略します。最後に、タブ項目を最初に準備した「Titanium.UI.TabGroup」に追加しています。

//
//  add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

　この後で、「Titanium.UI.TabGroup」の「open」が呼び出されています。

// open tab group
tabGroup.open();

　詳細なAPIの解説は省きましたが、Titanium MobileでUIを構築するイメージがつかめたでしょうか？また、iPhone OS SDKを使ったアプリ開発をすでに経験している方は、「Window」「Label（View）」といった概念に親近感を覚えたかもしれません。

　Titanium Mobileでは、このようにapp.jsが起点となってUIが構築されていきます。後述するファイルインクルードや、Window作成時に構築用のJavaScriptファイルを指定することで、app.js以外の分割されたファイルをプロジェクトに追加していくこともできます。

Titanium Mobileの勘所

　Titanium Mobile 1.0のリリースとともに、デモアプリケーション「Kitchen Sink」もアップデートされています。

　Titanium Mobileで実現可能なUIのデモのほか、API呼び出しの実働サンプルとして非常に参考になるので、ぜひダウンロードしておいてください。

Kitchen Sink via kwout

　ここでは、そうしたAPIを組み合わせてTitanium Mobileでプログラミングしていく際の、ポイントとなる概念について解説します。

WindowとView

　Titanium Mobileでは、画面上に表示される「Window」と、Window上に追加される「View」を使ってUIを構築します。WindowはPCなどでもおなじみの概念で、1つのアプリケーションは複数のWIndowを開いた状態で動作します。

　ただし、iPhone上で表示されるWindowは常に1つとなります。表示するWindowを切り替えることで、さまざまなUI画面をユーザーに提供できます。

　Windowに追加されることで画面上に表示されるUIパーツが「View」です。Viewは広い範囲をカバーするパーツで、例えばiPodの楽曲タイトル一覧ビューのように画面いっぱいに表示され単体で役割を果たすものや、ボタンのように小さなサイズで画面の一部に表示されいくつかが集まってUIを構築するものがあります。

JavaScriptファイル分割と「コンテキスト」

　Titanium Mobileでは、app.jsというJavaScriptファイルを起点にして、そのほかのJavaScriptファイルを呼び出していくということは、すでに説明しました。

　このときに重要になるのが「コンテキスト」という概念です。コンテキストとは、JavaScriptが実行される際の、変数・オブジェクト・関数のスコープの範囲であり、同時にJavaScriptを実行するスレッドの単位です。

　あるJavaScriptファイルで宣言した変数や関数は、別のJavaScriptファイルから参照できません。つまり、異なるコンテキスト間では、変数や関数を共有できません。

　Titanium Mobileでは、主に次の2つの方法で別ファイル中のJavaScriptを呼び出します。それぞれに、コンテキストの扱いが異なります。

?Titanium.include('ファイル名.js')
JavaScriptファイルをインクルードするTitaniumのAPI。インクルードされたJavaScriptは、インクルード元のコンテクストで実行される。相互に変数や関数を参照可能

?Titanium.UI.createWindow({ url:'ファイル名.js' })
Titanium.UI.Windowを生成する際に、オプションパラメータ'url'でインクルードファイルを指定すると、新しいコンテキストでJavaScriptが実行される。変数や関数は、それぞれ別物として参照される

app.jsの例

            Ti.App.Include('library.js');
            someLibraryFunction();

library.jsの例

            function someLibraryFunction() {
                alert('someLibraryFunction called');
            }

　Titanium.UI.createWindowは、UI上に新規ウィンドウを作成してインクルード先ファイルの中のコードに従ってコンテンツを描画します（あるいは、まったく関係のないタスクを行います）。コンテクストが分かれるので、データをやりとりする際は以下の処理を追加する必要があります。

「fireEvent」によるイベントメッセージ

　異なるコンテキストの間でデータの送受信や関数の呼び出しを行う場合、Ti.App.fireEventとTi.App.addEventListenerのペアを利用します。Ti.App.addEventListenerは、アプリケーション中でグローバルなイベントハンドラを設定します。Ti.App.fireEventは、上記のグローバルイベントを発生させることでハンドラを呼び出します。

app.jsの例

        Ti.App.addEventListener('button_click', function(e)
            {
                alert('click detected: value = ' + e.arg1)
            });

window2.jsの例

        Ti.App.fireEvent('button_click', { arg1:'arg1 string'});

　app.jsとwindow2.jsは異なるコンテキストで実行されているが、'button_click'イベントを経由してwindow2.jsのコンテキストのデータを、app.jsのコンテキストで受信して、さらにapp.jsのコードが実行されます。

　このメッセージングシステムによって、異なるコンテキストでデータのやりとりと処理の呼び出しが可能になるほか、システムをモジュール化するうえで、機能間の結合を疎にすることを実現しています。

　例えば、window2.jsのfireEventは、'button_click'がどの機能でハンドルされるか、分からないままに送信されています。逆に、app.jsのイベントハンドラは、イベントの送信元を意識する必要がありません（意識できません）。

Titanium.App.setProperties / Titanium.App.getProperties

　上記の方法のほかに、アプリケション・グローバルに値を保存するAPIがTitanium.App.setPropertiesです。

こちらは、「整数」「文字列」「配列」に名前を付けて保存、呼び出しができます。気を付けなければならないのは、このAPIはいわゆる「アプリケーション設定」に近い使い方が想定されていて、「一度保存した値はリセットしない限り保持され続ける」ということです。アプリケーションが終了する際には、自動的に外部に保存され、次回起動時に同じ値がロードされます。

　このため、一度限りの関数呼び出しなどにこの仕組みを使うときは、実行される関数側で値がクリアされることを保証する必要があります。

Appceleratorとアップルの続報に注目

　本稿では、Titanium Mobileを使った開発の実際についてまとめました。WindowとView はUIを構築する際の、基本となる概念です。また、オブジェクトインスタンスのスコープ管理のベースとなるコンテキストの理解も、中規模以上のアプリケーションでは必須となります。ここを押さえることで、Titanium Mobileを使ったアプリケーション開発をより自信を持って行えることでしょう。

　iPhone OS 4.0 SDKライセンスの公開によって、大きく運命の変わった感があるTitanium。現時点でも「JavaScriptなどのWebテクノロジーを使った開発環境」という優位点は残りますが、大きなシェアと人気を持つiPhoneが、万が一サポートから外れるとなると、大きな痛手となることは間違いありません。引き続き、Appcelerator社とアップルの続報に注目したいと思います。