HTML5飯!

こんにちは!
2014年8月3日に横浜で行われた
HTML5飯のレポートです!

HTML5飯とは、WebフロントエンジニアがLTをききながら、みんなでご飯を食べる会です。
今回は、第2回!

html5han_logo_fix.png

今回の会場は、横浜で最近オープンしたシェアスペースBUKATSUDO」!
ドックヤードガーデンに面した地下にあり、おしゃれな雰囲気の漂う空間です。

自由に利用できるワークラウンジから、今回利用したホール、
はたまたキッチンからスタジオまで......。
とっても良い会場でした!

zentai.jpg


LTの紹介

ご飯の前にLTをしました!
発表順に紹介していきます。


fnobi.jpg

Cocos2d-JSはイケてる? イケてない?

発表資料

トップバッターは弊社の若手、@fnobi
Cocos2d-JSに関する発表です。

Cocos2d-JSは、JavaScriptでiOS/Androidアプリを作ることができるツール。
書かれたアプリは、なんとブラウザでもそのまま動くらしいです!

ビルドなしで、アプリの挙動を確認できるのは魅力的ですね。
Lobi SDKも動きます!


geko.jpg

ご存じですか、colorプロパティ

発表資料

続いては、@GeckoTangさんによる、colorプロパティに関する発表!

フロントエンジニアなら誰でも知ってるであろうcolorプロパティ、
実は文字色を変えるだけのプロパティではないとのこと。

文字以外にも、文字色を参照するCSSプロパティは多くあり、
currentColorというキーワードで参照しているらしいです。


edo.jpg

使ってますか? CSS matrix3d

発表資料

弊社の@edo_m18によるCSS matrix3dと行列の話。
ちなみに立って発表しようとしたら、クーラーが直撃して寒かったらしいです。

少しとっつきにくい、transform関数のmatrix3dと行列ですが、
行列を使うと、複数の回転をまとめられて便利だそうです!

JSで行列を扱うライブラリはたくさんありますが、
現在、CSS向けの出力もついた行列ライブラリを公開中とのこと。


kyoago.jpg

リアルタイムWebの栄光を願い!!これから死に行くせめてものこの間に!!SSEの戦術的価値を説きます!!

発表資料

タイトルの長い@kyo_agoさんの発表

SSEとは、HTML5で標準化されているServer-Sent Eventsという常時接続系のAPIのこと。
Cometのように、サーバからブラウザに通信をプッシュすることができます!

Cometと違う点は、ちゃんと通信プロトコルが決められているので、Long Pollingのような方法を取らずに通信できること。
WebSocketとCometの中間に位置する感じらしいのですが、知名度がいまいちです......。


mach.jpg

Web Audio API とモールス信号

発表資料

@mach3ssさんによるJSとモールス信号の発表。

Web Audio APIを使って、モールス信号をブラウザ上で実現!
Web Audio APIは、注目されているHTML5の新機能の1つですね。

今回は、開発中にAPIの仕様変更があり、ひっかかったらしいです。
Web Audio APIに限らず、新しい機能は、仕様変更も頻繁に行われるので注意したいですね。


nenjiru.jpg

Web Speech API でおっさんの声を美少女化してみた

発表資料

次は、弊社@nenjiruの発表。

前回の5飯では、パンツの発表をした@nenjiruですが、
今回は、Webブラウザと初音ミクのシンセサイザーを連携したコンテンツを発表しました。

マイクに向かってしゃべると、自分の声がミクの声に変換されて鳴ります!
音声の認識にWeb Speech API、シンセサイザーとの連携にWeb MIDI APIを使っているらしいです。
どちらもサポートされているブラウザはまだまだ少ないですが、広まればブラウザでできる事が一気に広がりそうです。


飛び入りLTの紹介

予定されていたLTはこれで全てなのですが、
肝心のご飯がまだ準備できてなかったので、飛び入りLTを募集しました!


ginpei.jpg

pointer eventsでお絵描きアプリを作ろうとした顛末

発表資料

飛び入り1人目の@ginpei_jpさん
あまり知られていないJSのpointer events(CSSの方ではないです)に関する発表です。

pointer eventsはマウスイベントやタッチイベントを統合するイベントで、
どんなデバイスで呼んでも、1度しか呼ばれなかったり、
イベントを起こしたデバイス(マウス、タッチ、ペン)を区別することが出来るなど、様々なメリットがあります。

しかしながら、ブラウザの実装に難があり、
お絵かきアプリを作るには至らなかったらしいです。悲しみ。


kubosho.jpg

Steins;Gitについて

発表資料

@kubosho_さんによるC86で頒布する書籍、Steins;Gitに関する発表。

Steins;Gateの内容に沿って、Gitを学ぶことが出来る本らしいです。
Git初心者かつシュタゲ中上級者向けの内容になっているとのこと。

内容や挿絵のチラ見せもありました!


ご飯&懇談会

LTが終わった後は、おまちかねのご飯タイム!
BUKATSUDOのキッチンで料理されたできたてのご飯が振る舞われました。

今回は、野菜が中心のヘルシーなご飯です。
ちなみにビールは飲み放題でした!

gohan.jpg

L1050567.JPG


残りの時間は、ご飯を食べながら参加者同士での懇談会。
みなさま、自由にフロントの話で盛り上がっているご様子でした。

L1050571.JPG


わざわざ遠くから足を運んでくださった方から、
前日・当日にイベントを知って、急遽参加してくださった方まで、
本当にありがとうございました!

HTML5飯、次回は10月頃に開催予定です。
Webフロントとご飯に興味のある方は、ぜひ参加してみてください!

HTML5飯