あんどうやすし – HTML5Experts.jp

Firebaseで作る簡単リアルタイムウェブアプリケーション（前編補）

あんどうやすし — Tue, 18 Oct 2016 02:00:20 +0000

前回の記事は前編と称してFirebaseの機能を簡単に紹介しました。その続きである今回の記事は後編として何かアプリケーションを作りながら個々の機能を詳細に説明するはずでした。
しかし、前編からすでに10ヶ月が過ぎ、途中にGoogle I/Oを挟んだこともあって、すでに全体像が大幅に変更されています。そこで今回は「前編補」として、いまさらではありますがGoogle I/O前後でFirebaseがどのように変わったのかをざっくりと説明します。

新旧Firebaseの違い

2016年5月のGoolge I/Oのキーノート、そしてそれに続く各セッションでFirebaseの大幅な拡張が発表されました。いったいどのような拡張が行われたのか、それはその発表前後のトップページの文言を比較すると分かりやすいでしょう。

旧Firebase
素晴らしいアプリを開発モバイル／ウェブアプリのための強力なプラットフォーム

新Firebase
アプリビジネス成功への近道質の高いアプリを作成し、ビジネスを成功に導くために必要なツールとインフラストラクチャ

どうでしょう。新旧の立ち位置の違いが明確に表れていると思いませんか。

つまり、以前のFirebaseは単純にアプリのバックエンド開発／運用の省力化が目的でしたが、新しいFirebaseはアプリビジネスに関わるすべての領域をサポートして、その成功を目指すものになった、ということです。

新しいFirebase

新しいFirebaseの謳い文句は「アプリビジネス成功への近道」でした。それでは、Googleの考える「アプリビジネスの成功」とは何で、そのために拡張された機能にはどういうものがあるのでしょうか。これもFirebaseのトップページに分かりやすい説明があります。

この図から分かるようにGoogleはアプリ提供のプロセスをDevelop（開発）・Grow（拡大）・Earn（収益）の3つのステージで捉えています。さらに各ステージが繋がって輪になっていることから分かるように、この3ステージはアプリが生きている限り、オーバーラップしながら繰り返し現れてはずっと続いていくものです。

また、図をよく見ると3ステージから成る輪の中心にAnalytics（解析）があることが分かります。これらを考え合わせると、Googleが考えるアプリビジネスが成功している状態とは、Analyticsを軸にDevelop・Grow・Earnがスムーズに連携している状態であると理解することができます。

Analyticsと3つのステージ

全体像がわかったところで各ステージをサポートする機能を個別に見ていきましょう。なお、旧Firebaseにはなかった機能名は太字で記しています。

Analytics

先ほども書いたとおりAnalyticsは新しいFirebaseの核となる機能です。ここで得られる情報がDevelop・Grow・Earnすべてのステージを駆動します。

Firebase Analytics: モバイルアプリのイベントログを記録します。初めての起動・アプリ内課金・アプリのバージョンアップなどのデフォルトで記録されるイベントの他、開発者が独自に定義したイベントの発生を記録し、Firebasコンソールで確認できます。対応する環境はiOSとAndroidです。

Develop

認証、ストレージ、テストなどアプリの開発に必要となる各種機能群です。

Firebase Cloud Messaging: 以前はGoogle Cloud Messagingと呼ばれていた機能です。対象のカテゴリを指定して通知を送信できます。対応する環境はiOS、Android、Webです。
Firebase Authentication: 認証機能を提供します。FacebookやTwitterのアカウントを使用した認証、メールアドレスとパスワードを使用した認証などが利用できます。対応する環境はiOS、Android、Webです。
Firebase Realtime Database: サーバーと全クライアント間でデータが同期されるリアルタイムNoSQLデータベースです。前回で説明したとおり、Firebaseで最も古い、サービスを特徴付ける機能です。対応する環境はiOS、Android、Webです。
Firebase Storage: Google Cloud Storageを内部的に使用するストレージサービスです。Firebase Realtime Databaseとは異なり、写真や動画などの静的なコンテンツを保存するのに適しています。対応する環境はiOS、Android、Webです。
Firebase Hosting: HTMLやJS、CSSなど静的なファイルのホスティングサービスです。Firebaseのコマンドラインツールを使用すれば、コマンドをひとつ実行するだけで簡単にウェブアプリをデプロイできます。対応する環境はもちろんWebだけです。
Firebase Remote Config: アプリの動作や外観をFirebaseコンソールから変更することができます。設定内容はOSの種類や国に応じて切り替えることができる他、例えばランダムに10%のユーザーにだけ特定の機能を有効にすることも可能です。対応する環境はiOSとAndroidです。
Firebase Test Lab for Android: Googleのデータセンター内の様々なAndroid端末上でテストを実行できます。テストの結果はログやスクリーンショットで確認できます。対応する環境は現在のところAndroidだけです。
Firebase Crash Reporting: iOS/Androidアプリのエラーを監視し、エラー発生時にはAnalyticsのイベントを発火し、情報を収集します。対応する環境はiOSとAndroidです。

Grow

公開後のアプリのユーザーベースの拡大に必要な機能群です。

Firebase Notifications: FirebaseコンソールからグラフィカルなUIを通じてユーザーの端末に通知を送信できます。実際のメッセージの送信にはFirebase Cloud Messagingが利用されています。対応する環境はiOSとAndroidです。
Firebase App Indexing: 以前はGoogle App Indexingと呼ばれていた機能です。Googleの検索結果にアプリを表示でき、直接アプリを起動できるようになります。対応する環境はiOSとAndroidです。
Firebase Dynamic Links: 端末の種類は何か、アプリがインストールされているかどうか、アプリのユーザー登録は完了しているかどうか、などの条件に応じて適切に動作を変えるURLを生成できます。対応する環境はiOSとAndroidです。
Firebase Invites: Firebase Dynamic Linksを使用してユーザーにアプリの招待を送ることができます。対応する環境はiOSとAndroidです。
Google AdWords: Google AdWordsのアカウントをFirebaseプロジェクトにリンクし、アプリの利用状況に応じたターゲットユーザーを指定できるようになります。対応する環境はiOSとAndroidです。

Earn

アプリから収益を得るために必要な機能です。現時点で所属するAPIはAdMobしかないので、構成の都合で無理やり作ったステージの感じも若干あります。

AdMob by Google: 以前からあるモバイル広告プラットフォームですが、Firebaseプラットフォームの一員となったことでFirebase Analyticsを分析に利用できるようになりました。対応する環境はiOSとAndroidです。

ウェブアプリ

先のセクションでFirebaseで提供されている機能を一通り簡単に説明しました。太字の項目が多いことからも、旧Firebaseと比較して非常に多くの機能が追加されたことがわかると思います。しかし、ここでウェブ開発者な皆さん（html5experts.jpなので当然そうですよね？）にとって少し残念なお知らせがあります。気づかれた方もいるかもしれませんが、これら新機能の大部分はウェブアプリでは使えません。

説明のために各機能の対応プラットフォームと、ついでとして元となったサービスを表形式でまとめました。

ステージ	新Firebase	旧Firebase	Web	iOS	Android
Analytics	Firebase Analytics	–	–	o	o
Develop	Firebase Cloud Messaging	Google Cloud Messaging	o	o	o
	Firebase Authentication	Firebase Authentication	o	o	o
	Firebase Realtime Database	Firebase Realtime Database	o	o	o
	Firebase Storage	(Google Cloud Storage)	o	o	o
	Firebase Hosting	Firebase Hosting	o	–	–
	Firebase Remote Config	–	–	o	o
	Firebase Test Lab for Android	Cloud Test Lab for Android	–	–	o
	Firebase Crash Report	–	–	o	o
Grow	Firebase Notifications	–	–	o	o
	Firebase App Indexing	Google App Indexing	–	o	o
	Firebase Dynamic Links	–	–	o	o
	Firebase Invites	–	–	o	o
	Google AdWords	Google AdWords	–	o	o
Earn	AdMob	AdMob	–	o	o

いつからかFirebaseの機能が大幅に拡張されたかのように錯覚していましたが、表を見るとWeb版に関しては旧来のFirebaseと比較してできることにほぼ差がないということが一目瞭然です。Develop、Grow、EarnがAnalyticsを中心に連携するのが新Firebaseの基本理念だったはずですが、Webに関して言えばDevelopしかありません。大丈夫なんでしょうか。

そしてそのDevelopについても、2つの違いのうちのひとつであるFirebase Cloud MessagingについてはGoogle Cloud Messagingから名前が変わっただけで、結局新旧の違いらしい違いといえばFirebase Storageにより静的なファイルが扱いやすくなったことくらいです。

従って、ウェブ開発者の視点では新旧の違いは機能面からではなく、「GoogleがFirebaseに対して本気になっている」という精神面での向上として捉えるのが正解でしょう。実際Firebaseドキュメント日本語化の状況や、公式ブログでのFirebaseの露出も以前とは段違いですので、FacebookのParse.comに対する仕打ちのようなものを心配する必要が直近ではなくなったと考えられるのはウェブ開発者としても非常に喜ばしいことです。

機能面以外の変更

これまで機能面（と精神面）での変更点について紹介してきましたが、最後にそれら以外の変更点についても簡単に触れておきます。

FirebaseコンソールのUI

機能が追加されるに当たって、当然ですがそれらを管理するFirebaseコンソールのUIも変更されています。しかし見た目の変更を除けば、既存機能に関しては左側のナビゲーションに表示される項目が増えただけですので、それほど気にする必要はありません。

ただし、以前のFirebaseで作成したプロジェクトを新しいFirebaseコンソールで管理するには明示的にコンソールをアップグレードし、さらにデータベースの情報をインポートする必要があります。

料金体系

料金体系が大幅に変更されました。元々はFreeプランを含めてクォータの違いごとに6種類あったものが、現在はフリープラン（SPARK）・月額固定制有料プラン（FLAME）・従量制有料プラン（BLAZE）の3種類にまとめられました。

これまでフリープランを使用してた人にとっては、クォータはほぼ変更がないまま、以前は無料では利用できなかった独自ドメインを設定できるようになったということで喜ばしい変更でしょう。

サポート言語の追加

あくまでも実験的にですがC++ SDKが追加されています。モバイルゲームなどパフォーマンスが要求されるアプリでは利用を検討してみてもいいでしょう。

まとめ

身もふたもない言い方をすれば、新しいFirebaseは「これまでGoogleが個別に提供していたアプリ提供者向けサービスを上流から下流までほぼ全て集約した統一ブランドの名前」になりました。

本連載に限っての結論としては「以前とほぼ変わっていない」という理解で構いません。UIの変更はもちろんありますが、できることは変わっていないので取り急ぎは安心して前回の記事を参考にして頂ければと思います。

ということで次回こそ、Firebaseで何かを作りながらより詳細に機能を紹介します。

Firebaseで作る簡単リアルタイムウェブアプリケーション（前編）

あんどうやすし — Tue, 19 Jan 2016 00:00:44 +0000

Firebaseは2014年10月にGoogleに買収されたことで一躍有名になったBaaS（Backend as a Service）です。本記事ではちょっとしたリアルタイムウェブアプリケーションを作りながらFirebaseの機能を紹介します。

Firebaseとは

Firebaseはデータストレージ、ユーザー管理などアプリケーションのバックエンドとして必要となる機能をサービスを提供することで、アプリケーション開発者がクライアントサイドの開発に集中できるようにしてくれるBaaS（Backend as a Service）の一種です。

2014年10月にGoogleに買収され、Google Cloud Platform（GCP）の一員となりました。この買収によりGCPにはPaaS（Platform as a Service）としてGoogle App Engine、IaaS（Infrastracture as a Service）としてGoogle Compute Engine、BaaSとしてFirebaseと、いわゆるXaaS系が一通り揃ったことになります。

Firebaseの特徴

Firebaseはもともとは開発者用APIを持つウェブサイトに埋め込み可能なリアルタイムチャットサービスとして始まりました。

しかし、多くのユーザーがチャットサービスとしてではなく、ゲームなどのアプリケーションでリアルタイムにデータを同期するために使用したため、創業者たちはチャットサービスのリアルタイムメッセージングシステムを切り出して別サービスとしました。これが現在のFirebaseの元となっています。

そのため、Firebaseは数あるBaasの中でも特にチャットアプリのようなリアルタイムにデータを同期する必要があるサービスに適しています。

Firebaseの機能

リアルタイムデータベース

FirebaseのデータベースはスキーマレスないわゆるNoSQLで、特定のアプリケーションに関係するデータ全体がひとつのJSONオブジェクトとして保持される点が大きな特徴です。

これによりデータが階層構造をなすため、それぞれのデータが一意のURLを持つことができます。例えばデータベース全体を指すURLは以下のようになります。

https://アプリケーションID.firebaseio.com/

特定のデータを示すURLは以下のようになります。

https://アプリケーションID.firebaseio.com/プロパティのパス

例えばアプリケーション名 my-first-chat-app のデータ全体が以下の様であるとして

{
  "messages" : {
    "-K5kPGFquoTbqHYQqBRS" : {
      "body" : "message",
      "name" : "name"
    },
    "-K5kPUqfBfdj4bAa1fyv" : {
      "body" : "message2",
      "name" : "name2"
    },
    "-K5kR-lwtG4I5w9T36Xq" : {
      "body" : "message3",
      "name" : "name3"
    }
}

最初のメッセージ（messages/-K5kPGFquoTbqHYQqBRS）の内容だけを確認したいのであれば、次のURLをブラウザで表示すればいいということになります。

https://my-first-chat-app.firebaseio.com/messages/-K5kPGFquoTbqHYQqBRS

特定データの表示

認証

Firebaseを使用すると非常に簡単にユーザー認証をアプリケーションに組み込むことができます。組み込みの認証機構としては、メールアドレスとパスワードを使用した認証、OAuthを使用した認証（Facebook, Twitter, GitHub, Google）、匿名ログインがあり、加えてJSON Web Tokens (JWTs)を使用して既存の任意の認証システムと連携することも容易です。

ホスティング

HTML、CSS、JS、画像などの静的なアセットは、Firebaseコマンドラインツールを使用して自身のドメイン上（アプリケーションID.firebaseapp.com）、もしくは有料プランであれば独自ドメイン上に簡単にデプロイすることができます。

さらにデプロイの履歴は管理画面で見ることができ、問題があった場合には以前のバージョンにロールバックすることも可能です。

コマンドラインツール

Firebaseのホスティングサービスを利用するにはFirebaseコマンドラインツールを使用する必要があります。node.jsとnpmがインストールされていればコマンドツールは以下のコマンドで簡単にインストールできます。

$ npm install -g firebase-tools

firebaseコマンドで利用可能なサブコマンドは、以下のとおりです。

firebase init: プロジェクトディレクトリを初期化します。ホスティングサービスに必要なすべての設定は当コマンドによりプロジェクトディレクトリルートに作成されるfirebase.jsonファイルに含まれます
firebase deploy: 現在のプロジェクトをサーバーにデプロイします
firebase disable:hosting: ホスティングを無効にし、アクセスに対し”Site Not Found”ページを表示するようにします
firebase login: コマンドラインツールをログインします
firebase logout: コマンドラインツールをログアウトします
firebase list: 現在ログイン中のユーザーが利用可能なFirebaseアプリの一覧を表示します

APIとSDK

FirebaseデータベースにはREST APIがあり、さらにそのAPIを利用する各種環境用のクライアントライブラリが標準で用意されています。

Web（JavaScript）
iOS（Objective C）
Android（Java）

なお、これらの標準クライアントライブラリを使用するとFirebaseはオフラインでの動作が保証されます。つまりネットワーク接続がない場合でも、Firebaseデータベースの読み書きの対象を一旦ローカルのキャッシュとすることで、アプリケーションは正常に動作します。その後、接続が復活した時に内容がサーバーと同期されます。

また、標準ライブラリに加えて、REST APIを使用する非公式なライブラリとして以下の様なものもあります。これ以外にもいろいろとありますので、サーバーサイドで自分の好きな言語を利用したい場合はGitHubなどで検索してみるといいでしょう。

Python-Firebase（Python）
Firebase-Php（PHP）
Firebase-Ruby（Ruby）
BigBertha（Ruby）
Rest-Firebase（Ruby）

なお、標準クライアントライブラリを使用した場合はオフラインでの動作が保証されますが、非公式ライブラリを使用した場合はその限りではありません。

サンプルアプリケーション

Firebaseを使用した基本的なアプリケーション開発の流れを確認するために簡単なチャットアプリケーションを作成してみましょう。先に紹介したとおりFirebaseクライアントライブラリは環境に応じて複数ありますが、今回はJavaScript版クライアントライブラリを使用してWebアプリケーションを作成します。

サンプルチャット

Firebaseアプリケーション作成

まずはじめに、今回のサンプルから使用するデータベースを用意するため、ウェブコンソールからFirebaseアプリケーションを作成します。http://firebase.com/ を開き、画面右上のログインボタンをクリックしてログインしてください。

アカウントを新たに作成しても構いませんし、GoogleアカウントやGitHubアカウントを使用してログインすることもできます。

Firebaseログイン後

ログイン後、左下の入力エリアにアプリ名とアプリURLを入力して、アプリを作成します。今回は以下の様な設定を使用するものとします。

App Name	My First Chat App
App URL	https://my-first-chat-app.firebaseio.com/

Firebaseアプリ新規作成

サーバーサイドで行う作業は以上です。これだけでNoSQLデータベースが作成され、クライアントアプリから自由に利用できるようになりました。

サンプルアプリケーションの初期化

サンプルアプリケーションは最終的にFirebaseホスティングサービスを利用するため、まずfirebase initコマンドを実行してプロジェクトディレクトリを初期化します。

% firebase init

? What Firebase do you want to use? my-first-chat-app
? What directory should be the public root? public
✔  Public directory public has been created
Firebase initialized, configuration written to firebase.json

初期化にあたって

アプリ名
デプロイするファイルを配置するディレクトリ

を聞かれるので、アプリ名は先程作成したものを、ディレクトリ名はデフォルトのpublicを設定してください。

ウェブアプリケーション作成

それではここから実際に冒頭のサンプルアプリケーションを作成していくこととします。といっても必要となるのはHTMLファイルが一つだけ、それも非常に小さなものですので先に全体を見てしまいましょう。



  
    
    Firebaseサンプル1

今回のサンプルアプリケーションのコードはこれだけ、コメントや空行を除けばJavaScript部分はたったの12行です。このコードをローカルに保存し、ブラウザで開いてみてください。HTMLを含めて全体でも40行弱のコードですが、複数ブラウザで開いて、一方でメッセージを入力すればその内容はリアルタイムに他方に反映され、（かろうじて）チャットとして利用できます。

コードの詳細については次回以降に譲りますが、簡単に説明すると、行われている処理は以下のとおりです。

アプリケーションURLを引数としてFirebaseオブジェクトをインスタンス化し、前節で作成したFirebaseデータベースに接続するためのオブジェクトを生成します。
Firebaseデータベースのmessagesオブジェクトへの参照を取得します。この参照への操作はサーバー上のFirebaseデータベースに保存されることになります。
messagesオブジェクトに子ノードが追加された場合のコールバック関数を登録します。今回はコールバック関数内でメッセージの内容をli要素としてul要素に追加しています。なお、onメソッドで登録されたコールバック関数はHTMLの初回読み込み時にも実行されるため、初回読み込み時用の処理を特別に記述する必要はありません。
messagesオブジェクトに子ノードを追加します。

オフライン対応の確認

さて、ここで一つ面白い実験をしてみましょう。複数のブラウザでサンプルアプリを開き、使用しているコンピューターのネットワークをOFFにしてください。

そのまま一方の画面でメッセージをいくつか入力すると、メッセージを入力した画面では新しいメッセージがリストに追加されますが、他方の画面にはメッセージが追加されません。

その状態でコンピューターのネットワークをONにするとどうでしょう。少し経って他方の画面にもメッセージが表示されるのが確認できるはずです。

ネットワークが正常

実はFirebaseデータベースの読み書きはいったんローカルDBを経由して行われています。そのためネットワーク接続が不通の場合もローカル側の処理は正常に完了し、ネットワークが回復すると自動的にデータがサーバーと同期されるのです。

ネットワーク異常発生

ネットワーク復旧

これによりアプリケーション開発者はネットワークの状態を一切意識することなくリアルタイムアプリケーションを作成することができます。

リアルタイムに状態を同期する必要がある場合、この機能だけでもFirebaseを採用する価値があるのではないかと私は思うのですが、みなさんはいかがでしょうか？

データベースの内容確認

サンプルアプリにメッセージをいくつか書き込んだらダッシュボードでデータベースがどうなっているか、内容を確認してみましょう。https://アプリケーションID.firebaseio.com/ にアクセスしてみてください。

データベース確認

ちゃんと登録されています。

ちなみにこのダッシュボードから値を変更することもでき、その場合ももちろんクライアント側のイベントハンドラが発火され、ブラウザ側の表示はリアルタイムに変更されます。

デプロイ

最後に、今回のアプリケーションをFirebaseにデプロイして実際に利用できるようにします。firebase initコマンドを実行したディレクトリでfirebase deployコマンドを実行してください。

% firebase deploy

=== Deploying to 'my-first-chat-app'...

i  deploying hosting
i  preparing public directory for upload...
✔  1 files uploaded successfully

✔  Deploy complete!

URL: https://my-first-chat-app.firebaseapp.com/
Dashboard: https://my-first-chat-app.firebaseio.com/

Visit the URL above or run firebase open

では、ブラウザで https://my-first-chat-app.firebaseapp.com/ を開いてみましょう。開発時と同じデータベースを参照しているので先ほど入力したメッセージがここでも表示されています。

ちなみにアプリのドメインは firebaseapp.com で、ダッシュボードのドメインは firebaseio.com です。うっかり打ち間違えないように気をつけましょう。

まとめ

いかがでしょう。Firebaseを使用すれば非常に簡単にリアルタイムアプリケーションが作成できるということが分かっていただけたのではないでしょうか。

今回はFirebaseの全体的な機能の概要を説明しました。次回はもう少し複雑なアプリケーションを作りながら、Firebaseのそれぞれの機能をより詳細に掘り下げていきたいと思います。お楽しみに。

Angry Birdsの3D版!?「Enraged Fowls」の技術解説（物理エンジン編）

あんどうやすし — Thu, 28 Aug 2014 00:00:46 +0000

連載： HTML5 Japan Cup 特集 (4)

本記事はHTML5 Japan Cup 2014で優秀賞を頂いたEnraged Fowlsというゲームについての技術解説後編です。前編はこちらです。

物理エンジン

前編ではスリングショットコントローラーについて説明しましたが、ゲーム本体の技術要素についてはほぼ触れていませんでした。Enraged Fowlsでは弾が飛んでいく動きや、弾がぶつかって崩れるブロックの動きなどを実現するために、物理エンジンを使用しています。物理エンジンは文字通り、物理的な運動をコンピューター上で模擬してくれるライブラリで、特に今回のアプリのような物体同士の衝突を処理する必要がある場合に有用です。Enraged Fowls技術解説後編では、この物理エンジンについて簡単に説明します。

cannon.js

cannon.jsについて

3次元を扱えるものに限っても、JavaScriptで実装された物理エンジンはいくつかあります。Enraged Fowlsではその中からcannon.jsという物理エンジンを採用しました。これは他の物理エンジンの多くが他言語製物理エンジンの移植で、インターフェースに違和感があったのに対して、cannon.jsはJavaScriptで新たに作成された物理エンジンなので、インターフェースが素直に見えたことと内部構造がシンプルだったためです。

なお、実際のEnraged Fowlsのコードは自作のライブラリを使っていて、物理エンジンの説明向きではなかったため、今回使用しているサンプルコードは、すべて説明用に単純化したEnraged Fowlsから抜き出したものになっています。単純化したコードの全文は以下にありますので、適宜参照してください。

簡易版Enraged Fowlsのコード全文

全体的な流れ

物理エンジンは、物体の位置や向きを計算してくれるだけで、物体の表示には関知しません。表示に関しては、three.jsをいつも通りに使うことになります。両者を組み合わせる場合の基本的な流れは、次のようになります。

物理エンジンを初期化
three.jsを初期化
物理エンジンに物体（形状・位置・向き・速度など）を登録
three.jsに物体（形状）を登録
物理エンジンの物体とthree.jsの物体を関連付け
以下を繰り返し
1. 物理エンジンに登録された物体の次の位置と向きを計算
2. three.jsの物体の位置と向きを、物理エンジンの関連する物体と同期
3. three.jsの表示を更新

物理エンジンとthree.jsで、別個に物体を扱っているのが冗長に感じられるかもしれませんが、これには理由があります。両者を区別していることで、1つの物体に対して2種類のモデルを使用できるのです。例えばthree.js内で複雑な人型として扱われているオブジェクトを、物理エンジン内では単なる直方体として扱い、当たり判定を簡略化することができます。

上記のリストで重要なのは、5と6-2です。基本的にはオブジェクトの位置と向きは物理エンジンが管理し、オブジェクトの（表示される）形状はthree.jsが管理しますが、それぞれの情報の関連付けは開発者に委ねられます。5と6-2は、この情報の関連付けを処理しています。

本記事での解説は、上記の物理エンジンに関わる部分を抜き出す形で行います。

物理エンジンを初期化

AngryBirds.Game.prototype = {
  constructPhysicalWorld: function() {
    this.cannonWorld = new CANNON.World();
    this.cannonWorld.gravity.set(0,-9.82,0);
    this.cannonWorld.broadphase = new CANNON.NaiveBroadphase();
    // ...snip...
  },
}

cannon.jsでは、物理エンジンの実体はCANNON.Worldオブジェクトです。物理エンジン全体に関わる設定や処理は、このオブジェクトを通じて行います。設定しているプロパティはそれぞれ、gravityは名前の通り重力、broadphaseは「衝突している可能性のあるオブジェクトの組み合わせを見つけるアルゴリズム」です(注1)。設定できる値はほかにもありますが、とりあえずこの2つをこの通りに設定しておけば動作します。

注1: 通常、物理エンジンは衝突判定をBroad PhaseとNarrow Phaseの2段階に分け、はじめにBroad Phaseで衝突している可能性のあるオブジェクトの組み合わせをなるべく素早く見つけ出し、次にそれらのオブジェクトが実際に衝突しているかどうかを、Narrow Phaseで厳密に検査します。Broad Phaseのアルゴリズムは、物理エンジンのパフォーマンスに大きく影響を与えるため、cannon.jsではプロパティとして与える形でその変更を容易にしています。

物理エンジンに物体を登録

AngryBirds.Game.prototype = {
  constructPhysicalWorld: function() {
    // 地面
    var groundShape = new CANNON.Plane();
    var groundWeight = 0; // 固定
    this.cannonGround = new CANNON.RigidBody(groundWeight, groundShape); // ...(1)
    this.cannonGround.quaternion = new CANNON.Quaternion();
    this.cannonGround.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); // ...(2)

    // 鳥
    var birdShape = new CANNON.Sphere(0.5);
    var birdWeight = 10;
    this.cannonBird = new CANNON.RigidBody(birdWeight, birdShape); // ...(3)
    this.cannonBird.position.set(0, 2.5 + 2 + 0.1, 0);

    // CANNON.Worldに追加
    this.cannonWorld.add(this.cannonGround);
    this.cannonWorld.add(this.cannonBird);

    // ...snip...
  },
}

cannon.jsでは、物体はCANNON.RigidBodyオブジェクトとして表され、物体の位置や向きの設定などはこのオブジェクトを通じて行います。ただし、物体の形状はCANNON.RigidBodyオブジェクトからは分離されていて、その指定にはCANNON.Shapeオブジェクトのサブクラスを使用します。上記の例では、CANNON.Plane（平面）とCANNON.Sphere（球体）を利用していますが、それ以外にも以下のような形状が使用可能です。

CANNON.Sphere: 球体
CANNON.Plane: 平面
CANNON.Box: 直方体
CANNON.ConvexPolyhedron: 凸型多面体
CANNON.Compound: 上記の組み合わせ

なお平面はデフォルトではz軸に垂直ですが、cannon.jsでは重力はy軸に垂直なので、地面として使用するためにquaternionを設定して、x軸に対して90度回転させています。

物理エンジンの物体とthree.jsの物体を関連付け

物理エンジンの物体とthree.jsの物体を関連付けについては、特に決まったやり方はありません。管理する物体の数が少なければ、単純に1つの物体に対してcannon.js用とthree.js用、2種類のオブジェクトを用意すればいいでしょう。今回の単純化したコードでは、threeFooとcannonFooという2変数で管理しています。

AngryBirds.Game = function(opts) {
  // ...snip...
  this.threeGround = null;
  this.threeBlocks = null;
  this.threeBird = null;
  this.cannonGround = null;
  this.cannonBlocks = null;
  this.cannonBird = null;
};

実際のEnraged Fowlsでは、three.jsのオブジェクトとcannon.jsのオブジェクトを1つにまとめて使うためのc3.jsという簡単なライブラリを作成しましたが、まだ公開するような完成度ではないので、ここでは説明を省略します。

物理エンジンに登録された物体の次の位置と向きを計算

this.cannonWorld.step(1.0/24.0);

物体の位置を更新するには、CANNON.Worldオブジェクトのstepメソッドに経過時間を渡します。これだけで先にaddした物体間の衝突が処理され、位置や向きがそれぞれの運動状態に応じて更新されます。

three.jsの物体の位置と向きを、物理エンジンの関連する物体と同期

this.threeBird.position.copy(this.cannonBird.position);
this.threeBird.quaternion.copy(this.cannonBird.quaternion);

先ほどCANNON.Worldオブジェクトのstepメソッドを呼び出しましたが、このメソッドはCANNON.RigidBodyの位置と向きを更新するだけです。表示位置を更新するには、描画の前にthree.js側のオブジェクトとcannon.jsのオブジェクトの位置を同期する必要があります。cannon.jsはthree.jsと組み合わせて使うことが初めから想定されているため、これは非常に簡単です。three.jsのオブジェクトのpositionプロパティ（位置）とquaternionプロパティ（向き）に、cannon.jsのオブジェクトのそれらをcopyしてください。これだけで位置と向きの同期が実現されます。

ここまでの実装を行うと、次のように衝突がそれっぽく扱われるようになります。

物理エンジン前（貫通）

物理エンジン後（瓦解中）

まとめ

モデリングツールを覚えるような時間もモチベーションもなかったため、Enraged Fowlsはthree.jsに用意されている基本図形だけでできています。それでも物理エンジンを使用すれば、その動きで見た目をある程度はカバーできていると言っていいのではないでしょうか。

今回の記事から分かる通り、物理エンジンの利用は存外に簡単です。初期位置を登録してstepメソッドを呼び出し結果を表示に反映させる、これだけです。three.jsを使用して単なるビューアーに留まらないインタラクティブなアプリを作るのであれば、物理エンジンを採用しない理由はありません。本記事を参考に、ぜひいろいろと試してみてください。

Angry Birdsの3D版!?「Enraged Fowls」の技術解説（コントローラー編）

あんどうやすし — Wed, 27 Aug 2014 00:00:13 +0000

連載： HTML5 Japan Cup 特集 (3)

本記事はHTML5 Japan Cup 2014で優秀賞を頂いたEnraged Fowlsというゲームに関する技術的な解説の前編です。

Enraged Fowlsとは

タイトルに使われているのは聞きなれない単語かもしれませんが、それぞれ類語辞典で調べたAngryとBirdの同義語です。「Angry Birds」については、おそらく皆さんご存知でしょう。全世界で累計15億ダウンロード（Wikipedia）されたアクションパズルゲームで、物理エンジンを使用してスリングショットで撃ち込まれた鳥と、それにより崩れ落ちるブロックのリアルな動きを実現していることが大きな特徴です。上のスクリーンショットからも分かる通り、「Enraged Fowls」はこの「Angry Birds」を3Dにすることを目指したものです。

　加えて、Enraged Fowlsならではの機能としてスマホをセットして使用できる、スリングショット型のお手製コントローラーがあります。当コントローラーを使用すれば、モニターの中の世界に対して、実際にスリングショットで鳥を撃ちこんでいるような感覚を得ることができます。

技術要素

Enraged Fowlsの技術的な見どころとしては大きく

スリングショットコントローラー
3Dの表示と動き

の2つがあると考えています。具体的な技術要素を挙げると以下の様になるでしょうか。

WebRTC（スリングショットコントローラー）
Web Workers（スリングショットコントローラー）
WebGL（three.js）
3D物理エンジン（cannon.js）

この中でthree.jsについては、今回の「HTML5 Japan Cup 2014」の優秀・最優秀作4作品のうち、Enraged Fowlsを含む3作品が使用していることもあり、おそらく別の記事で解説されると判断して、本記事では説明を省略します。HTML5 Experts.jpにもthree.jsの解説記事がありますので、そちらを参考にしてもいいでしょう。

初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞

また（three.jsを除いても）上記すべてを一度に解説することができなかったため、今回はスリングショット部について解説します。物理エンジンに興味のある方は次回までお待ちください。なお、Enraged Fowlsのソースコードは以下で全て公開されています。必要に応じて参照してください。

Enraged Fowlsのソースコード

スリングショットコントローラー

スリングショットコントローラーは、本物のスリングショットのようにコントローラを移動して狙いをつけます。そして、ゴム紐を引いて手を離し弾を撃つという操作を、ウェブカメラとスマートフォンの加速度センサーを利用して実現したものです。

（もちろん上記のような工作をしなくてもスマートフォンさえあれば、ウェブカムの前にかざして画面をタップするか端末の裏面を指で弾けば動作を確認することができるので、よかったら試してみてください）

ウェブカムによるスマートフォンの位置の特定

ウェブカメラに写るスマートフォンの位置を取得する方法は、正直かなり手を抜いていて、スマートフォンの画面を真っ赤にし、ウェブカムの「赤い部分」の平均値をスマートフォンの位置と見なしています。スリングショットコントローラーは、締め切りの一週間ほど前に、ふと思いついて追加した機能です。まず簡単な方法で実装して動作や使用感を検証し、精度が足りないようなら後できちんとしたやり方にしようと考えて実装しましたが、ちょっと遊ぶ分には大して問題もなかったため、結局そのまま今に至っています。まぁよくあることです。

（右側の画像の緑のドットが”赤”と認識された箇所です）

ソースコードの該当部分を以下に抜粋します。

Detector.prototype.startCamera = function() {
  // ウェブカムの映像取り込み
  navigator.getUserMedia({video: true}, // ... (1)
    function(localMediaStream) {
      // ウェブカムの映像をvideo要素で表示
      this.video.src = window.URL.createObjectURL(localMediaStream); // ... (2)
      this.video.play();
    }.bind(this),
    function(err) { ... }.bind(this)
  );
};

Detector.prototype.startWorker = function() { // ... (3)
  // 画像解析用WebWorker開始
  this.worker = new Worker('js/detector_worker.js');
  this.worker.addEventListener('message', function(event) {
    // WebWorkerから返された解析結果を処理
    this.detectHandlers.forEach(function(handler) {
      handler(event.data, this.gc);
    }.bind(this));
    if (this.isDetecting) setTimeout(this.detect.bind(this), 10);
  }.bind(this));
};

Detector.prototype.detect = function() { // ... (4)
  // video要素の内容を取り込んでWebWorkerで処理
  this.gc.drawImage(this.video, 0, 0, this.video.width, this.video.height);
  this.worker.postMessage(this.gc.getImageData(0, 0, this.video.width, this.video.height));
};

スマートフォンの位置の特定は、Detectorオブジェクトで行います。Detectorオブジェクトはdetector.jsとdetector_worker.jsの2つからなっていて、detector.jsではnavigator.getUserMedia関数を使用してウェブカムの画像をvideo要素に取り込み(1)(2)、画像解析用のWebWorkerを開始し(3)、定期的にvideo要素の内容をWebWorkerに送ります(4)。現在のところdetector_worker.jsでは非常に単純な解析しか行っておらず、WebWorkerを使わなくてもそれほど問題にはならないかもしれませんが、将来的に複雑な解析を行うことを可能にするために、バックグラウンドで処理しています。

// 直近10回の解析結果を保持
var centers = [];

addEventListener('message', function(event) {
  var imageData = event.data;
  var data = imageData.data;
  var redPoints = [];

  // 画像データを走査して赤い部分（isRed）の位置を記録
  for (var x = 0; x < imageData.width; x+=5) {
    for (var y = 0; y < imageData.height; y+=5) {
      var base = x * 4 + y * imageData.width * 4;
      if (isRed(data[base], data[base+1], data[base+2], data[base+3])) { // ... (5)
        redPoints.push({x:x, y:y});
      }
    }
  }

  // 直近10回の赤い部分の中心位置を記録
  var center = getCenter(redPoints);
  while (10 <= centers.length) centers.shift();
  centers.push(center);

  // 直近10回の平均位置を取得
  var centerAverage = getCenterAverage(centers); // ... (6)
  
  // WebWorker呼び出し元に結果を返却
  postMessage({
    redPoints:{points:redPoints, center:center, 
      centerAverage:centerAverage, size:redPoints.length}
  });
});

function isRed(r, b, g, a) {
  // なんとなく赤っぽい色を判定
  return 250 < a && 100 < r && g < r/2.0 && b < r/2.0;
}

先に書いた通り、detector_woker.jsの中心的な処理はImageDataオブジェクト内の赤い部分を抜き出して、その中心位置を返すことです。基本的にはImageDataの画素の色をチェックしているだけですが(5)、特に厳密な解析も不要なので全画素をチェックするのではなくある程度間引いた値をチェックし、それにより発生するチラツキを直近10回の解析結果の平均を返すことで防いでいるのが(6)、工夫といえば工夫です。

ちなみに、「赤い部分の位置の平均を取るだけだと服や部屋が赤かったりすると問題が起きるんじゃないか？」と思う人もいるでしょうが、おっしゃる通り、割と大変なことになります。

解決策はいろいろあると思うので、まぁ読者の皆さんへの宿題というか、pullreqは随時受付中です。

Detectorオブジェクトの利用

this.detector = new Detector();
this.detector.addDetectHandler(function(data, gc) {
  // ウェブカム画像内のスマートフォンの位置を正規化
  var center = data.redPoints.centerAverage;
  var dx = center.x / Detector.DEFAULT_WIDTH - 0.5;
  var dy = center.y / Detector.DEFAULT_HEIGHT - 0.5;

  this.cameraDirection = new THREE.Vector3(0, 0, 5);

  // y軸方向の位置を射出の縦方向に変換
  var yAxis = new THREE.Vector3(0, 1, 0);
  var yawAngle = -dx * Math.PI/2;
  var yawMatrix = new THREE.Matrix4().makeRotationAxis(yAxis, yawAngle);
  this.cameraDirection.applyMatrix4(yawMatrix);

  // x軸方向の位置を射出の横方向に変換
  var xAxis = new THREE.Vector3(1, 0, 0);
  var pitchAngle = -dy * Math.PI/4 - Math.PI/8;
  var pitchMatrix = new THREE.Matrix4().makeRotationAxis(xAxis, pitchAngle);
  this.cameraDirection.applyMatrix4(pitchMatrix);

  // 視点とカメラの向きを射出方向に合わせて変更
  this.world.threeCamera.position.copy(new THREE.Vector3().copy(
    this.bird.threeMesh.position).sub(this.cameraDirection));
  this.world.threeCamera.lookAt(this.bird.threeMesh.position);
}.bind(this));
this.detector.start();

Detectorを利用する側のコードは、上記のようになります。Detectorオブジェクト自体はなるべく汎用的にしたかったので、Enraged Fowls独自の処理はaddDetectHandler関数で、利用側がハンドラ登録するようにしています。

一見複雑な処理にみえるかもしれませんが、要は下の図のように、目の前に固定されたスリングショットがあるイメージで、ウェブカム映像内でスマートフォンが写っている位置に応じて、撃ち出す方向や視点を変更しているだけです。具体的な座標変換についてはコードが全てですし、説明を省略します。

加速度センサーによるゴム紐リリースの検知

スリングショットで狙いを付けることができるようになったので、次にゴム紐を伸ばして離すことで、狙いをつけた方向に鳥（弾）を撃てるようにします。正直なところ、これも非常に手を抜いたやり方で実装しています。

window.addEventListener('devicemotion', function(event) {
  var threshold = 5;
  if (threshold < Math.abs(event.acceleration.z)) {
    toggleMarkerColor();
  }
});

windowオブジェクトのdevicemotionイベントで、端末にかかる加速度を取得できます。スマートフォンの画面に対して垂直な方向はz軸方向なので、event.acceleration.zの値がある閾値を超えたときに、スマートフォンの裏側に何かしらの衝撃があったと判断できます。その衝撃を検知したことをアプリ本体に伝えられればいいわけですが、ここでも先ほどのDetectorオブジェクトを使用します。つまり衝撃を検知したときにスマートフォンの画面の色を赤から青に変更し、その色の変化を先のDetectorオブジェクトで検知してアプリに伝え、鳥（弾）を発射します。

«»

勘のよい方はお気づきかと思いますが、z軸方向の加速度センサの値を見ているだけなので、例えば急にスマートフォンを裏返したり倒したりするだけで弾が暴発します。時間があればなんとかしようとも思っていたのですが、ちょっと遊ぶ分には大して問題もなかったため、結局そのまま今に至っています。まぁよくあることです。

加速度センサの値の履歴から特定のパターンの場合にだけ反応するなど解決策はいろいろあると思うので、読者の皆さんへの宿題というか、pullreq随時受付中です。

まとめ

スリングショットコントローラーに使用されている個々の技術は、非常に基本的で、特に難しいことも行っていません。ただそれらの組み合わせでスリングショットを実現したところは、ほんの少しだけ新しいのではないかと自負しています。

次回は、アプリ本体で使用している物理エンジンについて解説する予定です。

伝説のおっぱいエンジニアは先端技術の無駄遣いがお好き ── あんどうやすしさん（ミクシィ）

あんどうやすし — Thu, 05 Sep 2013 22:00:34 +0000

連載：エキスパートインタビュー (3)

エキスパートインタビュー第三弾は、あんどうやすしさん。ミクシィのエンジニアとして働く傍ら、Google Developers Expertとして「開発者のためのChromeガイドブック」を執筆するなど、精力的に活動されています。世界的に有名な物理エンジンライブラリ「Box2D.jsの作者」という面もさることながら、「Google Waveの人」や「おっぱいエンジニア」など「おもしろい感じの人」としても有名なあんどうさんに、経歴や関心のあることなどをいろいろと伺ってみました。

業務系エンジニアから、30歳で留学
　　　　　── 「やっちゃった感すごかったですよ」

──あんどうさんとは、意外と長い付き合いですが、そのご経歴とかはあまり伺ったことがありませんでした。どんな開発者人生を歩んでこられたんでしょうか？

エキスパートNO.5 あんどうやすしさん

以前はJavaを使った業務系のエンジニアでした。いわゆる「デスマーチ」も経験するような、「普通」の業務系エンジニアでしたよ。

──あんどうさん、Javaもやってらしたんですね。RubyやJavaScriptなどをやっているイメージがとても強いので、意外です。

はい、Javaは仕事で7～8年やっていました。今もAndroid周りの開発をやっているので、Javaを結構触っていたりします。型がない言語のほうが、書くのは楽しいですけどね。

で、30歳のころに心機一転、イギリスに1年間留学して、コンピューターサイエンスを学ぶことにしました。ただ、英語が苦手な状態で行ってしまったのが、ちょっとまずかった。行ってから8カ月くらい、ほとんど誰とも話さなかったりしました。

──8カ月！それは…つらかったんじゃないですか？　僕だったら寂しくて死んでしまいそうです。

白石編集長

そこは実は、全然つらくなかったんです。私は、人と喋らないのは苦にならないタイプみたいで。

ただ、「やっちゃった」感はすごかったですけどね（笑）。

留学前にTOEFLのトレーニングはしていったので、リスニング力は向上していました。なので授業の内容は何となく分かるんですが、試験となるとそうはいかない。

おかげで学校も一度追い出されそうになったりして……。学校追い出されたら、残りの時間はヨーロッパ旅行して帰ろうとか、本気で計画したものです。結局は教授に頼み込んで、なんとかなったのですが。

私のイギリス留学は、そもそもの初めから送った荷物が2カ月くらい届かなかったりと、なかなかにハードでした。

──あんどうさん、英語が結構得意なのかと思っていました。イギリスに行ったという話は聞いたことがあったのですが、英語が得意だから行けたのかな、と思っていました。そうじゃなかったんですね。

そうです。それになんか、向こうに行きさえすれば必要に迫られて英語がものすごく上達するようなイメージってあるじゃないですか。全然そんなことはないですよ！今後、留学したいと考えている人には、英語をきちんと学んでから行くことをオススメします。たださすがに、耳が英語に慣れたおかげで、その後英語のコミュニケーションにはそれほど苦労しなくはなりました。

留学から戻ったあとはいくつかの転職を経験して、今はミクシィでプラットフォームを開発する部署に所属しています。

「あの」伝説的エンジニアがHTML5を始めるきっかけを作った！「Webが進化したのは私のおかげ」

──あんどうさんは、物理エンジンライブラリであるBox2D.jsの開発でも有名ですね。世界中で使われているライブラリです。

はい、ActionScript3版のBox2Dライブラリを、JavaScriptに移植したものですね。今では、box2dwebなどの後継も出てきていますが、JavaScript製物理エンジンとしては結構知られているんじゃないかと思います。

Box2D.jsが完成した瞬間、「これはすごいぞ」と考えて、Ajaxianとかにも投稿したんです。でも、全然取り上げてもらえなくて。その後1年後くらいにとある記事で取り上げられて、それでやっとライブラリが知られるようになりました。はじめの頃は、その記事の執筆者がBox2D.jsの作者だという勘違いをされていて、納得いかないと感じたこともありましたけどね（笑）。

──以前、Mr.doob(※)も使っていたそうですね。

そうなんですよ！ Mr.doobは、Flashのクリエイターとしても有名な人でしたが、「Box2D.jsがあったから、HTML5を始めた」と言われたときは嬉しかったです。 Mr.doobはその後Three.jsを作り、Webの進化に多大なる貢献をしたわけです。そのきっかけを作ったのは私。だから、Webの進化に多大なる貢献をしたのは私である、と言ってもいいんじゃないでしょうか(笑)

※Mr.doob…Three.jsの作者として有名なクリエイター。先進的なデモギャラリーとして長い歴史を誇るChrome Experimentsにも、多数の作品を投稿している。

「技術の無駄遣い、大好きです」

──あんどうさんは、その高い技術力を使って面白いものを作っている人だ、という印象があります。ブログ上で、いろいろとトライしていらっしゃいますよね。例えば、「おっぱいエンジニア」としても有名ですね。

そうですね。自分で言うのもなんですが、あの（おっぱいの）動きは素晴らしいと思います。だいぶこだわりましたからね！ですが実は、あの動きを作るのにはそれほど時間はかかっていません。動くのを確認するまでは大体1日か2日くらいですね。

──以前、WebGLとWebRTC、あと顔認識のライブラリ（Face.js）を組み合わせたデモを作っていたのを覚えています。ああいった、先端技術を使ったおもしろ系のデモとかを作るのがあんどうさんの真骨頂というか。

そうですね。新しい技術が出たら、それを使ってとにかく面白いものを作りたい。技術の無駄遣い、大好きなんですよ。ジャストワンアイデアで終わるようなものを作りたい。

──なるほど、根っからのエンターテイナー気質というか……おみそれしました。では、最後の質問です。現在注目している技術や、今後期待している技術とかを教えて頂けますか？今後HTML5 Experts.jpに書いていただけるという期待も込めて、お聞きします！

個人的には、3Dをもっとちゃんとやりたい。あと、物理エンジンの世界をもっと突っ込んで極めていきたい。Box2D.jsは、剛体の物理シミュレーションだったのですが、粉体や流体の物理シミュレーションエンジンなども作ってみたいですね。

3Dや物理エンジン、人工生命などといった、「世界の枠組み」を作るようなのが好きなんです。そういう世界の上では、細かい作りこみをしなくとも、少し手をかけるだけで面白いものが作れる。そうして、人をびっくりさせるようなものをどんどん作っていきたいと思っています。

[エキスパート No.5 あんどうやすし] 航空工学科を修了後に数年SI企業で働いた後、やはりコンピューターをちゃんと勉強したいと思いUniversity of BathでMSc Computer Scienceを取得。帰国後はB2C企業を転々としつつ5年ほど前から縁あってGoogle Developers Expertとして活動させてもらっています。 http://d.hatena.ne.jp/technohippy/

あんどう やすし – HTML5Experts.jp

Firebaseで作る簡単リアルタイムウェブアプリケーション（前編 補）