Titanium™ インストールガイド

はじめに

米国 Appcelerator 社が提供している、JavaScript で iOS / Android のネイティブアプリを開発することができる Titanium™ の導入方法の日本語解説サイトです。

Titanium Studio、Titanium SDK、Titanium CLI、Alloy、Node.ACS の環境構築からアプリのプロジェクトを生成し、シミュレータ、もしくはエミュレータでアプリを起動するところまでの流れを解説します。 nvm で node.js をインストールされていたりする場合等、特殊な環境下でのセットアップにつきましては、解説を省かせていただきますのでご了承ください。 また、ターゲットとなるアプリのプラットフォームは iOS / Android のみとさせていただきます。

もしもうまく動かない場合は、ユーザ会のサポートフォーラムで質問してみましょう。

インストールガイドでの対応バージョン

Titanium Studio 3.2.0
Titanium で iOS / Android アプリを開発するための、Eclipse ベースの統合開発環境
Titanium SDK 3.2.0.GA
Titanium で iOS / Android アプリをビルドするための開発キット
Titanium CLI 3.2.0
コマンドライン(CLI)でプロジェクトの生成からアプリのビルドまで行えるようにするツール。 Titanium Studio が不要になります
Alloy 1.3.0
Titanium 開発元の Appcelerator が提供している公式 MVC フレームワーク
Node.ACS 1.0.11
Appcelerator が提供する PaaS。 同じく、Appcelerator が提供している mBaaS である、Appcelerator Cloud Services(ACS)と親和性が非常に高く、ACS で提供されていない機能を独自で拡張できたりもします

環境構築

OS

Windows
Windows 7、もしくは Window 8
Mac OS X
Mountain Lion 以降

※ Linux については解説を省きます

開発キット等

Xcode
iOS アプリをビルドするために必要となります。 つまり、Xcode が提供されていない Windows では iOS アプリをビルドすることができません
Apple 開発者向けサイトからダウンロードできます
JDK
Android アプリをビルドするために必要となります。 Windows の場合は Titanium Studio をインストールする際に JDK がインストールされていない場合、Titanium Studio をインストールすると同時に自動でダウンロードしてインストールされます。 手動でインストールする場合は必ず 32bit 版をインストールしてください
Oracle 開発者向けサイト、もしくは、Apple 開発者向けサイトからダウンロードできます
Android SDK
Android アプリをビルドするために必要となります。 こちらは手動でインストールする必要があります。 また、Titanium 自体に Android SDK 2.3.3 が必要になりますのでご注意ください
Google の Android 開発者向けサイトからダウンロードできます。 Titanium のみで開発するのであれば(Eclipse を使って Java で開発しない)、SDK Tools Only 版をインストールすることをおすすめします
node.js
iOS / Android 問わず、Titanium でアプリをビルドする際に必要となります。 Windows の場合は Titanium Studio をインストールする際に node.js がインストールされていない場合、Titanium Studio をインストールすると同時に自動でダウンロードしてインストールされます
node.js のダウンロードページからダウンロードできます
git
アプリのプロジェクトを管理するために必要となります。 その他にも、Appcelerator が提供している Kitchen Sink 等のお手本プロジェクトを Titanium Studio で GitHub からダウンロードしたりもします。 Windows の場合は Titanium Studio をインストールする際に git がインストールされていない場合、Titanium Studio をインストールすると同時に自動でダウンロードしてインストールされます
git のダウンロードページからダウンロードできます
Genymotion∞
デフォルトの Android エミュレータの代わりに利用します。 Genymotion は VirtualBox が必要となりますので、そちらも忘れずにインストールしてください
Genymotion のダウンロードページからダウンロードできます
VirtualBox
Genymotion を動かすために必要となります
VirtualBox のダウンロードページからダウンロードできます

Titanium™

Titanium Studio のインストール

Appcelerator のアカウントが必要となります。 レジストページより必要情報を入力してアカウント登録を行ってください。 登録が完了したらログインし、My Resources ページより Titanium Studio をダウンロードします。

それではダウンロードが完了したら、セットアップを開始しましょう。まずは Windows の場合になります。

  1. ダウンロードした Titanium_Studio.exe からセットアップウィザードを起動します
  2. 利用規約に同意します
  3. インストールパスを確認します。 デフォルトとは異なる場所へインストールしたい場合は適宜変更してください
  4. スタートメニューに登録したくない場合はチェックしてください
  5. ファイルを関連付けたくない場合はチェックを外してください
  6. JDK がインストールされていない場合は自動でインストールするという確認になります
  7. git がインストールされていない場合は自動でインストールするという確認になります
  8. node.js がインストールされていない場合は自動でインストールするという確認になります
  9. インストールが始まります
  10. JDK がインストールされています
  11. git がインストールされています
  12. node.js がインストールされています
  13. Titanium Studio がインストールされています
  14. Titanium Studio のインストールが完了しました
  15. Close ボタンをクリックしてセットアップウィザードを完了します

続いて、Mac OS X のセットアップになります。

  1. ダウンロードした Titanium_Studio.dmg をマウントすると、Finder が表示されます
  2. 表示されている Titanium Studio フォルダを Applications フォルダへドラッグアンドドロップして完了です

Titanium Studio を起動

まずは Windows から、Titanium Studio を起動するとワークスペースのパスを設定するように促されます。 その後、Appcelerator のアカウントがあるか聞かれます。 Titanium Studio をダウンロードする際に作ってあるので、I do have an account with Appcelerator にチェックを入れて Next ボタンをクリックします。 ログインダイアログが表示されますので、Appcelerator のアカウントを入力してログインしましょう。

ログインすると自動でアップデート処理が走ります。 Titanium SDK や Titanium CLI、Alloy、Node.ACS のインストール、もしくはアップデートをすることができます。

Android SDK がインストールされていない、もしくはパスが設定されていないと、設定ダイアログが表示されます。 Android SDK のダウンロード、インストールが完了したらパスの設定も忘れずに行いましょう。 Android SDK をインストーラでインストールしてデフォルトパスのままでしたら、C:¥Users¥hoge¥AppData¥Local¥Android¥android-sdk となります 万が一、この設定ダイアログを閉じてしまっても、ダッシュボートの Get Started タブの下部にある Configure Native SDKs → Android SDK → Install or Update Android SDK をクリックすれば表示されます。

続いて、Mac OS X の Titanium Studio を起動します。 その後、Accelerator のアカウントがあるか聞かれます。 Titanium Studio をダウンロードする際に作ってあるので、I do have an account with Appcelerator にチェックを入れて Next ボタンをクリックします。 ログインダイアログが表示されますので、Appcelerator のアカウントを入力してログインしましょう。

ログインすると自動でアップデート処理が走ります。 Titanium SDK や Titanium CLI、Alloy、Node.ACS のインストール、もしくはアップデートをすることができます。

Android SDK がインストールされていない、もしくはパスが設定されていないと、設定ダイアログが表示されます。 Android SDK のダウンロード、インストールが完了したらパスの設定も忘れずに行いましょう。 万が一、この設定ダイアログを閉じてしまっても、ダッシュボートの Get Started タブの下部にある Configure Native SDKs → Android SDK → Install or Update Android SDK をクリックすれば表示されます。

Android SDK

Google の Android 開発者向けサイトからダウンロードしてください(Windows の場合は Recommended になっているインストーラ版で説明します)。

Android SDK のインストール

ダウンロードが完了したら、セットアップを開始しましょう。まずは Windows の場合になります。

  1. ダウンロードしたインストーラ(android-sdk_r22.3-windows.exe)からセットアップウィザードを起動します
  2. JDK がインストールされていることを確認します
  3. Android SDK をインストールするユーザを指定します。 今回は Install just for me で Windows にログインしているユーザのみとします
  4. インストールパスを確認します。 デフォルトとは異なる場所へインストールしたい場合は適宜変更してください
  5. スタートメニューに登録したくない場合はチェックしてください
  6. インストールが始まります
  7. インストールが完了しました
  8. そのまま Android SDK Manager を起動するので、Start SDK Manager へチェックを入れたまま Finish をクリックします
  9. Tools と 今回は Android 4.4.2(API 19)にチェックを入れて Install XX Packages をクリックします。 他の Android バージョンの SDK や エミュレータ等もインストールしたい場合は、適宜チェックしてください。 また、Titanium 自体に Android SDK 2.3.3 が必要になりますのでこちらもあわせてチェックしてください
  10. Accept License をチェックし、Install をクリックします
  11. ダウンロードが始まります
  12. ログに Done loading packages. が表示されたら Close をクリックます
  13. Status が Installed になったことを確認したら、Android SDK Manager を閉じて完了です

続いて、Mac OS X のセットアップになります。

  1. ダウンロードした ZIP ファイル(android-sdk_r22.3-macosx.zip)を解凍して、適当なフォルダへ設置します。 今回は、~/sdks/android-sdk-macosx とします。 ここからはターミナルで作業を行っていきますので、ターミナルを起動してください
  2. android-sdk-macosx の中にある platform-tools と tools のパスを通します
    $ vi ~/.bash_profile
    vi が起動したら以下を追加し、保存して終了します
    export PATH="$HOME/sdks/android-sdk-macosx/platform-tools:$PATH"
    export PATH="$HOME/sdks/android-sdk-macosx/tools:$PATH"
    .bash_profile を再読み込みします
    $ source ~/.bash_profile
  3. Android SDK Manager を起動します。 ここで android コマンドが存在しないとエラーが返ってきたら、パスが上手く通っていないので一つ前を見なおしてください
    $ android
  4. Tools と 今回は Android 4.4.2(API 19)にチェックを入れて Install XX Packages をクリックします。 他の Android バージョンの SDK や エミュレータ等もインストールしたい場合は、適宜チェックしてください。 また、Titanium 自体に Android SDK 2.3.3 が必要になりますのでこちらもあわせてチェックしてください
  5. Accept License をチェックし、Install をクリックします
  6. ダウンロードが始まります
  7. ログに Done loading packages. が表示されたら Close をクリックます
  8. Status が Installed になったことを確認したら、Android SDK Manager を閉じて完了です

Xcode

iOS アプリの開発に必要となり、App Storeからダウンロードすることができます。

Xcode のインストール

  1. Xcodeのダウンロード、インストールが完了したら起動してください。 Xcode → Preferences → Downloads から Command Line Tools をインストールします。 あわせて開発中の動作確認に必要となる iOS シミュレータもインストールしましょう Mac OS X Mavericks の方は以下のコマンドで Command Line Tools をインストールしてください
    $ xcode-select --install

Genymotion∞

Android アプリを開発する際にAndroid SDK に標準でついてくるエミュレータで動作確認を行ったりするのですが、このエミュレータが非常に重いです。 そこで、この Genymotion の登場です。 全然ストレスを感じない軽快な動作で、開発が非常に楽になります。 特に Windows では Android アプリの開発のみとなりますので、是非、導入することをおすすめします。

VirtualBox のインストール

Genymotion を起動するには VirtualBox が必要となりますので、ダウンロードページからダウンロードし、セットアップを済ませてください。

ダウンロードが完了したら、セットアップを開始しましょう。まずは Windows の場合になります。

  1. ダウンロードしたインストーラ(VirtualBox-4.3.6-91406-Win.exe)からセットアップウィザードを起動します
  2. インストールパスを確認します。 デフォルトとは異なる場所へインストールしたい場合は適宜変更してください
  3. 各ショートカットを登録したくない場合はチェックを外してください
  4. Yes をクリックして進めます
  5. Install をクリックするとインストールが始まります
  6. インストール中です
  7. Finish をクリックして完了となります

続いて、Mac OS X のセットアップになります。

  1. ダウンロードした VirtualBox-4.3.6-91406-OSX.dmg をマウントすると、Finder が表示されます
  2. 表示されている VirtualBox.pkg からセットアップウィザードを起動します
  3. インストールをクリックするとインストールが始まります
  4. インストール中です
  5. 閉じるをクリックして完了となります

Genymotion のインストール

Genymotion はこちらからダウンロードすることができます。 Free で構いません。 ただし Genymotion のアカウントが必要となりますのでアカウント登録を済ませて、ログインしてからダウンロード、セットアップをしてください。 その後、Genymotion を起動すると Android の色々な VM がダウンロードできるようになります。 開発対象の実機に近いものを選択すると良いと思います。

ダウンロードが完了したら、セットアップを開始しましょう。まずは Windows の場合になります。

  1. ダウンロードしたインストーラ(genymotion-2.0.3.exe)からセットアップウィザードを起動します
  2. インストールパスを確認します。 デフォルトとは異なる場所へインストールしたい場合は適宜変更してください
  3. スタートメニューに登録したくない場合はチェックしてください
  4. デスクトップへアイコンを登録したくない場合はチェックを外してください
  5. Install をクリックするとインストールが始まります
  6. インストール中です
  7. Finish をクリックして完了となります

続いて、Mac OS X のセットアップになります。

  1. ダウンロードした genymotion-2.0.3.dmg をマウントすると、Finder が表示されます
  2. 表示されている Genymotion Shell.app と Genymotion.app を Applications フォルダへドラッグアンドドロップして完了です

Genymotion を起動

インストールが完了したら、Genymotion を起動しましょう。まずは Windows の場合になります。

  1. 初期起動時は VM がないので入れるように促されます。 Yes をクリックしてすすめましょう
  2. Connect をクリックして、Genymotion をダウンロードした際に作ったアカウントでログインします
  3. お好みの VM を選択して、Next をクリックします。 Android SDK Manager でインストールした API レベルのものにあわせましょう
  4. VM の名前を指定することができます。 ここで指定した名前は、Titanium Studio で Genymotion と連携する際に必要となります
  5. インストール中です
  6. Finish をクリックします
  7. ダウンロードした VM が一覧へ追加されていたら完了です

続いて、Mac OS X のセットアップになります。

  1. 初期起動時は VM がないので入れるように促されます。 Yes をクリックしてすすめましょう
  2. Connect をクリックして、Genymiton をダウンロードした際に作ったアカウントでログインします
  3. お好みの VM を選択して、Next をクリックします。 Android SDK Manager でインストールした API レベルのものにあわせましょう
  4. VM の名前を指定することができます。 ここで指定した名前は、Titanium Studio で Genymotion と連携する際に必要となります
  5. インストール中です
  6. Finish をクリックします
  7. ダウンロードした VM が一覧へ追加されていたら完了です

Titanium Studio で設定

Titanium Studio で Android アプリをビルドする際、アプリの転送先を Genymotion にする事ができます。

Windows の場合は、Titanium Studio の Window → Preference → Studio → Platforms → Android → Default Emulator に Genymotion でダウンロードした Android の VM 名が入っているのでそれを選択します。

Mac OS X の場合は、Titanium Studio の環境設定 → Studio → Platforms → Android → Default Emulator に Genymotion でダウンロードした Android の VM 名が入っているのでそれを選択します。


チュートリアル

Titanium の開発環境は整いましたか? それでは Appcelerator が提供しているお手本デモアプリ、Kitchen Sink を実際に Genymotion で動かしてみましょう。 Kitchen Sink は GitHub で公開されていますが、Titanium Studio で簡単にインポートすることができます。

Windows

  1. ダッシュボード → Develop タブ → Kitchen Sink の IMPORT ボタンをクリック
  2. 特に変更しなければそのまま Finish をクリック
  3. インポート中です
  4. インポートが完了すると Project Explorer に Kitchen Sink が追加されているのでそこをクリックし、Run → Android Emulator でビルドが始まり、完了すると Genymotion が起動します

Mac OS X

  1. ダッシュボード → Develop タブ → Kitchen Sink の IMPORT ボタンをクリック
  2. 特に変更しなければそのまま Finish をクリック
  3. インポート中です
  4. インポートが完了すると Project Explorer に Kitchen Sink が追加されているのでそこをクリックし、Run → Android Emulator でビルドが始まり、完了すると Genymotion が起動します

Titanium CLI

上級者向けにコマンドラインで Titanium を操作するマニュアルを書く予定


よくある質問

Windows

Titanium Studio が起動しない
titaniumstudio.ini の設定を書き換えると起動することがあるようです。 インストールパスを変更されていないようでしたら、C:¥Users¥hoge¥AppData¥Local¥Titanium Studio¥titaniumstudio.ini をテキストエディタで開き、-Xmx1024m を -Xmx512m 等の低い値でお試しください
Genymotion が Titanium Studio で認識されない
Windows コマンド プロセッサ(cmd.exe)を開き、以下のコマンドをお試しください
C:¥Users¥hoge>titanium config genymotion.enabled true

Mac OS X


更新履歴

2014 年 01 月 12 日
Xcode を追加 @k0sukey
2014 年 01 月 08 日
Android SDK、Genymotion∞ チュートリアルを追加 @k0sukey
2014 年 01 月 07 日
環境構築まで作成 @k0sukey