徹底解説 HTML5 APIガイドブック ビジュアル系API編

概 要

HTML 5のビジュアルとユーザー・インタフェースに関連する新APIの仕様と使い方を徹底解説したガイドブックです。HTML5は、これまでHTMLとJavaScriptでは実現できなかった機能が盛り込まれており、次世代のWeb標準として注目されています。本書では、JavaScriptの基礎を理解できている人を対象に、DOMスクリプティングの基礎、FormsやCanvas、ビデオやオーディオのAPIなどビジュアルやユーザー・インターフェースに関わるAPIに絞って徹底解説。通常のウェブ・ページからウィジェットなどのアプリケーション作成にまで必要な知識を一通り紹介しています。
姉妹書の 『徹底解説HTML5 マークアップガイドブック』 『徹底解説 HTML5 APIガイドブック コミュニケーション系API編

著者 羽田野太巳
価格 本体3400円(税別)
ISBN 978-4-7980-2854-5
発売日 2011/1/26
判型 B5変
色数 2色
ページ数 680
CD/DVD
対象読者 中級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

第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高度

リアルタイム監視の停止

PR

秀和システム