2013年

6月

01日

開発環境をつくるべし!(Titanium Studio 3.1)

あたらしいTitaniumの本が登場しました

Titanium SDK API 解説書ページを表示する


さあ、いよいよWindowsにTitanium Studioを導入するわよ。

MacOSでも基本同じプロセスだけど、違うところは「MacOSの開発環境だべし!」を参照あれ!

Titanium Studio 3.1はバージョンアップを重ね、前提ソフトのインストーラがすべてTitanium Studioのインストーラに内包されたわ。

Titanium Studio 1.xの時代に比べたら、ずいぶん簡単になったわね。

インストール自体は簡単になったけれど、エミュレータやコンパイルがうまく動かなかったり、まだまだ問題点があるわね。

導入ソフトと開発環境構築手順

導入するソフトの一覧を記述しておくわ。

すべてTitanium Studio 3.1に内包されているので、個別にインストールする必要はないけれど、導入されるソフトを知っておくことは、重要ね。

  • Android SDK R22
  • Java SE Development Kit(JDK) 6 Upddate 25(Windows x86版)
  • Git
  • Node.js
  • Titanium Studio 3.1Titanium Mobile 3.1

Titanium Studioのインストール

さあ、いよいよTitanium Studio 3.1のインストールよ。

http://www.appcelerator.com/titanium/

にアクセスして、

[DOWNLOAD TITANIUM]ボタンをクリックして、「Sing up」画面を表示してね。

すべての項目を埋めて、アカウントを登録するのよ。

Email Address と Passwordは、Titanium Studioのインストール時に使用するので、忘れてはダメよ。

[I agree to the terms of service and privacy policy.]をチェックして、[Sign Up]ね。

すでに登録済みなら、「Already have an account?」をクリックすれば、ログイン画面が表示されるわ。

Sign Upまたはログイン後、

Get Started with Titanium>1. Download Titanium Studio>Windows

をクリックして、インストーラーをダウンロードすべし。

ダウンロードしたインストールファイル「Titanium_Studio.exe」を起動するべし!

[Next >]→[I Agree]をクリック。

 

インストール先のフォルダーを指定するのよ。

他のWindowsユーザーでも使用するのであれば、インストール先フォルダを

C:¥Program Files¥Titanium Studio

に変更しましょ。

で、[Next]>[Next]

Titanium Studioに関連付けるファイルをチェックしてね。

私の場合は、Titanium Studioを起動して開発を行うので、すべてNo Checkで進めたわ。

  • ×Cascading Style Sheet(.css)
  • ×JavaScript File(.js)
  • ×ScriptDoc(.sdoc)
  • ×XML Documents(.xml)
  • ×PHP Documents(.php)

[Next]→[Next]→[Install]

画面を進めると、JDK(Java SE Develop Kit 6 Update 25)のインストールが自動で開始されるわ。

JDKのインストールは時間がかかるので、しばらく放っておきましょ。

JDKのインストールが終わると、そのままTitanium Studioのインストールが継続するわね。

最後に、[Next]→[Close]をクリックして、インストールは完了よ!

Titanium Studio アイコン

Windowsのデスクトップに[Titanium Studio]のショートカットがあるはずね。

Titanium Studioのセットアップ

ワークスペースの設定

[Titanium Studio]を起動するのよ。

まず、最初に[Workspace Launcher]画面でワークスペースのフォルダーを指定して。

ワークスペースとは、これから開発するさまざまなデータやファイルを保存するため大きな箱と思いなさい!

この表示は毎回起動するたびに聞かれるので、面倒であれば[Use this as the default and do not ask again]をチェックすると、この画面をスルーするわ。

[OK]

ログイン中でなければ、「I do have an account with Appcelerator」で[Next]を押して、インストーラーのダウンロード時に作成したアカウントを入力して、[Login]をクリックして。

ログインが成功すれば、次の起動時からはスルーしてくれるわ。

もちろん、ログイン済みならこの画面は表示されないわ。

ここで「Configuring Git Support」が表示されるわ。

[OK]をクリックすると、Gitのインストールがはじまるわ。Gitは、ワークスペースに内蔵される形なのね。

次に、「Titanium Update」が表示されるはず。

すべての項目にチェックをつけて[Next]。

「NodeJS Install Options」で、[Install]ボタンを押して、Node.jsのインストールを開始して。

[Node.js Setup]画面が表示されるわね。

Titanium Studio 3.1では、Node.jsのインストールが必須なので、[Next]で進めてインストールを完了させましょ。

[SDK Overwrite]画面も表示されるわね。

これも[Yes]で、Titanium SDKを更新してね。

Titanium Studio画面

途中でこけたら、Titanium Studioを一度終了させて、もう一度起動すれば多分大丈夫ね!

更新が終わると、Titanium Studioの画面が表示されるわ!

最初に「Dashboard」が表示されるはず。

「Dashboard」が[Get Started]メニューになっていることを確認して、

「Customize Your Environment」の

「Default Titanium Studio Theme」(画面のデザイン)は[Light]か[Dark]か選んで、

「Titanium Studio UI」は、[Advanced]にしておきましょ。

下にスクロールして、「Configure Native SDKs」で、

Android SDKをインストールできるわ。

[Android SDK]をクリックして、[Install or Update Android SDK]ボタンをクリックしましょ。

「The input directory does not exist and will be created」ではインストール先フォルダーを指定するのよ。おすすめは、

C:¥Android¥android-sdk

ね。インストール先フォルダに「Program Files」のようにスペースが入るフォルダー名ではコンパイル時にエラーが発生する可能性があるのね。

[OK]をクリックするとインストールが進むわ。

しばらくすると、[Android SDK Manager]画面が表示されるわよ。

どのパッケージをチェックすればよいのかなんだけど、全部入れてもいいし、選んで入れてもいいわね。私は、次のパッケージにチェックを付けたわ。

  • Tools内のすべて
  • Android 2.2以上の各SDK PlatformとGoogle API
  • Android 4.0以上は各SDK ARM EABI v7a System Imageが必須
  • ExtrasのAndroid Support Library, Google USB Driver

[Install XX Packages...]ボタンをクリックすると、ライセンス確認画面が表示されるはずよ。

[Android SDK License]を選択して、[Accept License]ボタンを押せばすべてのパッケージが[?]から[チェック]に変わるわ。

[Install]ボタンを押して、各パッケージのインストールを始めましょ。

インストール中。約30分待ち...

「Android Tools Updated」で[OK]。

「Android SDK Manager Log」で[Done loading packages.]のメッセージを確認して[Close]。

最後に、「Android SDK Manager」をクローズして、インストールは完了よ。

これで、Android SDKのセットアップは完了よ。

でも、すでに新しいAndroid SDKのリビジョンが出てるかもしれないから、Dashboardの「Configure Native SDKs」で[Update Android SDK]で更新チェックしてみてね。

新しいリビジョンがあれば、同じ要領で更新してね。

Windowメニュー>Preferencesを実行して、Studio>Platforms>Androidをクリックよ。

[Default Android SDK]には、これから開発を行うAndroidのデフォルトのバージョンを指定するの。

また、[Default Screen]には、アプリを実行するデフォルトのエミュレータサイズを指定できるわ。慣れてきたら、設定しましょ。

[Apply]ボタンをクリックして、[OK]。

次に行く前に、PCの再起動をかけましょ。

プロジェクトの作成と起動

プロジェクトの作成

ワークスペースの中に新しいプロジェクトを作成しましょ。

プロジェクトとは、コンテンツ単位に作成する箱と思ってもらえればいいわ。

Titanium Studioを起動してね。

ツールバーの[New]アイコンをクリックして。

「New」で、[Mobile Project]を選択して、[Next]。

[All]から[Default Project]のテンプレートを選んで、[Next]。

プロジェクト詳細設定

以下の設定を入力・確認して。

  • Project name:testapp
  • App ID:com.任意のアルファベット.testapp
  • Titanium SDK Version:3.1.0.GA
  • [Android]にチェック

[Finish]をクリック。

app.jsの確認

App ExplorerビューのResources>android>app.jsをダブルクリックすると、app.jsの内容が表示されるわ。

すでに簡単なコードが記述されているので、テスト用ならこれで十分ね。

エミュレータの起動

testappプロジェクトをエミュレーターに表示させましょ。

App Explorerビューの[Run]アイコンをクリックして、[Run Configurations...]をクリックして。

[Titanium Android Emulator]をダブルクリックして、「New _confuguration」を作成して。

以下の設定を入力しましょ。

  • Name:プロジェクト名と同じ「testapp」
  • Project:プロジェクト名「testapp」
  • Android API:Android 2.2
  • Screen:任意

ちなみに、Android APIには、ターゲットのAndroidのバージョンを指定するんだけど、[Android 2.1]はTitanium Studio 3.1には対応していないの。

[Apply]→[Run]をクリックして、起動してみて。

[Console]ビューを見てみると、ここでいろいろなエラーが表示されると思うわ。

エミュレーターを正常に起動させるまでが、いろいろ大変なの。

ここで、トラブル対応について、まとめておくわ。

  1. もう一度Android EmulatorをRunさせる
  2. プロジェクトフォルダ内の「build.log」でエラーログを確認する
  3. Windowsタスクマネージャー>プロセスで、「adb.exe」を強制終了→Run
  4. Run>Run Configurations…の[Re-build Project on Launch]にチェックを入れて、Run
  5. Project>Clean…を実行してから、Run
  6. Titanium Studioを再起動する

これらは、よく使う対応方法ね。

 

また、Titanium Studio 3.1 や Android SDK R22 との組み合わせで発生する[Console]のエラーとその対応方法も載せておくわ。

がんばって対応して、何とかエミュレーターを正常にRunさせてね。

Emulator not running, exiting...
  • もう一度Android EmulatorをRun
  • Anti-Virusソフトのシールドから「C:¥Android¥android-sdk¥platform-tools」を除外する
Emulator process exited with code 1
Emulator not running, exiting...
  • Run Configurations…のAndroid APIに「Android 2.3.3」以上を設定する
  • (New!) Android SDKの2.2と2.3.3のSDK Platformは、必須
  • (New!) Android 4.0以上の各Android SDKのPackages「ARM EABI v7a System Image」をインストールする
TypeError: argument of type 'NoneType' is not iterable
  • Android SDKを起動しTools>Manage AVDsを実行するか、またはC:¥Android¥android-sdk¥AVD Manager.exeを実行して、対象のAVDを削除する
Error generating R.java from manifest
多くの人がトラぶっていると思われる現象ね。
  • C:¥Android¥android-sdk¥build-toolsのaapt.exe, dx.bat, libフォルダをC:¥Android¥android-sdk¥platform-toolsにコピーする。または、シンボリックリンクを作成する
testapp表示

どうにか、「testapp」が表示されたかしら。

正常にRunすれば、「I am Window 1」の画面が表示されるわ。

Androidエミュレーターのセットアップ

メニュー画面

Androidエミュレーターを日本語環境にセットするわ。

[Home]ボタンを押し、初期画面を表示し、[Menu]ボタンを押して、[Setting]をクリックして。

エミュレーター日本語に変更

上下左右ボタンで[Language & keyboard]を選択して、決定ボタンをクリック。

さらに[Select locale]を選択して、決定。

一番下の[日本語]を選択して、決定。

日付自動オフ

[MENU]の右の[戻る]ボタンで設定画面まで戻り、[日付と時刻]を選択⇒決定。

[自動]をチェックオフして、[タイムゾーンの選択]を選択⇒決定。

エミュレータータイムゾーン設定

[日本標準時(東京)]を選択⇒決定。

設定が完了したら、最初の画面まで戻って。

Kitchen Sinkのダウンロードと表示

Kitchen Sinkダウンロード操作

Kitchen Sinkとは、Titanium Studioで活用できるサンプルプログラムのプロジェクトよ。

このサンプルプログラムを参考に学習するのが、今のところ現実的ね。ダウンロードをしておきましょ。

左下エリアからSamplesビューを表示させ、[Titanium]を展開して、[Kitchen Sink]を選択して。

[Import sample as project]アイコンをクリックよ。

Kitchen Sinkプロジェクト名

Kitchen Sinkのプロジェクト名を指定するわ。

このプロジェクト名で、ワークスペースの中にダウンロードされることになるわよ。

[Finish]をクリックすると、ダウンロードが開始されるわよ。

Kitchen Sinkダウンロード中

Kitchen Sinkダウンロード中!10分待ち..

完了したら画面が戻るので、しばらく放っておくべし!

Kitchen Sinkのロードが完了すると、App Explorerビューにプロジェクトが登録されるの。

Window>preferenceを実行して、Studio>Platforms>Androidを表示して、[Default Android SDK]を「Google APIs (Android 2.3.3)」にセットしましょ。

Kitchen Sinkの起動

App Explorerビューの[Run]アイコン>[Android Emulator]をクリックしてね。

自動で、Kitchen Sink用のAndroid Emulatorの構成をつくってくれるわ。

Kitchen Sink起動中

エミュレータと一緒に立ち上がるコマンドプロンプトウィンドウを確認すると、コンパイル作業とエミュレーターのセットアップが激しく動いているのが分かるわ。

起動まで3~5分もかかるので、ジっと待つのよ。

他のエラーが表示される場合もあるが、無視?しましょ。

やがて、Kitchen Sinkが起動するはずよ。

Emulator process exited with code 1
Build process exited with code 1
Project failed to build after 999ms
が表示される場合の対処法
  1. tiapp.xmlをダブルクリック
  2. TiApp Editor下側のタブで[Overview]から[tiapp.xml]に表示切り替え
  3. 「<uses-sdk android:targetSdkVersion="11"/>」の行を探し、「おお、ターゲットのAPIバージョンは、11ね!」と心でつぶやく
  4. Android SDK Managerを起動する(DashboardからAndroid SDKをクリックし、[Update Android SDK])
  5. 「Android 3.0 (API 11)」の表記に「ターゲットのAPIがAndroid 3.0 !?」とちょっとびっくりする
  6. しぶしぶAndroid 3.0の[SDK Platform]と[Google APIs]をインストールする
  7. プロジェクトをクリーンして、もう一度Runさせる
Kitchen Sink画面

Kitchen Sinkがエミュレーターに表示されたら、Kitchen Sinkが用意しているさまざまなサンプルパターンを操作してみて。

Kitchen SinkはAndroidデバイス(実機)にインストールすることも可能になのよ。ちょっと容量(20MB以上)をとるけれど……。

 

Titanium Studioの日本語化(Titanium Studio 3.2.x対応)

言語パック選択

まず、Titanium Studio を終了させてね。

NTT Data Group Open Source Squareのサイト http://sourceforge.jp/projects/blancofw/wiki/nlpackEclipse から最新の Eclipse XXX 日本語化言語パック をクリックして。

次のページで、Eclipse Classic (SDK) をクリックして、日本語化言語パックのzipファイルをダウンロードしてね。

ダウンロードした NLpackja-eclipse-SDK-●●●-blancofw.zip を解凍して、eclipseフォルダの中のfeaturesフォルダとpluginsフォルダの中のファイルをコピーして、Titanium Studioのプログラムフォルダ(C:¥Users¥xxx¥AppData¥Local¥Titanium Studio または C:¥Program Files¥Titanium Studioなど)の同じフォルダの中にペーストするべし!

[Titanium Studio 3.2.x編]

「メニューが表示されなくなっちゃってるよ〜」のご指摘ありがとうございます。

Titanium Studio 3.2.xでは、このまま起動すると、メニューが消えてしまうみたいね。まあ、私もアップ後消えていたのですが。。。

なので、ここはEclipseのプラグインを利用しましょ。

まず、

http://mergedoc.sourceforge.jp/#pleiades.html

の下の方に、「 Pleiades プラグイン・ダウンロード」があるから、最新版のzipをダウンロードして、解凍してね。

解凍したファイルをそのままTitanium Studioのフォルダにコピペ!

Titanium Studio¥TitaniumStudio.iniをテキストエディターで開いて、最終行に

-javaagent:../plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

を追加して、上書き保存ね。

でも、起動時にまだメニューが表示されない場合があるかもしれない。。。

他のウィンドウを一度表示して、元に戻れば問題ないけれど。。。

ちょっと微妙。。。

日本語化完了

Titanium Studioを起動すると、メニューが日本語化されているのがわかるわね。

Eclipseの日本語パックを流用しているから、翻訳されていない部分は多々あるけれど、ないよりはかなりいいわね。

英語力ゼロの私も少しホッとしたわ。

Android端末ADB用USBドライバーのインストールとプロジェクトの転送(映像のみ)

これで一通りの開発環境のセットアップが完了よ。

これでも、以前のバージョンに比べたら、ものすごく簡単になったのよ。

さぁ、あとはがんばって、勉強するだけね!

9 コメント