WEBCRE8.jp > 会う > [イベント]第41回HTML5とか勉強会 ― 事例に学ぶHTML5開発のレポート #html5j

[イベント]第41回HTML5とか勉強会 ― 事例に学ぶHTML5開発のレポート #html5j

この記事は約12分ぐらいで読めます

8月26日、HTML5とか勉強会に行ってきました。この日は最近公開されたHTML5の関連技術を用いた様々なサービスやコンテンツの制作者からの解説を聞くことができました。

第41回 HTML5とか勉強会

先日、第41回 HTML5とか勉強会に参加してきました。今回の内容は事例に学ぶHTML5開発ということで、最近HTML5の関連技術を用いて作られたWebサービスやWebコンテンツ等について制作者自らが語ってくれるという回です。

これまでは時間の都合でがっしり参加できなかったHTML5とか勉強会なんですが、ついに頭から参加することができました。わーい！

勉強会の案内

ちなみに会場は渋谷ヒカリエのDeNAです。

DeNA！

wri.pe 増井雄一郎

最初のセッションは増井雄一郎さん(@masuidrive)の多機能テキストエディターWebアプリ、wri.peの話。

メモアプリの課題として、増井さんはどこでも使いたいということや書いたことを忘れてしまうことをどうにかしたいというようなことを挙げていました。

増井さんがもともとこのアプリを作り出したのは休暇の期間中に自分でコードを書いて何かを作りたいということだったそうで、短期間で自分の実現したい機能を盛り込んだものを制作したそうですが、思いのほか注目が集まってしまったのでその後作り直したとのことです。

機能としてもキーボードオペレーション、全文検索、Markdown等の機能を盛り込み、GitHubやFacebook、evernoteの等のアカウントでログインできます。また、Gmailと連携して日付でアーカイブすることができます。

wri.peを使って記事をレポートを書いてみた様子

実際に私も今日の勉強会の様子をwri.peを使って書き留めてみました。Markdownで書かれた文章が、右側にレンダリング結果として表示されていますね。ちょっとHTMLとしての書き出しができるのかはわかりませんでした。あと保存は自動的にやってくれます。

HTML5の技術としてはWeb Storageが使われているとのことです。

お台場合衆国リアルスコープスサイネージ比留間和也

次はKAYACのHTMLファイ部の比留間和也さん(@edo_m18)のセッション。お台場合衆国で展示された、フジテレビのテレビ番組超潜入！リアルスコープハイパーの映像コンテンツを手がけた際の話です。さすがKAYAC、特殊なところに手を付けてます…！

テレビ番組をモチーフにしたインタラクティブな要素のあるサイネージということで、長時間運用に耐えられるのか、クオリティーも下げず、しかもこれをかなりタイトなスケジュールでやらなければならなかったようです。これをブラウザーでやるという話。

実際に動いているサイネージのデモ

サイネージというより大型タッチパネルのコンテンツですね

同コンテンツは大人の社会科見学とでも言うべき様々な工場や施設等に潜入するというテレビ番組の内容をモチーフにしたもので、ユーザーはそうしたコンテンツを視聴しつつ、42インチディスプレイにタッチでクイズに答えて選択。記念写真なども撮れるようになっています。

実装としては前面がCanvasで2Dグラフィック、背景がWeb GLで3Dグラフィック。Audioの音声も流れています。

で、実際に作ってみてWeb技術でサイネージは作れるということがわかったわけですが、今回のサイネージは固定されたコンテンツのみを扱うため、デバイス、ブラウザーの対応というものが必要ありません。なので普段であれば各ブラウザーの実装の違いによって実現の難しい機能を仕込むことができています。Google Chrome最強というわけですｗ

ちょっと個人的な話ですけど私最近、初めて壇上に立ってスライドを使って話をする、というのをやったんですね。なのでやはりそうなると人のスライドの作り方とか気になる盛りなんですけど、この辺りでえどさんが一旦内容を伏せたスライドを見せ、そこをあとから表示するというテクニックを使ってました。確か「今まで実装可能だったことをどれだけ無理だと考えてやらずにいたか」というようなことだったと思います。

要はみのもんたメソッドというような感じのやつなんですけど、こういうことで特に気にさせたいことに目を向かせるのは大事だなーと思いました。

WebGLで背景に3Dの立体的で美麗なグラフィック、プラグイン無しでの動画再生、Canvasで思い描いたそのままのグラフィックが作れる…何気に使う環境が限定されているこのサイネージという用法はむしろHTML5関連技術を使うのにあった環境なのではないかとすら感じますね。

とはいえ、このセッションは苦労した点というタイトルが振られたスライドが異常に多く、実際に作ることがどれだけ大変かということも感じました。

特にユニークというか、このシチュエーションならではだなと感じたのは現場対応の重視ですね。筐体として設置したサイネージから、何か不具合が起きた場合の設定画面を呼び出せるようになっており、おかしいと感じた場合は再起動が出来るようになっているとのことで、コンパニオンさんでも迅速に対応できるようになっています。

HTML5KARUTAの宣伝もさせて頂きましたｗ

この日はHTML5大好きな人が大挙して訪れる日。もちろん私のHTML5KARUTAも知ってもらわないわけにはいきません。

ちゃんと持っていきました

何人かの人に話しかけていただいて、カルタに触れて頂くことが出来ました。今後もなるべくHTML5KARUTAとお釣りと領収書を持ち歩くようにしますんで、見かけた方は売ってくれと声かけてくださいｗ

Webで購入する方が楽だという人はこちらで！

http://html5karuta.thebase.in/

以上宣伝でしたｗ

World Wide Maze Saqoosha

私は初めてお名前を知ったのですが、このChrome World Wide Mazeを作成した@Saqooshaさんは、他にもTwitterアカウントを登録するとフォロワーのアイコン問と一緒に行進を始める「IS Parade」(APIの仕様変更により現在は利用停止)というものも作っており、以前イベント会場でそれを見ていた私としては驚きがありました。

WWM自体は以前当ブログでも記事を書いて紹介しています。

Googleのゲームコンテンツ「World Wide Maze」が面白い – WEBCRE8.jp

このコンテンツに使われているHTML5関連技術は、

WebGL
Web Workers
WebSocket
Device Orientation

といったもの。

Saqooshaさんは軽妙な語り口でセッション自体も本当に面白くて、インパクト抜群のセッションでした。特にDevice Orientation Eventの説明のところで、傾きを検出する仕組みの設定値がAndroidの一部のみで違っていたことを調べた話の時の「僕が間違っているのか…世の中が間違っているのか…」というところが大爆笑でしたｗ

PCとスマートフォンの通信にはWebSocketが使われ、サーバーを介して傾きを伝えています。これは似た機能であるWebRTCに置き換えれば端末同士の通信が可能になるとのことで、今後対応させるかは不明とのことです。

マンガテレビ小松健作

最後はhtml5jの小松健作さんが白石さんらメンバーと一緒に作成したマンガテレビというサービスの解説です。

このサービスはマンガカメラというアプリにインスパイアされたもので、カメラに写っているリアルタイムの映像に輪郭を抽出したりスクリーントーンのようなエフェクトをかけてくれます。

画面の映像から輪郭を抽出し、動画をマンガのイラストのような線画風に表示してくれるんですけど、色の濃さ等から自動的に表示させているためライトが近い、または遠いと思い通りにはなりません。スライドを表示するという会場の都合上あまり上手くは行かなかったようですw レベル補正的なことができるようになるといいですね。

また、このサービスは音声もまだW3Cのドラフトにもなってない、Chromeのみで実装されたWeb Speech APIというものを使っています。精度もかなりいまいちで変な表示をたくさんしてしまうんですが、表示された文章が絶妙で(Google日本語入力から拾ってくるのかな？)で大盛り上がりしてしまう等プレゼン向きなAPIだったと思いますww

セッションの様子はこんな感じ

他にも、しゃべっている言葉を顔の横に表示するために顔検出ライブラリHeadtrackr.jsというものを使っているそうです。その他様々な処理を同時に行うため処理が重くなりがちなものを、白石さんに「60fps出せ」と尻を叩かれながら作ったそうです。スパルタ…！！

その他技術的な話はHTML5Experts.jpのリアルタイムにライブ映像をマンガ化「マンガテレビ」アーキテクチャ編 | HTML5Experts.jpの方で解説されていますのでそっちもチェックしてみてください★

終わりに

こうして様々なHTML5等の最新技術を使い、仕事だったり、大きなプロジェクトだったり、趣味だったり、思い思いの目的でアプリやコンテンツが作られています。

今回のイベントのツイートは以下のページにまとめられています。私もちょっとつぶやいてますねー。

2013/08/26(#html5j)第41回 HTML5とか勉強会 – Togetter

また、今回は11月30日に行われるHTML5 Conference 2013のサイトのお披露目も行われました。こちらも楽しみです！

http://events.html5j.org/conference/2013/11/

私は前述の通り、html5jに関わり出してから今回初めてこの勉強会にしっかり参加ができたわけですが、さすが応募開始直後瞬く間に売り切れる勉強会というだけあってここでは本当に興味深いセッションばかりが聞けます。html5とか勉強会にはサテライト会場を作る等、更に皆さんが参加できるような仕組みを作ることを期待しつつ、どうしても参加したい人はぜひhtml5jのメーリングリストに加入するといいと思いますw 特に現時点でHTML5に詳しい必要もなく、HTML5を勉強したければ参加できるものなので、気軽にどうぞー★

登録はリンク先の「今すぐ参加する」を押すだけですー。