3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-22

#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は2つ以上検知されると聞いてくるので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"
    }
  ]
}

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?