*

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アドセンス




関連記事

no image

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

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

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:最大桁入力と閾値テスト】

前回の続きで、「BDD編その4」 「BDD編その1」と 「BDD編その2」 「BDD編その3」

記事を読む

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

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

記事を読む

Titanium Mobile入門【CLI激闘編】

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

記事を読む

no image

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

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

記事を読む

Titanium Mobile入門【導入編】

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

記事を読む

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

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

記事を読む

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

Mac miniの環境が完成したので、新たなTitaniumを利用したBDDシリーズを開始する予定で

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:数値ボタンの1回押し処理】

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

記事を読む

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

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

記事を読む

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 ↑