読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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

ビルド

$ ionic build andorid

ちゃんとビルドできると、${PROJECT_ROOT}/platforms/android/build/outputs/apkにapkが入ります。
出来たイメージは書き込みツールなり、デプロイゲートなりといったアプリを使って配信してください。
deploygate.com