HTML5 Webアプリケーション プログラミング入門

概 要

HTML5とJavaScriptを組み合わせて、Webアプリケーションを開発するテクニックを解説した入門書です。HTML5をプログラミングのなかでどのように使うかを重点的に、JavaScriptプログラミングの側からわかりやすく解説。WebForms 2.0や<video>、ドラッグ&ドロップ、<canvas>とSVGによるグラフィック処理などの基本から、Webストレージとアプリケーションキャッシュ、FileAPI、Indexed Database、Web WorkersとWeb Messaging、Server-sent EventsとWeb Socketなど、HTML5プログラミングの中核技術が満載。Geolocation APIなどのハードウェアアクセス機能も取り上げます。サンプルコードのダウンロードサービス付き。

著者 掌田津耶乃
価格 本体2800円(税別)
ISBN 978-4-7980-3403-4
発売日 2012/6/28
判型 B5変
色数 2色
ページ数 448
CD/DVD
対象読者 中級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

Chapter 1 HTML5とは何か

1.1 HTML5の概要

1.1.1 HTMLとは何か

1.1.2 HTML5へ!

1.1.3 HTML5に含まれる機能

1.1.4 Web ApplicationsとWHATWGについて

1.1.5 HTML5学習とWebブラウザ

1.1.6 「HTML5対応」の開発環境は?

1.1.7 主なソフトフェアの対応

1.1.8 学習用のWebサーバー環境について

1.2 HTML5の基本を覚える

1.2.1 HTML5の基本コード

1.2.2 <body>内コンテンツの基本コード

1.2.3 JavaScriptに関する基礎知識について

1.2.4 JavaScriptのデバッグと機能の調べ方

Chapter 2 拡張されたコントロール

2.1 Web Forms 2.0

2.1.1 HTML5のフォーム拡張について

2.1.2 <input type="range">タグの操作(スライダー)

2.1.3 type="number"による数値入力フィールドの利用(スピナー)

2.1.4 日時関係の入力フィールドの利用:valueAsDateプロパティ

2.1.5 type="color"による色の選択

2.1.6 検索フィールド(type="search")について

2.1.7 onchangeでの動作の違い

2.2 その他の新しい要素

2.2.1 list属性によるデータリストの表示

2.2.2 autocompleteについて

2.2.3 状況を表す<progress>と<meter>

2.2.4 <details>タグによる折りたたみ表示(ディスクロージャー)

2.3 JavaScriptによるコントロールの利用

2.3.1 Selector APIとは?

2.3.2 さまざまなDOMの指定法

2.3.3 Selectorを利用する

Chapter 3 Videoタグの利用

3.1 <video>タグの基本

3.1.1 HTML5における動画の扱いについて

3.1.2 <video>タグの基本について

3.1.3 フォーマット問題について

3.1.4 <source>タグについて

3.1.5 主な動画仕様の<source>タグ

3.2 JavaScriptによる動画アクセス

3.2.1 スクリプトによる動画操作

3.2.2 全体の長さと現在の表示位置

3.2.3 バッファされた動画範囲とTimeRangesオブジェクト

3.2.4 再生速度を示すplaybackRate

3.2.5 音量に関するvolumeとmuted

3.3 HTMLVideoElementのイベント

3.3.1 HTMLVideoElementのイベントについて

3.3.2 主なイベントの種類

3.3.3 Eventオブジェクトについて

Chapter 4 ドラッグ&ドロップ

4.1 ドラッグ&ドロップの基本

4.1.1 ドラッグ&ドロップの標準化

4.1.2 draggable属性について

4.1.3 ドロップの対象を用意するdragoverイベント属性

4.1.4 ドロップ時の処理を実装する

4.2 ドラッグ&ドロップとデータの受け渡し

4.2.1 ドロップ可能かどうかを判断する

4.1.2 dataTransferとデータの受け渡し

4.2.3 ドラッグ&ドロップでテキストデータを受け渡す

4.2.4 データ受け渡しの処理

4.2.5 ドラッグによるファイルの受け渡し

4.2.6 ドロップしたイメージファイルを表示する

4.2.7 <img>のイメージをドラッグ&ドロップする

Chapter 5 Canvasによるビットマップグラフィック描画

5.1 <canvas>タグと描画コンテキストの基本

5.1.1 HTML5のグラフィック機能について

5.1.2 <canvas>タグの基本

5.1.3 四角形を描くスクリプト

5.1.4 様々な色の指定

5.2 パスによる図形作成

5.2.1 パスによる描画

5.2.2 四角形のパスを描くrectメソッド

5.2.3 複数の図形を作成する際の注意点

5.2.4 円・円弧の描画メソッドarc

5.2.5 直線と多角形図形(moveTo/LineTo/closePath)

5.2.6 曲線を作成するためのメソッド(arcTo/bezierCurveTo)

5.2.7 テキストの描画(fillText/strokeText)

5.2.8 イメージの描画を行うdrawImage

5.2.9 イメージ利用の基本的な流れ

5.3 その他の描画関連機能

5.3.1 直線グラディエーション(context.createLinearGradient)

5.3.2 円形グラディエーション(createRadialGradient)

5.3.3 イメージを使ったパターンの描画(createPattern)

5.3.4 線分に関するプロパティ

5.3.5 図形の影付けについて

5.3.6 クリッピングについて(clipメソッド)

5.3.7 座標変換について

5.3.8 図形の合成(globalCompositeOperation)

5.3.9 isPointInPathによるインタラクティブなパス操作

Chapter 6 SVGによるベクターグラフィック

6.1 SVGの基本をマスターする

6.1.1 SVGとは何か?

6.1.2 SVGスクリプトの基本形

6.1.3 SVGファイルをHTMLに埋め込む

6.1.4 SVGファイルを作成する

6.1.5 WebページにSVGを埋め込む

6.1.6 インラインSVGについて

6.2 SVGの主なグラフィック機能

6.2.1 四角形と円形

6.2.2 表示色に関する属性

6.2.3 直線について

6.2.4 直線と多角形について

6.2.5 テキストの表示

6.2.6 テキスト属性の部分的な設定

6.2.7 曲線とパスについて

6.2.8 パスを使ったテキストの配置

6.2.9 イメージの表示 <image>

6.3 グラフィックをより深く理解する

6.3.1 グループによる属性の共有 <g>

6.3.2 線形グラディエーション <linearGradient>

6.3.3 円形グラディエーション <radialGradient>

6.3.4 パターンの利用 <pattern>

6.3.5 定義図形の再利用 <defs>

6.3.6 クリッピングについて <clipPath>

6.3.7 座標変換について transform属性

6.3.8 フィルターについて

6.4 JavaScriptとアニメーションの利用

6.4.1 JavaScriptの記述方法

6.4.2 DOMオブジェクトの取得と属性の操作

6.4.3 SVGDocumentの主なプロパティとイベントについて

6.4.4 SVGSVGElementのイベントについて

6.4.5 オブジェクトの生成

6.4.6 アニメーションと<animate>タグ

6.4.7 <animate>タグを利用する

6.4.8 <set>による属性値の変更

6.4.9 <animateMotion>によるパスを使ったアニメーション

6.4.10 その他のアニメーション用タグ

6.4.11 スクリプトによるアニメーションの実行

6.4.12 アニメーション・イベントの利用

Chapter 7 Webストレージとアプリケーションキャッシュ

7.1 Webストレージ

7.1.1 クッキーの限界

7.1.2 2つのストレージ

7.1.3 ローカルストレージの基本

7.1.4 すべてのキーの値を取り出す

7.1.5 必要なデータだけを取り出すには?

7.1.6 データベースとしてのローカルストレージ

7.1.7 セッションストレージについて

7.1.8 storageイベントについて

7.2 アプリケーションキャッシュ

7.2.1 アプリケーションキャシュとは?

7.2.2 Webサーバーの設定

7.2.3 マニフェストファイルの作成

7.2.4 HTMLへのキャッシュの設定

7.2.5 オフラインの状況チェック

7.2.6 キャッシュの更新について

7.2.7 applicationCacheのイベント

7.2.8 applicationCacheのステータスについて

7.2.9 スクリプトによる更新を修正する

Chapter 8 ファイルアクセス

8.1 File APIの基本

8.1.1 File APIとファイル関連オブジェクト

8.1.2 Fileオブジェクトを取得する

8.1.3 Fileオブジェクトのプロパティ

8.1.4 ドラッグ&ドロップによるFileの取得

8.1.5 FileListについて

8.2 ファイルの読み込みと保存

8.2.1 FileReaderによるテキストの読み込み(readAsText)

8.2.2 FileReaderのイベントについて

8.2.3 バイナリデータの読み込み

8.2.4 BlobBuilderによるバイナリデータ生成

8.2.5 Blob URIでBlobをダウンロードする

8.2.6 FileSystemについて

8.2.7 FileSystem利用の流れ

8.2.8 テンポラリー領域へのファイル保存

8.2.9 ファイル保存の手順を整理する

8.2.10 ファイル読み込みの流れを確認する

8.2.11 パーシスタンス領域への保存

8.2.12 保存されたデータの編集

Chapter 9 Indexed Database

9.1 Indexed Databaseの基本

9.1.1 HTML5の2種類のデータベース

9.1.2 Indexed Database APIの基本オブジェクト

9.1.3 IDBDatabase取得までの流れ

9.1.4 IDBObjectStoreの作成

9.1.5 オブジェクトストア作成までの流れ

9.2 データベースのCRUD操作

9.2.1 データの作成

9.2.2 データの検索

9.2.3 データの削除

9.2.4 データの更新

9.3 カーソルを利用したデータアクセス

9.3.1 IDBCursorによる全データの取得

9.3.2 すべてのデータを表示する

9.3.3 データを逆順に並べる

9.3.4 インデックスとソートの関係

9.3.5 IDBKeyRangeによる範囲指定

9.3.6 自動インクリメントによるID番号の割り当て

9.4 Web SQL Database

9.4.1 Web SQL Databaseとは?

9.4.2 データベース利用の基本的な流れ

9.4.3 テーブルの作成

9.4.4 レコードの追加

9.4.5 レコードの一覧表示

9.4.6 レコードの検索

9.4.7 レコードの更新・削除

Chapter 10 Web WorkersとWeb Messaging

10.1 Web Workersとバックグラウンド処理

10.1.1 バックグラウンド処理の考え方

10.1.2 Workerの基本的な仕組み

10.1.3 ワーカーを動かす

10.1.4 ワーカー利用の流れ

10.1.5 ワーカーへの送信

10.1.6 ワーカーの停止

10.1.7 フロントエンドと相互にやり取りをする

10.1.8 ワーカーを毎回終了する

10.1.9 ワーカーを起動したまま使う

10.2 共有ワーカー

10.2.1 共有ワーカー利用の基本

10.2.2 SharedWorkerを使う

10.2.3 HTML側の処理を用意する

10.2.4 全SharedWorkerにメッセージを送る

10.3 Web Messaging

10.3.1 ウインドウ間のメッセージ送信について

10.3.2 インラインフレームにメッセージを送る

10.3.3 インライン側からの返送

10.3.4 オリジンによる分岐

10.3.5 MessageChannelによるチャンネルの設定

10.3.6 MessageChannelで使ってインラインフレームにアクセスする

10.3.7 インラインフレームでMessageChannelのメッセージを受け取る

10.3.8 3つ以上のウインドウ間のメッセージ送信

Chapter 11 Server-sent EventsとWeb Socket

11.1 Server-Sent Events

11.1.1 サーバー通信の2つの仕組み

11.1.2 Server-Sent Eventsとは?

11.1.3 EventSourceオブジェクトの使い方

11.1.4 サーバープログラムを用意する

11.1.5 EventSourceを利用する

11.1.6 EventSourceに用意されているイベント

11.1.7 独自イベントの利用

11.1.8 独自イベントを利用する

11.1.9 サーバーアクセスとonmessage

11.1.10 クッキーを利用して情報を受け渡す

11.2 Web Socketの利用

11.2.1 Web Socketとは?

11.2.2 Jettyについて

11.2.3 Eclipseについて

11.2.4 Web Socketプログラムのプロジェクトを作成する

11.2.5 サーバークラスの作成

11.2.6 WebSocketクラスの作成

11.2.7 HTMLファイルを用意する

11.2.8 サーバープログラムの実行

11.2.9 サーバーアクセスの流れ

11.2.10 簡易チャットシステムを作る

11.2.11 メッセージ一時預かりシステム

Chapter 12 ハードウェアアクセス

12.1 Geolocation APIの利用

12.1.1 Geolocation APIの基本

12.1.2 getCurrentPositionで現在位置を取得する

12.1.3 例外時の処理について

12.1.4 GPSを利用する

12.1.5 watchPositionメソッドで定期的にGPS値を取得し続ける

12.1.6 接続時のオプションについて

12.1.7 連続した位置の計測を行う

12.1.8 GPSを元にマップを表示する

12.2 加速度センサー

12.2.1 加速度センサーとDeviceOrientation Event

12.2.2 ondeviceorientationイベント

12.2.3 ondeviceorientationイベントを利用する

12.2.4 ondevicemotionイベントの利用

12.2.5 ondevicemotionを利用する

12.3 HTML Media Capture

12.3.1 <input type="file">の拡張

12.3.2 acceptとcapture属性

12.3.3 スマートフォンでの対応について

12.3.4 FileオブジェクトとMediaFileオブジェクト

12.3.5 MediaFileDataオブジェクトを利用する

PR

MCJ ASSOCIATED COMPANY