読者です 読者をやめる 読者になる 読者になる

TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

Titanium + CoffeeScript + jasmine の環境構築出来ました

Qiitaのビューワーアプリを作ってのですが、Qiita APIから情報取得する部分の処理等、自分の中での仕様が曖昧になりつつあり、なんとなくモヤモヤしてました。

というのを呟いてから、以前から気になっていたjasmine for titanium について少し突っ込んで調べた結果、なんとか環境構築出来ました。

折角調べたので、他の方がはじめの一歩を踏み出せるように以下にまとめておこうと思います

Titaniumから利用できるjasmineが色々あって困ったのでまずはその確認

hisasannさんが作成されたtitanium-jasmineというものがあったりひげろぐさんが作成された、jasmine-titaniumというものがあったり、最初混乱しました。

(記憶というか理解が曖昧ですが)元々jasmineには出力先フォーマットを変更できるreporterという仕組みがあるかと思います。

Titaniumからjasmineを利用出来るCommonJSモジュールという意味では前述の2つは両方ともう共通かと思います。

前者の方のソースをザッと見た限り、テスト結果の出力をTi.UI.WebViewを利用してHTML形式で表示するのに対して、後者の方はターミナル上で "も" テスト結果が出力できるようです。

CoffeeScript + jasmine を実現するには?

自分がやりたかったのは、Titanium + CoffeeScript な環境で、 jasmineを使ってテストを書きたいということでした

上記2つのJavaScriptのソースを追って・・というのが大変そうだったので何かサンプルになるものはないかと思って調べたらGitHub上にTitanium-Coffeescript-Boilerplateというサンプルアプリを見つけました

このサンプルのapp/test/tests.coffeeを眺めてたら

  • 8行目でjasmine本体をまずは読み込む
  • 9行目でTitanumから利用できるようにするためのrepoterを読み込む

という感じのようでした。

ここで読み込んでるreporterを使うと、テスト結果の出力をTi.UI.WebViewを利用してHTML形式で表示するようだったのですが、ターミナル上でにテスト結果が出力できるようにしたかったので、ひげろぐさんが作成された、jasmine-titaniumのreporterの部分だけを取り入れました

最終的には以下のようになりました

プロジェクト直下のディレクトリ構造

ポイントになる所だけ抜粋するとこのような感じになります。coffee配下に、CoffeeScriptのファイルを配置するようにしてます

├── 一部省略
├── Guardfile
├── coffee
│   ├── app.coffee
│   └── test
│       ├── example.coffee
│       └── xhrSpec.coffee
├── Resources
│   ├── 省略
├── manifest
└── tiapp.xml

Resources以下のディレクトリ構造

Titanium Mobile から最終的に利用されるResources以下はこのような感じになります

Resources/
├── KS_nav_ui.png
├── KS_nav_views.png
├── app.js
├── iphone
│   ├── Default-Landscape.png
│   ├── Default-Portrait.png
│   ├── Default.png
│   ├── Default@2x.png
│   └── appicon.png
└── test
    ├── example.js
    ├── lib
    │   ├── jasmine-1.0.2.js
    │   └── jasmine-titanium-console.js
    └── xhrSpec.js

GitHubにサンプルをあげていますので詳細気になる方はこちらをご覧下さい

実際のテストケースについて解説・・と思ったのですがここまで書いて結構な分量になったので続きは別エントリにします