VirtualBox上のUbuntu14.04にcordovaとionicフレームワークを導入する

クロスプラットフォームなスマホアプリを開発するApache Corovaというライブラリがあります。
ionicは、このcordvaを拡張し更に格好良く、拡張性を向上させてくれるライブラリです。
本命は10USD~50USDで販売されている有料拡張らしいですが、基礎フレームは無償配布されています。

今回は、このionic + cordovaをVirtualBox上のUbuntu14に組んでみます。

実際のところ

前提状況

ゲストOS:Ubuntu14.04 on VirtualBox
ホストOS:OS X Yosemite(10.10)
プログラミング環境まわりは真っさら

Java8の環境導入

$ sudo add-apt-repository ppa:webupd8team/java
$ sudo apt-get update
$ sudo apt-get install oracle-java8-installer oracle-java8-set-default

android環境を入れる

cd ~/
mkdir Develop
cd $_
wget https://dl.google.com/android/android-sdk_r24.4.1-linux.tgz

本体の導入

$ tar -xvf android-sdk_*-linux.tgz
$ cd android-sdk-linux/tools
$ ./android update sdk --no-ui

環境変数導入

$ echo export PATH=$PATH:$HOME/Develop/android-sdk-linux/platform-tools:$HOME/Develop/android-sdk-linux/tools:$HOME/Develop/android-sdk-linux/build-tools/24.0.3/ >> ~/.bashrc
$ source ~/.bashrc

CPUビルド系の支援

$ sudo dpkg --add-architecture i386
$ sudo apt-get install libc6:i386 libstdc++6:i386 zlib1g:i386

nodeの導入

ndenvをつかいましょう。
まずは導入する上で必須のgitとcurl

$ sudo apt-get install git-core curl

ndenvはgitで管理される奴を入れたほうが手っ取り早いので、そのように

$ git clone https://github.com/riywo/ndenv ~/.ndenv
$ git clone https://github.com/riywo/node-build.git ~/.ndenv/plugins/node-build
$ echo 'export PATH="$HOME/.ndenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(ndenv init -)"' >> ~/.bashrc
$ source ~/.bashrc

node本体の導入

node本体の導入です。今回はv5.12.0を入れました。

$ ndenv install v5.12.0
$ ndenv global v5.12.0
$ ndenv rehash

ionicフレームワークとcordovaの導入

長らくおつきあい頂きありがとうございます。
ようやくionicフレームワークとcordovaの導入です。
とはいえ、これはコマンドで一発

$npm install -g cordova ionic

$ ionic start myapp tab
$ cd myapp

デフォでiOSが入ってるみたいです。
私が用事があるのはAndroidの方なので、導入。

$ ionic platform add andoroid

確認サーバを起動します。
初回だとどのネットワークに接続されるか問い合わせが来ます。
今回はホストオンリーアダプターの接続先にしたeth1としておきました。

$ ionic serve

Multiple addresses available.
Please select which address to use by entering its number from the list below:
 1) x.x.x.x (eth0)
 2) y.y.y.y (eth1)
 3) localhost
Address Selection: eth1
Selected address: y.y.y.y

設定が終わればめでたく起動。

Running live reload server: http://y.y.y.y:35729
Watching: www/**/*, !www/lib/**/*, !www/**/*.map
√ Running dev server:  http://y.y.y.y:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

画面は、こんな感じになります。
f:id:shuzo_kino:20161008174102p:plain