連載
» 2010年05月17日 00時00分 公開

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

[立薗理彦,@IT]
前のページへ 1|2|3       

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呼び出しの実働サンプルとして非常に参考になるので、ぜひダウンロードしておいてください。

 ここでは、そうした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社とアップルの続報に注目したいと思います。

See also...

 筆者はTwitterにアカウントを持っており、Titaniumに関する最新情報やそのほかのiPhoneアプリ開発に関するつぶやきや、TVドラマ「LOST」などまったく関係のないつぶやきを読めます。

 この記事を読んで興味が沸いた人は、ぜひ筆者のTwitterアカウント(@mshk)をフォローしてみてください。感想やご意見、Titaniumに関する新しい情報なども大歓迎です。

著者紹介

立薗理彦(たちぞの まさひこ)

1972年東京生まれ。1996年、慶應大学 環境情報学部卒。シャープで組み込み系のソフトウェアエンジニアとして働いた後、携帯電話メーカーのノキアで日本向け端末のリリースに携わる。

この頃、週末プロジェクトとしてiTunesでの再生履歴をネットで公開するサービス「音ログ」を開発。これをきっかけに、ウェブ業界への転身を決意してフリーに。

その後、音楽ニュースサイト「ナタリー」の立ち上げに関わり、2007年10月から技術担当取締役としてナターシャに参加。現在に至る。

最近の興味は、iPhoneでのアプリケーション開発。

趣味は、TVドラマ「Lost」を繰り返し見ること。全シーズンをすでに3回以上見ていて、ハワイでのロケ地ツアーにも3回参加。


著者つぶやき

http://mshk.tumblr.com/

http://twitter.com/mshk

http://friendfeed.com/rooms/sweet-tweet



前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。