クロスプラットフォームなスマホアプリを開発する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
画面は、こんな感じになります。
ビルド
$ ionic build andorid
ちゃんとビルドできると、${PROJECT_ROOT}/platforms/android/build/outputs/apkにapkが入ります。
出来たイメージは書き込みツールなり、デプロイゲートなりといったアプリを使って配信してください。
deploygate.com
