Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 ヤフー株式会社には、技術や制作の分野において専門性に優れたエキスパート人財を「黒帯」に認定し、その活動を手厚く支援する黒帯制度があります。「ある分野に突出した知識とスキルを持っているその分野の第一人者」が黒帯として認定され、褒賞金と活動予算が付与され、それぞれの分野のエバンジェリストとして社内外で活躍します。この黒帯によるリレー連載として、第4回は「Androidアプリ黒帯」が執筆します。

目次

作成するアプリ

 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とクロスプラットフォームを実現しています。

 少し脱線してしまいましたが、それでは開発に入りましょう。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

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

バックナンバー

連載:Yahoo! JAPAN 黒帯シリーズ
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5