このエントリーを含むはてなブックマークはてなブックマーク - TitaniumMobile開発Tipsその１ ～JSファイルの分割～ この記事をクリップ！Livedoorクリップ - TitaniumMobile開発Tipsその１ ～JSファイルの分割～ Yahoo!ブックマークに登録 @niftyクリップに追加 Share on Tumblr FC2ブックマークへ追加 newsing it! Googleブックマークに追加 Bookmark this on Delicious FriendFeedで共有 このエントリをつぶやくこのWebページのtweets

こんにちは。モバイル事業部の佐野です。
今回はJSファイルの分割とコンテキストについて説明したいと思います。
TitaniumStudio等で新規にプロジェクトを作成すると、すべてapp.jsにコードが書かれていると思います。

ここからアプリを作っていく場合に全てをapp.jsに書くのはコードが読みづらいし、
機能別とか画面単位に分けたいと感じると思います。

解決策としては以下の方法があります。
①createWindowのurlプロパティに処理ファイルを指定する方法
②ファイルをincludeする方法

この2つの方法において以下のような違いがあります。
①ソース間の変数参照が出来ない(別コンテキストのため、変数スコープが別になっている)
②ソース間の変数参照出来る(同一コンテキストのため、変数スコープが同一になっている)

各機能間等で変数参照を行うことが多いので②の方法が推奨されています。
今回は②ファイルをincludeする方法についてソースを見ながら簡単に説明したいと思います。

今回使用するのはTitanium.includeメソッドになります。
Titanium.includeメソッド【API Reference】
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.include-method.html

パラメタに読み込みたいJSファイルを指定するだけです。
これを以下のソースからincludeメソッドを修正します。

【app.js】

//win1を生成し、ラベルを設定する部分を別ソースにしたい
var win1 = Titanium.UI.createWindow({
    title:'Win 1',
    backgroundColor:'#fff'
});
var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
win1.add(label1);
win1.open();

上記のソースでUI部分を②の方法でファイル分割すると下記の通りになります。

【app.js】

//名前空間を定義
var test = {};
//別ソースを読み込む
Titanium.include('ui.js')
//別ソースで定義したWindowオブジェクト生成メソッドを呼び出す
var win1 = test.ui.createWindow();
win1.open();

【ui.js】

(function(){
    //UI用の名前空間を定義
    test.ui = {};
    //Windowオブジェクト生成メソッドを定義
    test.ui.createWindow = function(){
        //Windowsオブジェクトの生成
        var win = Titanium.UI.createWindow({
            title:'Win 1',
            backgroundColor:'#fff'
        });
        //Labelオブジェクトの生成
        var label = Titanium.UI.createLabel({
            color:'#999',
            text:'I am Window',
            font:{fontSize:20,fontFamily:'Helvetica Neue'},
            textAlign:'center',
            width:'auto'
        });
        //labelをwinに設定
        win.add(label);
        return win;
    };
})();

Titanium.includeでは指定したJSファイルをそのまま置換するのと同じです。
上記のように分割することが出来るので、UIだけでなく、ネットワーク処理、DB処理も同様に分割することで
読みやすく、メンテしやすいソースになると思います。

m-sano