ウェブ、ショウジン

Mac OS X LionにTitanium StudioをインストールしてTitanium MobileによるiOSやAndroid向けのアプリケーション開発をする環境を作る

2012-5-27
Category
スマートフォン・アプリ

Titanium Mobileでスマートフォン向け(iOS、Android等)のアプリケーションを開発するのに利用する統合開発環境「Titanium Studio」をインストールして開発環境をセットアップするまでのメモ。

OSはMac OS X Lionで、Titanium Studioはversion 2.0.1。

これに、Xcode(iOS向けの統合開発環境)とiOS SDK、Android SDKをインストールして環境を作っていく。

iOS SDKとXcodeをインストール

iOS向けアプリケーションを開発するにはXcodeが必要なのでMac App Storeからダウンロードしてインストールしておく。(Xcodeは無料)

このダウンロードには開発者アカウントでなくとも、普段利用しているアカウント(iTunesで音楽やアプリを購入したりしているもの)で大丈夫。

Xcode 4.3.2
1_xcode

OS X 10.6 Snow LeopardはこのバージョンのXcodeは対応していないので、その場合にはiOS Dev CenterからXcodeのダウンロードページへアクセスして、そこからXcodeとSDKをダウンロードする。(Apple Developerへの開発者登録とログインが必要*無料)

インストールしたらまず一度Xcodeを起動させること。でないとインストールは完了しないので。(初回起動時に出てくるダイアログに素直に従って進めていけばOK)

JDK(Java Development Kit)をインストール

OS X 10.6 Snow LeopardではデフォルトでJDKがインストールされていたけれど、10.7 Lionではそうじゃなくなっているらしいので、これをインストールする。

ターミナルからコマンドラインで「java -version」と叩くと以下のように「入ってないからインストールしますか?」的なダイアログが出てくるので、これに従ってインストールする。もしも出てこなくて、普通にインストール済のjavaのバージョンとかが表示されれば、それで問題なし。(もしかすると、他の作業で必要になってすでにインストールしている可能性もあるので)

2_java

インストールが終わって、再度確認。

3_confirmJava

無事入った模様。

Android SDKをインストール

Android SDKのダウンロードページにいって自分の環境に対応したSDKを選んでダウンロード。

https://developer.android.com/sdk/

自分の場合はMac OS X(intel)なので、その項目の
android-sdk_r18-macosx.zip
を選んでダウンロード。

4_androidSDK

ダウンロードしたandroid-sdk_r18-macosx.zipを展開して出来たandroid-sdk-macosxディレクトリを、このディレクトリごとApplication(アプリケーション)ディレクトリへ移動。

5_androidSDKdirectory

ここ(Applicationディレクトリ)に置くのはどうかと思ったんだけど、わかりやすいってことで。

ターミナルを使って以下のコマンドで、インストールしたSDKのディレクトリ内にあるtoolsディレクトリに移動。

$ cd /Applications/android-sdk-macosx/tools

ここで以下のコマンドを実行してAndroid SDK and AVD Managerを起動する。

$ ./android

sort by: のところを「Repository」に切り替えて、適当に以下のあたりを節操無くチェックして「install xx packages…」をクリック。(この状態だとxxは36)

6_androidSDKmanager

最低限

・SDK Tools version 14
・Add-On Google APIs version 8

は満たしていないとダメらしい。(Titanium StudioのConfiguration WizardのところでAndroidに対してはそう表示されるので)

次にこのダイアログが出るので、ここで「Accept All」をチェックして「Install」を実行。

7_choosePackages

ここからは長いです。相当長いです。とくにうちのWiMAX環境では。

こんな感じで進んでいきます。

8_androidSDKmanager

このままにして就寝。

朝起きて確認したら無事インストールは済んでいた模様。以下のようにAndroid SDKとAVD Managerの更新は済みましたよ、というダイアログが出るので「OK」をクリックして完了。

9_androidToolsUpdated

あと、ダイアログのメッセージにSDK Manager windowを閉じてから再度開くことを勧めるよとあるので、それもやっておく。Android SDK Manager Logウィンドウも閉じて、再度ターミナルから

$ ./android

を実行。

するとまたSDK Managerが立ち上がって、インストール済みのパッケージ群がロードされたことを確認できる。(ログにDone loading packagesとあるから多分そうなんじゃないかと)

10_androidSDKmanager

あと、先のダイアログには「Eclipseを使っている人はHelp > Check for Updates to see if the Android plug-inの更新も実行しておいてね」的なことが示されているので、これもついでにやっておく。

Titanium Studioのダウンロード、インストール

appceleratorに行って
http://www.appcelerator.com/

11_appcelerator

Donwload Titaniumボタンから開発ツールのTitanium Studioをダウンロード。

ツールのダウンロードには開発者としてのユーザ登録が必要。

12_register

必須項目とされている項目は必ず入力して登録をすすめる。

自分の場合はもう登録済なのでページ上部にある「Login」からLoginする。

13_TiDownload

ログインしたらこの画面になるので、いくつか並んだアイコンから「Titanium Downloads」の「OS X」を選択してクリック。すると、Tianium_Studio.dmgのダウンロードが始まるのでしばし待つ。(うちのWiMAXでは123MBはけっこうダウンロードに時間がかかる)

ダウンロードしたTitanium_Studio.dmgをダブルクリックで展開してTitanium StudioをApplicationsフォルダにコピー。

14_TiInstall

コピーしたTitanium Studioをダブルクリックして起動させる。

15_TiRun

これからTitanium Studioを使って作るプロジェクトを保存するWorkspaceを指定する。デフォルトだと以下のディレクトリが指定されているけど、もちろん任意の場所に変更可能。(あとで環境設定から変更することも可能)

16_workspace

初回起動時はappceleratorへのログインが必要なので、開発者登録した際のログイン情報を入力してログイン。

17_TiLogin

ログインするとTitanium SDKsの更新が始まる。自動で始まらない場合は「Help」の「Check For Titanium SDK Update」を実行する。回線にもよるけれど、これもうちのWiMAXk回線ではけっこう時間がかかる。10分弱くらい。

18_TiSDKupdating

Titanium SDKsの更新が完了したらOKをクリック。

19_TiUpdateOK

これでTitanium StudioのインストールとTitanium SDKsの更新は完了。

Android SDKのPathを設定する

Titanium Studioメニューから
Titanium Studio > 環境設定を選択し、設定項目メニューのAptana StudioのTitaniumのところから、インストール済みのAndroid SDKの場所を指定する。

20_androidSDKpath

この設定だけでは不十分なので以下の作業を進める。

Titanium StudioのDashboardのConfigureタブから「Let’s get things set up!」をクリック。

21_dashboardConfigure

Configuration WizardのところでAndroidアイコンが「?」になっているので、これを解消していく。(iOSアイコンも同様だけど、これは後回し)

22_dashboardWizard

?のついているAndroidのアイコンをクリックしてから右側にでる「Install or Update Android SDK」ボタンをクリック。インストール済みのパッケージ群が読み込まれるので、その読み込みが完了したらChoose Packages to Installダイアログで「Accept All」を選択して「Install」をクリック。

23_choosePackages

こんな感じでまたインストールに時間がかかるのでしばし待つ。かなり待つ。認証を求められるパッケージが出てきた場合は、それはキャンセルして進めていく。(よくわからないで欲張ってあれこれのパッケージを選択しているとこうなるのね)

24_sdkManagerLog

Android SDK Managerからまたまた以下のメッセージが示されたので従う。

25_androidToolsUpdated

ターミナルから下記のコマンドを実行。

$ ./android

Android SDK Managerが立ち上がってインストール済みのパッケージ群が読み込まれる。

Androdid SDK Manager Logで「Done loading packages.」を確認して、このダイアログをclose。

26_log

Android SDK Managerのウィンドウもcloseして、再度Titunium StudioのConfiguration Wizardのところを確認すると?は消えて「The Android SDK is installed correctly!」となっていた。iOSもなぜかこのタイミングで?が消えて「iOS SDK is installed correctly!」となっていた。(以下の「iOS SDKのPathを設定する」は、前述の作業と並行して済ませておいたから、そのせいかな?)

27_ConfigrationWizard

iOSのほうの?アイコン(iOS SDKへのパスが通ってない等)が出ている場合は以下の作業をする。

iOS SDKのPathを設定する

DashboardのConfigureタブでConfiguration Wizardを表示して、iOSアイコンをクリック。Install or Update iOS SDKボタンをクリック。

28_configrationWizard

すると、こんなエラーメッセージが出た。

29_error

本来はappceleratorの説明ページが出るはずなんだけど、リンク先ページを表示するためのWebブラウザの設定ができていないようでブラウザを起動できないよと。これは前回に環境構築した際には出なかったエラーなので、そのブラウザの設定は後回しにして以下URLにある解説に従ってみる。

http://docs.appcelerator.com/titanium/2.0/index.html#!/guide/Configuring_XCode_inside_Titanium_Studio

30_reference

ターミナルを起動して以下のコマンドを実行。(パスワードを聞かれるので使用しているマシンの管理者のパスワードを入力)

$ sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

Titanium Studioの環境設定からAptana Studio>Titaniumに行って「iOS」部分の「iOS SDK Home:」の「Refresh」をクリック。

31_setting

これでパスは通ったはず。前回もこの作業後すぐに?マークは消えなかったけど、しばらく放置しておいたら(再起動したらだったか、そのへんは曖昧)消えた。今回も並行して進めていたAndroid SDKのパッケージ群のインストールが完了したら?マークは消えて解消されていた。

Kitchen Sinkをインポートする

環境が無事構築できたか、その確認も含めてサンプルアプリのKitchen Sinkをインポートしてみる。

Titanium StudioのDevelopタブからKitchen Sinkを選んでImportボタンをクリック。

32_kitchenSink

Project nameを入力して(デフォルトのままでもOK)プロジェクトをインポートする場所を確認して「Finish」ボタンをクリック。

したら問題発生ということで、手動でgithubから持ってこないといけない模様。

33_problem

appcelerator / KitchenSink
https://github.com/appcelerator/KitchenSink

上記URLからzipファイルをダウンロードして、ダウンロードしたzipファイルを展開。これをTitanium StudioのFileメニューからImportする。

34_import

TitaniumのExisting Titanium Projectを選んでNextをクリック。

35_select

Importするプロジェクト(githubからダウンロードした)のディレクトリを指定して、Project Nameを適当に(KitchenSinkとか)に変更してFinishをクリック。

36_select2

これでサンプルプロジェクト「KitchenSink」をImportできた。

Kitchen Sinkをエミュレータ/シミュレータで動かしてみる

ImportしたKitchenSinkプロジェクトはTitanium StudioのProject Explorerウィンドウで確認できるので、これを右クリック(Run As > iPhone Simulator)して実行してみる。(プロジェクトの実行は他にも色々方法がある)まずはiPhone Simulatorでの確認。

37_runAsIphone

iPhone Simulatorが立ち上がる。OKをクリックするとTitanium Mobileで利用できる各種Titanium APIのデモンストレーションが実行、確認できる。

38_ok

39_demos

確認オッケー。

続いて、Androidのエミュレータでも同様に確認してみる。Project ExplorerでKitchenSinkを右クリックしてRun AsからAndroid Emulatorを選択。

iOSのシミュレータと比べるととても時間がかかる。なので実機を持っている場合は実機にインストールして確認、デバッグがいいんじゃないかなと思う。

Eclipseで作成したAndroidアプリを実機のAndroid搭載端末にインストールしてデバッグしてみる

40_runAsAndroid

エミュレータは無事起動したのでそのへんのセットアップは大丈夫そうだけど、KitchenSinkを起動できない。というかエミュレータにインストールできない、のか。

[ERROR] Failed installing com.appcelerator.titanium: pkg: /data/local/tmp/app.apk
Failure [INSTALL_FAILED_MISSING_SHARED_LIBRARY]

だそうで。

Androidの実機にインストールだと問題ないんだけど、これはこれで実行できないとなんか悔しい?ので、いろいろ調べてやってみる。

以下の記事のとおりにやったらできました。ありがとうございます。
Kitchen Sinkがandroidエミュレータで動かない時の対処法

App ExplorerでKitchen Sinkのプロジェクトフォルダを選択し、Titanium StudioのProjectメニューからPropertiesを選ぶ。

41_properties

Resourcesの中のRun/Debug SettingsからTitanium Android Emulator – KitchenSinkを選んで「Edit…」をクリック。

42_edit

Platformの「Android API」項目で「Google APIs Android 2.2」を選んでOKをクリック。Run/Debug Settingsに戻るので、ここでもOKをクリック。そして、再度Run AsでAndroid Emulatorを選んで実行してみる。

43_platform

Androidのエミュレータが立ち上がり、今度は無事にKitchenSinkがインストールされた模様。

iPhoneのときと同じようにOKをクリック。

44_androidOk

AndroidでもKitchenSinkをインストール、動作を確認できた。

45_android

ということで、Titanium StudioのインストールとiOS、Androidの各種SDK等をインストールして、Titanium StudioによるTitanium MobileでのiOS、Android等のスマートフォン向けアプリケーション開発の準備、これにて完了。

長かった。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿