本文へスキップします。

【参】モーダルJS:読み込み
書籍DB:詳細

HTML5 Hacks インタラクティブWebアプリケーションのためのテクニック

HTML5 Hacks インタラクティブWebアプリケーションのためのテクニック

HTML5のテクニックを網羅、HTML5の威力と可能性を示す90のTipsを紹介!

HTML5は昨年末に仕様策定が完了し、これから利用が一気に進むと思われる技術で、多くの企業が取り組みを表明、また実際に取り組みはじめており、注目度の高いトピックです。本書ではHTML5のテクニックを網羅する90のTipsを紹介。HTML5の持つ威力を体感でき、またHTML5で何ができるのかという可能性を示します。サンプルコードが豊富で、すべてダウンロード可能。実践的、実際的な一冊です。
目次
訳者まえがき
まえがき

1章 セマンテック的にHackする
1. 正しいを使って文書を簡素化する
2. 共通の構造を使う
3. 古いブラウザでも新しいHTML5タグを正しく表示する
4. タグを蘇らせる
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. ビューポートタグを使ってモバイルレイアウトを制御する

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

4章 CanvasとSVGを使ってグラフィックスをHackする
37. HTML5 タグに図形を描く
38. Canvas要素にスタイルを適用する
39. イメージファイルを使ってCanvas要素にスタイルを付ける
40. タグを使って高解像度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ボイラープレートをデフォルトスタータテンプレートとして組み込む

索引