ionic + AngularJSのモバイルウェブ開発環境を構築しました

AngularJSつかったフレームワークionicの環境を、Yeoman + generator-ionicを使って生成しました。環境はubuntuです。

準備

事前準備としてnodejsなどはインストール済みです。

事前準備

npm install -g yo grunt-cli generator-angular

恐らく上記のモジュールをインストールしているはずです。

generator-ionicをインストール

npm install -g generator-ionic

ionicファイルを生成

yoコマンドでionicのファイルを生成します。

ionicファイルを生成

mkdir ionic
cd ionic
yo ionic

yoコマンドを実行すると、生成前にいくつか質問をされますが、cordovaはアプリ用なので今回はspaceを押して外しておきます。

上記のような画面が表示されます。

初期テンプレートを選択できるので、Side Menuを選択しました。

動作確認

ここまでで、grunt serveしてサーバーが起動すれば成功です。

しかし、ボクの環境ではMultiple addressesの選択画面が出ました。

サーバーを起動

grunt serve

略

Multiple addresses available.

Please select which address to use by entering its number from the list below:

 1) 10.0.2.18 (eth0)
 2) 192.168.33.11 (eth1)
 3) localhost

Address Selection:  

なぜかここで数字が選択できず止まってしまいました＼(^o^)／

vagrantを利用しているせいかと考え、Macでも環境を作ってみましたが、同様にMultiple addressesが表示されました。

ここまでのフローで、Yeomanのyo ionicコマンドでファイルを生成した際に、.ionicディレクトリがユーザーのホームディレクトリに生成されています。.ionicディレクトリには、ionic.configというファイルがあるので、ionicServeAddressを指定します。

vi ~/.ionic/ionic.config
{
  "versionCheck": 1414045129210,
  "ionicServeAddress": "localhost"
}

versionCheckの項目だけがあるので、ionicServeAddressを追加しました。

再びgrunt serveでサーバーを起動します。

サーバーを起動

grunt serve

略

Running "ionic:serve" (ionic) task

Running "watch" task
Waiting...Running dev server: http://localhost:8100

8100番でサーバーが起動したので、ブラウザから確認します。
ちなみにボクのvagrant環境はlocalhostではアクセスできない指定になっていました。vagrantが192.168.33.11で立ち上がっているので、IPであるhttp://192.168.33.11:8100/ へ直接アクセスして確認しました。

Side MenuがあるionicのUIを、ブラウザから確認することができました。 やったね(☝ ՞ਊ ՞)

参考

https://github.com/diegonetto/generator-ionic
http://stackoverflow.com/questions/26328184/ionic-serve-displays-multiple-addresses-and-i-chose-wrong-one-how-to-change-ad/26330536