前回は、統一されたブラウザ仕様の策定が目的であるHTML5概要についてまとめた。ここでは、History APIやApplicationCacheを利用したWebアプリケーションの開発方法について解説する。
１ History API
History APIとは
History APIはJavaScriptからブラウザのURLや履歴情報を操作するためのAPIである。これを利用すれば、ページ遷移を発生させずにURLのパスを任意のものに差し替えることができる。
ハッシュフラグメント
- AJAXアプリケーションとハッシュフラグメント：ハッシュフラグメント（URLの#以降の文字列）にページの状態を持つことで、アプリケーションの特定の状態に一意なURLを割り当て可能となる
- ハッシュフラグメントとクローラ：クローラとの相性が悪いため、「#!」を「?_escaped_fragment_」というパラメータに置換してサーバへアクセスするという仕様を使っている
インタフェース
History APIの主な機能は、historyオブジェクトとpopstateイベントである。historyオブジェクトはwindowオブジェクトが持つプロパティで、履歴情報の操作を担当する。popstateイベントはページ履歴をたどったときに発火するイベントで、popstateイベントを監視してページの状態を復元する処理などを実装する。
- ページ履歴の保存：pushStateメソッドを利用することでページ遷移を発生させず、ハッシュフラグメントを使わずにURLを適切な状態に更新できる
- ページ履歴の異動：JavaScriptを使ってページ履歴を行き来するには、historyオブジェクトのbackメソッドやforwardメソッドを利用する
- ページ状態の復元：ページ状態を復元するにはpopstateイベントを監視してページの状態を適切に更新する処理を実装する
- より詳細なページ状態の復元：pushStateの第1引数を利用することで、URLが保持する情報よりも詳細な状態の管理ができる
- ページ履歴の差し替え：replaceStateメソッドを利用することで、表示中の履歴情報を上書きすることができる
- historyオブジェクトのプロパティ一覧：length（履歴の総数）、state（現在の状態を表すオブジェクト）など
２ ApplicationCathe
キャッシュ管理について
本節で紹介するキャッシュマニフェストやApplicationCache APIを利用すると、従来はブラウザ任せであったキャッシュファイルの管理をアプリケーション開発者側で制御できるようになる。通信回線が貧弱なスマートフォン対応には必須の知識である。
キャッシュマニフェスト
- キャッシュマニフェストの作成：キャッシュのルールを記述したキャッシュマニフェストと呼ばれるテキストファイルを作成することで、キャッシュするファイルとしないファイルの設定ができる。text/cache-manifestというMIME Typeで配信する必要がある
- キャッシュの更新：キャッシュのルールに変更がない場合でもキャッシュマニフェストの更新は必須である。サーバサイドでファイル更新を行っても更新後初めてのアクセスではブラウザには古いキャッシュが表示されている
- NETWORKセクション：キャッシュマニフェストにNETWORK: と記述すると、それ以降の行はNETWORKセクションとして扱われる。NETWORKセクションに記述されたリソースはキャッシュされず、常にネットワーク経由でのアクセスが行われる
- FALLBACKセクション：キャッシュマニフェストにFALLBACK: と記述すると、それ以降の行はFALLBACKセクションとして扱われる。FALLBACKセクションではあるリソースにアクセスできなかった場合の代替リソースを指定できる
ApplicationCache API
ApplicationCache APIを用いると、キャッシュ更新のタイミングを細かく制御できる。ApplicationCache APIの各種機能は、windowオブジェクトに定義されたapplicationCacheオブジェクトを介して利用できる。
- キャッシュの更新確認：applicationCache.updateメソッドを利用すれば、ページ起動時以外の任意のタイミングで更新確認を行うことができる
- キャッシュの反映：updatereadyイベントの発生後にapplicationCache.swapCacheメソッドを実行すると、バックグラウンドでキャッシュが最新のものに切り替わる。しかし表示中のページで既に参照済みのリソースについてはそのまま利用され続ける
オンラインとオフライン
アプリケーションキャッシュを利用することで、オフライン時でもキャッシュされた情報の閲覧ができるアプリケーションが実現できる。オフライン時に行ったデータ更新系の操作をブラウザ上で利用できるデータベースに一旦保存しておき、オンラインになったタイミングでサーバと同期をとることによって、オフライン状態でのデータ更新系の機能が実現できる。
ネットワークの接続状態を知るには、navigator.onLineを参照する。また接続状態が切り替わるタイミングを知るには、online/offlineイベントを監視する。
最後に
WebアプリケーションのURL管理やオフライン対応には、HTML5の仕様として新たに組み込まれたHistory APIやApplicationCacheを利用することで実現できる。History APIはJavaScriptからブラウザのURLや履歴情報を操作するためのAPIである。ApplicationCache APIはキャッシュ更新のタイミングを細かく制御できる。
次回は、Drag Drop APIやFile APIといったデスクトップ連携について解説する。
 |
