*

Titanium Mobile入門【導入編 on Mac】

公開日: : 最終更新日:2014/05/12 Titanium , ,


スポンサードリンク



いよいよTitanium Mobile入門【導入編 on Mac】です。
Titanium Mobile入門【導入編】ではWindowsへの導入でしたが、今回はそのMac編です。

on Macかin Macか悩みましたが、その環境で作業するのであればonかな?
と思いonにしました。とってもどうでもいい話ですが・・・
なお、各種利用ソフトの細かいバージョンは2013/11/14日現在の物ですので、適宜読み替えてご覧ください。

ターゲットとするデバイスはiOSとAndroidとなります。

今回の作業手順は以下の通りです。

  1. JDKのインストール
  2. Xcodeのインストール
  3. Android SDKのインストール
  4. Titanium Studioのインストール
  5. Titanium Studioの設定と動作確認

1 JDKのインストール

ターミナルから

を実行します。
Javaのバージョン情報が出力された場合は既にJDKがインストールされていますので「Xcodeのインストール」に進んでください。
実行した結果Javaのインストールを促すメッセージが表示された場合は「インストール」ボタンを押してインストールしてください.

2 Xcodeのインストール

App Storeを起動してXcodeで検索しインストールするだけです。
なおOS XのバージョンがXcodeをインストールする条件を満たしていない場合はOS Xのバージョンアップが必要です。
バージョンアップ時のバックアップについては、「Time Machineを使ったバックアップ」エントリーを参照ください。

 

3 Android SDKのインストール

http://developer.android.com/sdk/index.html
にアクセスして、DOWNLOAD FOR OTHER PLATFORMSをクリックします。
スクリーンショット 2013-12-10 17.15.29

クリックするとページに新たな情報が表示されるので「android-sdk_r22.3-macosx.zip」をクリックします。
スクリーンショット 2013-12-10 17.18.17

利用条件の説明画面が表示されるので、内容を読んでいただいた後に「 I have read and agree with the above terms and conditions」のチェックボックスのチェックを行い、ダウンロードを実行してください。
ダウンロードしたzipを解凍し、作成されたandroid-sdk-macosxフォルダを任意のディレクトリに配置します。
移動後にandroid-sdk-macosx/tools/androidをダブルクリックして実行します。
Android SDK Managerが起動しますので

  • Android SDK Platform-tools
  • Android 2.2 (API 8)またはAndroid 2.3.x (API 10)

は選択必須ですので選択してください。それ以外のAPIIバージョンは必要な物を選択してください。
選択後にインストールボタンをクリックします。インストール処理は結構な時間がかかります。
「Done loading packages.」と表示されたら終了です。

4 Titanium Studioのインストール

Titanium Studioをダウンロードするためにはアカウントの登録が必要です。

https://my.appcelerator.com/auth/loginにアクセスし、「Signup for Free Account」をクリックします。

スクリーンショット 2013-12-10 17.20.20

 

アカウント登録画面で必要事項を記入し「Sing Up」ボタンをクリックします。
登録には結構(たしか10分ぐらいだったような・・・)かかりますので、登録完了のメールが来るまで待ちます。

登録完了メールが届いたら上記の画面からログインします。
ログイン後に表示された画面の
「Mac 10.8」のをクリックすると確認画面が表示されダウンロードが実行できます。
スクリーンショット 2013-12-10 17.53.57

ダウンロード完了後にTitanium_Studio.dmgをマウントし、インストールします。

5 Titanium Studioの設定と動作確認

「アプリケーションフォルダ」のTitanium Studio/TitaniumStudioをダブルクリックし起動します。
Titaniumのロゴとワークスペース選択ダイアログが表示されますので、ワークスペースを選択し「OK」ボタンをクリックしてください。
スクリーンショット 2013-12-10 17.59.51

インストールが完了してTitanium Studioを起動すると起動中の画面でログインを求められます。
アカウントは既に作成していますので「I do have an account with Appcelerator」を選択し、「Next」ボタンをクリックしてください。

登録済みのEmailとPasswordを入力してloginボタンをクリックしてください。

Titanium Studioが起動しました。初回起動時もしくはTitaniumのモジュールにアップデートがある場合は以下の様な画面が表示されますので「Next>」ボタンをクリックしてください。

Node.jsのインストール場所の選択場所を入力するダイアログが表示されます。Node.jsを既にインストールしている場合は「set installed path」に適切な値を設定してください。
インストールしていない場合は指定は不要です。「Install」ボタンをクリックしてください。

後はアップデートが終わるのを待つばかりです。

残りはAndroid SDKの設定と動作確認だけです!

ファイルメニューの「環境設定」をクリックします。
スクリーンショット 2013-12-10 18.58.40

 

環境設定画面が表示されますので、「Studio」→「Plartforms」→「Android」を選択し「Android SDK HOME」の「Browse」ボタンをクリックしSDKのインストール先を指定し「OK」ボタンをクリックします。
スクリーンショット 2013-12-10 19.01.00

やっと環境が作成できたので、Titaniumが提供しているテンプレートプロジェクトを選択し動作させたいと思います。AlloyとはTitanium 向けの MVC フレームワークです。

Titaniumのメニューの「File」→「New」→「Mobile Project」を選択すると以下の画面が表示されますのでなにも変更しないでNextをクリックします。
スクリーンショット 2013-12-10 19.05.47

次画面でProject nameやApp Idなどを入力します。
とりあえずお試しなのでProject nameにはhelloWorld、App Idにはcom.helloWorldを指定し、Deployment TargetsのMobile Webのチェックを外してからNextをクリックします。

プロジェクト作成中のダイアログが表示され、作成が完了するとプロジェクトが開かれた状態のTitanium Studioが表示されます。
早速実行してみます。以下の画面のように「Android Emulator」をクリックします。
スクリーンショット 2013-12-10 19.09.20

かなり時間がかかりますが以下のようにエッミューレータでHellow Worldと表示されます。
スクリーンショット 2013-12-10 19.11.39

最後にiPhoneシュミレータで実行してみます。すると
[ERROR] : Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.とのメッセージが表示され失敗しました。
何故に昇格が必要?と思い、Xcodeの状態を確認してようとXcodeを起動すると
インストールがまだ終わってなかったようです。「Agree」を押してXcodeが起動しました。Xcodeで何もしないので終了させて再度iPhoneシュミレータで実行してみます。

スクリーンショット 2013-12-10 19.13.24

今度はうまく行きました。Androidエミュレータと比べると実行完了までの時間がかなり早いですね。でも何故エミュレータとシュミレータなのか疑問です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Titanium Mobile応用【JasmineとTiShadowでBDD編:15桁入力処理】

前回の続きで、「BDD編その3」です。 「BDD編その1」 「BDD編その2」をまずはご参照くだ

記事を読む

no image

Titanium Mobile応用【JasmineとTiShadowでBDD編:テストが時々失敗する理由】

前回の最後に残った問題点の解決方法が分かりましたので 「BDD編その5」として記載させていただきま

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:対象アプリ説明】

本格的にTitanium Mobile CLIを利用してBDDを行いたいと思います。 まずは、計算

記事を読む

Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】 に引き続き T

記事を読む

TitaniumのTableViewを試してみる【何故か後編】

「TitaniumのTableViewを試してみる【何故か前編】」では、予想に反してiOSシュミレー

記事を読む

Titanium Mobile入門【CLI激闘編】

Titanium Studioの環境できたので、次はCLI!、と思いCLIでビルドするとうまくいかな

記事を読む

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】

Titanium MobileでAlloyフレームワークを利用する時に避けて通れないのがUIコンポー

記事を読む

no image

Titanium mobileでiPhoneのNavigationBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

no image

Titanium mobileでAndroidのActionBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

Titanium Mobile入門【導入編】

スマホでアプリを開発すべくTitanium Studioの動作環境を作成し、Default Allo

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑