SHOEISHA iD

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

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

Yahoo! JAPAN 黒帯シリーズ

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

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

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

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

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

作成するアプリ

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

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

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
ビデオチャットを動かしてみよう

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング