titanium-cliとGruntを使って、コマンドラインからiOS・Androidアプリのビルドを自動化する方法(前編)

こんにちは。れこです。
最近は、友人といちれこプロジェクトという活動をしていまして、
まだ詳細は非公開ですが、iOSとAndroid両方に対応したアプリを作っています。

双方のプラットフォーム用の言語や、独自仕様を覚えるのは面倒なので、

JavaやObjective-Cを書かなくても
AndroidもiOSでも動くアプリを作れないかなぁ。

と、探したらありました。

夢を叶えてくれたのが「Titanium-cli」です。
JavaScriptで記述して、AndroidやiOS向けにビルドが出来るツールです。

GUIの開発環境「Titanium Studio」でも良いのですが、
Eclipseライクな開発環境が苦手(嫌い)なのでCLIのほうを使って、
環境の準備からアプリのビルドまで行いたいと思います。

さらに、
TitaniumではJavaScriptが使えるので、楽なCoffeeScriptで書こうと思いつき、
そしたら保存時にCoffeeScriptの自動コンパイル+アプリの自動ビルドもしたいなぁ。

と思ったので、 Gruntという諸々自動化ツールについての手順をまとめてメモします。

事前に必要なもの

iOSアプリの開発をするため、Macは必須です。
他には、お好みのテキストエディタなどをご用意下さい。
なお、今回の記事は、

  • MacBook Air 11インチ
  • OS :Mac OS X 10.8.3 Moutain Lion
  • CPU:Intel Core i7 1.8GHz
  • メモリ:4GB

のPCで試しています。

前編ではTitanium-cliの環境整備から、アプリのビルドまでを、
後編ではGruntを導入して自動化を行なっていきます。

1.Titanium Studioをインストールする

まずは、Titanium-cliのGUI版「Titanium Studio」をインストールします。
こちらの方がAndroidSDKの設定が楽なので、設定をするために使います。

まず、Titaniumシリーズを公開しているAppceleratorを開きます。

Appcelerator

次に、[Download Titanium for Free]をクリックして、会員登録をします。
この会員情報は後々使うので、忘れないようにしておいて下さい。

会員登録が完了すると、以下のような画面に行くと思います。

Downloa

このページの、[Download Titanium Studio]をクリックして、
「osx」を選択してTitanium Studioをダウンロードします。

Titanium Studioを起動したら、
メニュー→Titanium Studio→環境設定を開きます。
[Titanium]を選択して、Android SDKの保存場所を設定します。

Settin

今回の記事では、
/Developers/android-sdk/
に設置することにします。

2.iOS,AndroidのSDKを入手する

iOSのSDKは、Xcodeのからインストールして下さい。 インストールが完了すると、iOSのSDKはTitaniumが自動的に認識してくれます。

AndroidのSDKは自分でパスを指定してあげないといけません。 先ほどの設定で指定した、/Developers/android-sdk/の中に、 AndroidのSDKを入れてあげます。

Titanium Studioのダッシュボードに行き、 Configure Native SDKsの、[AndroidSDK]をクリックします。

すると、AndroidのSDKをインストールするマネージャーが起動します。

Androi

とりあえず最新版と、Tools、API8API7をインストールすればOKかと思います。

API8はTitanium Studioには必須で、
API7が無いとエミュレータの起動でエラーが出てたので、API7もインストールします。
その他は、対象にするOSによって適宜インストールしてください。

これでSDKの設定は完了です。
ダッシュボードに戻って、Get startedを見て下さい。

スクリーンショッ

上記のように、 AndroidSDKのアイコンから「?」が消えていたら、読み込みに成功しています。

3.Node.jsをインストールする

Titanium-cliを使うには、npmというパッケージ管理システムが必要です。
そして、npmはNodejsをインストールすると自動的に使えるようになります。

なので、Nodejsをインストールします。
brewコマンドでインストールするのが手っ取り早いかと思います。

ターミナルを立ち上げ、以下の内容を入力して下さい。

$ cd ~
$ brew update && brew install node

brewのインストールについては、ググってください。

[Mac] Mountain Lionへパッケージ管理「Homebrew」をインストールする手順のメモ | Tools 4 Hack

Nodejsのインストールが出来たら、動作確認のためバージョンを確認します。

$ node -v
v0.8.17
$ npm -v
1.2.0

バージョンが出てきたら、OKです。

4.titanium-cliをインストールする

Nodejsをインストールしてnpmが使えるようになったので、
titanium-cliをグローバルインストールします。

$ sudo npm install -g titanium

インストールするときには、Titanium-cliではなく、titaniumです。 パスワードを聞かれたらMacのパスワードを入力。

titaniumのインストールしたら、一応バージョンを確認します。

$ titanium -v
3.0.24

バージョンが表示されたらOKです。

5.Titanium-cliの設定をする

Titanium-cliのインストールが完了したので、 次に環境設定を行います。とても簡単です。

ターミナルに、

$ titanium setup

と入力します。 いくつか設定項目があるので、指示通り入力します。

  • What is your name?
    • ユーザー名。半角アルファベットならなんでもOKです
  • What is your email address used for logging into the Appcelerator Network?
    • 先ほどAppceleratorに登録したメールアドレスを入力します
  • What would you like as your default locale?
    • 国を指定します。日本の方ならjaと入力
  • What Titanium SDK would you like to use by default? (3.0.2.GA)
    • Titanium SDKのバージョンを指定します。
      (3.0.2.GA)と表示されていたら、そのままEnter
  • Path to your workspace where your projects should be created
    • プロジェクトを作成するときのパスを指定する
      ./と入力しておけばOKかと
  • Path to the Android SDK
    • Android SDKのパスを指定する
      先ほどTitanium Studioで設定した通り、/Developers/android-sdk/と入力

これらを記入して、Configuration savedと表示されれば、設定完了です。

6.プロジェクトを作成する

設定が完了したので、早速プロジェクトを作成します。

ターミナルに以下のように入力します

$ titanium create

またいくつか質問をされるので、埋めていきます。

  • Target platforms
    • 対象のプラットフォームをカンマ区切りで入力
      今回はiosとandroid用のアプリを作りたいので、android,iosと入力
  • App ID
    • アプリのIDを入力
      これは、自分のドメインを逆順に書き、最後に.アプリ名を書くのが通例のようです。
      私の場合、持っているドメインはleko.jpなので、
      アプリ名をmyappとすると、App IDはjp.leko.myappとなります
  • Project name
    • アプリの名前を入力
      App IDでmyappとしたので、そのままmyappと入力

上記を入力すると、

[INFO]  Creating Titanium Mobile application project
[INFO]  Copying "android" platform resources
[INFO]  Copying "iphone" platform resources
[INFO]  Project 'myapp' created successfully in 76ms

とメッセージが出てきます。 これでプロジェクトが作成できました。

生成されるファイルはこんな感じになっていると思います。

- LICENSE
- README
- Resources/
    - KS_nav_ui.png
    - KS_nav_views.png
    - app.js
    - android
        - 省略
    - iphone    
        - 省略    
- manifest
- tiapp.xml

7.ビルドしてエミュレーターを起動する

次に、アプリをビルドして
iOSのシミュレータ、Androidのエミュレータで起動してみます。

プロジェクトをcreateした時点で、実は簡単なアプリが記述されています。 なので、何かプログラムを書く必要なく動作確認ができます。

まず、iOSのアプリ形式にビルドします。
ターミナルに以下の内容を入力

$ titanium build -p ios

すると、以下のようにずらっとアプリの情報や進捗状況が表示されます。

Titanium Command-Line Interface, CLI version 3.0.24, Titanium SDK version 3.0.2.GA
Copyright (c) 2012-2013, Appcelerator, Inc.  All Rights Reserved.

Please report bugs to http://jira.appcelerator.org/

[INFO]  Build type: development
[INFO]  Building for target: simulator
[INFO]  Building using iOS SDK: 6.1
[INFO]  Building for iOS iPhone Simulator: 6.1
[INFO]  Building for device family: universal
[INFO]  Building for iOS 6.1; using 4.3 as minimum iOS version
[INFO]  Minimum iOS version: 4.3
[INFO]  Debugging disabled
[INFO]  Initiating prepare phase
[INFO]  Forcing rebuild: /Developer/myapp/build/iphone/build-manifest.json does not exist
[INFO]  Forcing rebuild: debugger.plist does not exist
[INFO]  No Titanium Modules required, continuing
[INFO]  Performing full rebuild
[INFO]  Copying Xcode iOS files
[INFO]  Creating Xcode project directory: /Developer/myapp/build/iphone/myapp.xcodeproj
[INFO]  Writing Xcode project data file: Titanium.xcodeproj/project.pbxproj
[INFO]  Writing Xcode project configuration: project.xcconfig
[INFO]  Writing Xcode module configuration: module.xcconfig
[INFO]  Creating symlinks for simulator build
[INFO]  Forcing rebuild: ApplicationDefaults.m has changed since last build
[INFO]  Writing properties to ApplicationDefaults.m
[INFO]  No module resources to copy
[INFO]  No CommonJS modules to copy
[INFO]  Invoking xcodebuild
[INFO]  Finished building the application in 24s 938ms
...

そのまましばらく待っていると、 iOSシミュレータが起動して、アプリが表示されると思います。

Previe

次に、Androidのアプリ形式にビルドします。 ターミナルの以下の内容を入力して下さい。

$ titanium build -p android

Androidのエミュレータは重いので、1〜2分くらいのんびり待ってみて下さい。

Previe

iOSのシミュレータと同じように、
Androidのエミュレータが起動してアプリが表示されればOKです。

ビルドを自動化する

先述のビルドしてエミュレータを起動するまでの内容で、
手動でのアプリのビルドとエミュレータの起動は出来ます。

しかし、CoffeeScirptを使ったり、
ビルドを自動化したい方は、ぜひ後編(作成中)を御覧ください。

参考サイト