CHAPTER 1　HTML5とは

概要

本書で扱う内容

CHAPTER 2　フォーム入力

概要

フォームコントロール

• 電話番号／メールアドレス／URLの入力欄を作成する
• 数値の入力欄を作成する
• 日付の入力欄を作成する
• 月／週の入力欄を作成する
• 時間の入力欄を作成する
• スライダーを作成する
• 色の入力欄を作成する
• 検索用の入力欄を作成する

入力補助

• オートコンプリート機能を有効にする
• 入力欄に自動でフォーカスする
• 入力欄に入力候補を提示する
• 複数の値を入力する
• 入力の最大値／最小値を指定する
• 入力の増減幅を指定する
• 入力のヒントを表示する

入力チェック

• 必須入力をチェックする
• 入力パターンを指定する
• 検証機能を無効化する

入力チェック（JavaScript）

• バリデーションの状態を取得する
• 入力された文字列をチェックする
• 入力された数値をチェックする
• 任意のエラーメッセージを指定する
• 要素の全てのバリデーションをチェックする
• 明示的に要素のバリデーションをチェックする

入力内容の表示

• 入力処理の結果を表示する
• 作業の進捗状態を表示する
• 数量や割合をゲージで表示する

CHAPTER 3　メディアの取り扱い

概要

メディア要素 （共通）

• メディアファイルを再生する
• メディアファイルの再生状況を指定する
• 複数のメディアファイルを指定する

動画ファイルの再生

• 再生画面のサイズを指定する
• 再生待ちの画像を指定する

JavaScriptからの操作

• メディア要素が利用できるか判断する
• メディア要素を操作するAudio／Videoオブジェクトを生成する
• メディアファイルが再生できるか判断する
• メディアファイルの読み込み状況を検出する
• メディアファイルを再生／停止する
• メディアファイルの情報を取得する
• ファイルのバッファ済み／再生済み／シーク可能な時間を取得する
• 音量や再生速度を変更する
• メディアファイル再生前のエラーを検出する
• メディアファイル再生後の状態の変化を検出する
• メディアファイル再生時の処理をカスタマイズする
• ユーザーの操作に応じた処理を指定する
• フルスクリーンで再生する
• 動画を加工して表示する

Audio Data API

• 音声ファイルの情報を取得する
• 簡易的なシンセサイザーを表示する
• 音を生成／出力する

CHAPTER 4　Canvas API

概要

Canvas APIの基本

• Canvas APIが利用できるか判断する
• 描画領域を指定する

線の描画

• 直線を描画する
• 曲線を描画する
• 線のスタイルを指定する
• 角の形状を指定する

図形の描画

• 多角形を描画／塗りつぶす
• 矩形を描画する
• 円を描画する
• グラデーションを描画する

文字の描画

• 文字を描画する
• 文字のフォントや基準位置を指定する
• 文字のベースラインを指定する
• 描画した文字の幅を取得する
• 文字や図形に影をつける

画像の表示

• 画像を表示する
• 画像を切り出して表示する
• 画像を繰り返し表示する

描画状態の操作

• キャンバスの状態を保存／復元する
• 画像の特定範囲だけを描画する
• 画像を変形して表示する
• 描画モードを指定する
• ピクセルを操作する

描画状態の操作

• マウスの座標を取得して描画する
• 描画内容をコピー／保存する

CHAPTER 5　ドラッグ＆ドロップAPI

概要

ドラッグ／ドロップ

• ページ内の要素をドラッグ可能にする
• ドラッグ／ドロップ時の処理を指定する
• ドロップ先の要素にデータを渡す
• ドロップ先の要素にフォーマットを指定してデータを渡す
• ドラッグ＆ドロップで受け渡しするデータを削除する
• 他のアプリケーションからのデータを渡す

ドラッグ動作のカスタマイズ

• ドラッグ時のマウスポインタの形状を変更する
• ドラッグ中のアイコンに画像を指定する
• ドラッグ中のアイコンに画像以外の情報を指定する

CHAPTER 6　File API

概要

File API

• File APIが利用できるか判断する
• ファイルの名前／種類／サイズを取得する
• テキストファイルを読み取る
• ファイル読み取り時の処理を指定する
• ファイル読み込み時のエラー処理を指定する
• ファイル読み込みの進捗状況を表示する
• 画像／映像／音声ファイルを読み取る
• バイナリデータを読み取る
• ファイルのURIを生成する
• ファイルの読み込みを中止する
• ファイル関連の同期APIを利用する

File API:Writer／File API:Directories and System

• Blobデータを構築する
• Blobデータを追加／取得する
• ファイルシステムを開く
• ファイルシステムの情報を取得する
• ファイルシステム利用時のエラー処理を指定する
• ファイルを生成する
• ディレクトリを生成する
• ファイルへ書き込む
• ファイルへ追記する
• ファイルの情報を取得する
• ディレクトリ内のファイルを取得する
• URLを指定してエントリを取得する
• エントリを削除する
• エントリをコピー／移動する
• File API:Writer／File API:Directories and Systemの非同期APIを利用する

CHAPTER 7　Geolocation API

概要

Geolocation APIの基本

• Geolocation APIが利用できるか判断する

現在位置の取得

• 現在の位置情報を取得する
• 位置取得時のエラーを検出する

現在位置の定期取得

• 連続して位置情報を取得する
• 連続した位置情報の取得を停止する

CHAPTER 8　オフラインWebアプリケーション

概要

• ファイルのキャッシュ
• オンライン／オフラインを判断する
• キャッシュマニフェストを指定する
• コンテンツをキャッシュする
• キャッシュしないリソースを指定する
• オフラインで表示できないリソースの代替リソースを定義する

JavaScriptからの制御

• オフラインWebアプリケーションが利用できるか判断する
• キャッシュを更新する
• キャッシュ更新中の処理を指定する

CHAPTER 9　Web Storage

概要

Web Storageの基本

• Web Storageが利用できるか判断する

データの読み書き

• Web Storageにデータを保存する
• Web Storageに保存したデータを参照する
• Web Storageの特定のデータを削除する
• Web Storageのデータを全て削除する
• Web Storageに保存されているデータの数を取得する
• Web Storageのn番目のキーを取得する
• Web Storageへのデータの登録／更新／削除の際の処理を指定する

CHAPTER 10　Web Database

概要

Indexed Database API

• Indexed Database APIが利用できるか判断する
• データベースを利用する
• オブジェクトストアを作成／削除する
• データを保存する
• トランザクションを利用する
• データを更新する
• キーを指定してデータを取得する
• データベース利用時のエラー処理を指定する
• データを削除する
• 複数のデータを取得する
• 範囲を指定してデータを取得する
• インデックスを作成／削除する
• インデックスを使ってデータを取得する
• Indexed Databaseの同期APIを利用する

Web SQL Database

• Web SQL Databaseが利用できるか判断する
• データベースをオープンする
• トランザクションを開始する
• 結果セットを返さないSQLを実行する
• 結果セットを返すSQLを実行する

CHAPTER 11　クロスドキュメントメッセージング

概要

メッセージの送受信

• メッセージの送受信が利用できるか判断する
• メッセージを送信する
• メッセージを受信／参照する

CHAPTER 12　XMLHTTPRequest Level2

概要

通信の基本

• クロスドメイン通信を許可する
• XMLHTTPRequest Level2が利用できるか判断する
• サーバーにリクエストを送信する
• 通信のタイムアウト時間を設定する
• リダイレクトの可否を設定する
• バイナリデータを送信する
• XMLデータを送信する
• フォームの形式でデータを送信する
• サーバーからデータを受信する
• Blob型のレスポンスが受信できるか判断する
• 受信するデータのMIMEタイプを指定する

通信の制御

• 通信の状態を参照する
• 通信時の処理を指定する
• 通信時のエラー／例外処理を指定する
• データ送信時の進捗状況を取得する
• リクエストヘッダを指定する
• レスポンスヘッダを取得する
• 通信を中断する

CHAPTER 13　WebSocket

概要

双方向通信の基本

• 双方向通信が利用できるか判断する
• WebSocketサーバーへの接続を確立する
• 接続状態を確認する
• メッセージの送信／切断を行う
• 送信データのサイズを確認する
• データを受信する

双方向通信の制御

• 通信の接続時／切断時／エラー時の処理を指定する
• オブジェクトを共有する

CHAPTER 14　Web Workers

概要

バックグラウンドでの処理

• ワーカーが利用できるか判断する
• ワーカーを作成する／メッセージを送信する
• メッセージを受信する
• ワーカーを終了する
• ワーカーのエラーを検出する
• ワーカー内の環境情報を取得する
• ワーカー内で別ファイルのJavaScriptを利用する
• 複数のワーカーを利用する
• 共有ワーカーを利用する

他のAPIとの連携

• ワーカーからFile APIを利用する
• ワーカーからWeb Socketを利用する
• ワーカーからXMLHttpRequest Level2を利用する

CHAPTER 15　テキストの扱い

概要

Text Editing API

• 要素を編集可能にする
• 要素の編集の可否を設定する
• ページ全体を編集可能にする
• 編集コマンドが利用できるか判断する
• 編集コマンドを実行する
• 選択したテキストを取得する

Text Selection API

• テキストの選択状態を取得する
• キャレットの位置を指定する
• テキストの選択範囲の詳細を取得する
• テキストの選択範囲を指定する
• テキストの選択範囲を削除する
• テキストの選択範囲を生成／セット／解除する
• 複数のテキストの選択範囲を扱う

Selectors API

• CSSセレクタにマッチした要素を取得する
• 要素がCSSセレクタにマッチしているか判断する

CHAPTER 16　スマートフォン向けの機能

概要

スマートフォン開発の基本

• Webサイトの表示サイズを調整する
• アニメーション効果を実装する

端末の向きに応じた処理

• 端末の向きに応じた処理が利用できるか判断する
• 端末の向きの変化を利用する
• 方位／精度を取得する
• 端末が横向き／縦向きになった際の処理を指定する

センサーの値

• 端末のセンサーの値が利用できるか判断する
• 端末のセンサーの値を利用する
• ジャイロセンサーの値を利用する

マルチタッチディスプレイ

• 画面にタッチした際の処理を指定する
• 複数のタッチに対する処理を指定する
• ジェスチャーの際の処理を指定する

付録

ブラウザーで利用できる開発ツール

Google Maps API簡易リファレンス

jQuery Mobile簡易リファレンス

Column目次

フルスクリーンAPI

音声データを扱うAPI

IE8以前でのCanvasの利用

保存／復元の機能を利用してパターンを作成する

clipメソッド利用時の注意点

HTML5のAPIの具体的な利用イメージをつかむために

Geolocation APIを利用した Webアプリケーションの開発

キャッシュマニフェストが効いているか確かめる方法

オフライン WebアプリケーションとlocalStorage

HTML5での開発とJavaScriptの知識

Indexed Database APIの利用について

手軽にWebSocketを利用できるPusher

カメラの映像をWebSocketで配信する

要素の編集

designModeプロパティを利用したエディタの作成

選択した部分をハイライトさせる

古い IEでの選択範囲

スマートフォン向けサイトで使うべきでない技術

iOSでのJavaScriptのデバッグ

Chrome for Android