*

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




関連記事

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

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

記事を読む

Titanium Mobile入門【導入編 on Mac】

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

Titanium Mobile入門【TiShadow活用編】

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

記事を読む

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 ↑