HTML5.JP

Ads

W3C - Offline Web Applications 日本語訳

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

概要

この文書は、HTML 5 で規定されているオフラインWebアプリケーションの機能が簡単にまとめられたチュートリアルです。オフラインWebアプリケーションの用途や、具体的な使い方まで、わかりやすく解説されています。

日本語訳

Offline Web Applications

W3C Working Group Note 30 May 2008

This Version:
http://www.w3.org/TR/2008/NOTE-offline-webapps-20080530/
Latest Version:
http://www.w3.org/TR/offline-webapps/
Editors:
Anne van Kesteren (Opera Software ASA) <annevk@opera.com>
Ian Hickson, Google, Inc.

要約

HTML 5 はオフライン中に動作するWebアプリケーション構築の難題に焦点をあてたいくつかの機能を持っています。本文書はHTML 5のこれらの機能(SQL, online/offlineイベントや状態に加え、offline application caching API, そして localStorage API)にスポットを当てます。そして、オフラインで動作するWebアプリケーションを構築するためにこれらの機能をどのように使うのかについて簡単なチュートリアルを提供します。[HTML5]

本文書の状態

このセクションでは、発行時における本文書の状態を説明します。本文書は他の文書によって置き換えられるかもしれません。現在のW3Cの発行物の一覧と最新のこの技術レポートは、http://www.w3.org/TR/ の W3C technical reports index をご覧ください。

Offline Web Application は、HTML Activity の一部である HTML Working Group によって作成された Working Group Note です。コメントがあれば、公開アーカイブ があるメーリングリスト public-html-comments@w3.org までどうぞ。

Working Group Note としての発行物はW3C会員による承認を意味するものではありません。これは草案文書であり、更新されるかもしれません。また、他の文書に置き換えられたり廃止されるかもしれません。進行中の作業であることを前提とせずに本文書を引用するのは適切ではありません。

本文書は、5 February 2004 W3C Patent Policyに基づき運営するグループによって作られました。W3Cは、グループの成果物に関連して作られたpublic list of any patent disclosuresをメンテナンスしています。そのページには、特許を開示する方法も掲載されています。Essential Claim(s)を含むと信じる特許の実知識を持つ個人は、section 6 of the W3C Patent Policyに従って情報を開示しなければいけません。

目次

1. はじめに

典型的なオンラインのWebアプリケーションのユーザーは、インターネットに接続している間だけ、そのアプリケーションを使うことができます。オフライン時にはメールもチェックできず、カレンダーでアポイントメントをチェックできません。また、オンラインツールでプレゼンテーションも準備できません。一方、ネイティブなアプリケーションはそれらの機能を提供します。メールクライアントはローカルにフォルダをキャッシュし、カレンダーはローカルに出来事を保存し、プレゼンテーションパッケージはローカルにデータファイルを保存します。

さらに、オフラインの間、最新のコピーを得るためにサーバに接続できないため、ユーザーはアプリケーションを取得するにあたりHTTPキャッシュに完全に依存してしまいます。

HTML 5 仕様は、これに対する2つのソリューションを提供します。ローカルにデータを保存する SQL-based database API と、ユーザーがネットワークに接続していないときでもアプリケーションが確実に利用できるようにする offline application HTTP cache です。

2. SQL

HTML 5 のクライアント側SQLデータベースは、構造化されたデータストレージを実現します。これは、メールアプリケーションであればローカルにメールを保存するのに使うことができます。また、オンライン・ショッピング・サイトであれば、カート用に利用することができます。このデータべースを操作するAPIは、ユーザーインタフェースがロックされないよう、非同期となっています。同時に複数のブラウザーウィンドウでデータベース操作が発生する可能性があるため、このAPIはトランザクションをサポートします。

データベースオブジェクトを生成するためには、Window オブジェクトの openDatabase() メソッドを使います。このメソッドには4つの引数を与えます。データベースに保存するデータのデータベース名、データベースバージョン、表示名、見積もりサイズ(バイト)です。例を以下に示します。

var db = openDatabase("notes", "", "The Example Notes App!", 1048576);

この時点で、このデータベース上で、transaction() メソッドを使うことができます。transaction メソッドには3つの引数を与えます。トランザクション・コールバック、エラー・コールバック、そして、サクセス・コールバックです。トランザクション・コールバックは、executeSQL() メソッドが利用できる SQLトランザクション・オブジェクトを受け取ります。このメソッドには1つから4つまでの引数を与えます。SQLステートメント、引数、SQLステートメント・コールバック、そしてSQLステートメント・エラー・コールバックです。SQLステートメント・コールバックはトランザクション・オブジェクトとSQLステートメントの結果オブジェクトを受け取ります。SQLステートメントの結果オブジェクトから、行へアクセスしたり、最終の挿入ID等を得ることができます。

次のコードを追加して、メモ帳のアプリケーション用の基盤を完成させましょう。

function renderNote(row) {
  // メモをどこかに表示する
}
function reportError(source, message) {
  // エラーを報告する
}

function renderNotes() {
  db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', 
      []);
    tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {
      for(var i = 0; i < rs.rows.length; i++) {
        renderNote(rs.rows[i]);
      }
    });
  });
}

function insertNote(title, text) {
  db.transaction(function(tx) {
    tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
      function(tx, rs) {
        // …
      },
      function(tx, error) {
        reportError('sql', error.message);
      });
  });
}

3. Offline Application Caching API

ユーザーがネットワークに接続していなくても確実にWebアプリケーションを利用できるようにするメカニズムは、html 要素の manifest 属性です。

この属性はマニフェストにURIをとります。このURIは、キャッシュすべきファイルを指定するものです。マニフェストのMIMEタイプは text/cache-manifest です。代表的なファイルはこのようになります。

CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png

NETWORK:
server.cgi

このファイルはいくつかのキャッシュすべきファイルを指定しており、そして、server.cgi をキャッシュしてはいけないことを指定しています。これで、そのファイルにアクセスしようとしても、キャッシュをバイパスします。

次に示すように、(HTML)アプリケーションで宣言して、マニフェストをリンクすることができます。

<!DOCTYPE HTML>
<html manifest="cache-manifest">
...

server.cgi ファイルはホワイト・リスト方式でリストされます(NETWORK: セクションに置く)。こうすることで、サーバから最新版を取得するようになります。

<event-source src="server.cgi">

event-source 要素は、サーバがWebページに更新情報を連続的に流すことができるようにする HTML 5 の新機能です。)

アプリケーション・キャッシュ・メカニズムは、オフライン時にフォールバックぺージを表示することで、共通のプレフィックスに一致するファイルのグループを日和見的に(サーバから)キャッシュする方法もサポートしています。また、スクリプトから動的にキャッシュからエントリーを追加したり削除する方法や、アップデート中に任意にカスタムUIを表示して、アプリケーションから自動的に新たなファイルにキャッシュをアップデートする方法も提供します。

以上のAPIに加えて、HTML 5 は Navigator オブジェクト に onLine 属性を規定しています。この属性から、現在オンラインかどうかを判定することができます。

var online = navigator.onLine;

この属性の変更は、Window オブジェクトで発生する onlineoffline イベントを通して通知されます。

簡単に非同期にストレージにアクセスできるよう、HTML 5 は Window オブジェクトの localStorage 属性を取り入れています。

localStorage["status"] = "Idling.";

リファレンス

[HTML5] (作業中)
HTML 5, I. Hickson, editor. WHATWG, 2008.
Web Forms 2.0, I. Hickson, editor. WHATWG, October 2006.
HTML 5, I. Hickson, D. Hyatt, editors. W3C, 2008.
Web Forms 2.0, I. Hickson, editor. W3C, October 2006.

謝辞

The editors would like to thank Chris Wilson, Dion Almaer, James Graham, Julian Reschke, Henri Sivonen, Patrick D. F. Ion, and Philip Taylor for their contributions to this document. Also thanks to Dan Connolly for talking us into writing it during the first HTML WG meeting (in Boston).

サイト運営者情報 | プライバシーポリシー | 当サイトのご利用条件 | お問い合わせ | サイトマップ
Copyright © 2007-2011 Futomi Hatano (@futomi) All Rights Reserved.