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