現場でHTML5をフル活用する際に使えるさまざまなテクニックを解説している逆引き本です。

サンプルは、スマートフォンブラウザで動作テストされているので安心して活用する事が出来ます。

HTML5はまだ使用が確定していない過渡期にありますが、
現状のHTML5のAPIの全容を把握する事で多くのスマートフォンやPCサイトに活用できるでしょう。

『Google API Expertが解説するHTML5逆引きリファレンス』の目次

目次をざっとご紹介。

序章　HTML5 APIの概要

0-01　HTML5 APIの全容を把握する
0-02　本書の読み方
第1章　Geolocation

1-01　Geolocation APIが使用できるかどうか調べる
1-02　一回だけ現在位置を取得する
1-03　定期的に現在位置を取得する
1-04　位置情報の取得を停止する
1-05　位置情報の取得方法をより細かく設定する
第2章　Audio

2-01　スクリプトでHTML5 Audioが使えるか調べる
2-02　オーディオを再生する
2-03　オーディオを停止する／再生開始時間を指定する
2-04　オーディオを繰り返し再生する
2-05　コントロールバーを表示／非表示にする
2-06　自動的に再生する
2-07　指定したURL のオーディオを演奏する
2-08　特定の形式のオーディオが再生できるか調べる
2-09　再生時間を設定／取得する
2-10　再生速度を指定する
2-11　オーディオの情報（種類や長さ）を取得する
2-12　音量を調整する
第3章　Video

3-01　スクリプトでHTML5 Videoが使えるか調べる
3-02　映像を再生／停止、制御する
3-03　映像を繰り返し再生する
3-04　コントロールバーを表示／非表示する
3-05　自動的に再生する
3-06　全画面で再生する
3-07　特定の形式のビデオが再生できるか調べる
3-08　再生前に表示する画像（ポスターフレーム）を指定する
3-09　再生時間を設定／取得する
3-10　再生速度を指定する
3-11　ビデオの情報（種類や長さ）を取得する
3-12　音量を調整する
第4章　Web Workers

4-01　Web Workersが使えるか調べる
4-02　ワーカーを作成／破棄する
4-03　ワーカー側で処理を終了させる
4-04　ワーカーのエラーを捕捉する
第5章　Canvas

5-01　Canvasを表示する
5-02　スクリプトでCanvas が使えるか調べる
5-03　Canvasをブラウザ画面全体に表示する
5-04　コンテキストを取得する
5-05　PNG/JPEG形式に変換する
5-06　パスを作成する
5-07　指定座標に移動させる
5-08　直線を描画する
5-09　曲線を描画する（3次ベジエ曲線、2次ベジエ曲線）
5-10　円、円弧を描画する
5-11　四角形を描画する
5-12　角丸四角形を描画する
5-13　塗りつぶしの色を指定する
5-14　線の色を指定する
5-15　クリッピング範囲を設定する
5-16　指定座標がパス内かどうか調べる
5-17　グラデーションを描く
5-18　パターンを描画する
5-19　Canvasの状態を保存、復元する
5-20　拡大縮小（スケーリング）する
5-21　回転する
5-22　基準位置を移動させる
5-23　変形させる
5-24　新規にピクセルイメージを作成する
5-25　Canvas内のイメージを取得する
5-26　加工したイメージをCanvasに描画する
5-27　画像を描画する
5-28　文字を描画する
5-29　行揃えを指定して文字を描画する
5-30　筆記方向を指定する
5-31　文字の描画幅を取得する
5-32　不透明度を指定する
5-33　描画モードを指定する
5-34　線のスタイルを指定する
5-35　影の位置やぼかし具合を指定する
第6章　Drag&Drop

6-01　ドラッグできるようにする
6-02　ドロップできるようにする
6-03　ドラッグ中の画像を設定する
第7章　File

7-01　スクリプトでFile APIが使えるか調べる
7-02　選択されたファイル数と種類などを調べる
7-03　テキストファイルの内容を読み出す
7-04　バイナリファイルの内容を読み出す
7-05　ファイルの読み込みを中止する
7-06　ファイルの読み込みの進捗状況を表示する
第8章　Webストレージ

8-01　Webストレージが使えるか調べる
8-02　Webストレージに保存する
8-03　ストレージに複数のデータを保存する
8-04　ストレージから読み出す
8-05　1つのキーから複数のデータを読み出す
8-06　特定のキーのデータを削除する
8-07　セッションストレージを利用する
第9章　オフラインWebアプリケーション

9-01　ファイルをキャッシュさせる
9-02　キャッシュ／オフライン状態を調べる
9-03　キャッシュを更新する
第10章　Form

10-01　入力項目を必須にする
10-02　入力パターンを設定する
10-03　URLだけを入力できるようにする
10-04　メールアドレスだけを入力できるようにする
10-05　電話番号だけを入力できるようにする
10-06　数値だけを入力できるようにする
10-07　入力値の範囲や間隔を設定する
10-08　入力内容を日付に限定する
10-09　入力内容を月、週単位に限定する
10-10　入力内容を時間に限定する
10-11　日付と時間を同時に指定できるようにする
10-12　スライダーを表示する
10-13　カラーピッカーを表示する
10-14　検索フィールドを表示する
10-15　今日の日付をテキストフィールドに設定する
10-16　スライダーの値が変化したら処理を行う
10-17　スクリプトで内容をチェックしエラーを表示する
第11章　Text Selection

11-01　選択されているかどうか調べる
11-02　選択された文字を取得する
11-03　選択範囲を指定する
11-04　選択範囲を削除する
11-05　選択範囲の情報を取得する
11-06　キャレット（カーソル）の位置を設定する
第12章　Text Editing

12-01　編集可能にする／編集状態を調べる
12-02　編集コマンドをサポートしているか調べる
12-03　編集コマンドを実行する
第13章　Sensor

13-01　加速度センサーの値を取得する
13-02　ジャイロセンサーの値を取得する
13-03　タッチイベントを捕捉する
13-04　ジェスチャーイベントを捕捉する
13-05　回転イベントを取得する
13-06　同時タッチ数／タッチ座標を取得する
第14章　複数APIの組み合せ

14-01　現在地をGoogleマップ上に表示する
14-02　Canvasに映像の1フレームを表示する
14-03　Canvasのテキスト内に映像を表示する
14-04　Canvas内の画像を加工する
14-05　デスクトップ上にある画像ファイルをドロップしCanvasに描画する
14-06　ワーカーを使って複数のテキストファイル内の文字を同時に検索する
付表：HTML5 関連API Property & Method一覧

献本の御礼

最後に、献本いただいた（株）インプレスジャパンのご担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

お問い合わせ

Web上で見て触れる、HTML5とCSS3のオンラインサンプルがすごく良かったのでご紹介。

HTML5 & CSS3 Tools and Tutorials

パラメータを自由に触りながら、実際に動作している様子をリアルタイムにプレビューする事が可能です。

以下に使っている様子を載せてみます。

↑設定した項目を選択します。
まずはBox Propertiesを試してみます。

↑設定可能な項目が表示されます。
パラメータをグリグリいじれちゃいます。

↑設定した内容はリアルタイムにプレビュー表示されました。
使用するコードと対応するブラウザも教えてくれます。
違うものも試してみましょう。

↑Videoを設定している所です。
動画ファイルはURLを直接入力して設定します。

↑プレビューです。
細かいブラウザのバージョンも教えてくれました。

他にも設定可能な項目はたくさんありました。
興味のある方はサイトを覗いてみてください。

紹介しているページでは、プレゼンテーションとしての使い方を説明していますが
普通のWebサイトでも十分使える内容になっています。

3パターンのページ遷移

サイトでは3種類のエフェクトが紹介されています。

■回転しながら表示
※この動きって名前あるんでしょうか？

■下からせり上がってくるタイプ

■横からスライドするタイプ

こういった動きがあると見ていて楽しくなりますね。
詳しいチュートリアルを見たい方は下のリンクからどうぞ。

黄金比をサイトに取り入れるためのCSSグリッドシステム「Golden Grid System」をご紹介。

黄金比とは、「1:1.618033988..」からなる比率で、最もバランスが取れていると感じられる比率の事を指します。

画面の分割は、
ワイドスクリーン用に16分割、
タブレット用に8分割、
スマートフォン用に4分割しているようです。

メディアクエリを使用し、240〜2560ピクセルの画面サイズに対して、
バランスの取れたページを作れるとの事。

ただ、iPhone用のSafariに一部バグがあるのと、
IE6〜8に対してはIE用のクラスを作らないと行けないようです。

そのまま使えるフレームワークというわけではありませんが、参考にはなると思います。

作者の方はLess Frameworkを作った方のようです。興味のある方は下のリンクからどうぞ。

スマフォでの動画再生の際に、キューポイント（再生開始位置）を指定できるライブラリが良さそうなのでメモ的にエントリー。もちもんPCもOKですよ。

「Cuepoint.js」はHTML5のビデオに、
字幕とキューポイントを追加するためのオープンソースのJavaScriptです。

デモサイトを訪れると動画が埋めこまれているのですが、
画面の下にあるサムネイルをクリックすると、
それぞれに対応した箇所から再生が開始されるようになっています。

長い動画を見せたい時に、見て欲しいポイントを分かりやすくできて良いですよね。

とても単純な処理なのですが、何回かお仕事でこういうものを探していたので
そのうち使いそうです。

興味のある方は下のリンクからどうぞ。

HTML5でAudioを便利に使うライブラリ「Buzz」

HTML5に対応しているブラウザであれば、再生、一時停止、停止、ボリュームコントロールのようなアクションを制御する事ができるようになります。

それ以外にも、オーディオのループや再生時間の取得、イベントの取得などなど、
色々なAPIが用意されています。

対応しているファイル形式

ファイル形式はOgg、Mp3、Wav、Aacの４種類に対応しているようです。

音声の再生には以前はFlashが必須でしたが、こういったライブラリで手軽に設置できるようになって来たのが嬉しいですね。

ブラウザによっては動作しないものもあるようですが、
フェードイン/フェードアウトも実装されていました。

デモも非常に面白いサイトに出来上がっていました。
こういった便利なライブラリは覚えておくといつか使えそうです。

詳細&ダウンロードは下のリンクからどうぞ。

PDFを読み込んでcanvasに描画するJavaScriptライブラリ「pdf.js」

通常PDFをブラウザ上で閲覧するにはAdobe Readerやビューワー用の拡張が必要ですよね。
Mozillaの人達がこうした問題を解決するために、pdf.jsというライブラリを公開したようです。

HTML5が動作するブラウザさえあればPDFが表示できるようになる便利なライブラリになっています。

まだ開発中との事で、日本語表示がうまく出来なかったりFirefox以外では動作しないなど問題はありますが、
これからが楽しみですね。

サンプルのソースコードもありますので、興味のある方は下のリンクからどうぞ。

「25 Amazing HTML5 Portfolio Web Designs For Inspiration」では、HTML5を使ったアイデアが盛りだくさんのサイトが紹介されている。

video、Canvas、ドラッグ＆ドロップなどを使用しているサイト集です。

参考になると思うので一度見てみてください。

スライダや日付処理などのHTML5のフォーム要素を取り入れつつ
デザインされたフォームを作る方法が紹介されています。

以下のようなフォームを作る方法がまとめられています。

IE9が出てくる事でこういった実装も普通になってきそうですね。
興味のある方は下のリンクからどうぞ。