isseium's blog

田舎に住むWebエンジニアのブログ

コマンドライン上での Titanium (Alloy) 開発入門 〜プロジェクト作成からリリースまで〜

東京の学食巡りを支援するiPhoneアプリ東京学食巡り」は Titanium 3.0 で作成しました。 そのときコマンドラインだけで開発からリリースビルドまでを行う方法を調べたので、備忘録がてらまとめました。

https://itunes.apple.com/jp/app/dong-jing-xue-shi-xunri/id624075183

Titanium での開発のために Titanium Studio という Eclipse ベースの統合開発環境が提供されています。 ビルドやデバッグツールなどがそろっていて使いやすいです。 が、エンジニアによっては、Titanium Studio ではなくて、普段使い慣れたエディタで開発したいという人もいるのではないでしょうか。

というわけで、Titanium 3.0 から大幅に強化された(らしい) titanium コマンドを利用した Titanium Studio を使わない開発方法を紹介したいと思います。

なお、このエントリでは、Titanium がすでにインストールされていることを前提にお話いたします。 Titanium 自体のインストールについては、他の方のエントリをご参照下さい。

Titanium の確認


$ titanium --version
3.0.24

最新化と初期設定

初回のみTitaniumにログインする必要があります


$ titanium login
# 対話形式でユーザ名とパスワードが聞かれます

Titanium SDK 最新化

毎回する必要はありません。


# Titanium を最新化(3.0.x系)し、デフォルトに設定する
$ titanium sdk update --branch 3_0_X --default
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/

Downloading http://builds.appcelerator.com.s3.amazonaws.com/mobile/3_0_X/mobilesdk-3.0.3.v20130318143059-osx.zip
  100% [========================================] 0.2s

Extracting SDK...
  100% [========================================] 0.0s
Saving SDK 3.0.3.v20130318143059 as the default.
Titanium SDK 3.0.3.v20130318143059 successfully installed!

Titanium プロジェクトを作成する

ここからが本題ですね。まずはプロジェクトを作成しましょう。


$ titanium create -p android,ios -n hellotitanium --id net.ikmz.hello -d ./
Titanium Command-Line Interface, CLI version 3.0.24, Titanium SDK version 3.0.3.v20130318143059
Copyright (c) 2012-2013, Appcelerator, Inc.  All Rights Reserved.

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

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

$ ls
hellotitanium/

Alloy フレームワークを適用する


$ cd hellotitanium/
$ ls
LICENSE         README          Resources/      manifest        tiapp.xml
$ alloy new
       .__  .__
_____  |  | |  |   ____ ___.__.
\__  \ |  | |  |  /  _ <   |  |
 / __ \|  |_|  |_(  <_> )___  |
(____  /____/____/\____// ____|
     \/                 \/
Alloy by Appcelerator. The MVC app framework for Titanium.

[INFO] Deployed ti.alloy plugin to plugins/ti.alloy/plugin.py
[INFO] Deployed ti.alloy hook to plugins/ti.alloy/hooks/alloy.js
[INFO] Installed "ti.alloy" plugin to tiapp.xml
[INFO] Generated new project at: app

コントローラを作ってみる

デフォルトで index コントローラが作られますが、せっかくなので alloy コマンドを用いて、iwate コントローラを作ってみましょう。


$ alloy generate controller iwate
       .__  .__
_____  |  | |  |   ____ ___.__.
\__  \ |  | |  |  /  _ <   |  |
 / __ \|  |_|  |_(  <_> )___  |
(____  /____/____/\____// ____|
     \/                 \/
Alloy by Appcelerator. The MVC app framework for Titanium.

[INFO] Generated view named iwate
[INFO] Generated style named iwate
[INFO] Generated view-style-controller named iwate

index から iwate への画面遷移を設定したいので、index.js のコントローラと iwate の View を少し変えたいと思います。

app/controllers/index.js

ラベルをクリックしたときに、iwate 画面に遷移するようにします。


function doClick(e) { // Label をクリックしたときの挙動
     var controller = Alloy.createController('iwate'); // iwate コントローラを作成し
     controller.getView().open(); // 表示!
}

$.index.open();

app/views/iwate.xml

View を Window に変えて、ImageView を中にいれてみましょう。 ImageView の image 属性に url を指定すると画像が表示されます。岩手の画像を表示させましょう。


<Alloy>
   <Window class="container">
      <ImageView image="http://cdn-ak.f.st-hatena.com/images/fotolife/i/isseium/20130201/20130201092448.jpg" />
   </Window>
</Alloy>

シミュレータ/エミュレータでのビルド方法

コマンドラインからビルドをしてエミュレータ/シミュレータで起動します。 注意点ですが、tmux や screen 上ではうまく動きません。(解決策探し中)

(7/10 追記)

@laiso さんから次のようにご教示いただきました.ありがとうございます!!!!!!

reattach-to-user-namespace 自体はMacとtmux 間のコピペのために使っていたのですが,次のような設定をするとtmux上でもシミュレータを起動できるようになりました.


$ brew install reattach-to-user-namespace
$ vi ~/.tmux.conf
# 下記1行を追加(bash の部分は各自変更)
set-option -g default-command "reattach-to-user-namespace -l bash"

上記に変更した後,tmux を再起動すると 「$ ti build -p ios」 などでシミュレータが起動できるようになります.

(追記ここまで)

iOS


$ titanium build -p iphone
Titanium Command-Line Interface, CLI version 3.0.24, Titanium SDK version 3.0.3.v20130318143059
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]  Found Alloy app in /Users/issei/tmp/alloy_cli/hellotitanium/app
[INFO]  Executing Alloy compile: /usr/local/bin/node /usr/local/bin/alloy compile /Users/issei/tmp/alloy_cli/hellotitanium/app --config platform=ios,version=0,simtype=none,devicefamily=universal,deploytype=development
[INFO]  Compiling alloy to /Users/issei/tmp/alloy_cli/hellotitanium/Resources/app.js
[INFO]  Alloy compiler completed successfully
[INFO]  No Titanium Modules required, continuing
[INFO]  Creating symlinks for simulator build
[INFO]  No module resources to copy
[INFO]  No CommonJS modules to copy
[INFO]  Skipping xcodebuild
[INFO]  Finished building the application in 2s 863ms
[INFO]  Running application in iOS Simulator
[INFO]  Launching application in iOS Simulator

f:id:isseium:20130409132943p:plain

「Hello, world」をタップすると、画面遷移します

f:id:isseium:20130409132950p:plain

Android

同様に Android でもビルドしてみます。 ビルド方法は、p オプションを android に変更するだけです。


$ titanium build -p android
(表示されるログ省略)

f:id:isseium:20130409120530p:plain

「Hello, World」をタップすると

f:id:isseium:20130409120535p:plain

実機ビルド方法

iOS

まずは、開発用プロビジョニングファイルなどを Developer Center で設定してください。


$ titanium build -T device  --platform iphone -V "Issei KOMATSU" -P "XXXXXXXXXX-XXXXXX"

V とか P になにいれればいいかわからない!!という方、 titanium さんは親切なので、候補を出してくれます。ためしに V と P を指定せずに実行します。


$ titanium build -T device  --platform iphone 
Titanium Command-Line Interface, CLI version 3.0.24, Titanium SDK version 3.0.3.v20130318143059
Copyright (c) 2012-2013, Appcelerator, Inc.  All Rights Reserved.

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

Name of the iOS Developer Certificate to use: # ここで聞いてくるけど、空のまま Enter
[ERROR] Select an iOS Developer Certificate:
Available names: # すると候補が表示される!
    Issei KOMATSU (XXXXXXX)        Ito Takayuki (XXXXXXX) 
Name of the iOS Developer Certificate to use: Issei KOMATSU # 上記の候補を入力する
Provisioning Profile UUID: # 今度は、UUID を求められるが、例に倣って 空のまま Enter
[ERROR] Please specify a Provisioning Profile UUID 
Available Development UUIDs: # 候補が表示される!
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  * (iOS Team Provisioning Profile: Xcode iOS Wildcard App ID)
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  net.ikmz.hello (hellotitanium)
Provisioning Profile UUID: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX # 上記の候補を入力

これでオプションがわかったので、次回ビルド時は対話的じゃなくても実機転送できますね!

Android

Android は実機転送の認証がないので、楽です。


$ titanium build -T device  --platform android

リリースビルド方法

最後にリリース時のビルド方法です。

iOS

まずは、プロビジョニングファイル等を本番のものを用意し、アプリ情報を入力して Waiting For Upload の状態にしておきましょう。 下記コマンドを実行すると Xcode の Organizer が起動して、アップロードできるようになります。


$ titanium build -R "Issei KOMATSU" -T dist-appstore  -p ios -V "Issei KOMATSU" -P  XXXXXXXXXXXXXX

Android

androidのアプリ署名やkeystoreなどをすでに知っている前提でお話します。


$ titanium build --platform android -T dist-playstore -K   "keystoreのパス"  -L "keystoreのalias" -O "appの出力先ディレクトリ"
Titanium Command-Line Interface, CLI version 3.0.24, Titanium SDK version 3.0.3.v20130318143059
Copyright (c) 2012-2013, Appcelerator, Inc.  All Rights Reserved.

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

Keystore password: # keystoreのパスワードを聞かれるので答える

以上で、 O で指定したパスに署名付きapkファイルが配置されますので、Google Play Developer Console にてアップロードしてください。

チラ裏

あとで思いましたが、コマンドのオプションは 1文字だけのオプションじゃないほうがわかりやすいですね。。。 「-P」 よりも 「--pp-uuid 」のほうが説明不要ですし、、、次回から気をつけようと思います。

参考文献