HTML5 Hacks

目次
訳者まえがき
まえがき

1章　セマンテック的にHackする
    1.　正しい<doctype>を使って文書を簡素化する
    2.　共通の構造を使う
    3.　古いブラウザでも新しいHTML5タグを正しく表示する
    4.　<input>タグを蘇らせる
    5.　JavaScriptを使わずに簡単にフォームの妥当性検証を行う
    6.　新しいコントロールを使ってフォームのユーザビリティを向上する
    7.　新しいDOMイベントでアプリケーションに起こっていることを知る
    8.　カスタムデータ属性を使ってマークアップにリッチなコンテキストを追加する
    9.　カスタムデータ属性でユーザイベントを追跡する
    10.　マイクロデータを使ってロボットや人からアクセスしやすくする

2章　スタイルを使ってHackする
    11.　ブラウザプレフィックスを使って実験的なCSS機能を使う
    12.　Webフォントを使ったカスタムフォントを使ってデザインする
    13.　シンプルな@font-face実装用にGoogle Webフォントを使う
    14.　CSS3テキストエフェクトを使ってテキストのはみ出しを防ぐ
    15.　不透明度を変えずに要素を透明にする
    16.　メディアクエリを使ってレスポンシブデザインを構築する
    17.　アプリケーションをデバイスオリエンテーションの変更に対応させる
    18.　疑似クラスを使ってDOMを完全に制御する
    19.　スプライトのHack＆イメージデータURIを使ってイメージをインラインに置く
    20.　簡単にグラデーションを付ける
    21.　ボーダーを操作して見た目を変化させる
    22.　複数の背景イメージを同じ要素に設定する
    23.　CSS3トランスフォームを使って従来の空間からページ要素を解放する
    24.　CSS3トランジッションを使ってトランスフォームをアニメーションに変える
    25.　CSSトランスフォームとトランジッションを使ってiOSスタイルのカードフリップを作る
    26.　Respond.jsを使ってIE内のCSS3メディアクエリをポリフィルする
    27.　ビューポート<meta>タグを使ってモバイルレイアウトを制御する

3章　マルチメディアHack
    28.　HTML5ビデオを使ってアプリケーションにビデオを直接埋め込む
    29.　ビデオファイル用の正しいコーデックを選択する
    30.　動画APIを使って独自のビデオコントロールを作成する
    31.　<canvas>タグを使ってHTML5ビデオの背景を置き換える
    32.　HTML5ビデオ要素に字幕を追加する
    33.　美しいHTML5ビデオキューにする
    34.　字幕にCuepoint.jsポリフィルを使う
    35.　Buzzを使って音声付きアプリケーションを簡単に作る
    36.　MediaElements.jsを使ってHTML5メディアをシンプルにする

4章　CanvasとSVGを使ってグラフィックスをHackする
    37.　HTML5 <canvas>タグに図形を描く
    38.　Canvas要素にスタイルを適用する
    39.　イメージファイルを使ってCanvas要素にスタイルを付ける
    40.　<canvas>タグを使って高解像度Retinaディスプレイ用メディアを作る
    41.　Canvasのドロー機能を使ってアニメーションを動かす
    42.　SVGを使って「ネイティブな」イラストを作成する
    43.　CSSを使ってSVG要素にスタイルを付ける
    44.　SVGを使ってイラストを動かす
    45.　HTMLにSVGを直接埋め込む

5章　ユーザインタラクション
    46.　アプリケーション内のコンテンツをドラッグ可能にする
    47.　ドラッグ＆ドロップ転送オブジェクトを使ってDOMを更新する
    48.　Webアプリケーションにファイルをドラッグインまたはドラッグアウトする
    49.　editableを使ってユーザがページをカスタマイズできるようにする
    50.　WebページをWYSIWYGエディタにする
    51.　HTML5セッションヒストリを使ってブラウザのヒストリボタンを制御する

6章　クライアントサイドデータストレージHack
    52.　バイナリデータをインラインURLで埋め込む
    53.　データURIをBLOBに変換し、XHR2を使ってフォームデータに追加する
    54.　WebStorage APIを使ってユーザデータを永続化する
    55.　YepNope.jsとStorage.jsを使ってLocalStorageをポリフィルする
    56.　FileSystem APIを使ってメディアリソースをローカルにキャッチする
    57.　IndexedDBとFullCalendar.jsを使って工程表カレンダーを作る

7章　ジオロケーション（位置情報通知機能）Hack
    58.　GeolocationAPIを使って緯度と経度をモバイルアプリケーションに表示する
    59.　GoogleのジオコーディングAPIを使ってユーザ位置を逆ジオコードする
    60.　Google Map内でユーザの現在地を更新する
    61.　Geoloqiサービスを使ってgeofenceを構築する
    62.　Geoloqリアルタイムストリーミングサービスを使ってリモートユーザの行動をブロードキャストする
    63.　Webshimsを使ってGeolocationAPIをポリフィルする

8章　WebWorker API
    64.　BlobBuilderインタフェースを使ってインラインワーカを作成する
    65.　専用Webワーカで重い配列計算を行う
    66.　タイマを使ってアプリケーション状態をワーカに送る
    67.　専用ワーカのピクセル操作を使ってイメージデータを処理する
    68.　インポートスクリプトを使ってFacebookグラフAPIのJSONPリクエストを作る
    69.　複数ブラウザウィンドウから共有ワーカに同時接続する

9章　HTML5の接続性をHackする
    70.　KaazingのリモートWebソケットサーバを使ってブラウザからのシンプルなメッセージをエコーする
    71.　Node.jsとwsモジュールで超高速のWebソケットサーバを構築する
    72.　Webソケット、Pusher API、PHPを使って寄付メータを作る
    73.　jWebSocket用プラグインを作る
    74.　Server-Sentイベントを使ってブラウザに通知を送る
    75.　WebフォントをホストするCORS用のAmazon S3を設定する
    76.　Robodeckを使ってHTML5スライドデッキを制御する
    77.　Socket.IOコネクションを調べ、ネイティブかエミュレートかを判別する
    78.　node-spdyを使ってシンプルなSPDYサーバを構築する

10章　Node.jsを使ってプロフェッショナルなHTML5アプリケーションをHackする
    79.　ブラウザに「Hello Html5」を表示
    80.　リクエストオブジェクト内のユーザエージェント文字列を検出する
    81.　Node.jsのレスポンスオブジェクトを使ってデバイス固有データを持ったクライアントに応答する
    82.　Nodeパッケージマネージャを使ってWebアプリケーションフレームワークをサードパーティモジュールとして追加する
    83.　Expressアプリケーションジェネレータを使ってアプリをブートする
    84.　ルーティングを処理するカスタムモジュールを構築する
    85.　Expressを設定してビューエンジンを使う
    86.　Jade Layoutを使ってアプリケーションビューにDRYを適用する
    87.　Jadeパーシャルを使ってビューに共通ナビゲーションバーを作成する
    88.　Jade mixinを使ってビューにデータを登録する
    89.　Stylusを使って印象的で動的で堅牢なCSSを設定する
    90.　HTML5ボイラープレートをデフォルトスタータテンプレートとして組み込む

索引