モバイル版アプリの作成
今回からTitanium Mobile(以下Titanium)を使ってのモバイルアプリの構築を行っていきます。
前回環境構築手順をご紹介しましたが、その前後にAptanaというeclipseベースの開発環境に統合されたTitanium Studioが発表されました(プレビュー版ですが)。
今までのTitaniumはエディタを除いたコンパイラ環境でしたが、Aptanaと統合されることによってJSの補完機能のついた統合開発環境として利用することが可能です。また、デバッグ機能も充実しておりブレークポイントを設定してウォッチしながらのデバッグも可能となっています。
こちらで公開されていますので、興味のある方は導入してみてはいかがでしょう?
今回のターゲット
今回のターゲットデバイスですが、iPhoneに絞って行いたいと思います(iOSのバージョンは4.3とします)。
アプリの構成
PC版と同様に、動画選択画面と動画再生画面の2画面構成で考えています。動画選択画面は、iPhoneのおなじみのスタイルであるテーブルビューを用いてリスト表示を行います。
リストの中に、
- 動画のサムネイル画像
- タイトル
- チャンネル情報
- 放送日時
- 時間あたりのコメント数
を表示させます。
テーブルビューのリストをタップすると、その動画の再生画面へと遷移します。
まずは上のような単純な構成で作成してみたいと思います。
Titaniumでの基本的な作り方
Titaniumで新規プロジェクトの作成を行います。プロジェクト名はjikyouとしました。Titaniumは初期ファイルの生成が終わりましたら、さっそくソースの編集を行いましょう。
プロジェクトのディレクトリに移動すると、
というディレクトリと
というファイルがあります。
ResourcesがTitaniumで作成するアプリケーションのルートディレクトリとなり、アプリケーションの起点となるのが、app.jsというJavaScriptのファイルとなります。
buildディレクトリはiphoneやandroidのコンパイルを行ったときにネイティブコードが生成されます。ソースの編集&コンパイルを繰り返していると、よくわからないところでエラーになったりします。そんなときはbuild/*をすべて削除してしまうという乱暴な解決方法があるようです。
基本的にソースとして触るのはResources/以下のファイル群になります。
それではapp.jsを見てみます。デフォルトで生成されるapp.jsは2つのタブを持つウィンドウが立ち上がります。が、ここではわかりやすいように1つのタブにだけ着目します。
タブグループ<タブ<ウィンドウ(<ラベルなど)という関係を構築し、最終的にタブグループをオープンすることでUIの構築ができています。非常に簡潔で、直感的にもわかりやすいと思います。
それではこれを改造してwin1にテーブルビューを表示させてみましょう。
動画選択画面の作成
ウィンドウの内容を変更させたい場合は、createWindow()にurlパラメータを与えます。
こうすることで、このウィンドウが開いたタイミングでurlのjsファイルが実行されます。つまり、app.jsにUIの記述を行ったように、movie_list.jsにテーブルビューのUIを構築させればよいというわけです。
movie_list.jsではどのような処理がされるのでしょうか?
- ウィンドウがアクティブになる
- ↓
- 動画一覧をサーバから取得する
- ↓
- 取得したデータをテーブルビューに展開する
- ↓
- テーブルビューを表示する
まずはここまでを実装してみます。
HTTPClientなど出てきていますが、XMLHttpRequestとほぼ同じような関数です。jsを使用したことがある人であればすんなり理解できるモノと思います。
たったこれだけで、外部APIを使用してネイティブアプリとして動作するわけです。すごいですね~。
APIから取得した行数が多いと(1画面に収まらないと)、スクロールでその行がアクティブになった時点でアイコン画像を取得しにいきます。ネイティブアプリらしい動作と、なによりスクロールが気持ちいいですね。
しかし、このテーブルビューでは1回しかAPIを叩かないため、リストの更新ができません。すべてのリストを返すというのも動画が増えてきた場合に現実的ではありませんね。
次回はこの辺を踏まえて、動画選択画面の使い勝手を改善していきます。
最後にlist.cgiが返すJSONを載せておきます。
それでは次回もよろしくお願いいたします!