作成するアプリ
My Chattyという簡易チャットアプリを作成します。今回は、ビデオチャットとテキストチャットの両方できるようにします。超簡易Skypeですね。ビデオチャットはお互いのフロントカメラで行います。
上図は、Android上のアプリとPC上のChromeブラウザとで、WebRTCを利用してビデオチャットした時にスクリーンショットを撮ったものです。下の方には、テキストチャットを行える領域もあります。
今回、Crosswalkを用いて、ビデオチャットの機能をWebRTCを利用して実装し、テキストチャットの機能は、Meteor.jsというフレームワークを利用して実装します。
開発環境は、Mac OS X Yosemite(10.10.4)を想定しています。手順などもMac OS X前提で記載するので、Windowsのユーザーは、若干読み替えていただく必要があると思います。なお、Meteor.jsは公式にWindowsもサポートしています。
前準備として、Android SDKをインストールしていない方は、Android SDKをダウンロードし、インストールしておきましょう。
SDKをインストールした後、パッケージの追加も必要です。Adding SDK Packagesを参照してみてください。
また、ANDROID_HOMEとJAVA_HOMEの環境変数をそれぞれ設定し、Androidの開発ツール類にもPATHも通しておきましょう(みなさんのお手元の環境に合わせて修正してください)。
export ANDROID_HOME=/Applications/Android/sdk/ export PATH=$PATH:$ANDROID_HOME/platform-tools, $ANDROID_HOME/tools, $ANDROID_HOME/build-tools/22.0.1/ export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_71.jdk/Contents/Home
なお、JAVA_HOMEのパスは、以下のコマンドで調べることができます(Mac限定です)。
> /usr/libexec/java_home /Library/Java/JavaVirtualMachines/jdk1.7.0_71.jdk/Contents/Home
Crosswalkとは?
Crosswalkは、Chroniumを利用したWebViewのライブラリで、Androidアプリで利用できるようにしてくれるものです。Androidでウェブ技術を利用したハイブリッドアプリを利用する際に活用できます。
Androidでハイブリッドアプリを作成する際には、OSごと(端末メーカーごと)にOS標準のWebViewに違いに悩まされることがあります。Crosswalkはそれらを解決してくれ、さらに最新のHTML5のAPIなども利用できるようにしてくれます。
もちろん、よいことばかりではなくCrosswalkを組み込むことで、アプリのサイズが20Mちょっと増加するというデメリットがありますが、ウェブ技術を利用すると、クロスプラットフォームを実現しやすいなど、メリットも大きいです。実際のプロダクトでも採用しているところも増えてきていると思います。
また、スマートフォンではなく、デスクトップアプリケーションの世界でも、Electronというライブラリが登場し、エディタのAtomをはじめ、Visual Studio CodeもElectronで作成されており、ウェブ技術で構成されているものが少しずつ増えてきています。デスクトップアプリケーションでも、ウェブ技術を活用することで、Mac、Windows、 Linuxとクロスプラットフォームを実現しています。
少し脱線してしまいましたが、それでは開発に入りましょう。