*

Titanium Mobile入門【導入編】

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


スポンサードリンク



スマホでアプリを開発すべくTitanium Studioの動作環境を作成し、Default Alloy Projectをを作成し少しだけ動作させた時の作業をしたメモです。
といっても、ターゲットのデバイスはiPhoneなのですが、Mac持っていなかった時の話です。

と言うことで、とりあえずWindowsでAndroidをターゲットに環境構築をしてみました。

1 Titanium Studioの動作環境の作成

JDKのインストール→android-sdkのインストール→Titanium Studioのインストールとの流れで記載します。

JDKのインストールと環境変数(pathへの追加、JAVA_HOMEの作成)の設定

http://www.oracle.com/technetwork/java/javase/downloads/index.html
にアクセスして、Java(画面の赤枠で囲まれた画像)をクリックします。
jdkダウンロード1

 

次に表示されるページを少し下にスクロールし、赤枠のリンクをクリックします。
Titanium が64ビット版のJDKを認識でいない不具合があるため、お使いのWindowsが(Macは?とセルフ突っ込み)64bitの場合でもx86のJDKをダウンロードしてください。
jdkダウンロード2

ダウンロード後にJDKをインストールし環境変数の変更を行います。

PathにJDKのインストール先のbinフォルダのパス
binフォルダのパス の例:C:\Program Files (x86)\Java\jdk1.7.0_45\bin

同じくJAVA_HOME変数を作成し値をJDKのインストール先フォルダにします。
JAVA_HOMEの値の例:C:\Program Files (x86)\Java\jdk1.7.0_45\bin

android-sdkのインストールと環境変数(pathへの追加、JAVA_HOMEの作成)の設定

http://developer.android.com/sdk/index.html
にアクセスして、DOWNLOAD FOR OTHER PLATFORMSをクリックします。
androidsdkダウンロード1

クリックするとページに新たな情報が表示されるので「installer_r22.2.1-windows.exe」をクリックします。
利用条件の説明画面が表示されるので、内容を読んでいただいた後に「 I have read and agree with the above terms and conditions」のチェックボックスのチェックを行い、ダウンロードを実行してください。
androidsdkダウンロード2

ダウンロード後にandroid-sdkをインストールし環境変数の変更を行います。

Pathにplatform-toolsとtoolsのパスを追加します。
platform-toolsフォルダのパス の例:C:\Program Files (x86)\Android\android-sdk\platform-tools
toolsフォルダのパス の例:C:\Program Files (x86)\Android\android-sdk\tools

C:\Program Files (x86)\Android\android-sdk\toolsのaapt.exe, dx.bat, libフォルダをC:\Program Files (x86)\Android\android-sdk\platform-toolsにコピーします。

最後にAndroid Sdkの各パッケージのインストールを行います。
「Windowsメニュー」→「すべてのプログラム」→「Android SDK Tools」→「SDK Manager」
を起動します。
Toolsは全部選択、Extrasは必要な物だけ、各Androidは必要なバージョンを指定してください。
なお 2.2と2.1は必ず選択してください。(すいません、理由は忘れました・・・)
androidSdkManager2

選択後にInstall packagesをクリックしてください。

2 Titanium Studioのインストール

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

https://my.appcelerator.com/auth/loginにアクセスし、「Signup for Free Account」をクリックします。
tituniumDownアカウント登録1

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

登録完了メールが届いたら上記の画面右上の「SIGN IN」からログインします。
tituniumDownアカウント登録2

ログイン完了後にhttp://www.appcelerator.com/titanium/titanium-studio/
にアクセスし「DOWNLOAD TITANIUM」をクリックします。

tituniumDown1
表示された画面の「Windows」をクリックするとダウンロードが開始されます。
tituniumDown2

ダウンロード後にTitanium Studioをインストールします。
インストールはNextを押し続けるだけでOKです。
インストールが完了してTitanium Studioを起動すると起動中の画面でログインを求められますので、先程登録したアカウントの情報を入力します。

なお初回起動時(かどうかは怪しい)にはTitanium Studioのアップデートを実施するか聞かれるので、実行します。これは結構時間かかるのですが、気長に待ちます。

Titanium Studio起動後に
Window>Preferences>Studio>Platforms>Androidを選択して
Android SDK HOMEを指定します。
platform-toolsフォルダのパス の例:C:\Program Files (x86)\Android\android-sdk

3 Alloyのテンプレートプロジェクトの作成と実行

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

「File」→「New」→「Mobile Project」を選択すると以下の画面が表示されますのでなにも変更しないでNextをクリックします。

createProject1

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

プロジェクト作成中のダイアログが表示され、作成が完了するとプロジェクトが開かれた状態のTitanium Studioが表示されます。

早速実行してみます。画面の赤枠の部分を押して「Android Emulator」をクリックします。
実行

しばらくするとエミューレータが起動されます。
エミューレータ1

もうしばらくすると画面がこのように変わりますので、鍵を右にドラックしてロックを解除してください。
毎回解除するのは面倒です。設定で変更できると思いますので調べておきます。
エミューレータ2

さらにしばらく(といってもここからが長い・・・)すると以下のように画面が変わります。
エミューレータ3

やっと、Hello, Worldが表示されました。

最後にこのアプリに少し修正を加えたいと思いますが、テンプレート自体の説明も必要になるので、続きは次回にしたいと思います。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

no image

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

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

記事を読む

Titanium Mobile入門【導入編 on Mac】

いよいよTitanium Mobile入門【導入編 on Mac】です。 Titanium Mob

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

Titanium Mobile入門【TiShadow活用編】

「Titanium Mobile入門【TiShadow導入編】」ではTiShadowの導入と接続用の

記事を読む

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

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

記事を読む

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

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

記事を読む

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 ↑