ぽにょろん

思いついたこととメモ

HTML5 CONFERENCE 2016 に参加してきた

勉強会 メモ

HTML5 CONFERENCE 2016 に参加してきました。
参加時と後から録画をちらっと見たメモを記載しておきます。

公式HP
events.html5j.org

YouTube - ライブ配信録画 www.youtube.com

目次

基調講演

中村さん

  • Webという名の Distributed Operating System
    • インターネットで世界中のコンピュータが繋がってる
    • Webページは世界中のドキュメント
    • みんなで分散システムを作ってるみたいなもん
  • Block Chain に関するワークショップ
    分散システムにおけるTrustをどうやって作るか
    参加者の合意でTrust作れるんじゃないの？という可能性

及川さん

  • 実はIE7担当してました
  • HTML5というキーワードはもういいんじゃないの？ → Webそのもの
  • モバイルWebはUI/UXが悪いことが多くなってきた
    キュレーションアプリとかが流行ってきた理由の一つでもある
  • ProgressiveWebApp
    よりアプリ化されたWeb
  • モバイルWebの課題対応について
    Accelerated Mobile Pages
  • Webは何度も死んでるｗ
    が、生き返る
    medium.com

ブラウザ用のCPUをつくるよ！WebAssemblyで

  • WebAssemlby は WASM VM上で動くよ
  • WebAssembly の Working Grop Mozzila, Microsoft, Google, Apple の各社から人が来てる
  • asm.js と比較すると WebAssembly の方が Binary Size が小さい
  • WASM はコンパイルの生成物
    Nativeではなく、parsingが終わってるだけ。
    ASTのバイト表現。
  • まだまだこれからの技術

資料
speakerdeck.com

Webのグラフィックス前編: WebGL事例、パフォーマンス

Webのグラフィックス2016

  • WebGLを実務で使ってる人 → 昨年より増えている感じ。(参加者の)
  • 3D、難しい、大規模コンテンツ というイメージが強い 2Dでも使えるし、Three.js等を使うことで、割と簡単にできる
  • 表現を広げる選択肢になるうる
  • 小さいコンテンツから始めると良い
    ものによってはCSS等で頑張るよりも、簡単なケースもある

資料

www.slideshare.net

WebGL最適化の勘所

  • GPU処理のおさらい
  • ボトルネックになりやすい場所
    JS & WebGLドライバ パフォーマンスチェックして最適化しよう
  • まずはCPUボトルネックを疑おう Windows版のChrome等では、WebGL実装がDirectXに命令に変換してたりするのもある
  • WebGLプロファイラ
    • WebGL専用ではないけど、おすすめ
      tracing-framework by Google
    • プロファイラ使ってるときは、とうぜんその負荷もプラスされるので、相対値で考える
  • WebGL独自のTips
    gl.TRIANGLE_FANは避ける
    頂点アトリビュートは4byte境界に揃える
    etc...
  • ライブラリ使ってるときは？
    WebGL命令が隠蔽される とにかくドキュメント読め！
    stackoverflowとかでノウハウ集めよう → 有名なライブラリ使ったほうが楽

資料
WebGL最適化の勘所

Webのグラフィックス後編: WebGL2、そしてWebVR

WebGL 2.0

  • 1.0と比較して、劇的進化しているわけではない
    普段から WebGL をぺろぺろしてないと、そこまで恩恵はないかも
  • WebGL 2.0 がきたら
    • より 美しく現実的/高速で効率的 なレンダリングができる
    • リソースやデータ方が柔軟になる
    • テクスチャの画像データサイズが2の累乗でなくてもよくなる
  • 既存のコンテンツはそのままでも大丈夫 実装が別
  • 学習が難しくなるか?
    そもそも3DCG全般ムツカシイ
    日本語情報はほぼない

資料
WebGL 2.0 現実的な影響は？

そしてWebVR

  • WebVRとは
    VR体験のためのデバイスやセンサーから情報取得するAPIのこと
    → 3Dのコンテンツ部分はWebGLで作る
  • まだサポートブラウザがほぼない
    これからの技術

資料

www.slideshare.net

Webパフォーマンス最前線

  • Webがアプリのように振る舞うことが求められている
    Progressive Web Apps
  • パフォーマンスに対する優先度
    • Webサイト
      LoadやAnimationが重要
    • Progressive Web Apps
      ResponseやAnimationが重要
  • GPUを活用しよう
    ex) translate, will-change -> 常時使うと電池とかに悪影響なので、上手く使おう
  • 通信量を気にするところから、UIを早くしようという方向にきてる

最後に

所用で最後までは参加せずに帰ったのですが、とても勉強になりました。
率直に思ったのは以下の通り。

WebページがどんどんNativeっぽくなってる側面は確かにあるなぁというのが実感。
あと、俺、Webの知識が足りないなぁ。というのも。頑張ります。