12

10月

2011

開発環境をつくるべし!(111012更新)

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

しかし、その前にTitanium StudioでAndroidアプリ開発を行うために必要ないろいろなツールや設定を行う必要があるのよ。道はなが~い。

ひとつひとつ確実にセットアップして行くべし!

さまざまな設定方法があるけれど、Kitchen Sinkなるものがなかなかうまく起動してくれないのね。

ここでは最も起動上安定したインストール、設定方法を紹介するわよ。

(映像のバージョンは、Android SDK R12

導入ソフトのリスト

導入するソフトのバージョンを記述しておくわ。バージョンが異なると、表示画面や操作が異なる場合もあるから、その場合は自力で解決するのよ。

  • Android SDK R11 (R13)
  • Java SE Development Kit(JDK) 1.6.0_26
  • Git for Windows 1.7.4
  • Titanium Studio 1.7

Android SDK/JDKのインストール

次のサイトから、最新のAndroid SDKインストーラーをダウンロードしてね。

Android SDK | Android Developers

特に問題なければ、exeの方をダウンロードするべし!

ダウンロードしたインストーラーを起動して、[Next>]で画面を進めるのよ。

JDK(Java SE Development Kit)がインストールされていないと、右の画面が表示され、[Next>]をクリックできないわよ。

 [Visit java.oracle.com]ボタンをクリックして、JDKのサイトを表示してちょうだい。

[JDK]のアイコンをクリックしてね。

(Android SDK R13では、JDK6が必須です。JDK7では稼働しません。)

[Windows x86]のインストールファイルをダウンロードして、インストールするのよ。

※Windows 64ビットであっても[Windows x86]のインストールファイルを使用すべし![Windows x64]でインストールすると、コンパイル時にエラーが発生してしまうのよ。(xxxxmanifest.xmlが見つからない...これはEclipse+Javaの環境でも同じことが発生するみたい)

[Android SDK Tools Setup]のウィンドウに戻り、一度[<Back]すれば、[Next>]をクリックできるわよ。

[Next>]をクリックして、最後の画面まで進めるべし!

(Android SDK R12では、インストール先フォルダを C:¥android に設定しましょう。Program Filesのようにスペースが入るフォルダ名ではコンパイル時にエラーが発生します。Android SDK R13では未確認ですが、多分同じ?)

最後のページで、「Start SDK Manager」をチェックして、[Finish]

必要なパッケージの検索が始まり、しばらくすると、右の画面が表示されるわよ。

すべてがチェックされている状態で、[Install]をクリックすると、各パッケージのインストールが始まるの。

すべてのパッケージではなく、節約してパッケージを導入したい場合は、以下のAndroidのバージョンに合わせてチェックを付けて[Install]を行えばいいわね。

  • Android SDK Platform-tools
  • SDK Platform Android 2.2, API 8
  • SDK Platform Android 2.1-update1, API 7
  • SDK Platform Android 1.6, API 4
  • Google APIs by Google Inc., Android API 8
  • Google APIs by Google Inc., Android API 7
  • Google APIs by Google Inc., Android API 4
  • Google Market Licensing package

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

右の画面が表示されたら、Android SDKのインストールは完了。[Yes]をクリックすると、画面が閉じるわ。

インストールのプログレス画面で[Close]をクリックして、画面を閉じるべし!

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

タスクバーにAndroid SDKの[コマンドプロンプト]が残っていれば、これもクローズしちゃって。

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

時がたてば、Android SDKパッケージの新しいrevisionがリリースされるわね。これをインストールするには、スタート>すべてのプログラム>Android SDK Tools>SDK Manager を右クリック→管理者として実行 (Android SDKのインストール先がProgram Filesではない場合、スタート>すべてのプログラム>Android SDK Tools>SDK Manager をクリックでOK)で起動するのよ。

たまに気が付いたときに起動すべし!

環境変数を設定する

スタート>コンピューター を右クリック⇒[プロパティ]⇒[システムの詳細設定]⇒[環境変数]をクリックして。

[システム環境変数]の[新規]をクリックして、次の内容を設定してね。

  • 変数名:JAVA_HOME
  • 変数値:JDKがインストールされているフォルダー

[OK]をすべし!

[システム環境変数]のリストから[Path]を選択して、[編集]

[変数値]の先頭に以下を追記するのよ。

  • 変数値:%JAVA_HOME%¥bin;

[OK]をクリックすべし!

 

[システム環境変数]の[新規]をクリックして、次の内容を設定するの。

  • 変数名:ANDROID_SDK
  • 変数値:Android SDKがインストールされているフォルダー

[OK]をクリックすべし!

[システム環境変数]のリストから[Path]を選択して、[編集]

[変数値]の先頭に以下を追記してよ。

  • 変数値:%ANDROID_SDK%¥tools;%ANDROID_SDK%¥platform-tools;

[OK]をクリックすべし!

スタート>すべてのプログラム>アクセサリー>コマンド プロンプト をクリック。

次のコマンドを入力して、環境変数が有効かどうか確認するべし!

java -version[Enter]

adb version[Enter]

それぞれ情報が表示されれば、環境変数の設定は大丈夫よ!

exit[Enter]

と入力して、コマンド プロンプトを閉じましょ。

Gitのインストール

http://code.google.com/p/msysgit/を表示すべし!

左メニューから、[Git-1.7.4-preview20110204.exe]をクリックして、インストーラーをダウンロードするのよ。

Gitのインストーラーを起動して、[Next>]で画面を進めてね。

[Select Component]画面では[Additional icons]をチェックオフして、画面を進めて。

他の画面は、そのままの設定で、Git for Windowsのインストールを完了させるべし!

Titanium Studioのインストール

さあ、いよいよ準備は整ったわ!Titanium Studioのインストールよ。

http://www.appcelerator.com/products/download/

にアクセスして、右上の[LOGIN]をクリックして。

[The Appcelerator Network Login]画面の右下の[Signup for Free Account]をクリックして。

必要な情報を入力してね。

この情報は、Titanium Studioを起動する際に必要となるので、必ず覚えておくべし!

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

ログイン後、Downloads>Download the latest version of Titanium Studio>Windowsをクリックして、インストーラーをダウンロードすべし。

ダウンロードしたインストールファイル Titanium Studio.exe を起動すべし!

[Next >]をクリック。

 

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

そのままでよければ、[Next >]。

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

私の場合は、以下の項目を設定したわ。

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

[Next >]。

インストールが完了したら、[Next >]。

 

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

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

Titanium Studioのセットアップ

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

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

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

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

そのままでよければ、[OK]をクリック!

ログインを求められるので、インストーラーのダウンロード時に作成したアカウントを入力して、[Login]して。

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

[Git Installation Not Found]が表示されたら、[Browse]をクリックして、Git for Windowsのインストールフォルダ-を指定すべし!

やっとTitanium Studioの画面が表示されたわ!

さまざまなアップデート情報が表示されるはずよ。クリックして、アップデートを行うべし!

 

強制的に更新を行う場合は、Help(ヘルプ)メニュー>Check for Updates(更新の確認)を実行するのよ。

もし、Titanium Studioのインストール先がProgram Filesの場合は、一度Titanium Studioを終了させて、Titanium Studioアイコンを右クリック>管理者として実行 で起動させてから、Check for Updates(更新の確認)を実行させてみるといいわね。

Windowメニュー>Preferencesをクリックして。

Aptana>Titaniumをクリックよ。

[Android SDK Directory]の[Browse]をクリックして、Android SDKがインストールされているフォルダーを指定して。

[Default Android SDK]には、これから開発を行うAndroidのバージョンを指定するの。今回は[Android 2.1-update1]を選択ね。

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

Titanium Studioのデザインを変更する

Titanium Studioの画面デザインを変更するには、Windowsメニュー>PreferencesのAptena>Themesを選択よ。

さまざまなテーマから、お気に入りのデザインパターンを選択して、[Apply]ボタンをクリックしてね。

Kitchen Sinkのダウンロード

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

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

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

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

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

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

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

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

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

Kitchen Sinkを表示する

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

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

[Titanium Android Emulator]のエミュレーター設定画面が表示されていなければ、[Titanium Android Emulator]を右クリック→[New]を選択して、エミュレーター設定画面を表示して。

Androidのエミュレーターの設定を以下のように行うべし!

  • Name:任意(例:Android Emulator)
  • Project:[Browse]で Kitchen Sink を選択
  • Android API:Google APIs Android 2.2(重要!)
  • Screen:任意(例:HVGA)
  • Log Level:Info

[Apply]をクリックして、[Run](実行)よ!

(Failure [INSTALL_FAILED_MISSING_SHARED_LIBRARY]エラーが表示される場合は、Android APIを[Android 2.2]にしているかも。Kitchen SinkではGoogle MapとかのAPIを使用しているので、[Google APIs Android 2.2]でないと動かないから気を付けて!)

 

(Tiatnium Studio 1.0.6で解消!)

Android SDK R13+Titanium Studio 1.0.4(Titanium Mobile SDK 1.72)の組み合わせでは、Project:[Browse]ボタンが押せない(プロジェクトの選択ができない!)という報告をいただいたわ。

回避策として、次を実行してみて。

【[Browse]ボタンが押せない場合の回避策】

  1. Windowメニュー>Preferences>Aptana>Titaniumで、[Default Android SDK]を[Google APIs Android 2.2]にセットして[Apply]
  2. App Exploereビューの[Run]アイコン>Android Emulator を実行


これにより、[Browse]は押せないけれど、Kicthen Sink用の実行構成が作成されるはず。
Run Configurationsで「Titanium Android Emulator - Kitchen Sink」が作成されていれば、成功よ。

下側のConsoleビューを確認すると、コンパイル作業とエミュレーターのセットアップが激しく動いているのが分かるわ。

Androidエミュレーター画面が別画面で立ち上がり、「Error Loading Preferences」の文字が...。Windowsのエミュレーターでは表示されるらしいが、エラーではないとのこと(-"-)

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

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

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

Kitchen Sinkの起動途中で、緑色の丸いロックパーツが画面に表示されたら、そのロックを右にドラッグして、エミュレーターのロックを解除するのよ。

最初の起動ではロックは表示されないけどね。

 

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

エミュレーター画面の[Home]ボタンをクリックして、初期画面を表示して。

画面下側中央のボタンをクリックすると、アプリ一覧が表示されるわ。

[Kitchen Sink]が2つ表示されるので、左側の[Kitchen Sink]をクリックすると、Kitchen Sinkが起動するの。

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

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

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

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

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

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

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

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

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

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

【エミュレーターの注意点】

  • 日本語環境にすると、エミュレーター起動時にロックがかかるの。緑の鍵マークを右にドラッグして解除すると、アプリが表示されるから、次から気を付けて!
  • エミュレーター画面をクローズして、再度[Run]させる場合、[Ctrl]+[Alt]+[Del]キー>タスクマネージャーの起動>[プロセス]タブ>adb.exe を選択し[プロセスの終了]を手動で行うべし!

では、エミュレーター画面を閉じて、adb.exeを終了させましょ。

プロジェクトの作成

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

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

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

プロジェクト・タイプ[Titanium Mobile Project]を選択して、[Next >]。

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

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

[Finish]をクリック。

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

これがAndroidアプリ開発を行う際にJavaScriptを記述することになるファイルよ!

覚えておくよろし。

testappの起動

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

Windowメニュー>Preferences>Aptana>Titaniumで、[Default Android SDK]を[Android 2.1-update1]にセットしていることを確認して。

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

[Android Emulator]をクリックすると、[Default Android SDK]で設定したバージョン「Android 2.1-update1」のエミュレーターで起動するわ。

しばらくすると、「I am Window 1」の画面が表示されるわ。

Kitchen Sinkのときと同様に、Android 2.1-update1エミュレーターも日本語環境にセットアップしましょ。

実行環境が違えば、環境設定も別々よ!

 

Titanium Studioの日本語化

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

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

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

ダウンロードした NLpackja-eclipse-SDK-3.x.x-blancofw.zip を解凍して、eclipseフォルダの中のfeaturesフォルダとpluginsフォルダをコピーして、Titanium Studioのプログラムフォルダ(C:\Users\xxx\AppData\Local\Titanium Studio)に上書きペーストするべし!

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

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

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

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

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

次回から、少しずつ開発の学習を始めましょ。

ビシビシいくわよ!

といいながら、すでに時はたっているのですが。。。お代官様、もう少しお待ちを。。。

3 コメント

トラックバック・コメントは下をクリックしてください。

トラックバック・ピングバック/コメント