徹底解説 HTML5 APIガイドブック ビジュアル系API編
HTML 5のビジュアルとユーザー・インタフェースに関連する新APIの仕様と使い方を徹底解説したガイドブックです。HTML5は、これまでHTMLとJavaScriptでは実現できなかった機能が盛り込まれており、次世代のWeb標準として注目されています。本書では、JavaScriptの基礎を理解できている人を対象に、DOMスクリプティングの基礎、FormsやCanvas、ビデオやオーディオのAPIなどビジュアルやユーザー・インターフェースに関わるAPIに絞って徹底解説。通常のウェブ・ページからウィジェットなどのアプリケーション作成にまで必要な知識を一通り紹介しています。
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/2854.html
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/2854.html
第1章 DOMスクリプティングの基礎
1.1 HTML5の意義
ウェブ標準としての仕様がなかったJavaScriptのさまざまな機能
過去に使われてきたAPIを1つの仕様にまとめたHTML5
1.2 DOMツリー
DOMとは何か
DOMツリーとは何か
ブラウザーによって異なっていたDOMツリー
マークアップが文法エラーだった場合の扱い
1.3 DOMツリー・アクセサー
DOMアクセサーとは何か
DOMツリーにアクセスするプロパティ
HTMLCollectionオブジェクトはライブ
DOMツリーにアクセスするメソッド
W3C DOMで規定されたメソッド
1.4 ドキュメントのリソース情報
リソース情報を扱うプロパティ
URL情報
最終更新日時
レンダリング・モード
文字エンコーディング
ドキュメントのロード状態
1.5 マークアップの挿入
マークアップの追加
マークアップの置き換え
HTMLドキュメントの生成
セキュリティー
1.6 要素と属性の操作
要素と属性を操作するAPI
要素を操作するAPI
class属性を操作するclassList API
カスタム・データ属性
1.7 Selectors API
Selectors APIとは何か
セレクター
:visited疑似クラスのプライバシー問題
Selectors APIが返すNodeListオブジェクトはライブではない
1.8 イベント
ウェブ・アプリケーションとイベント
イベント・ハンドラとイベント・リスナー
loadイベント
DOMContentLoadedイベント
1.9 タイマー
タイマーとは何か
タイマーを使用したサンプル
1.10 モーダル・ダイアログ
window.alert()、window.confirm()、window.prompt()
カスタムのモーダル・ダイアログ
1.11 ページURLを扱うLocation API
Location APIとは何か
URL分解プロパティ
1.12 閲覧履歴を扱うHistory API
History APIとは何か
セッション・ヒストリーの関連イベント
1.13 Navigatorオブジェクト
Navigatorオブジェクトとは何か
ブラウザー識別情報
ネットワーク接続情報
1.14 ブラウザー・インタフェース
各種バーが表示されているかどうかを判定するプロパティ
1.15 フォーカス
フォーカスとは何か
ドキュメントのフォーカス
要素のフォーカス
第2章 Forms
2.1 フォームの基礎
HTML5で充実した入力用ユーザー・インタフェース
新コントロール
入力値に制約を設ける属性
バリデーション
バリデーションの対象となるコントロール
バリデーションを回避する方法
2.2 フォームのイベント
フォームに関連するイベント
changeイベントとformchangeイベント
inputイベントとforminputイベント
invalidイベント
selectイベント
submitイベント
2.3 フォーム・バリデーションAPI
フォーム・バリデーションAPIとは何か
バリデーションを任意のタイミングで実行
バリデーション・エラーのデザインをカスタマイズ
バリデーションの結果をリアルタイムで取得
バリデーション・エラーの理由を取得
独自のバリデーションを定義
フォーム・バリデーションAPIの注意点
2.4 テキストの選択状態
テキスト選択状態のAPI
すべてを選択状態にする
選択テキストの開始位置と終了位置
範囲を指定してテキストを選択状態にする
2.5 HTML5で新たに導入されたフォーム関連要素
3つの新要素
output要素
progress要素
meter要素
2.6 フォームAPIリファレンス
大幅に拡充されたフォームに関連するAPI
HTMLFormControlsCollectionオブジェクト
RadioNodeListオブジェクト
HTMLOptionsCollectionオブジェクト
DOMSettableTokenListオブジェクト
ValidityStateオブジェクト
第3章 Canvas
3.1 Canvasの特徴
Canvasとは何か
ビットマップ・グラフィックス
Canvasの利点
Canvasの仕様
3.2 canvas要素
canvas要素の用意
canvas要素をサポートしているかの判定
3.3 座標系
Canvasの座標系
3.4 2Dコンテキスト
2Dコンテキスト・オブジェクトの取り出し
親となるcanvas要素のノード・オブジェクトの参照
3.5 矩形
矩形を描く
3.6 色
色を指定する
3.7 半透明
半透明度を指定する
3.8 グラデーション
グラデーションを指定する
線形グラデーション
円形グラデーション
3.9 パスを使った複雑な図形
矩形以外の描き方
パスとは
サブパスとは
サブパスが交差した場合の塗りつぶし
円弧
ベジェ曲線
矩形
3.10 線のスタイル
線のスタイルに関するCanvasの機能
線幅
線端形状
接続形状
3.11 テキスト
Canvasのテキスト描画
テキストの描画
Webフォントの利用
アライメント
文字長の計測
3.12 シャドー
図形に影を入れる
3.13 パターン
パターンで塗りつぶす
3.14 イメージの組み込み
外部のイメージをCanvas内に取り込む
レイヤー
3.15 合成
Porter-Duff合成
Canvasのイメージ合成パターン
合成を使った描画
3.16 ピクセル操作
ビットマップ情報に直接アクセスする
セキュリティー
3.17 クリッピング
クリッピング領域を定義する
3.18 座標空間の変換
図形を変換する
拡大・縮小・回転・移動
変換の組み合わせ
変換マトリックス
変換マトリックスの応用
3.19 描画状態管理
描画状態をまとめて管理する
3.20 パスの図形の外か中かを判定
図形の中にあるのか外にあるのかを判定する
3.21 Canvasの画像出力
canvas要素のノード・オブジェクトの画像出力に関するAPI
3.22 アニメーション
Canvasを使ってアニメーションを実現する
パフォーマンス
第4章 Video/Audio
4.1 マークアップの概要
HTML5で新たに追加された要素
4.2 video要素
video要素のマークアップ
論理属性のプロパティ
表示寸法と実際の寸法
preloadとautobuffer
video要素をサポートしているかの判定
4.3 audio要素
audio要素のマークアップ
Audio()
audio要素をサポートしているかの判定
4.4 コーデック
コーデックとコンテナ
MIMEタイプ
4.5 source要素
source要素とは何か
4.6 MIMEタイプから再生可能かどうかを判定
どの形式なら再生できるのかを判定する
4.7 採用されたファイルの判定
どのファイルが採用されたのかを判定する
4.8 ネットワーク利用状況の把握
ダウンロードまでの遷移をリアルタイムで把握する
4.9 再生と停止
メディア・リソースの再生と停止
iOSのSafariで無効にされている機能
4.10 メディア・リソースのロード
強制的にメディア要素をリセットする
メディア・データの取得手順
4.11 メディア・データのロード状況の把握
メディア・データのロード状況をリアルタイムで把握する
4.12 再生速度
再生速度を変更する
4.13 尺と再生位置
尺と再生位置を把握する
4.14 再生済みとバッファ済みの範囲
再生された範囲とバッファされた範囲を把握する
バッファの破棄
4.15 シーク
シークの状態を把握する
4.16 音量調整
音量を変更する
4.17 エラー・ハンドリング
エラーを把握する
4.18 イベント
メディア要素のイベント
ロードから再生前までのイベント
再生および一時停止で発生するイベント
各種操作に関連するイベント
エラーに関連するイベント
4.19 カスタム・プレーヤー
より便利な機能を組み込んだプレーヤーを作る
4.20 ビデオをCanvasに取り込む
ビデオとcanvas要素を組み合わせる
4.21 字幕を入れる
ビデオやオーディオに字幕を入れる
第5章 テキスト編集
5.1 編集可能なドキュメントと要素
ウェブ・コンテンツのテキスト編集
要素を編集可能にする
ドキュメント全体を編集可能にする
5.2 Text Selection API
選択したテキストの情報を取得する
選択範囲を取り出す
複数の範囲を選択する
選択範囲の開始位置と終了位置
選択範囲のセットと削除
選択範囲を解除してキャレット位置を移動する
複数の選択範囲を扱う
5.3 Editing API
WISYWIGエディタを実現するEditing API
生成されるHTMLコード
iframe要素を採用する理由
5.4 コマンド
commandID
太字（bold）
斜体文字（italic）
下付き文字（subscript）
上付き文字（superscript）
カーソルの前の文字を削除（delete）
カーソルの次の文字を削除（forwardDelete）
イメージ挿入（insertImage）
HTMLコード挿入（insertHTML）
テキスト挿入（insertText）
改行挿入（insertLineBreak）
順序リスト挿入（insertOrderedList）
非順序リスト挿入（insertUnorderedList）
ブロック要素の置換（formatBlock）
ブロック分割（insertParagraph）
リンク生成（createLink）
リンク解除（unlink）
すべてを選択（selectAll）
選択解除（unselect）
元に戻す（undo）
繰り返し（redo）
5.5 カスタムのWISYWIGエディタ
Text Selection APIとEditing APIを使ったWISYWIGエディタ
第6章 ドラッグ&ドロップ
6.1 ドラッグ&ドロップの概要
ドラッグ&ドロップのAPI
6.2 ドラッグ&ドロップのイベント
ドラッグ&ドロップ関連のイベント
6.3 デフォルト・アクション
デフォルト・アクションとは何か
6.4 任意の要素をドラッグする
draggableコンテンツ属性
6.5 選択テキストをドラッグする
選択テキストのドラッグ&ドロップ
6.6 データ転送
データ転送機能に関連するAPI
6.7 他のアプリケーションとの連携
ブラウザー以外のアプリケーションとのデータの送受信
6.8 ドラッグ中のアイコンをセットする
ドラッグ中のアイコン
6.9 選択テキストのドラッグ・ポインター
ドラッグ中のマウス・ポインターを変更する
6.10 デスクトップ・ファイルをドロップする
デスクトップ上のファイルのドロップ
第7章 File API
7.1 File APIとは
デスクトップ上のファイルをスクリプトから読み取る
7.2 Fileオブジェクト
ファイルの情報を取得する
7.3 FileReaderオブジェクト
ファイルのデータを読み取る
7.4 イベント
ファイル読み取りの過程で発生するイベント
7.5 ロード状態
ファイルの読み取り状況を把握する
7.6 ファイルのロードの進捗
リアルタイムに読み取り処理の進捗を表示する
7.7 エラー・ハンドリング
エラーの理由を把握する
7.8 ファイルのURIを生成する
一意的なURIを生成する
第8章 Web Workers
8.1 Web Workersとは
Web Workersとは何か
プロセスとスレッド、そしてワーカー
ブロッキング
8.2 Web Workersクイック・スタート
Web Workersの使い方
8.3 用途
Web Workersをどこで使うか
AJAXによるコンテンツの動的ロード
サジェスト
ロジックの分離
8.4 WorkerコンストラクタとWorkerオブジェクト
Workerオブジェクトの取得
メッセージ送信
ワーカーの終了
イベント・ハンドラ
8.5 ワーカーのグローバル・スコープ
グローバル・スコープとは何か
メッセージの送信
ワーカーから外部のJavaScriptファイルをロードする
イベント・ハンドラ
ワーカーの終了
ブラウザー情報の取得
ワーカーのJavaScriptファイルのURL情報の取得
タイマー
8.6 Web Workersで利用できる他のAPI
ワーカー内で利用できるAPI
8.7 ワーカーを複数起動する
ワーカーを複数起動する
Web Workersのパフォーマンス
8.8 共有ワーカー
専用ワーカーと共有ワーカー
共有ワーカーの使い方
ページ側のAPI
共有ワーカー側のAPI
共有される値と共有されない値
第9章 Geolocation API
9.1 Geolocation APIとは
Goelocation APIとは何か
ユーザーの許可
測地系
9.2 Geolocation APIクイック・スタート
位置情報を取り出す
9.3 現在位置を取得する
getCurrentPosition()メソッド
位置情報取得に成功したときの処理
位置情報取得に失敗したときの処理
オプション・パラメータ
9.4 位置情報を連続して取得する
連続して位置情報を取得する
GPS高度
リアルタイム監視の停止
1.1 HTML5の意義
ウェブ標準としての仕様がなかったJavaScriptのさまざまな機能
過去に使われてきたAPIを1つの仕様にまとめたHTML5
1.2 DOMツリー
DOMとは何か
DOMツリーとは何か
ブラウザーによって異なっていたDOMツリー
マークアップが文法エラーだった場合の扱い
1.3 DOMツリー・アクセサー
DOMアクセサーとは何か
DOMツリーにアクセスするプロパティ
HTMLCollectionオブジェクトはライブ
DOMツリーにアクセスするメソッド
W3C DOMで規定されたメソッド
1.4 ドキュメントのリソース情報
リソース情報を扱うプロパティ
URL情報
最終更新日時
レンダリング・モード
文字エンコーディング
ドキュメントのロード状態
1.5 マークアップの挿入
マークアップの追加
マークアップの置き換え
HTMLドキュメントの生成
セキュリティー
1.6 要素と属性の操作
要素と属性を操作するAPI
要素を操作するAPI
class属性を操作するclassList API
カスタム・データ属性
1.7 Selectors API
Selectors APIとは何か
セレクター
:visited疑似クラスのプライバシー問題
Selectors APIが返すNodeListオブジェクトはライブではない
1.8 イベント
ウェブ・アプリケーションとイベント
イベント・ハンドラとイベント・リスナー
loadイベント
DOMContentLoadedイベント
1.9 タイマー
タイマーとは何か
タイマーを使用したサンプル
1.10 モーダル・ダイアログ
window.alert()、window.confirm()、window.prompt()
カスタムのモーダル・ダイアログ
1.11 ページURLを扱うLocation API
Location APIとは何か
URL分解プロパティ
1.12 閲覧履歴を扱うHistory API
History APIとは何か
セッション・ヒストリーの関連イベント
1.13 Navigatorオブジェクト
Navigatorオブジェクトとは何か
ブラウザー識別情報
ネットワーク接続情報
1.14 ブラウザー・インタフェース
各種バーが表示されているかどうかを判定するプロパティ
1.15 フォーカス
フォーカスとは何か
ドキュメントのフォーカス
要素のフォーカス
第2章 Forms
2.1 フォームの基礎
HTML5で充実した入力用ユーザー・インタフェース
新コントロール
入力値に制約を設ける属性
バリデーション
バリデーションの対象となるコントロール
バリデーションを回避する方法
2.2 フォームのイベント
フォームに関連するイベント
changeイベントとformchangeイベント
inputイベントとforminputイベント
invalidイベント
selectイベント
submitイベント
2.3 フォーム・バリデーションAPI
フォーム・バリデーションAPIとは何か
バリデーションを任意のタイミングで実行
バリデーション・エラーのデザインをカスタマイズ
バリデーションの結果をリアルタイムで取得
バリデーション・エラーの理由を取得
独自のバリデーションを定義
フォーム・バリデーションAPIの注意点
2.4 テキストの選択状態
テキスト選択状態のAPI
すべてを選択状態にする
選択テキストの開始位置と終了位置
範囲を指定してテキストを選択状態にする
2.5 HTML5で新たに導入されたフォーム関連要素
3つの新要素
output要素
progress要素
meter要素
2.6 フォームAPIリファレンス
大幅に拡充されたフォームに関連するAPI
HTMLFormControlsCollectionオブジェクト
RadioNodeListオブジェクト
HTMLOptionsCollectionオブジェクト
DOMSettableTokenListオブジェクト
ValidityStateオブジェクト
第3章 Canvas
3.1 Canvasの特徴
Canvasとは何か
ビットマップ・グラフィックス
Canvasの利点
Canvasの仕様
3.2 canvas要素
canvas要素の用意
canvas要素をサポートしているかの判定
3.3 座標系
Canvasの座標系
3.4 2Dコンテキスト
2Dコンテキスト・オブジェクトの取り出し
親となるcanvas要素のノード・オブジェクトの参照
3.5 矩形
矩形を描く
3.6 色
色を指定する
3.7 半透明
半透明度を指定する
3.8 グラデーション
グラデーションを指定する
線形グラデーション
円形グラデーション
3.9 パスを使った複雑な図形
矩形以外の描き方
パスとは
サブパスとは
サブパスが交差した場合の塗りつぶし
円弧
ベジェ曲線
矩形
3.10 線のスタイル
線のスタイルに関するCanvasの機能
線幅
線端形状
接続形状
3.11 テキスト
Canvasのテキスト描画
テキストの描画
Webフォントの利用
アライメント
文字長の計測
3.12 シャドー
図形に影を入れる
3.13 パターン
パターンで塗りつぶす
3.14 イメージの組み込み
外部のイメージをCanvas内に取り込む
レイヤー
3.15 合成
Porter-Duff合成
Canvasのイメージ合成パターン
合成を使った描画
3.16 ピクセル操作
ビットマップ情報に直接アクセスする
セキュリティー
3.17 クリッピング
クリッピング領域を定義する
3.18 座標空間の変換
図形を変換する
拡大・縮小・回転・移動
変換の組み合わせ
変換マトリックス
変換マトリックスの応用
3.19 描画状態管理
描画状態をまとめて管理する
3.20 パスの図形の外か中かを判定
図形の中にあるのか外にあるのかを判定する
3.21 Canvasの画像出力
canvas要素のノード・オブジェクトの画像出力に関するAPI
3.22 アニメーション
Canvasを使ってアニメーションを実現する
パフォーマンス
第4章 Video/Audio
4.1 マークアップの概要
HTML5で新たに追加された要素
4.2 video要素
video要素のマークアップ
論理属性のプロパティ
表示寸法と実際の寸法
preloadとautobuffer
video要素をサポートしているかの判定
4.3 audio要素
audio要素のマークアップ
Audio()
audio要素をサポートしているかの判定
4.4 コーデック
コーデックとコンテナ
MIMEタイプ
4.5 source要素
source要素とは何か
4.6 MIMEタイプから再生可能かどうかを判定
どの形式なら再生できるのかを判定する
4.7 採用されたファイルの判定
どのファイルが採用されたのかを判定する
4.8 ネットワーク利用状況の把握
ダウンロードまでの遷移をリアルタイムで把握する
4.9 再生と停止
メディア・リソースの再生と停止
iOSのSafariで無効にされている機能
4.10 メディア・リソースのロード
強制的にメディア要素をリセットする
メディア・データの取得手順
4.11 メディア・データのロード状況の把握
メディア・データのロード状況をリアルタイムで把握する
4.12 再生速度
再生速度を変更する
4.13 尺と再生位置
尺と再生位置を把握する
4.14 再生済みとバッファ済みの範囲
再生された範囲とバッファされた範囲を把握する
バッファの破棄
4.15 シーク
シークの状態を把握する
4.16 音量調整
音量を変更する
4.17 エラー・ハンドリング
エラーを把握する
4.18 イベント
メディア要素のイベント
ロードから再生前までのイベント
再生および一時停止で発生するイベント
各種操作に関連するイベント
エラーに関連するイベント
4.19 カスタム・プレーヤー
より便利な機能を組み込んだプレーヤーを作る
4.20 ビデオをCanvasに取り込む
ビデオとcanvas要素を組み合わせる
4.21 字幕を入れる
ビデオやオーディオに字幕を入れる
第5章 テキスト編集
5.1 編集可能なドキュメントと要素
ウェブ・コンテンツのテキスト編集
要素を編集可能にする
ドキュメント全体を編集可能にする
5.2 Text Selection API
選択したテキストの情報を取得する
選択範囲を取り出す
複数の範囲を選択する
選択範囲の開始位置と終了位置
選択範囲のセットと削除
選択範囲を解除してキャレット位置を移動する
複数の選択範囲を扱う
5.3 Editing API
WISYWIGエディタを実現するEditing API
生成されるHTMLコード
iframe要素を採用する理由
5.4 コマンド
commandID
太字（bold）
斜体文字（italic）
下付き文字（subscript）
上付き文字（superscript）
カーソルの前の文字を削除（delete）
カーソルの次の文字を削除（forwardDelete）
イメージ挿入（insertImage）
HTMLコード挿入（insertHTML）
テキスト挿入（insertText）
改行挿入（insertLineBreak）
順序リスト挿入（insertOrderedList）
非順序リスト挿入（insertUnorderedList）
ブロック要素の置換（formatBlock）
ブロック分割（insertParagraph）
リンク生成（createLink）
リンク解除（unlink）
すべてを選択（selectAll）
選択解除（unselect）
元に戻す（undo）
繰り返し（redo）
5.5 カスタムのWISYWIGエディタ
Text Selection APIとEditing APIを使ったWISYWIGエディタ
第6章 ドラッグ&ドロップ
6.1 ドラッグ&ドロップの概要
ドラッグ&ドロップのAPI
6.2 ドラッグ&ドロップのイベント
ドラッグ&ドロップ関連のイベント
6.3 デフォルト・アクション
デフォルト・アクションとは何か
6.4 任意の要素をドラッグする
draggableコンテンツ属性
6.5 選択テキストをドラッグする
選択テキストのドラッグ&ドロップ
6.6 データ転送
データ転送機能に関連するAPI
6.7 他のアプリケーションとの連携
ブラウザー以外のアプリケーションとのデータの送受信
6.8 ドラッグ中のアイコンをセットする
ドラッグ中のアイコン
6.9 選択テキストのドラッグ・ポインター
ドラッグ中のマウス・ポインターを変更する
6.10 デスクトップ・ファイルをドロップする
デスクトップ上のファイルのドロップ
第7章 File API
7.1 File APIとは
デスクトップ上のファイルをスクリプトから読み取る
7.2 Fileオブジェクト
ファイルの情報を取得する
7.3 FileReaderオブジェクト
ファイルのデータを読み取る
7.4 イベント
ファイル読み取りの過程で発生するイベント
7.5 ロード状態
ファイルの読み取り状況を把握する
7.6 ファイルのロードの進捗
リアルタイムに読み取り処理の進捗を表示する
7.7 エラー・ハンドリング
エラーの理由を把握する
7.8 ファイルのURIを生成する
一意的なURIを生成する
第8章 Web Workers
8.1 Web Workersとは
Web Workersとは何か
プロセスとスレッド、そしてワーカー
ブロッキング
8.2 Web Workersクイック・スタート
Web Workersの使い方
8.3 用途
Web Workersをどこで使うか
AJAXによるコンテンツの動的ロード
サジェスト
ロジックの分離
8.4 WorkerコンストラクタとWorkerオブジェクト
Workerオブジェクトの取得
メッセージ送信
ワーカーの終了
イベント・ハンドラ
8.5 ワーカーのグローバル・スコープ
グローバル・スコープとは何か
メッセージの送信
ワーカーから外部のJavaScriptファイルをロードする
イベント・ハンドラ
ワーカーの終了
ブラウザー情報の取得
ワーカーのJavaScriptファイルのURL情報の取得
タイマー
8.6 Web Workersで利用できる他のAPI
ワーカー内で利用できるAPI
8.7 ワーカーを複数起動する
ワーカーを複数起動する
Web Workersのパフォーマンス
8.8 共有ワーカー
専用ワーカーと共有ワーカー
共有ワーカーの使い方
ページ側のAPI
共有ワーカー側のAPI
共有される値と共有されない値
第9章 Geolocation API
9.1 Geolocation APIとは
Goelocation APIとは何か
ユーザーの許可
測地系
9.2 Geolocation APIクイック・スタート
位置情報を取り出す
9.3 現在位置を取得する
getCurrentPosition()メソッド
位置情報取得に成功したときの処理
位置情報取得に失敗したときの処理
オプション・パラメータ
9.4 位置情報を連続して取得する
連続して位置情報を取得する
GPS高度
リアルタイム監視の停止
