モバイル版アプリの作成

今回からTitanium Mobile（以下Titanium）を使ってのモバイルアプリの構築を行っていきます。

前回環境構築手順をご紹介しましたが，その前後にAptanaというeclipseベースの開発環境に統合されたTitanium Studioが発表されました（プレビュー版ですが⁠）⁠。

今までのTitaniumはエディタを除いたコンパイラ環境でしたが，Aptanaと統合されることによってJSの補完機能のついた統合開発環境として利用することが可能です。また，デバッグ機能も充実しておりブレークポイントを設定してウォッチしながらのデバッグも可能となっています。

こちらで公開されていますので，興味のある方は導入してみてはいかがでしょう？

今回のターゲット

今回のターゲットデバイスですが，iPhoneに絞って行いたいと思います（iOSのバージョンは4.3とします⁠）⁠。

アプリの構成

PC版と同様に，動画選択画面と動画再生画面の2画面構成で考えています。動画選択画面は，iPhoneのおなじみのスタイルであるテーブルビューを用いてリスト表示を行います。

リストの中に，

• 動画のサムネイル画像
• タイトル
• チャンネル情報
• 放送日時
• 時間あたりのコメント数

を表示させます。

テーブルビューのリストをタップすると，その動画の再生画面へと遷移します。

まずは上のような単純な構成で作成してみたいと思います。

Titaniumでの基本的な作り方

Titaniumで新規プロジェクトの作成を行います。プロジェクト名はjikyouとしました。Titaniumは初期ファイルの生成が終わりましたら，さっそくソースの編集を行いましょう。

プロジェクトのディレクトリに移動すると，

• Resources
• build

というディレクトリと

• manifest
• tiapp.xml

というファイルがあります。

ResourcesがTitaniumで作成するアプリケーションのルートディレクトリとなり，アプリケーションの起点となるのが，app.jsというJavaScriptのファイルとなります。

buildディレクトリはiphoneやandroidのコンパイルを行ったときにネイティブコードが生成されます。ソースの編集＆コンパイルを繰り返していると，よくわからないところでエラーになったりします。そんなときはbuild/*をすべて削除してしまうという乱暴な解決方法があるようです。

基本的にソースとして触るのはResources/以下のファイル群になります。

それではapp.jsを見てみます。デフォルトで生成されるapp.jsは2つのタブを持つウィンドウが立ち上がります。が，ここではわかりやすいように1つのタブにだけ着目します。

var tabGroup = Titanium.UI.createTabGroup(); //タブグループの作成

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  // タブにウィンドウを関連づける
});

tabGroup.addTab(tab1);   //タブグループにタブを関連づける

tabGroup.open(); //タブグループをオープンする

タブグループ＜タブ＜ウィンドウ（＜ラベルなど）という関係を構築し，最終的にタブグループをオープンすることでUIの構築ができています。非常に簡潔で，直感的にもわかりやすいと思います。

それではこれを改造してwin1にテーブルビューを表示させてみましょう。