2015年1月25日 HTML5 Conference

gistfile1.md

#HTML5 Conference

プリンより滑らか

スピーカー ブライアン・バートルズ Mozilla Japan

スムーズなアニメーションの作り方

ブラウザ上のおさらい

1. マークアップ
2. 構文解析
3. DOMツリー
4. スタイル
5. スタイル決定
6. レンダーツリー（フレームツリー）
7. レイアウト（リフロー）

上記はDevTools（Chromeの場合）のタイムラインで見れる。 Firefoxにはリフローログ？があるらしい。

プロパティによるリフローの有無

ブラウザごとに挙動が違う

margin-leftはどのブラウザでもリフローが発生。 transformはどのブラウザっでもリフローが発生しない。

リフローを避けよう

＿人人人人人人人人人＿
＞ ブラウザは怠け者 ＜
￣ＹＹＹＹＹＹＹＹＹ￣

getComputeStyleよりElement.styleを使う DevToolsで「Show paint rectangle」にチェック GPUレンダリング（レイヤー調査）は、DevToolsで「Show composited layer borders」にチェック

描画を早くするには？

1. 領域を狭める
2. 描画を軽く（ブラーアニメさせるよりブラー画像をスケールアニメさせる等）
3. 描画を飛ばす（？）

要素がアニメしたらブラウザがレイヤー化してくれるが、たまにレイヤー化されない場合がある。 レイヤー化の作業をコストカットするために「will-changeプロパティ」を使用すると手動でレイヤー化できる！

ずっとアニメさせてるとアニメが重くなる（主要スレッドとは別に動かしたい）。 JSによるアニメよりCSSアニメを使おう（コンポジットアニメーション）！ Web Animation APIだとJS経由でもコンポジットアニメーションを使用できる！（Chromeのみ。。。）

質疑応答

velocity.jsはjQueryのアニメーションより速いらしい。

Web Componentsのアクセシビリティ

スピーカー 黒澤 剛志 株式会社ミツエーリンクス

Webアクセシビリティの3つのポイント

1. セマンティクス（セ↑マンティクス）
2. 様々なデバイス・環境でのインタラクション
3. 代替コンテンツ

Web Componentsとは

コンポーネント単位でカプセル化（コンポーネントの組み合わせでページを構成）

Polymer、Gaia Components(Firefox OS)等。

Componentsのアクセシビリティが高ければ

1. Components利用時に頑張る必要がない
2. 使うだけでアクセシビリティが担保される

プログレスバーをサンプルに検証

音で進捗状況を伝える。

1. HTML5ネイティブ
2. Polymer
3. Gaia Components

Web Componentsでセマンティクスを指定

1. 既存要素の拡張（基本的に開発者が何かする必要はない）
2. 独自要素の定義（Shadow DOM） 適切なHTML要素を使えるのであればその要素を利用、使えなければWAI-ARIA（ロール：role属性、aria-*属性）を利用する。

※ステートに応じて値も更新すること

<div role="progressbar"
     aria-volumemax="100"
     aria-volumemin="0"
     aria-volumenow="50" >

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

スピーカーいっぱい

※立ち見が出るほど混んでいた ※他にいいセッションがなかったかみんなパフォーマンスの問題にぶち当たっている？

Webパフォーマンスの現状

日本はモバイルのEコマースサイトのパフォーマンス（ダウンロード時間）がアメリカに比べて悪い（遅い）。 アメリカではパフォーマンスのイベント、Velocityなるものがある。

パフォーマンスに関してのマニュアルが標準化しておらず各社で秘伝のタレ化している？

ベストプラクティス？

オライリーの某パフォーマンス本（無印）はもはや意味が無い(´・ω・｀) 状況は常に変化している。 受託だとJS、CSSの圧縮は無理なところもあるよね。

パフォーマンスは継続して監視する必要がある。 パフォーマンスとは結局のところネットワークに依存してしまうよね。

パフォーマンス管理 === 品質管理

パフォーマンス計測するならアクセスが最も多い午後21時以降で計測する。

昨今の高速化手法

1. イメージファイルの最適化
2. JS、CSSの最適化（圧縮等）
3. ネットワークの最適化
4. マルチバイトとWebフォント
5. レイアウトのデザイン
6. モバイル向けWeb
7. アニメーション

ちなみに、

• 情報を鵜呑みにせず、必ず計測する
• モバイルだと外部化せずにインラインで埋め込まないと劇的な変化は望めなかったらしい
• アメリカではそもそも画像を使用するサイトが減っているらしい
• ってかアニメーションいる？
• 機能を削ろう（レゴは10,000パーツ→7,000パーツに減らして復活した）
• モバイルはLTEより早くなる可能性は少ないので指定の容量内（デスクトップは1MB、モバイルは100KB）で機能を実装する。

＿人人人人人人人人人人人人人人人人人人人人人人人＿
＞ 制限することでクリエイティビティが発揮される ＜
￣ＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹ￣

Web Audio API、 Web MIDI API を使ったサウンドプログラミング

スピーカー 河合 良哉 ヤマハ株式会社

Web Audio APIとは

• JSで音そのものを作成、加工出来る
• APIについてはPlatform依存がない（ブラウザベンダーで違いは出るかも）
• モジュール（Node）思考（オシレーター、フィルター、ディレイ、コンプレッサー、アナライザー、ゲイン等）

Web MIDI APIとは

• WebブラウザとMIDI機器を直接接続するためのAPI
• Chromeのみで動作（Platform依存はないのでMac、Windows、Android、Chromebookでも動作する）

WebというPlatformの特徴

• ブラウザ、テキストエディタのみで使用できるハードルの低さ
• 開発言語はHTML、CSS、JS
• コンパイルの必要なし
• 知識、ノウハウを得やすい
• 音楽以外の分野との親和性が高まる

実装に躓いたら

Web Music Developers JPに相談！

Beyond CSS Architecture

スピーカー 谷 拓樹 株式会社Cyber Agent

FB Repo https://t.co/0Et1mBXvBZ

CSSはなぜ難しいのか

• プロパティの挙動がブラウザごとに違ってキモい（経験でなんとかなる）
• セレクタ名が実はむずい（似たようなモジュールが氾濫する）

解決策

• OOCSS
• BEM
• AMCSS（属性セレクタを使用したアプローチ）

さらにSass等のCSSプリプロセッサーでセマンティクスを担保できる ※@extendを使用すれば良いというものでは無いのでCAではあまり使用していないらしい

CSS設計の方法論

*** ページをデザインするのではなく、コンポーネント（構成のシステム）をデザインする ***

• ITCSS（逆三角形CSS？）

CSS設計を支えるツール

styleguide（sytleguide.ioで様々なstyleguideを見れる）

• コーディングガイド
• スタイルガイド駆動開発
• デザイナとのコミュニケーション
• テストツール

styleguide生成ツール

• hologram ← NEW!!
• kss
• styledocco

Specificity Graph

CSSの中の詳細度を計測するツール？ 右肩上がりになるべき。 ヘルスチェックのような位置づけ。 NodeモジュールにあるのでGruntやGulpに取り入れてみてもいいかも。

Stylestats

プロパティ数を調査するツール？

より高度なCSS設計

クリティカルレンダリングパス

CSSもレンダリングをブロックする。 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=ja

• クリティカルリソース数最小化
• クリティカルバイト数最小化
• クリティカルパス長の最小化（Google Pagespeedで調査可能）

Above the foldのみインラインに埋め込むとパフォーマンスが上がった実例あり（表示速度が早くなった）

CSS設計の未来

• Web Components

まとめ

*** すべてのCSSは、提案として書かれるべきだ ***

HTML5 Conferenceまとめ

http://unsolublesugar.com/20150125/104819/