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

LINEで送る
Pocket

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

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

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

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

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

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

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

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

事前に必要なもの

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

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

のPCで試しています。

目次

  • 前編(当記事はこちら)
    1. Titanium Studioをインストールする
    2. iOSとAndroidのSDKを入手する
    3. Node.jsをインストールする
    4. Titanium-cliをインストールする
    5. Titanium-cliの設定をする
    6. プロジェクトを作成する
    7. ビルドしてエミュレータを起動する
  • 後編
    1. grunt-cliのインストールする
    2. coffeeファイルを作成する
    3. Gruntfile.coffeeを作成する
    4. 依存npmのインストール
    5. gruntの動作確認

という感じで書いていきます。

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

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

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

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

Appcelerator

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

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

Download tstudio

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

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

Setting android sdk

今回の記事では、
/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をインストールするマネージャーが起動します。

Android sdk list

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

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

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

スクリーンショット 2013 04 02 16 25 30

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.Titanium-cliの設定をする

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

ターミナルに、

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

  • 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.プロジェクトを作成する

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

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

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

  • Target platforms

    • 対象のプラットフォームをカンマ区切りで入力
      今回はiosとandroid用のアプリを作りたいので、android,iosと入力
  • App ID

    • アプリのIDを入力
      これは、自分のドメインを逆順に書き、最後に.アプリ名を書くのが通例のようです。
      私の場合、持っているドメインはleko.jpなので、
      アプリ名をmyappとすると、App IDはjp.leko.myappとなります。
  • Project name

    • アプリの名前を入力
      App IDでmyappとしたので、そのままmyappと入力

上記を入力すると、

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

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

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

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

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

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

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

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

Preview io

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

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

Preview an

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

ビルドを自動化する

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

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

参考サイト

LINEで送る
Pocket