Macとテキストエディタだけでモバイルアプリを作る（環境構築）

7768 ワード
Mac 環境構築 Titanium Mac テキストリンク

やること

  • MacでiOSやAndroidアプリを開発する環境を作ります。
  • IDEに頼らず、テキストエディタとコマンドラインだけで作成する軽量な環境にします。
  • Titaniumを利用することでJavaScriptで構築できます。

必要なもの

xcodeとnode.jsとvirtualBoxとjavaが必要になります。
またHome BrewとBrew Caskを使ってインストールするので
これらを過去の投稿を参考にセットアップしておいてください。

Titaniumアカウント登録

Titaniumサインアップからアカウントを登録

Android SDKのインストール

iOSアプリだけでよい人はこのブロックを飛ばしてOKです。
Titaniumでマルチプラットフォームするのは茨の道です。

Android SDK Managerをインストール

ここを参考にしました

brewからインストールできます。簡単。
ついでにantもインストール

brew install android-sdk
brew install ant

つぎにANDROID_HOMEを指定

echo 'export ANDROID_HOME=/usr/local/Cellar/android-sdk/' >> ~/.bashrc
source ~/.bashrc

Android SDKをインストール

android

Android SDK Managerが起動するので
以下の感じに選択

  • 下の方にある「Obsolete」をチェック

    • 現時点でBuild Tools 22.0.1はtitaniumが未対応だったので

  • Android SDK Tools はinstalledになってるはず

  • Android SDL Platform-toolsにチェック

  • Android SDK Build-toolsの21.1.2だけチェック

  • Android 2.3.x(API10)にチェック（なんか必要らしい、もしかしたらいらないかも）

  • 好きなAndroidバージョンを選択（今回はAndroid5.0.1(API21))

  • Extras/Android Suport Libraryにチェック

  • Extras/Intel x86 Emu... にチェック

選択できたら 「Install xx packages」からインストール。気長に待つ。

Geny motionのインストール

Android SDKのエミュレーターは遅すぎるので。
GenyMotionを使います。

サインアップ

GenyMotionからアカウントをサインアップしておいてください。
GenyMotionの仮想マシンをダウンロードするのに
アカウントが必要になります。

インストール

brew cask install genymotion

インストールできたらGenyMotionを起動します。

と聞かれるのでYes

Sign inを選択してID/PASSを入力します

成功すると仮想マシンの一覧が表示されるので
好きなものを選択
今回は以下のを選択

次にVirtual device nameを入力
ここで指定する名前はビルド時のパラメタに必要になるので
簡潔な名前に変更しておくことをお薦めします

titaniumのセットアップ

インストール

node.jsを使ってインストールします

npm install -g titanium
npm install -g alloy

初期設定

titaniumのアカウントを入力

titanium login
> Username titaniumにサインアップしたid
> Password titaniumにサインアップしたパスワード
> Logged in successfully

titanium SDKインストール

ti sdk install -b master -d

titanium setup

titanium setup quick

いろいろ聞かれるので以下のように。

What do you want as your "author" name?
> 名前を入力
What is your email address used for logging into the Appcelerator Network?
> titaniumに登録したメールアドレス

What would you like as your default locale?
> そのままenter

Enter # or SDK name [4.1.0.v20150323133457]:
> そのままenter

Path to your workspace where your projects should be created:
> projectを作成するパスを入力

Do you plan to build your app for Android? (yes|no) [yes]:
> そのままenter

Path to the Android SDK
> /usr/local/opt/android-sdk/

設定が終わるとMain Menuが表示されるので
2) check Check Environment
を選択

なんだかAndroid SDKが認識されてない...
一度 10) exitで終了後、

ti setup

で再度Main Menを開き、もう一度checkしたら
認識されました

最後にGenyMotionをtitaniumに設定します

ti config genymotion.enabled true

サンプルプロジェクトの作成

プロジェクトの作成

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

> Select a type by number or name [app]:
そのままenter

> Your company/personal URL:
適当に入力

> Directory to place project [/Users/<ユーザ名>/Documents/titanium_project]:
そのままenter

cd /Users/<ユーザ名>/Documents/titanium_project/hellotitanium

alloyの利用

AlloyはtitaniumのMVCフレームワーク。
今回はAlloyを使って試してみるので
プロジェクトフォルダ配下で以下のコマンドを発行

alloy new
alloy generate controller hello

プロジェクトの実行

iOSシミュレーターで実行

ti build -p iphone

これでiOSシミュレータが起動します
終了する場合はcontrol + c

Androidシミュレーターで実行

先にGenyMotionを開き、仮想マシンを起動しておきます。その後、以下のコマンド

ti build -p android -b && adb install -r build/android/bin/hellotitanium.apk

GenyMotion上のアプリケーション一覧に
hellotitaniumが表示されるので実行