Docker開発環境のIonicとRippleをnpmからインストールして使う

IonicのDocker開発環境のエミュレータにApache Rippleをnpmからインストールして使います。以前はChromeエクステンションのRipple Emulator (Beta)として提供されていました。Ripple is Reborn!によるとPhoneGap 2.6のあたりから動作が不安定になったようです。それまではBlackberryの開発チームによりメンテナンスされていましたが、2013年の11月に新しくApache Rippleとして生まれ変わっています。

Linux Mint 17.1 MATEの環境を使う

最初にLinux Mint 17.1 MATEに構築したGUIのCordova開発環境へRippleをインストールして確認します。ripple-emulatorをグローバルにインストールします。

$ npm install -g cordova ionic
$ npm install -g ripple-emulator

Rippleのバージョンは0.9.24です。

$ ripple version
0.9.24

Ionicのサンプル作成

テスト用にIonicのサンプルアプリを作成します。

$ mkdir ~/ionic_apps
$ cd !$
$ ionic start ionicTestApp tabs
$ cd ionicTestApp 
$ ionic platform add android

Rippleの起動

ripple emulateコマンドを実行するとデフォルトのブラウザが自動的に起動します。--pathフラグはビルド前のwwwディレクトリを指定します。

$ cd ~/ionic_apps/ionicTestApp/
$ ripple emulate --path www

URLは次のようにクエリ文字列に?enableripple=cordova-3.0.0が付いています。
http://localhost:4400?enableripple=cordova-3.0.0

クエリ文字列を外して、http://localhost:4400をブラウザから開くと通常のionicのアプリになります。

Docker開発環境で確認

Dockerイメージはmasato/ionic-cordovaを使います。使い捨ての開発環境コンテナを起動します。

$ docker run -it --rm --name ionic-env masato/ionic-cordova  bash

dockerユーザーにスイッチして、予め作成してあるIonicのサンプルアプリのディレクトリに移動してRippleを起動します。

$ su - docker
$ cd /data/ionicTestApp
$ nvm use v0.10
Now using node v0.10.35
$ ripple emulate --path www

ngrok

開発環境コンテナのIPアドレスを確認して、ngrokでトンネルします。

$ docker inspect --format="&#123;&#123; .NetworkSettings.IPAddress }}" ionic-env
172.17.4.93
$ docker run -it --rm wizardapps/ngrok:latest ngrok 172.17.4.93:4400

先ほどと同様にクエリ文字列に?enableripple=cordova-3.0.0を指定してブラウザから開きます。
http://6e7e14f6.ngrok.com/?enableripple=cordova-3.0.0

まとめ

Cordovaのエミュレーターは起動に時間がかかります。Rippleは起動も速く、GUI開発環境がなくてエミュレータで確認ができるのでDocker開発環境に便利です。