プロジェクトをCordovaでアプリ化
Meteor.jsはCordovaにも対応しており、
meteor add-platform android
を実行するだけです。
実際に動かしてみましょう。
なお、AndroidのSDKをインストールしている場合は、env USE_GLOBAL_ADK=tを付けておいてください。この環境変数を設定していれば、Meteor.jsは新しくSDKをインストールせずに、すでにインストールされているSDKを利用します。
env USE_GLOBAL_ADK=t meteor run android-device --mobile-server YOUR_IP:PORT -p YOUR_IP:PORT
> env USE_GLOBAL_ADK=t meteor run android-device --mobile-server 172.20.10.2:3000 -p 172.20.10.2:3000
WARNING: You are testing your app on a remote device.For the mobile app to be able to connect to the local server,
make sure your device is on the same network, and that the network configuration allows clients to talk to
each other (no client isolation).
[[[[[ ~/tmp/chatapp-demo/meteor-chat ]]]]]
=> Started proxy.
=> Started app on Android Device.
=> Started MongoDB.
=> Started your app.
=> App running at: http://172.20.10.2:3000/
実際に動作確認できましたか？
上図のように、はじめにスプラッシュ画面が表示されてからチャット画面に遷移します。
実際のapkは、meteor-chat/.meteor/local/cordova-build/platforms/android/ant-buildにあります。
では、最後にビデオチャットの部分とテキストチャットを部分を合わせていきましょう。
ビデオチャット・テキストチャットをまとめる
これから、WebRTCで作成したビデオチャットの部分と、Meteor.jsで作成したテキストチャットを機能を1つのページにまとめてみましょう。
アプリ化ですが、現在リリースされている1.1のバージョンでは、Crosswalkに対応していないことが分かりました。調べてみると、Meteor.jsのフォーラムで最近議論があったようです。ここに書かれているやり方が参考になりそうです。
今回は、borgesさんという方が書いてくれる内容がシンプルでよさそうなので、これで進めてみます。内容をかいつまむと、「次期バージョン（Meteor 1.2）ではCrosswalkが導入され、開発版を利用すればCrosswalkも利用できます」とありました。
次期リリースですが、Meteor.jsの公式のブログに以下のように記載されていました。今年の夏ということなので、もうすぐリリースされそうです。楽しみに待ちましょう。
Timeframe for Meteor 1.2
Meteor 1.2 will ship later this summer. Along the way, you can see our progress and try the new features by following our PRs on GitHub and checking in on the Meteor forums.
git clone https://github.com/meteor/meteor.git
で一式を取得した後に、
cd meteor ./meteor --help
でOKです。とても簡単に使えますね。
私の環境では、以下のように表示されています（2015年7月23日現在）。
./meteor --version Unreleased, running from a checkout at 43b4b30 (HEAD, tag: release/PLUGINS-PREVIEW@1, origin/devel, origin/HEAD, devel)
次にCrosswalkのパッケージを作成します。すでに開発版であるものを利用します。
https://github.com/copleykj/meteor/tree/cordova5-update/packages/Crosswalk https://raw.githubusercontent.com/copleykj/meteor/cordova5-update/packages/Crosswalk/package.js mkdir packages/Crosswalk cd packages/Crosswalk wget https://raw.githubusercontent.com/copleykj/meteor/cordova5-update/packages/Crosswalk/package.js
Crosswalkプラグインを追加します。
$METEOR/meteor add crosswalk
$METEORは先ほど取得した最新のmeteorがあるディレクトリです。
今回、4.4未満のAndroidだと読み込みの際に落ちてしまいました。残念ですが、何らかの不具合に当たったようです。そのため、動作確認は4.4以降の端末で行います。
まとめるにあたっての修正
ビデオチャットの部分は、今回利用したcrosswalk-samples-webrtcを活用します。これをMeteor.jsで利用するために、一箇所修正を行いました。
DOMContentLoadedを利用している箇所があったのですが、Meteor.jsはbodyを動的に作成する関係上、DOMContentLoadedがコールされても、実際の要素はまだ作成されていないケースがあります。そのため、DOMContentLoadedではなく、実際に参照した要素がレンダリングされてから、処理を実行するように修正します。
今回は、videoChatの部分の要素に対していくつか処理を行いたいので、オリジナルのmain.jsのコードは、
Template.videoChat.rendered = function() { ... }
に移動しました。
動作確認
ちょっと面倒なのですが、WebRTCで利用するためのNode.jsで動くサーバーと実際のhtmlの配信やテキストチャットの部分を実装したMeteor.jsの実行。それからアプリの実行になります。
これでWebRTCで利用するブローカーのサーバーの起動。こちらは、最初のサンプルで実行したように、crosswalk-samples-webrtc/serverにあります。
sudo ./run.sh
次にテキストチャット部分のMeteor.jsのサーバーとアプリの起動。こちらは、chatapp-demo/mychattyの方になります。
env USE_GLOBAL_ADK=t ~/works/meteor/meteor run android-device --mobile-server YOUR_IP:3000 -p YOUR_IP:3000
注意点ですが、一度、上記コマンドで実行して、apkを作成した後、AndroidManifest.xmlの修正が必要になります。今回カメラ・ビデオを用いるので、AndroidManifest.xmlに以下のpermissionを追加をしました。
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_VIDEO" />
AndroidManifest.xmlは、以下にあります。
.meteor/local/cordova-build/platforms/android/AndroidManifest.xml
AndroidManifest.xmlを修正後、再度実行してみてください。
env USE_GLOBAL_ADK=t ~/works/meteor/meteor run android-device --mobile-server YOUR_IP:3000 -p YOUR_IP:3000
アプリの実行には少し時間がかります。アプリが起動したら、PC上でChromeブラウザを立ち上げて、実際にチャットしてみてください。一番、最初に見せた感じでできましたでしょうか？
まとめ
いかがでしたでしょうか？ 実際のコード量はそれほど多くないので、何か一つでも参考になったところがありましたら、幸いです。
iPhone上のSafariは、WebRTCに対応していないのでビデオチャットは試せませんでしたが、テキストチャットの部分は動くことを確認できます。ウェブの技術で開発した場合は、同じコードでクロスプラットフォームを実現できることが利点ですが、iOSとの非互換は考慮する必要があると感じます。
Meteor.jsはインストールから開発まではスピードよくできますが、Meteor.jsの作法にのっとって開発をしなければならないため、他のフレームワークを組み込みたいときは、フレームワーク側に修正が必要になるので、そこはネックと感じました。 ただ、それでもクライアントサイド（ブラウザ・アプリ）とサーバサイドをJavaScriptで完結して実装できるのは素晴らしいです。
今後はECMAScript 2015（ES6）も広がっていくと思いますし、AngularJSやReactなどさまざまなフレームワークも登場しています。JavaScriptで開発するハイブリッドアプリがどのように進んでいくのかが楽しみです。
