{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/automated-build-ios-anndroid-with-titanium/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"74b5297d-d3f3-5150-8bae-84e3fa59d3e9","excerpt":"こんにちは。れこです。 最近は、友人といちれこプロジェクトという活動をしていまして、 まだ詳細は非公開ですが、iOS と Android 両方に対応したアプリを作っています。 双方のプラットフォーム用の言語や、独自仕様を覚えるのは面倒なので、 Java や Objective-C を書かなくても Android…","html":"

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

\n

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

\n

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

\n

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

\n

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

\n\n

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

\n

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

\n

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

\n

事前に必要なもの

\n

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

\n\n

の PC で試しています。

\n

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

\n

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

\n

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

\n

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

\n

\n \n \n \n \n \n \n \n \n

\n

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

\n

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

\n

\n \n \n \n \n \n \n \n \n

\n

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

\n

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

\n

\n \n \n \n \n \n \n \n \n

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

\n \n \n \n \n \n \n \n \n

\n

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

\n

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

\n

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

\n

\n \n \n \n \n \n \n \n \n

\n

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

\n

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

\n

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

\n

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

\n

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

\n
$ cd ~\n$ brew update && brew install node
\n

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

\n
\n

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

\n
\n

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

\n
$ node -v\nv0.8.17\n$ npm -v\n1.2.0
\n

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

\n

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

\n

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

\n
$ sudo npm install -g titanium
\n

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

\n

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

\n
$ titanium -v\n3.0.24
\n

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

\n

5.Titanium-cli の設定をする

\n

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

\n

ターミナルに、

\n
$ titanium setup
\n

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

\n\n

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

\n

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

\n

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

\n

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

\n
$ titanium create
\n

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

\n\n

上記を入力すると、

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

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

\n

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

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

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

\n

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

\n

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

\n

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

\n
$ titanium build -p ios
\n

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

\n
Titanium Command-Line Interface, CLI version 3.0.24, Titanium SDK version 3.0.2.GA\nCopyright (c) 2012-2013, Appcelerator, Inc.  All Rights Reserved.\n\nPlease report bugs to http://jira.appcelerator.org/\n\n[INFO]  Build type: development\n[INFO]  Building for target: simulator\n[INFO]  Building using iOS SDK: 6.1\n[INFO]  Building for iOS iPhone Simulator: 6.1\n[INFO]  Building for device family: universal\n[INFO]  Building for iOS 6.1; using 4.3 as minimum iOS version\n[INFO]  Minimum iOS version: 4.3\n[INFO]  Debugging disabled\n[INFO]  Initiating prepare phase\n[INFO]  Forcing rebuild: /Developer/myapp/build/iphone/build-manifest.json does not exist\n[INFO]  Forcing rebuild: debugger.plist does not exist\n[INFO]  No Titanium Modules required, continuing\n[INFO]  Performing full rebuild\n[INFO]  Copying Xcode iOS files\n[INFO]  Creating Xcode project directory: /Developer/myapp/build/iphone/myapp.xcodeproj\n[INFO]  Writing Xcode project data file: Titanium.xcodeproj/project.pbxproj\n[INFO]  Writing Xcode project configuration: project.xcconfig\n[INFO]  Writing Xcode module configuration: module.xcconfig\n[INFO]  Creating symlinks for simulator build\n[INFO]  Forcing rebuild: ApplicationDefaults.m has changed since last build\n[INFO]  Writing properties to ApplicationDefaults.m\n[INFO]  No module resources to copy\n[INFO]  No CommonJS modules to copy\n[INFO]  Invoking xcodebuild\n[INFO]  Finished building the application in 24s 938ms\n...
\n

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

\n

\n \n \n \n \n \n \n \n \n

\n

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

\n
$ titanium build -p android
\n

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

\n

\n \n \n \n \n \n \n \n \n

\n

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

\n

ビルドを自動化する

\n

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

\n

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

\n

参考サイト

\n","timeToRead":12,"frontmatter":{"title":"titanium-cliとGruntを使って、コマンドラインからiOS・Androidアプリのビルドを自動化する方法(前編)","tags":["Android","iOS","JavaScript","Titanium studio"],"date":"April 05, 2013","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='162'%20viewBox='0%200%20400%20162'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2081v81h401V0H0v81m277-37c-5%203-8%206-9%2012%200%205%201%205%207%202%204-3%208-9%208-13s0-4-6-1M8%2082l1%2036h57l7-7%207-7V46H8v36m341-36l1%203c1%203%201%203-1%205-3%202-7%209-7%2012%200%202%202%202%2020%202%2023%200%2022%200%2018-8l-7-7v-3c2-3%202-4%201-4l-2%202c-1%204-20%204-20%200-1-2-3-3-3-2m-74%2015c-6%202-7%202-11%200-20-6-32%2015-21%2038%206%2013%2011%2017%2022%2014h10c10%203%2017-2%2021-14%202-4%202-4-1-6-7-5-8-18-2-23%203-3%203-3%201-5-4-5-11-7-19-4m58%2010c-2%201-2%203-2%2011%200%2012%201%2014%206%2014h3V83c0-13%200-14-4-14l-3%202m9%2014c0%2017%200%2017%205%2018%202%200%203%201%203%206%200%206%201%208%205%208%203%200%204-1%204-8%200-5%201-6%204-5%202%200%202%201%202%204%200%207%200%208%203%209%204%202%206-1%206-8%200-5%200-5%203-6%204%200%205-2%205-18V70h-40v15m42-14l-1%2012c0%2011%201%2013%206%2013h3V84l-1-14c-2-2-6-1-7%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.474074074074074,"src":"/static/3013cdef627d36a25044c2a2f1977e61/741c1/featured-image.jpg","srcSet":"/static/3013cdef627d36a25044c2a2f1977e61/466a3/featured-image.jpg 334w,\n/static/3013cdef627d36a25044c2a2f1977e61/741c1/featured-image.jpg 604w","srcWebp":"/static/3013cdef627d36a25044c2a2f1977e61/e33b9/featured-image.webp","srcSetWebp":"/static/3013cdef627d36a25044c2a2f1977e61/cd98f/featured-image.webp 334w,\n/static/3013cdef627d36a25044c2a2f1977e61/e33b9/featured-image.webp 604w","sizes":"(max-width: 604px) 100vw, 604px"}}}}}},"pageContext":{"slug":"/automated-build-ios-anndroid-with-titanium/","previous":{"fields":{"slug":"/test-backbone-with-sinon/"},"frontmatter":{"title":"Backbone.js×sinon.jsのテストでspyが上手く動かない時のメモ","tags":["Backbone.js","JavaScript","Mocha","sinon.js"]}},"next":{"fields":{"slug":"/event-report-of-js-app-in-tanemaki/"},"frontmatter":{"title":"第一回 JS-App勉強会@タネマキ LTメモ","tags":["angular.js","Backbone.js","CoffeeScript","Grunt","knockout.js","Nodejs"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}