レポート

「第41回 HTML5とか勉強会 ~事例に学ぶHTML5開発」活動報告

この記事を読むのに必要な時間:およそ 2 分

Inside “World Wide Maze”

つづいてKatamari Inc@SaqooshaさんからWebサイトを迷路にして遊ぶゲームWorid Wide Mazeの実装について紹介いただきました。

画像

World Wide Mazeとは

Worild Wide Maze(以下WWM)はWebサイトを立体迷路にして遊ぶことができるゲームです。スマートフォンをコントローラにできるのが特徴で,スマートフォンを傾けて操作することで3D空間を楽しむことができます。Google Chromeで遊べます。

紹介動画

WWMで使っているHTML5

WWMでは主にWebGL,Web Workers,WebSocket,Device Orientation APIなどを使っているそうです。実装にはそれぞれthree.js,ammo.js,Physijs,Socket.ioを使っていると紹介していました。

制作で苦労したポイント

制作するにあたって「すべてのポイントで苦労した」そうですが,その中でも特にスマートフォンの傾き情報の取得が苦労したとのことです。傾きの取得にはDeviceOrientationEventを使いますが,ブラウザよって実装が違いすぎていてW3Cの仕様通りの結果を返すブラウザは数機種しかないそうです。そこでWWMでは取得した値を補正して反映していると説明しました。

PCブラウザとスマートフォンブラウザ間の通信

コントローラとして使用するためには,スマートフォンで取得した傾きの情報をPCブラウザに送る必要がありますが,WebSocketはクライアントとサーバ間のプロトコルのため直接のやり取りはできません。やり取りのために間にサーバを挟む必要がありますが,WWMではアメリカにあるサーバを経由するために遅延が少なくないそうです。⁠極力ネットワーク的に近いサーバを使ったほうが良い」と述べていました。

サーバを経由せずに通信する方法としてWebRTCへの言及もありました。通信の前のペアリングにはサーバが必要なのは変わらないと紹介していました。

講演中にはデモも行いました。こちらのサイトにPCのブラウザとスマートフォンのブラウザからアクセスすると,スマートフォンの傾きに応じて画面が動きます。

詳しい解説は講演動画をご覧ください。講演資料はこちらになります。

Saqooshaさん自身が解説している技術解説の記事もあわせてご覧ください。

「マンガテレビ」の作り方

最後にNTT Communications小松健作さんからWebカメラで取り込んだ画像をマンガっぽくするアプリマンガテレビについて紹介いただきました。

画像

マンガテレビとは

マンガテレビはWebカメラから取り込んだ画像をリアルタイムに加工して漫画のような見た目にするアプリです。某人気カメラアプリをリスペクトして制作したとのことです。

トークイベントのために作ったアプリとのことで,音声コマンドや吹き出しやエフェクトといった機能もあります。

マンガ化

マンガ化はgetUserMedia()によってカメラからの画像を取得してフィルタをかけます。フィルタの処理は階調化とエッジ抽出の組み合わせによって行ない,requestAnimationFrame()によって画像変換処理を繰り返しているとのことです。

音声認識機能

マンガテレビには音声認識による吹き出しの表示機能があります。WebSpeech APIを用いて認識した音声は顔の付近に表示されます。顔の検出にはheadtrackr.jsを使用していて,一回顔検出が完了するとそれ以降は顔の周辺のみを検出対象とするため高速な動作が期待できると説明しました。

パフォーマンスチューニング

マンガテレビでは画像処理に毎フレーム30万回のループ処理を行なっていて,開発初期の段階では7fps程度のパフォーマンスしか出ていなかったそうです。速度改善のために関数の呼び出しを減らしたり,プロパティの参照をなくしたり,演算処理を減らすといった改善を重ねていったとのことです。パフォーマンスチェックや改善には「Google ChromeのDevToolsが便利だ」と紹介していました。

詳しい内容は講演動画をご覧ください。講演資料はこちらになります。

小松さん自身が解説したマンガテレビの詳細な解説の記事もあわせてご覧ください。

「HTML5 Conference 2013」開催決定!

html5jは昨年に続いてHTML5 Conferenceを開催します。

HTML5 Conference 2013は11月30日(土)の開催を予定してます。

画像

開催概要やセッションについては随時更新していくので要チェックです。11月30日の予定を空けておいていただけることをお願いするとともに,募集開始までしばしお待ちいただければと思います。

HTML5とか勉強会について

本勉強会は,毎月1回の頻度で開催していますので,興味をもたれた方はぜひ参加ください。開催のアナウンスはhtml5jのメーリングリストで行われますので,こちらをご確認ください。

また,コミュニティサイト勉強会スタッフのブログも公開していますので,ぜひこちらもご覧ください。

勉強会に対する希望・意見・取り上げて欲しいテーマ,レポートに対する感想などがありましたら,twitter@nakajmgまで気軽につぶやいていただければと思います。

著者プロフィール

中島直博(なかじまなおひろ)

DMM.com Labo所属。

html5j/HTML5とか勉強会スタッフ。

フロントエンドエンジニアとして主にスマートフォン向けサービスの開発に従事。ツチノコの巣に迷い込んだひよっこ。

twitter:@nakajmg