Titnaium Mobile とは
Titanium MobileはJavascriptを用いてiOSやAndroidなどのネイティブアプリケーションを開発できるツールです。このTitanium Mobileですが、昨年12月のSDK3.0リリースで大幅に機能が追加され、格段便利になりました。それが今回ご紹介する「Alloy」です。
AlloyはTitanium Mobile公式のMVCフレームワークで、従来のJavascriptを用いたデザイン記法から一変して、XMLによるマークアップとTSSによるスタイル指定が導入されました。その他にもデータバインディング機能、テーマ機能、Widget機能など、開発をサポートする様々な機能が追加されました。
先だってTitaniumを用いてチーム開発を行った際も、プロジェクト構造やコードの記法など、Alloyで決められた共通ルールに従うことで、チーム間の意識統一は容易になり効率的な開発をすることができました。
Alloyでリスト作成
今回はAlloyの入門としてスマホアプリによく見るリスト表示のサンプルを解説したいと思います。
Alloyの新規プロジェクト作成
Titanium Mobileの開発環境Titanium Studio 3.0.0から新規プロジェクト作成でAlloyのプロジェクトを作成できるようになりました。プロジェクトテンプレートが選べるので、ここでは「Default Alloy Project」を選んでプロジェクトを作成します。
プロジェクトフォルダを見てみましょう。以下のようなフォルダができました。Alloyのソースコードはappフォルダに入っています。
appフォルダのcontroller、view、tssフォルダを開いてください。それぞれindex.jsとindex.xmlとindex.tssというファイルが入っています。indexはアプリの初期画面になります。
それではこの状態で一度Alloyをビルドしてみましょう。
Hello, World」と表示されました。
続いてソースコードを確認してみましょう。index.xmlを見てください。Windowの中にLabelが書かれていることがわかります。各タグにある属性idやclassはHTMLのidとclassと同様の働きをし、idは1つのタグに一意の値を、classは複数のタグに共通の値を指定することができます。さらにタグ内をみてみるともう1つonClickという属性があることがわかります。これはイベントハンドラです。index.jsを見てみましょう。イベントハンドラに対応するdoClick関数が記述されていることがわかります。
//index.xml <Alloy> <Window> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
//index.js
function doClick(e) {
alert($.label.text);
}
$.index.open(); // Window open!
AlloyでTableViewの作成
それではAlloyでリスト（TableView）を作成しましょう。index.xmlを以下のように書き換えます。
//index.xml <Alloy> <Window> <TableView id="tableView" /> </Window> </Alloy>
index.xmlに記述するのはこれだけです。TableViewの中の個々の行（TableViewRow）は別ファイルに定義します。プロジェクト右クリック[New]>[Alloy Controller]を選択し、開いたダイアログに新しいコントローラ名（ここではrow）を入力し[OK]をクリックします。
プロジェクトフォルダを再度確認してみましょう。row.jsとrow.tss、row.xmlの3つのファイルができています。それではrow.xmlとrow.tssに行のデザインを記述していきましょう。
//row.xml <Alloy> <TableViewRow id="row"> <Label id="title">Menu</Label> <ImageView id="image" image="/image1.jpg" /> </TableViewRow> </Alloy>
/*row.tss*/
"#row": {
width: Ti.UI.FILL,
height: "86dp",
},
"#title": {
width: Ti.UI.FILL,
height: Ti.UI.FILL,
left: "24dp",
color: "#a62901",
font: {fontSize:"16dp" ,fontWeight:"bold"},
},
"#image": {
width: "120dp",
height: "60dp",
right: "24dp"
}
tssの記述方法は、ほぼcssと同じです。タグ名、id値、class値に対してスタイルを指定することができます。idの場合「#（シャープ）」で、classの場合「.（ドット）」を用いるのも同じです。
続いて作成した行をTableViewに挿入します。index.jsに以下のコードを追記してください。
//index.js
for (var i=0; i<10; i++) {
var bgcolor = i % 2 == true : false; // １行毎に背景を変更
var row = Alloy.createController(“row”,{
// row.jsに渡す引数を指定
id: i+1,
bgcolor: bgcolor
}).getView;
$.tableView.appendRow(row); // tableViewに行を挿入
}
$.index.open(); // window open!
createController関数を用いてrowコントローラを作成、Viewを取得してループでTableViewに追加しています。index.viewに記述したTableViewは「$.」＋「タグのid値」で参照することができます（例では$.tableView）。
createControllerの第２引数で作成したコントローラに値を渡すことができます。渡し先のコントローラ値を受け取る方法は下記の通りです。例ではループ番号を受け取って、行タイトルと画像パスに利用しています。
//row.js
var args = arguments[0] || {}; // index.jsから引数を受け取る
$.row.backgroundColor = args.bgcolor ? “#faf8f5” : “#eee4db”; // 背景色指定
$.title.text = “Menu” + args.id; // タイトル指定
$.image.image = “/image” + args.id + “.jpg”; // 画像指定
以上でプログラムは終了です。ビルドした結果は以下の通りです。
今回は簡単な実装例としてrowコントローラに引数を渡し、ループでTableViewに追加していく方法をとりましたが、Modelやデータバインディング機能を用いればより簡潔に処理を記述することができます。