徹底解説 HTML5 APIガイドブック オフライン系API編

概 要

オフライン状態のローカル環境でも動作するWebアプリに欠かせないHTML5 API群の仕様と使い方のガイドブックです。クラウドサービスと言えば、メインの処理をサーバサイドで行いブラウザはプレゼンテーションレイヤとしての役割を果たすという考えが常識でしたが、本書で紹介するWebStrageやWeb SQL Databeseなどのオフライン系APIでは、PCリソースをクラウドの部品としデータベースをブラウザが持つような動作を可能にします。データの管理と処理系を分散させることで、オフラインでもWebサイトを利用可能にし、サイトの高速化をはかれると期待されており、本書でもその視点から、APIの仕様やサンプルアプリを解説しています。

著者 小松健作
価格 本体2600円(税別)
ISBN 978-4-7980-3126-2
発売日 2011/10/26
判型 B5変
色数 2色
ページ数 288
CD/DVD
対象読者 中級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

第1章 オフライン系APIの概要

1.1 Webの進化

活版印刷以来の大発明

ドキュメントビューアーからアプリケーションプラットフォームへ

HTML5の登場で格段に向上した表現力

1.2 Webのオフライン対応

オフライン系APIで提供される機能

1.3 HTML5での位置づけ

HTML WGとWebApps WG

1.4 ユースケース

オフライン系APIの利用例

1.5 本書の構成と注意点

本書の構成

注意点

第2章 WebStorage

2.1 概要

WebStorageを構成する二つのAPI

ブラウザの対応状況

2.2 localStorageの利用方法

概要

利用イメージ

管理ツールを用いた確認

プロパティアクセスとメソッドアクセスの違い

オブジェクトの取り扱い

時系列データを取り扱う場合

storageイベント

2.3 sessionStorageの利用方法

概要

2.4 制限事項

容量の制限

オリジンの制限

2.5 セキュリティ上の注意事項

ブログサービスでの注意事項

外部スクリプトからのアクセスに対する注意事項

2.6 APIリファレンス

WebStorageのプロパティ/メソッド

StorageEvent発生時のイベントのプロパティ

第3章 Web SQL Database

3.1 概要

仕様化検討は中止

ブラウザの対応状況

3.2 典型的な利用方法

Web SQL Database利用のステップ

データベースのオープン

スキーマの定義

SQLの実行

管理ツールを用いた確認

3.3 同期APIを用いたコーディング

非同期APIのデメリット

同期APIの注意事項

同期APIを用いたコーディング

3.4 スキーマのバージョン管理

changeVersion()の利用法

3.5 制限事項とセキュリティモデル

制限事項

セキュリティモデル

3.6 APIリファレンス

Web SQL Databaseのプロパティ/メソッド

SQL結果オブジェクトのプロパティ

SQL結果から値を取得するプロパティ/メソッド

エラー時のプロパティ

第4章 Indexed Database

4.1 概要

Web SQL Databaseのカウンタープロポーザル

ブラウザの対応状況

4.2 利用方法

データベースとオブジェクトストア

オブジェクトストアの保存形式

Indexed Databaseの利用フロー

データベースのオープン

バージョンのセット

オブジェクトストアの作成

キー指定によるデータ操作

インデックス指定によるデータ操作

ベンダープレフィックスへの対応

サンプルコード

4.3 APIリファレンス

IDBFactoryのプロパティ/メソッド

ハンドラのイベントオブジェクト

データベースオブジェクト

オブジェクトストアのオブジェクト

カーソルのオブジェクト

トランザクションのオブジェクト

インデックス操作時の範囲オブジェクト

エラーオブジェクト

第5章 File API: Directories and System

5.1 概要

これまでのFile APIとの違い

ブラウザの対応状況

5.2 利用方法

File System APIの利用フロー

ファイルシステムを開く

ファイルの作成などを行う

ディレクトリの作成などを行う

ファイルの読み込みや書き込み

Drag & Drop APIやFile Reader APIとの連携

クロスブラウザ対応

サンプルアプリケーション

5.3 同期型APIの利用

概要

サンプルコード

5.4 APIリファレンス

非同期型APIのファイルシステム要求

同期型APIのファイルシステム要求

Entryオブジェクトのプロパティ/メソッド

DirectoryEntryオブジェクトのプロパティ/メソッド

DirectoryReaderオブジェクトのプロパティ/メソッド

FileEntryのプロパティ/メソッド

FileErrorのエラーコード

第6章 Application Cache

6.1 概要

オフライン時に利用できるキャッシュ

ブラウザの対応状況

6.2 利用方法

マニフェストファイル

マニフェストファイルの注意事項

3つのセクション

6.3 Application Cahceの処理フロー

処理フローと注意事項

6.4 イベントハンドラを用いたApplication Cacheの制御

updatereadyオブジェクト

6.5 Application Cacheを用いた読み込み時間の短縮

モバイル環境で有用なテクニック

6.6 APIリファレンス

Application Cacheのプロパティ/メソッド

第7章 Browser state

7.1 概要

ネットワーク接続状態を検出するAPI

ブラウザの対応状況

7.2 利用方法

接続状態の取得

接続状態の変化の検知

注意事項

第8章 Javascriptコーディング技法

8.1 はじめに

様々な知識が要求される「オフラインWebアプリのプログラミング」

分散データベースへの考慮

クラウドサービスの拡張への考慮

マルチデバイスへの考慮

本章で解説する技法

8.2 jQueryを用いたDOMの操作

DOMの基本

複数の要素に対するDOM操作

特定の条件にマッチしたclassへのDOM操作

jQueryの導入

jQueryを用いたコーディングの基本

メソッドチェーン

8.3 イベントハンドラを用いた非同期コーディング

イベントハンドラの基本

動的なイベントハンドラ

8.4 jQuery、Underscore.jsを用いたイテレーターの活用

イテレーターの基本

jQueryでのイテレーターの活用

高速化のプラクティス

8.5 Ajaxプログラミング

Ajaxの基本

jQueryを用いたAjax

8.6 MVCモデルについて

MVCモデルの考え方

MVCモデルとオフラインWebアプリケーション

8.7 templateの利用

View部分の問題点

テンプレート利用の基本

テンプレート部分をHTMLに記述する方法

8.8 Fragment Identifierを用いたルーティング

一般的なJavascriptプログラミングの問題点

Fragment Identifierを用いたルーティング

Fragment Identifier利用の注意点

8.9 Javascriptでのオブジェクト指向プログラミング

クラスライブラリの定義の基本

Javascriptでのクラスライブラリの定義

ハッシュによる表記とメソッド表記

8.10 イベントハンドラでオブジェクトを利用する際の注意点

イベントハンドラでオブジェクトを利用する際の問題点

_.bindAll()を用いた解決法

8.11 カスタムイベントの活用

本節でのゴール

データがJavascript内に事前に書いてある場合の例

Ajax対応の例

カスタムイベントを利用する例

第9章 ローカルのみで動作するオフラインアプリ

9.1 サンプルアプリケーションのサービス仕様

アプリケーションの概要

アプリケーションの操作方法

ソフトウェア構成の概要

メモのデータ仕様

9.2 サイトアクセス時の詳細フロー

サイトアクセス時のシーケンス

メモデータの初期化

イベントハンドラの指定

MemoViewの初期化

NavViewの初期化

初期画面の描画(メモ部分)

初期画面の描画(ナビゲーションメニュー部分)

9.3 新規作成時の詳細フロー

新規作成時のシーケンス

新規作成時のフロー

9.4 メモの閲覧時の詳細フロー

メモの閲覧時のシーケンス

メモの閲覧フロー

9.5 タイトルの変更時の詳細フロー

タイトル変更時のシーケンス

タイトルの変更フロー

9.6 本文の変更時の詳細フロー

本文変更時のシーケンス

本文の変更フロー

9.7 メモの削除時の詳細フロー

メモの削除時のシーケンス

メモの削除フロー

第10章 サーバーと同期して動作するオフラインアプリ

10.1 データ同期の仕組みの概要

データ同期の基本モデル

分散データ管理を念頭においた拡張モデル

10.2 全体のフロー

サンプルアプリケーションのフロー

10.3 サイトアクセス時の詳細フロー

サイトアクセス時のシーケンス

初期化

UUIDの取得

閲覧用のデータオブジェクト生成

10.4 新規作成時の詳細フロー

新規作成時のシーケンス

新規作成フロー

10.5 メモの閲覧時の詳細フロー

メモ閲覧時のシーケンス

メモ閲覧フロー

10.6 メモの更新時の詳細フロー

メモ更新時のシーケンス

メモ更新フロー

10.7 メモの削除時の詳細フロー

メモ削除時のシーケンス

メモ削除フロー

10.8 定期的なサーバーとの同期

サーバーとの同期時のシーケンス

操作データの送信

全ブラウザからの操作データの受信

10.9 サーバーのコードサンプル

準備

サーバーのコード

第11章 モバイル対応

11.1 モバイルでのサービス仕様の変更

前章サンプルの問題点

モバイルでの画面遷移仕様

11.2 viewportを用いた画面サイズの自動変更

デバイスサイズに応じた画面サイズの変更

11.3 Media Queriesを用いたレイアウト変更

必要な処理

CSS3 Media Queriesを用いた処理

さらに細かくサイズを指定したい場合

11.4 screen.widthを用いた機能の変更

動的なCSSの変更

11.5 サイズを用いた分岐処理の利点

初期段階からイメージを持つことの重要性

資料A Offline対応メモ帳アプリのサンプルコード

A.1offline_sample.html

A.2 stylesheets/style_offline.css

A.3 javascripts/init.js

A.4 javascripts/models/memo_enhanced.js

A.5 javascripts/models/operation.js

A.6 javascritps/offline_sample.js

資料B Underscore.js

B.1 Collections

B.2 Arrays

B.3 Functions

B.4 Utility Functions

B.5 Chaining

PR

秀和システム