generator-ionicのAndroid環境設定

generator-ionic を紹介しますの記事ではiOSしか紹介されていないのでAndroidについて補足する。

1.まず、npm update -g でnpmを最新にする。
2.次に、ionicのインストール

npm install -g cordova
npm install -g phonegap
npm install -g generator-ionic
mkdir ionic && cd $_
yo ionic

パラメータを適当に設定して導入完了。

3.次にAndroid SDKのインストール(mac osxを前提）

ダウンロードしたものを解凍してandroid-sdk-macosxをApplicationsフォルダにコピー、ターミナルからtools/android update sdk でインストーラ実行、必要パッケージを選択する。
（ちなみに、私は以下を選択した）

    Tools
        Android SDK Tools
        Android SDK Platforms-tools
        Android SDK Build-tools (最新のもの21.1.2を一つだけ選択)
    Android 4.4.2(API 19)
        SDK Platform
        Google APIs(x86 System Image)
        Intel x86 Atom System Image
    Android 4.2.2(API 17)
        SDK Platform
        Google APIs
        Intel x86 Atom System Image
    Extras

4.antが入っていない場合、インストールする

curl -O http://ftp.jaist.ac.jp/pub/apache//ant/binaries/apache-ant-1.9.4-bin.tar.gz
tar zxvf  apache-ant-1.9.4-bin.tar.gz
sudo mv apache-ant-1.9.4 /usr/bin/

5.~/.bash_profile の編集して以下を追加

eport ANT_HOME=/usr/bin/apache-ant-1.9.4
export ANDROID_HOME=/Applications/android-sdk-macosx
export ANDROID_TOOLS=/Applications/android-sdk-macosx/tools/  
export ANDROID_PLATFORM_TOOLS=/Applications/android-sdk-macosx/platform-tools/                                                                                                                   
export PATH=$ANT_HOME/bin:$ANDROID_HOME:$ANDROID_TOOLS:$ANDROID_PLATFORM_TOOLS:$PATH

PATHの反映と確認
source ~/.bash_profile ant -version

6.androidプラットフォームの選択
grunt platform:add:android

7.avdの作成(私の場合はandroid17を選択）
android list targets (android17のIDを確認する） android create avd --name android17 --target 1

8.ブラウザ起動

~/.ionic/ionic.configに以下を追記する
"ionicServeAddress": "localhost"

IPは２つ以上検知されると聞いてくるのでlocalhostを選択する
grunt serve

9.エミュレータ起動
grunt emulate:android --livereload

proxyの設定

ionicサーバはreverse proxy機能があり、grunt-connect-proxyは使う必要がありません（使えません）

以下のようにionic.project にproxiesを追加するだけで使えるようになります。

In the ionic.project file you can add a property with an array of proxies you want to add. The proxies are object with two properties:

path: string that will be matched against the beginning of the incoming request URL.
proxyUrl: a string with the url of where the proxied request should go.

{
  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

generator-ionicのAndroid環境設定とproxyの設定

generator-ionicのAndroid環境設定

proxyの設定