Ari-Press

エンジニアAriのブログ.

TitaniumのフレームワークAlloyをCoffeeScript/Jade/Jasmine/TiShadowで便利に使う

Alloy

まずAlloyってなんぞ?というと、Titaniumによるモバイル開発で利用可能なMVCフレームワークです。

そしてこれがRailsに非常に似ています。なのでRubyistにとっては非常に扱いやすいんじゃないでしょうか。

Alloyについて

Titaniumは基本的にResourceディレクトリ以下にコードを書いていくらしい(たぶん)のですが、Alloyによる開発ではこのディレクトリは触りません。その代わりにappフォルダがあるので、ここにコードを書いていきます。Rubyist大喜びですね。

app以下のディレクトリ構造はざっくり書くと以下のような感じです。

1
2
3
4
5
6
7
8
9
10
app
 |- models # モデルを格納するディレクトリ
 |- views # ビューを格納するディレクトリ
 |- controllers # コントローラを格納するディレクトリ
 |- assets # 各種リソース(画像とか)を格納するディレクトリ
 |- styles # ビューのスタイル情報を定義するファイルを格納するディレクトリ
 |- lib # ライブラリを格納するディレクトリ
 |- config.json # 環境ごとの設定値などを定義するファイル
 |- alloy.js # エントリポイント?アプリケーショングローバルな共通処理などを書いたり
 |- alloy.jmk # Alloyコンパイル時に実行される処理をJSで書く(後述)

こんな感じで色んなファイルを定義していくとalloy compileコマンドでどどーんとResourcesディレクトリ以下の必要なファイルが出力されます。

開発環境

そんなAlloyを使った開発、充分便利なんですが、

  • 生JS書きたくない!
  • 生XML書きたくない!
  • 開発手法はBDDがいい!
  • 簡単にビルド・実機テストしたい!

という我儘要件(ソースは自分)に対するソリューションをご提案してみます。

まずはalloy.jmkについて

alloy compileに独自の処理を追加したい!という時に弄るのがalloy generate jmkコマンドで作成されるalloy.jmkファイルです。

以下に色々と書きますが、作成したalloy.jmkGistに上げてありますので参考にされる方は参考にしてみてください。

色々な情報をかき集めて書いたものなので、集合知とそれを構成している皆さんに感謝です。

生JS書きたくない!

CoffeeScript良いよね!ということで、Alloy with CoffeeScript のお誘いを参考にしてalloy.jmkを書き換えて導入しました。 これでコントローラなどをCoffeeScriptで書くとちゃんとコンパイルされます!素晴らしい。

ちなみに、どうやらapp/lib以下のファイルはalloy compile直後、alloy.jmkで定義するpre:compileより以前に直接Resourceディレクトリ以下にコピーされてしまうらしく、app/lib以下に共通処理とかを書きたい!しかもCoffeeScriptで!という別要件を叶えるためにはちょっとアレンジを加える必要がありました。

生XML書きたくない!

Jadeがある!ということで、こちらはAlloy with Jadeを参考にして導入しました。

タイプ数が減るって素晴らしいですね。

開発手法はBDDがいい!

JSのBDDといえばJasmine!ということで導入しました。

Jasmineのコードはspec以下に置きますが、これもCoffeeScriptで書きたいのでalloy.jmkでコンパイルするようにしています。 動作させて失敗したコンパイル後のテストコードを確認したいことがあるので、CoffeeScriptで書いたテストコードはspec_coffeeフォルダへ格納することにしました。

簡単にビルド・実機テストしたい!

TiShadowかっこいい!ということで導入。実際に動作させてみるとあまりのデプロイ省力化に感動します。すげー。 ちなみにJasmineもtishadow specで走らせてくれます。

困ったこと

tishadow specをした時にspec直下のファイルしか実行してくれないなーと思ったら、どうやら実行フォルダをspec/specsというファイルに改行区切りでテスト対象を書く必要があるみたいです。

spec/specsでは以下のような指定をします。

1
2
3
controllers
  subDir
models

上のように指定すると、spec/controllers spec/controllers/subDir spec/models以下のspecファイルが実行されます。

ですがこのファイル、指定順などは関係なく、インデントも僕が雰囲気でつけたものなのでspec/models/subDirというディレクトリがあるとこれ以下も実行されるはずです。 もうちょい柔軟に指定したいなあ、、とか思ったりしますが、説明とかは見つけることはできずソースコードを漁って発見した機能なので、もしかしたら正式仕様では無いのかもしれません。


以上です!Alloyは割りと良い感じのMVCフレームワークだと思うので、生Titaniumを書くよりはこちらを選択した方がいいんじゃないかなぁと個人的には思っています。

皆が使ってもっと情報の流通量が増えるといいですね!

Comments