HTML5minutes!

モバイル時代の Web パフォーマンス Tips

• html5 に足りないところ
  • Performance: especially mobile
  • APIs: power management / wifi など...
  • Tools
• なんで html5 で書いたか
  • cross platform

Web パフォーマンス Tips

• リソースの最適化
  • 画像圧縮
  • JS, CSS minify
• リクエスト数をおさえる
  • モバイル回線に置いては 200msec/req 増えるくらいコストが高い
  • JS/CSS 結合，画像の埋め込みなど
  • DNS プリフェッチ: 事前に DNS Lookup を済ませてキャッシュしておく
• リダイレクトを避ける
  • 同一 URI で複数 UA に対応
• レンダリングの優先度
  • js はレンダリングをブロックするので最後に読み込む
  • ファーストビューリソースを最優先にロードする
  • 画像の遅延読み込み(lazy load)
  • progressive jpeg など...
• Runtime
  • 角丸系，陰，opacity などの変形や等価処理をおさえる
  • アニメーションを避ける
  • requestAnimationFrame を使う（非対応ブラウザには polyfil がある）
• DOM アクセスの最適化
  • DOM プロパティを変数のように扱わない（特に offset*, client*, scroll*）
• メモリの最適化
  • 最初に必要なメモリを確保するなど
  • 再利用可能なオブジェクトをオブジェクトプールへ

CSS Living Style Guide

• 静的につくる: 納品時には死んでいる
• ジェネレータなどで自動化(StyleDog/FrontNote など...)

FirefoxOS スマホ体験記

HTML5 でつくるデジタルインスタレーション

• Chrome/Web speech API
• Google の音声認識エンジン
• ユーザによる許可は https にすると１回で済む
• 3D 文字は WebGL でためしたがやめて，Three.js の TextGeometry
• Three.js: デフォルト日本語使えないが，ちょっとめんどくさいことするとできるようになる

jade で作る client template

• クライアントテンプレート：データとテンプレートを用いて文字列を生成する
  • Mustache/Hogan.js など
  • jade を使うという選択肢がある
• jade とは何か
  • html template engine
  • compile option を指定すると js にもコンパイルできる
  • browserify を使用する

5 分で分かる WebRTC コーデックウォーズ

• WebRTC とは
  • ブラウザでデバイスリソースを扱える
  • プラグインレス
• コーデックウォーズとは
  • IETF の標準化の現場で行われているビジネスチックな戦争
  • H.264 と VP8
• 標準コーデック決まらない問題
  • いろいろあったけどコーデックがまだ決まらない
  • お金・利権の問題
  • 今後も決まらない感じ

Angular.JS の高速化

• Augular.js：パフォーマンス悪い
• なぜか
  • 2 way data binding に起因
  • Pure JS Object を ViewModel として使う
  • Dirty Checking
  • Angular 1.3 から one-time binding が導入されたー
  • Polymer でゆるふわ MaterialDesign 体験
  • Polymer: WebComponents の UI Framework
  • MaterialDesign: Google I/O で発表された UI/UX ガイドライン
  • platform.js
  • DEMO

bower install --save Polymer/polymer

かすたむ！　※コスプレ有り

ぜ　か　ま　し

• WebComponents がアツい
• Template/Custom Elements/ShadowDOM/Html Import
• 実装は Chrome のみ
• Custum Elements
• 独自のタグ作れる
• <ni-so></ni-so> のタグ作れる！
• <pantsu></pantsu> のタグ作れる！
• <pantsu ichigo> とかできる！
• 実用的なところでページネーションなんかに使える！
• パーツの設計をしっかりしていればとても便利

HTML5 でできるフォーム最適化

<input type="text" required>
<input type="email">
<input type="url">
<input type="email">
<input type="tel">
<input type="date">
<input type="color">

pattern:正規表現で指定できる

<input type="text" pattern="[regex]">

Node.js でシングルページウェブアプリケーション

• js で DOM を構築，UI/UX に優れている
• フロントエンド MV*フレームワーク

Sails.js

• サーバーサイド JSMVC フレームワーク
• CRUD 標準
• passport.js: twitter や Facebook などの認可

npm install sails

公開しよう自作 Web Components

• HTML タグを記述するだけなので潜在ユーザ多い
• ブラウザに標準実装される予定で普及可能性が高い
• 今のうちに好きなコンポーネント名を取って HTML5 技術者として名を売るチャンス
• Web Components Gallary Site がある
• 手順
  • Polymer を勉強する
  • WebComponents を作る
  • 書きそびれた
  • ReadMe をかく

Web サービス開発のモジュール設計