コンテンツへスキップ

MacとTitaniumではじめるモバイルアプリ開発(環境構築編)

はじめに

モバイルアプリを作りたい!

iOSもAndroidも同じソースで作りたい!

Objective-CとかSwiftとかよくわかんね!

javaScriptならわかるかも!

テキストエディタで作りたい!Eclipseとか使いたくない!

Macで!Windowsなんて捨てちゃった!

 

という人の為に書く記事です。

Macとテキストエディタだけでモバイルアプリを作っていきます。

これを実現してくれるのがTitaniumです。

細かい説明は省きますがJavaScriptでiOSやAndroidアプリの開発が

できる優れものです。

そしてTitanium CLIというコマンドベースのインターフェースが

実装されたことにより、なんちゃらStudioとかEclipseがなくても

開発できるようになりました。

 

まず今回は開発環境構築です。

 

開発環境構築

必要なもの

Macを用意してくださいね。

あとお好きなテキストエディタを。私はSublimeTextを使います。

あとnode.jsが必要になります。入ってない人は入れといてください。

Titaniumを使うにはWEBからユーザ登録が必要なので

これもココからやっておいてください。

iPhoneアプリの場合はxcodeのインストールが必要です。

xcodeインストールしたらxcodeを起動して

最初のID/PASSあたりを入れるとこまでは設定しておいてください。

 

Android SDKのインストール

Androidでのお試し動作(シミュレータ)のために入れます。

Androidなんてイラネという人は飛ばしてOKです。

ってか実はマルチプラットフォーム開発って厳しいのでイラネってのもありです

TitaniumはどーもAndroidに厳しい。厳しすぎる。

ココにアクセスして以下のように。(※時代によってだいぶ変わります)

  • develop タブをクリック
  • tools タブをクリック
  • GET THE SDK FOR AN EXISTING IDEをクリック
  • Download the stand-alone Android SDK Tools for Macを選択してダウンロード

ダウンロード後、インストールしてSDK Managerを起動

  • Android SDK Toolsにチェック
  • Android SDK Build Toolsの一番新しいやつチェック
  • Android SDK Platform-toolsにチェック
  • Android 2.3.X(API10)にチェック (なんか必要らしい)
  • お好きなAndroidのバージョンを。この時は4.4.2(API19)を選択

 

次にGenymotionってのをインストールします。

これはAndroidを仮想環境でエミュレートするやつです。

もともとAndroid SDKにもシミュレータがあるのですが

これが遅い、遅い、とにかく遅い。

のでGenymotionを使うということになります。

ココからダウンロードしてインストール

GenyMotionはVirtualBoxを使うのでない人は入れといてください。

genymotion起動後、emulateするandroidデバイスを選択。

この時、virtial box上の名前が表示されるがこれをコピーしておきます。

例:Google Nexus 5 – 4.4.4 – API 19 – 1080×1920

 

Titaniumインストール

node.jsのnpmを使ってインストールできます。

簡単ですね。

npm install -g titanium
npm install -g alloy
titanium login
  titaniumのログインID
  titaniumのログインパスワード
ti sdk install -b master -d
titanium setup quick
titanium setup # いろいろ聞かれるので適当に打つ
# ここからはAndroidの場合のみ。SDKの位置は環境に合わせて変えてください
titanium config android.sdk /Users/appc/sdk/android-sdk/
titanium config android.ndk /Users/appc/sdk/android-ndk-r8b/
ti config genymotion.enabled true

試してみる

さてでは早速プロジェクトを作って動作確認しましょう。

titanium create -p android,ios -n hellotitanium --id com.example.hello -d ./

なにか聞いてくるのでappを選択します

次にAlloyってやつを使うようにします。

AlloyってのはTitanium開発用のframeworkでナウいので使います

いや、MVCだしxmlとかtssとか便利なので…

cd hellotitanium
alloy new

フルスタックなframework的に開発してくのでcontrollerをgenerateします

alloy generate controller hello

これで枠だけはできたので試してみます。

iOS的にビルド

ti build -p iphone

うまくいけばシミュレータが上がってきてしょっぼい画面が出ると思います。

でない場合、xcodeの設定が終わってないとか怪しいです。

 

なお、Android的にビルドするには

ti build -p android -C "Google Nexus 5 - 4.4.4 - API 19 - 1080x1920"

のようにGenyMotionで選んだ名前を指定してあげます。

GenyMotion起動してないとダメかも。

 

と簡単に書きましたがシミューレータが起動して動作するまで

いろんなエラーが出る可能性が高いです。

これはバージョンだったり環境だったりに依存するので

一概に成功する方法を書くのが難しいです。

私も非常に苦労しましたがなんとか動くようになりましたので

ログ見ながら頑張って対処しましょう!

どうしても詰まってしまう人はコメントください。

一緒に悩むくらいならできるかもです。

 

コメントを残す

メールアドレスが公開されることはありません。