Native American 12
Development

JavaScriptでネイティブアプリを開発できるTitanium MobileとAlloyをつかってみよう その1

こんにちは。山形です。
最近はマラソン大会に出るために走り始めました。走った時間や距離を測るのにRuntasticというiPhoneアプリが便利なのですが、今お気に入りの隅田川沿いコースだとルートの解析が出来なくて困っています。GPS機能を妨害するものでもあるんでしょうか?

さて今回はiPhoneアプリ等をJavaScriptで開発できるツールTitanium Mobile(タイタニウムと読みます)を使ってみたので導入部分についてご紹介したいと思います。

JavaScriptとは

best-javascript-sites

JavaScriptは元々ブラウザ内で動くプログラミング言語として開発されました。
今日ではブラウザだけでなくサーバーサイドのスクリプト言語としても使われることが多くなりまりました。Google Chromeに搭載されているJavaScriptエンジンV8を利用したNode.jsや、Javaで実装されたRhino等がそれにあたります。

Titanium Mobileで使用するJavaScriptの種類としてはNode.js環境に近いものと考えていいようです。

Titanium Mobileとは

TITANIUM_logo1

先に触れましたがJavaScriptでネイティブのモバイルアプリをクロスプラットフォームに開発できるツールです。
つまりiOSアプリとAndroidアプリのソースコードを共有しながら同時にビルド出来るということです。

しかし現実はなかなか厳しようです。iOSとAndroidではUIの仕組みが違いますし、iOSにはあってAndroidには無い機能(そのまた逆も)あるからです。その場合コード内で「iOSならばこちらをAndroidならば…」といった条件分岐をすることで解決します。

なんだ結局両方のコードを書くのかと僕も思いましたが、標準的なUIを使っていればそのような場面は少ないですし、アプリケーションのコアになるロジック部分はUIに依存しないことが多いと思いますのでTitaniumを使うメリットは十分にあると感じました。

Alloyとは

alloy

Alloy(アロイ)はTitaniumのためのRailsのようなジェネレーターを備えたMVCフレームワークです。

Alloy自体はNode.jsのライブラリとして配布されています。Node.jsを使ったことのある人であればお馴染みの npm install alloy -g でインストールができます。そしてTitanium CLIと組み合わせることでIDEに頼らない開発環境が手にはいります。

僕はVimmerでRails開発者なのでこれはRailsを使ってきた自分にとってはかなり嬉しい要素でした。

環境を整える

さて実際に環境を整える方法ですが、まずなにはともあれiOS開発ツールであるXCodeをインストールしましょう。
これはAppStoreアプリを立ち上げてXCodeを検索しインストールボタンを押すだけです。

XCodeがインストールできたら今度はNode.jsをインストールしましょう。こちらのオフィシャルサイトからインストーラーが落とせます。

次にTitaniumのインストールはこちらのオフィシャルサイトからインストーラを落としてきましょう。

最後にAlloyのインストールは先に触れた npm install -g alloy で完了です。

プロジェクトを作成してみる

プロジェクトの作成はこちらで手順が紹介されていますが軽く順を追って紹介したいと思います。

まずターミナルでプロジェクトを作成するディレクトリまで移動して以下のコマンドを打ちます。

titanium create --name=sampleapp --id=jp.halenohi.sampleapp --platforms=iphone

nameにはアプリの名前、idはお持ちのドメインを逆転させてサブドメインに当たる部分にアプリ名を入れるのが良いようです。platformは今回はiphoneのみにしました。
Directory to place project: というオプションを聞かれるのですが既にプロジェクトを置くディレクトリにいる場合はそのままエンターでOKです。
こうするとsampleappというフォルダと中にいくつかのファイルとフォルダが作られます。

.gitignore
LICENSE
README
Resources
tiapp.xml

次にsampleappフォルダへ移動して以下のコマンドを打ちます。

cd sampleapp
alloy new

これでappとpluginsというフォルダが作成されました。
以上でプロジェクト作成は完了です。

Hello World

プロジェクトを作成したらコードを書き始める前にそのままビルドしてみます。

titanium build -p ios

pオプションでプラットフォームを指定します。
するとビルドが始まり以下の様な画面でiOSシミュレータが起動しました。

スクリーンショット 2014-01-20 12.41.10

 

Hello World成功です。

まとめ

まだアプリのコードは1行も書いてないですが、ツールをインストールしコマンドを幾つか打つだけでHello Worldが出来てしまいました。これは本当にRailsをやってきた僕には馴染みやすくて嬉しいですね。これでもうXCode上でjkjkとかescキーを誤打しなくて済みますね!

次回で少しUIの作成方法等についてご紹介したいと思います。

標準