HTML5 Conference 2015 行ってきました

先日参加してきた HTML5 Conference というイベントの雑記&メモです。
そりゃもう人見知りなのにこんな大型イベントに赴くなんて、
HTML5周辺の知らないことばかりで楽しかったです。

【公式】HTML5 Conference
【参加登録サイト】Doorkeeper HTML5 Conference
【講義資料まとめ】HTML5 Conference 2015 講演資料まとめ #html5j

自分の時間割は下記でした。
10:00 – 10:50 【講堂】 オープニングセッション
11:20 – 12:00 【ルームD】 HTML5マークアップについて矢倉先生に聞いてみよう
13:20 – 14:00 【ルームD】 Web Componentsのアクセシビリティ
14:20 – 15:00 【ルームE】 2015年これからの日本のWebサイトパフォーマンスについて
15:20 – 17:00 【ルームF】 [ハンズオン]やってみたら実は簡単！ WebGLで開ける新しい表現
17:40 – 18:50 【講堂】 スペシャルセッション

※ 以下個人がヒアリングし感じた内容を含みますので、詳細は公式の動画等を確認ください。

オープニングセッション

なかなか理解できる内容ではなかったのですが、登壇者3名の話にはとても引き込まれました。

特に印象的だったのは慶應義塾大学教授 村井 純さんの、アメリカの『Netflix』という動画配信会社が行った
テレビで情報を収集し、その内容を反映したコンテンツを配信しエミー賞を取ったというもの。

また、アメリカで足を怪我された際に、事前にレントゲンデータを日本に送っておくことにより
帰国後の治療がスムーズだったというのも革新的だと思いました。

HTML5マークアップについて矢倉先生に聞いてみよう

・今年に入り HTML5 Japanese Community Group てのが設立された
・アクセシビリティについても考慮するが、正しいマークアップの結果確保されてるもの
・様々なマークアップを行う際は、経験を元にパターンを取り入れる事により効率化
・チーム製作においてはパターンも共有し、より良いモノへと更新していく
・作業で悩む時間を削減するための手段
・HTML Best practice
・WEBCRE8 酒井さんの、GitHubでマークアップの基本を共有アップデート中[html5style] ・htmlページのもくじを生成する方法
　- ページ内の見出しを自動で取得しつつ構文するjavascript
　- 統一されたマークアップではないので汎用性のある柔軟なプログラムじゃないと使えない
・チーム内でSaSSが浸透していれば、サイトの規模により導入の利点が大きい
・ビルドツールGrant等も並行して推進していくと良い
・構文を最後に整えたり、自動変換したりしてパターンの統一化を

Web Componentsのアクセシビリティ

・一時的な制約、屋外での太陽光なども考慮
・3つのポイント
　- セマンティクス（データの意味）
　- 様々なデバイス・環境でのインタラクション
　- 代替えコンテンツ

・視覚的に同じでも、マシンがセマンティクスを認識できるほうがいい
・Custom Elements で拡張されたマークアップ
・独自要素の定義　- 通常のDOMツリーには表示されない shadow DOM を使う
・WAI-ARIAを導入し、拡張マークアップすることでアクセシビリティの強化

2015年これからの日本のWebサイトパフォーマンスについて

・ページDL（DLと表示は別）時間、日本はアメリカの3倍ほどの時間がかかっている
・webパフォーマンスの品質管理として、納品前にパフォーマンス試験をする仕組みを導入　キャパシティプランニング
・納品後にパフォーマンスの指摘を受けた後にパフォーマンス検証を進めると、工数が多くなってしまう
・バックエンドが強くなっても、末端のスマホ等の進化が遅めなので、劇的な進化は望めない
・W3Cでも、ほぼコネクティングがない環境を想定した構築も想定している
・夜9時から深夜1時くらいに通信が重くなる傾向があるので、ターゲットに合わせて昼夜も考慮したパフォーマンス計測も必要
・パフォーマンス・データを見る上で統計学が有用

【WEBパフォーマンスの改善はどう変わる？】
・イメージファイルの最適化（jpeg pngの圧縮）
・JavascriptとCSSの最適化（minify）
・ネットワークの最適化（css spriteなど）
・マルチバイトとWEBフォント（日本語は重く難しい）
・レイアウトのデザイン（2015年は企業TOPページから画像が消える現象!?）
・モバイル向けWEB
・アニメーション（ブラウザ、プラットフォーム下で要注意）

・あえて機能を精査・削減（取捨選択）することでの向上を図る
・制限があってこそ、クリエイティブが発揮できるもの
・PCは1MB以内、SPは100kb以内の制限内でやっていくという指針

[ハンズオン]やってみたら実は簡単！ WebGLで開ける新しい表現

今回一番興味があったWebGLに関する発表でした。
このハンズオンで使用された素材データは下記にアップされています。
【ハンズオン】やってみたら実は簡単！ WebGLで開ける新しい表現 ファイル置き場

【webGL × THREE.js】
面白法人カヤック 比留間 和也さん
HTML5 Conference 2015 WebGLハンズオン資料

・3Dの世界でマウスが指し示す場所は、点ではなく線の当たり判定（魔貫光殺砲？的な）
・今年も webGl TOKYO MEETUP というイベント開催予定

【Blender × THREE.js】
株式会社ピクセルグリッド 小山田 晃浩さん
WebGL + 3D models by using Three.js Blender Exporter

・世の3Dモデルを利用してみる（NASAとかyobi3D[3dモデルデータ検索サイト]）
・blender exporter r69 （THREE.jsへの書き出しアドオン？　最新版はリメイクしたので未完成、r71くらいを待ったほうがいいと）

【GLSLでシェーダグラフィック】
WebGLエンジニア 杉本 雅広さん

・hsv – rgbではなく、色相・彩度・明度で表現する
・2Dのシェーダーを知り、アイディア次第では面白いものができるのでは
・”js4kintro”で検索したらシェーダーの面白例みれる！

スペシャルセッション

・スマホタッチの300ms問題を解決するには、現状下記全部実行！
　- html{touch-action:none;}
　- viewport 指定
　- fastclick.js

・javascriptのsetintervalは、別タブで同時に起動するとおかしい

ラストにあったHTML5クイズは結局1問も正解ならず！
景品にあったフォクすけのぬいぐるみ欲しかった・・・。

まとめ

以上、とても充実した1日を送れました。
html5jスタッフの方々、ボランティアスタッフの方々、登壇者の方々、東京電機大学の方々、ありがとうございました！

2015年はアクティブにいきます。