HTML5 Conferenceメモ

HTML5 Conferenceに参加して、気になったことのメモ。

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

auto-prefixerやhtml5shiv.jsなど、不要になったら外せばいい。

メンテナンス的に工数が少なくて済む。

参考に見ておきたいドキュメント

• HTML Best Practices
• HTML5のスタイルを作るに当たってテンプレートとなるもの

Web Componentsのアクセシビリティ

Webアクセビリティ

• Point
  • セマンティック
  • 代替コンテンツ
  • インタラクション
• デバイス
  • PC
  • スマホ
  • touch screen…
• 一時的な制約の対応
  • 日が当ったところでの見え方
  • 電波が不安定 etc

Web Components

• コンポーネント化
  • カプセル化
  • 機能や意味の切り出し
• アクセシビリティ
  • コンポーネントの質が高い：ページのアクセシビリティも上がる
  • コンポーネントの質が低い：ページのアクセシビリティも下がる
• セマンティクス
  • Custom Elements
    • W3C既存要素の拡張
  • Shadow DOM
    • 独自要素
    • 適切な要素(html)を使う
    • 適切な要素が使えない場合、WAI-ARIAなどでセマンティクスを補う

ユーザに伝えることが重要

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

取り組み

• 納品前のパフォーマンステスト
• 定期的なパフォーマンステスト　←大事

アプローチ

• ビジネス（社内共有）
• 技術的

オライリー本

「ハイパフォーマンスWebサイト」「続・ハイパフォーマンスWebサイト」は情報が古い

統計学

• 中西塾
• データを見る上で有効

表示時間

• USでは0.5秒以内がマジックナンバー
• それ以外は不良品

どうするか？

• イメージファイルの最適化
• concat + uglify (js,css)
• ネットワーク数最適化
• アニメーション
• モバイル向けweb
• レイアウトデザイン
  • USのサイトは画像数激減
  • 集中と選択
• マルチバイトとwebフォント

制限の指針

• PCサイト：1M
• スマホサイト：100K

Open Web Platform推進に、日本の Web Developerはどう関わっていくか

そもそもExtensible Webを知らなかったので、下記とか見てなるほどと思った。

開発者によるWeb標準化を可能とする「Extensible Web」とは？

Polymer で作る次世代ウェブサイト

Web Components

• HTML imports
• Custom Elements
• Shadow DOM
• template

Polymer

• Web Componentsのラッパーライブラリ
• Polyfill:未実装ブラウザで利用可能になる
• Polymer要素群

Point

• スコープ（自分の担当範囲にフォーカスできる）
• データバインディング
• コンポーネントの再利用性

予定

• 0.8 : プレビュー中
• 0.9 : Q1
• 1.0 : Q2 2015