SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Yahoo! JAPAN 黒帯シリーズ

CrosswalkとMeteor.jsでチャットアプリを作成してみよう

Yahoo! JAPAN 黒帯シリーズ 第4回 ~ 「Androidアプリ黒帯」によるCrosswalkを用いたハイブリッドアプリの解説

  • X ポスト
  • このエントリーをはてなブックマークに追加

プロジェクトを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で開発するハイブリッドアプリがどのように進んでいくのかが楽しみです。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Yahoo! JAPAN 黒帯シリーズ連載記事一覧

もっと読む

この記事の著者

筒井 俊祐(ヤフー株式会社)(ツツイ シュンスケ)

ヤフー株式会社 パーソナルサービスカンパニー アプリ推進本部 起点アプリ部 部長 黒帯 Androidアプリソフトウェア会社でソフトウェアエンジニアとして、携帯向けゲームアプリの開発、携帯アプリ用のAPIの開発エンジニアを経て、2005年ヤフー株式会社入社。入社後は、「Yahoo!ウィジェット」、「...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8872 2015/08/07 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング