はじめに

アプリケーションを開発する際に、コード全体の構成をどのように行うかはいつも頭の痛い問題です。ウェブの世界では、Ruby on Railsなどのフレームワークが多く使われています。Titanium Mobileにも、いくつかのフレームワークがありますが、今回はTitanium Market Placeでダウンロード可能な「TiMVC」を試してみました。

2012.3.15 追記: この記事は、Version 1.2.1.1.1 (1.2 beta 1.1) をベースに書きました。3/15に新しいバージョン(1.2.1.2.1)がリリースされています。

2012.3.15 追記: TiMVCのウェブサイトがあることに気づいたので、リンクを追加しておきます。

image

ダウンロード

Titanium Market Place上の以下のURLからダウンロードできます。無料です。

https://marketplace.appcelerator.com/apps/1074

ファイル構成

TiMVCのアーカイブを展開すると、下記のようなファイル構成になっています。

mvc/core/timvc.js
TiMVCのコアクラスです。

mvc/components/*.js
TiMVCのコアから使用されるクラスファイルが配置されています。Model/Controller/Viewは、それぞれmodel.js/controller.js/view.jsに記述されています。

実際にアプリケーション毎に書き換えるのは以下のファイルになります。

app.js
app.jsは、TiMVCアプリケーションの設定を行うCONFIGオブジェクトが大半を占めています。 最後の部分でmvc/core/timvc.jsがインクルードされます。

mvc/controllers/*.js
アプリのコントローラ・クラスファイルを配置します。

mvc/views/*.js
アプリのビュー・クラスファイルを配置します。

mvc/model/*.js
アプリのモデル・クラスファイルを配置します。

初期化の流れ

app.jsが最初にTitaniumによって呼び出されます。 ここでConfigクラスが定義され、TiMVCのコアクラスのロードが行われます。
TiMVCは、最初にmainコントローラを呼び出すようになっていて、各コントローラに処理の流れが移ります。

コントローラの働き

TiMVC.processRequestで、routeに該当するコントローラの.jsファイルがロードされます。 この段階で、コントローラはTiMVCのControllerクラスを継承します(prototypeにControllerがセットされる)。
最後に、routeで指定されたアクションが実行されて、処理の流れはビューに移ります。

ビューの働き

ビュークラスでは、コントローラから渡されたデータを元にテーブルなどのUIコンポーネントを構築して画面を描画します。 ユーザーが画面をタップした時のイベントハンドラから、新しいコントローラの呼び出しが行われます。

モデルの働き

モデルクラスは、TiMVC.loadModel()を使って呼び出す事ができます。 コントローラなどから、データ構造にアクセスすることができます。

まとめ

Titanium Mobile用のMVCフレームワーク、TiMVCの概要を解説しました。

  • パスをベースとしてコントローラとアクションを紐づける、ルーティング管理。 
  • モデルの操作、ビューへのデータ受け渡しを行うコントローラ。 
  • コントローラからのデータを元に画面を描画するビュー。 
  • データ操作を抽象化するモデル。 

Titaniumアプリケーションを構築するための薄いアプリケーションフレームワークとして、 コンパクトに必要最低限の処理がまとまっていると思いました。

Titaniumには、この他にもいくつかフレームワークがあるので、同じように簡単な解説をしていきたいと思っています。