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

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

ビデオチャットを動かしてみよう

　ビデオチャットの部分から作っていきましょう。

　いちから作成せず、すでにあるCrosswalkのサンプルを活用します。crosswak-samples/webrtcをベースにCordova＋Crosswalkでアプリ化します。なお、アプリ化した部分も含めてすべてchatapp-demo/crosswalk-samples-webrtcにアップしています。

　今回は、Crosswalkを利用することで、Android 4.0.3の端末上でもWebRTCが実行できるアプリを作成することを目的としています。そのため、個別のコードの説明はスキップします。サーバー側で利用しているPeerJSのライブラリについては、PeerJSのページを参照してみてください。

　まず、私の方で修正したものを取得しましょう。Crosswalk-samples-webrtcが今回のプロジェクトです。

git clone https://github.com/luckpoint/chatapp-demo.git
cd chatapp-demo/Crosswalk-samples-webrtc

　実行する前に、みなさんのお手元の環境に合わせてIPアドレスを修正する必要があります。SERVER_IPという変数で定義されています。以下の3つのファイルにそれぞれ含まれています。

• client/main.js
• app/www/main.js
• server/index.js

　ポート番号は、80番を使用します。他のポート番号だと、アプリからはアクセスできない設定になっています。Cordovaのデフォルトの設定です。

　なお、修正用のスクリプトとして、change_server_ip.rbを作ってあります。こちらを利用してもよいでしょう。

ruby change_server_ip.rb

WebRTC接続のためのブローカーのサーバーを起動

cd server
npm install
sudo ./run.sh

　npm installは依存関係をインストールするため、初回のみ実行してください。次回からは、run.shの実行だけで大丈夫です。

　楽をするため、PHP 5.4以降でビルトインのウェブサーバを利用しましょう。

ブラウザ上で実行できるようにhtmlを配信するためのサーバーを起動

php -S YOUR_IP:3000

　YOUR_IPには、ご自身のPCのIPアドレスを設定し、ポート番号は80番以外を利用してください。今回は3000番を使用しています。

　これで一度試してみましょう。Mac上でChromeブラウザを起動し、Android上でも同じく Chromeブラウザを起動しましょう。アドレスは、先ほど入力したIPとポート番号になります。

　以下のような感じで表示されているでしょうか？

　表示確認できたら、Chromeブラウザのタブを2つ開いてください。

1. 「CONNECT AS」に接続するための名前をそれぞれ登録し、「Connect」を押します。今回はChrome, Chrome2という名前で登録してみてください。
2. Chromeと名前をつけた方のタブから、「MAKE CALL TO」に相手側（Chrome2）の名前を入力して、「Call」を押します。
3. ビデオチャットが自動的に始まります。

　ビデオチャットが開始されたでしょうか？

ビデオチャットをアプリ化

　ブラウザでの表示が確認できたので、次は、目的のアプリ化をしていきましょう。

　まず、アプリ化に際して、Cordovaと、CordovaのCrosswalkプラグインが必要です。

　Cordovaのインストールには、Node.jsが必要です。Mac OS Xだと、HomeBrewでインストールできるので簡単です。

brew install npm

　次に、Cordovaのインストールです。

sudo npm install -g cordova

　詳細は、オフィシャルページにあるCordovaのインストールの項を参考にしてください。

　なお、Crosswalkプラグインはgithubからcloneしたものに入っているので、不要です。インストールは以下のコマンドでインストールしました。

cordova plugin add cordova-plugin-crosswalk-webview

　インストールが完了したら、ビルドしてみましょう。

cordova build android

　ビルドが完了したら、2つのapkが作成されます。x86版とarm版の2つです。日本のスマホ端末は、ほぼarmなので、端末にインストールする場合は、今利用している端末のCPUが不明な場合は、まずはarm版をインストールしましょう。

• chatapp-demo/Crosswalk-samples-webrtc/app/platforms/android/build/outputs/apk/android-x86-debug.apk
• chatapp-demo/Crosswalk-samples-webrtc/app/platforms/android/build/outputs/apk/android-armv7-debug.apk

　Genymotionやエミュレーターでx86版を起動している場合は、x86版を利用してください。

作成したアプリをインストール

adb install android-armv7-debug.apk

　adbはAndroid SDKに付属しているツールです。

実行例

　作成したアプリとPC上のChromeブラウザでビデオチャットをしてみましょう。

　上図のアイコンがアプリ一覧に見えていると思います。ここから起動しましょう。なお、スマホとPCは同じWifiネットワークに所属させておいてください。

　上記のスクリーンショットでは、Macのフロントカメラでドロイド君を写しており、それがスマホのアプリ側に表示されています（スマホ側のフロントカメラは上を向いているので天井が写っています）。スクリーンショットで写っている端末のAndroidのOSのバージョンは4.0.3です。

　今回作成したアプリのパッケージ名はcom.example.webrtc.sample、ターゲットのAPIレベルはandroid-22となっています。

　githubからcloneしてきたものには、すでに設定済みですが、 Cordovaのコマンドでandroidアプリを作る際のコマンドで指定しています。

> cordova platform add android
Adding android project...
Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: com.example.webrtc.sample
    Name: WebRtcSample
    Activity: MainActivity
    Android target: android-22
...

　これでビデオチャットの部分は完了です。次に、テキストチャットの機能を作っていきましょう。