この連載について

HTML 5 は大きな話題になっている技術ですが、それには十分な理由があります。HTML 5 は、デスクトップ・アプリケーションの機能をブラウザー上で実現する上での技術的な転換点となるものだからです。HTML 5 は、従来のブラウザーにさまざまな可能性をもたらしてくれますが、それ以上に大きな可能性をモバイル・ブラウザーにもたらしてくれます。さらに良いことに、最も一般的なモバイル・ブラウザーは HTML 5 仕様の重要な部分の多くを既に採り入れて、実装しています。この 5 回連載の記事では、そうした HTML 5 を構成する新機能のいくつかを詳細に調べます。これらの機能はモバイル Web アプリケーションの開発に大きな影響を与える可能性があります。この連載の各記事では、実際に動作するモバイル Web アプリケーションを作成し、iPhone や Android ベースの機器に見られるような最新のモバイル Web ブラウザーで利用できる HTML 5 の機能を紹介します。

上に戻る

前提条件

この記事では、最新の Web 技術を使用して Web アプリケーションを作成します。ここで紹介するコードの大部分は単なる HTML と JavaScript、そして CSS であり、すべての Web 開発者にとってコアとなる技術です。記事の内容に従うために必要なもののうち、最も重要なものはテストを実行する際に使用するブラウザーです。この記事のコードの大部分は最新のデスクトップ・ブラウザーで実行しますが、いくつか明らかな例外があります。もちろん、モバイル・ブラウザーでもテストする必要があり、そのために iPhone と Android の最新 SDK が必要です。この記事では iPhone SDK 3.1.3 と Android SDK 2.1 を使用しました。リンクは「参考文献」セクションを参照してください。

上に戻る

なぜオフラインでアプリケーションを動作させるのか

オフラインの Web アプリケーションは、いくつかの理由からユーザーと開発者の両方にとって魅力的です。多くの開発者にとって、プラットフォームごとにネイティブ・アプリケーションを作成するよりも、非常に人気のあるスマートフォンの全機種で動作する 1 つの Web アプリケーションを作成する方が好ましいはずです。ただし開発者にとって都合が良いからといって、ユーザーがそれを求めているとは限りません。モバイル Web アプリケーションをユーザーにとっても好都合なものにするためには、ネイティブのモバイル・アプリケーションで提供される機能と同じ機能の多く (あるいはその大部分) をモバイル Web アプリケーションで提供できる必要があります。もちろん、オフライン動作はそうした機能の 1 つです。一部のアプリケーションはインターネットから得られるデータやサービスに大きく依存し、それはモバイル Web アプリケーションかネイティブ・アプリケーションかを問いません。そうしたアプリケーションでは、インターネットへの接続が良好でなければ機能が低下するのは当然です。ただし接続が良好でないからといってアプリケーションがまったく動作しないようでは困ります。しかし従来の Web アプリケーションでは完全に動作しなくなってしまいます。

オフライン機能によって、モバイル Web アプリケーションはネイティブ・アプリケーションに近いものになります。オフライン機能には他にもメリットがあります。Web ブラウザーは従来から、静的なリソースを必ずキャッシュしてきました。Web ブラウザーは Web サーバーから送信される HTTP レスポンス・ヘッダーのメタデータを利用することで、ページの描画に必要な HTML、JavaScript、CSS、画像を取得しています。ページの描画に必要なものがすべてキャッシュされていると、そのページのロードは非常に速くなります。ただしキャッシュされていないものが何かあると、すべてが劇的に遅くなります。そうしたことはユーザーの期待に反して頻繁に発生します。場合によると、1 つの CSS ファイルと他のすべての CSS ファイルとで Cache-Control ヘッダーが異なっていたり、あるいは割り当てスペースが足りなくなった結果、ブラウザーがキャッシュをクリアーしたり、といったことが起こります。

オフライン・アプリケーションの場合には、必ずすべてがキャッシュされます。ブラウザーは必ずキャッシュからすべてをロードしますが、キャッシュからロードしてはならないものをユーザーが制御することもできます。Ajax でよく使われる細工として、Ajax の GET リクエストに余分なタイムスタンプ・パラメーターを追加し (もっと悪質な方法としては GET を使用することが適切な場合に POST を使用し)、ブラウザーにレスポンスをキャッシュさせない方法があります。こうした細工はオフライン対応の Web アプリケーションには必要ありません。

そう聞くとオフライン・アプリケーションは素晴らしいものに思えるので、作成は複雑に違いないと思う人がいるかもしれません。しかし実は非常に簡単なのです。オフライン・アプリケーションを作成するためには、以下の 3 つを行う必要があります。

1. オンライン・マニフェスト・ファイルを作成する
2. このマニフェスト・ファイルに関してブラウザーに指示をする
3. サーバーで MIME タイプを設定する

上に戻る

オフラインのマニフェスト・ファイル

オフライン・アプリケーションでは、重要なファイルが 1 つあり、それがアプリケーションのキャッシュ・マニフェスト・ファイルです。このファイルによって、正確に何をキャッシュする必要があるか (あるいはオプションとして、何をキャッシュすべきでないか) をブラウザーに指示します。このファイルはアプリケーションに関する事実を記載したソースとなります。リスト 1 は単純なキャッシュ・マニフェスト・ファイルの例を示しています。

CACHE MANIFEST
# Version 0.1
offline.html
/iui/iui.js
/iui/iui.css
/iui/loading.gif
/iui/backButton.png
/iui/blueButton.png
/iui/cancel.png
/iui/grayButton.png
/iui/listArrow.png
/iui/listArrowSel.png
/iui/listGroup.png
/iui/pinstripes.png
/iui/redButton.png
/iui/selection.png
/iui/thumb.png
/iui/toggle.png
/iui/toggleOn.png
/iui/toolbar.png
/iui/whiteButton.png
/images/gymnastics.jpg
/images/soccer.png
/images/gym.jpg
/images/soccer.jpg

このファイルには、アプリケーションが適切に動作するために必要なファイルがすべて含まれています。そうしたファイルには、HTML ファイル、JavaScript、CSS、画像などがあります。また動画や PDF、XML ファイルなどが含まれる場合もあります。この例に示されている URL がすべて相対 URL であることに注意してください。相対 URL はすべて、キャッシュ・マニフェスト・ファイルに対する相対 URL でなければなりません。この場合では、キャッシュ・マニフェスト・ファイルは Web アプリケーションのルート・ディレクトリーにあります。リスト 2 のディレクトリー構造をリスト 1 の相対 URL と比較してみてください。

  Name
V images
    gymnastics.jpg
    soccer.png
V iui
    backButton.png
    blueButton.png
    cancel.png
    grayButton.png
    iui.css-logo-touch-icon.png
    iui.css
    iui.js
    iuix.css
    iuix.js
    listArrow.png
    listArrowSel.png
    listGroup.png
    loading.gif
    pinstripes.png
    redButton.png
    selection.png
    thumb.png
    toggle.png
    toggleOn.png
    toolbar.png
    toolButton.png
    whiteButton.png
  manifest.mf
  offline.html
> WEB-INF

このアプリケーションが iUI フレームワークを使用していることにお気付きなのではないでしょうか。iUI フレームワークは、モバイル Web アプリケーションで iPhone のネイティブ・アプリケーションのルック・アンド・フィールを実現するための JavaScript+CSS キットとしてよく使われています。リスト 1 とリスト 2 とを比べるとわかるように、このフレームワークの JavaScript ファイルと CSS ファイルでは、画像をいくつか使用しています。しかしこれらのファイルは、マニフェスト・ファイルに記載されている限りブラウザーによってすべてキャッシュされ、オフライン・モードで使用することができます。

リスト 1 を見て気付く、もう 1 つの重要なものがバージョン情報です。このバージョン情報は HTML5 仕様の一部ではありません。実際、この情報はファイルの中のコメントにすぎません。しかし、このような情報を含めることは重要です。こうした情報をファイルに含めることによって、アプリケーションの新バージョンがあることをブラウザーに伝えるのです。例えば、何らかの HTML や JavaScript、さらには 1 つだけ画像を変更したとします。もしマニフェスト・ファイルの内容を変更しないと、ブラウザーは変更されたリソースの新バージョンをロードしようとしません。キャッシュ・マニフェスト・ファイルには有効期限がないため、ユーザーがキャッシュをクリアーしないと、またはマニフェスト・ファイルの変更をクリアーしないと、すべてがキャッシュされたまま保持されます。ブラウザーは新しいマニフェスト・ファイルがないかどうかを調べます。新しいマニフェスト・ファイルがあることを示すためには、既存のマニフェスト・ファイルに何らかの変更を加えます。ページの HTML ファイルを変更する例に戻ると、HTML を変更してマニフェスト・ファイルのバージョン・ストリングを変更すると、ブラウザーはリソースが変更されたこと、そしてそれらのリソースを再度ダウンロードする必要があることを認識します。コメントの中にバージョン番号を記入しておくと、リソースのライフサイクルを容易に管理することができます。

上に戻る

マニフェスト・ファイルに関してブラウザーに指示する

Web アプリケーションのオフライン・キャッシュを有効にする上では、もう 1 つ欠けているものがあります。Web ブラウザーは、ユーザーがキャッシュの有効化を望んでいることを認識し、どこにキャッシュ・マニフェスト・ファイルがあるのかを把握しなければなりません。リスト 3 は、それを非常に容易に行う方法を示しています。

<!DOCTYPE html>
<html>
<html manifest="manifest.mf">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; 
        maximum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-touch-fullscreen" content="YES" />
    <link rel="apple-touch-icon" href="/iui/iui-logo-touch-icon.png" />
    <style type="text/css" media="screen">@import "/iui/iui.css";</style>
    <script type="application/x-javascript" src="/iui/iui.js"></script>
    <title>Let's do it offline</title>
</head>
<body>
    <div class="toolbar">
        <h1 id="pageTitle">Going offline</h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <ul id="menu" title="Sports" selected="true">
        <li><a href="#gym"><img height="80" width="80" 
src="/images/gym.jpg" align="middle"/>
            <span style="display:inline-block;
 vertical-align:middle">Gymnastics</span></a></li>
        <li><a href="#soccer"><img src="/images/soccer.jpg" 
align="middle"/>
        <span style="display:inline-block; 
vertical-align:middle">Soccer</span></a></li>
    </ul>
    <div id="gym" title="Gymnastics" class="panel">
        <img src="/images/gymnastics.jpg" alt="Boys Gymnastics"/>
    </div> 
    <div id="soccer" title="Soccer" class="panel">
        <img src="/images/soccer.png" alt="Boys Soccer"/>
    </div>
</body>
</html>

この HTML で最も重要な点は、ルートにある html 要素です。この要素に manifest という属性があることに注意してください。この属性によって、この Web ページがオフラインで動作できることをブラウザーに伝えます。マニフェスト・パラメーターの値は、この Web ページのキャッシュ・マニフェスト・ファイルの URL です。この URL も、完全な URL の場合もありますが、この例では (指定の Web ページに対する) 相対 URL です。ここでもう 1 つ注意する点は、このページの DOCTYPE です。この DOCTYPE は HTML 5 Web ページに対する正式な DOCTYPE です。オフライン Web アプリケーションの仕様では、この DOCTYPE を使うようにという指示はありません。しかし皆さんには、この DOCTYPE を使うことをお勧めします。この DOCTYPE を使わないと、一部のブラウザーはそのページが HTML5 のページだと認識せず、キャッシュ・マニフェスト・ファイルを無視する可能性があります。この HTML の他の部分は iUI の使い方を示した簡単な例にすぎません。図 1 は、このページを iPhone シミュレーターで表示した場合を示しています。

オフライン・アプリケーションのテストは少し面倒です。可能であれば、Web サーバーにアプリケーションをデプロイするのが最も簡単なテスト方法です。そしてそのページに 1 度アクセスし、インターネット接続を切断し、再度そのページにアクセスを試みます。何かが失敗する場合には、何らかのファイルをキャッシュ・マニフェスト・ファイルで指定するのを忘れている可能性があります。このアプリケーションを試す前に、Web サーバーの構成に 1 つ重要な変更を加える必要があります。

上に戻る

Web サーバーの構成

リスト 3 では、Web ページのルート html 要素の manifest 属性を使用することでキャッシュ・マニフェスト・ファイルの場所を示しました。しかしキャッシュ・マニフェスト・ファイルの仕様によれば、ブラウザーがキャッシュ・マニフェスト・ファイルをダウンロードして処理する際には、ブラウザーは追加の検証ステップを実行する必要があります。ブラウザーはキャッシュ・マニフェスト・ファイルの MIME タイプをチェックする必要があり、そのタイプは text/cache-manifest でなければなりません。このために通常必要となるのは、静的ファイルにこの MIME タイプを設定するように Web サーバーを構成するか、あるいは動的に作成したファイルにこの MIME タイプを設定するようなコードを作成するかのいずれかです。前者の方法の方が明らかに効率的ですが、サーバーの構成を制御できない場合には (サーバーが共有環境やホスト環境にある場合など)、後者の方法を行わなければならない場合があります。サーバーを制御することができ、Java™ アプリケーション・サーバーを使用している場合には、MIME タイプの設定を Web アプリケーションの web.xml ファイルの一部として構成することができます。リスト 4 はこの例を示しています。

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<!-- Servlets go here -->
    <mime-mapping>
        <extension>mf</extension>
        <mime-type>text/cache-manifest</mime-type>
    </mime-mapping>    
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

ここで重要な部分は当然ながら mime-mapping 要素です。このリストでは、.mf 拡張子で終わるすべてのファイルのMIME タイプを text/cache-manifest にするように指示しています。もちろん、そうしたファイルは、静的コンテンツを提供することに特化したサーバー (Apache Web サーバーなど) から提供した方が一層効率的です。標準的な Apache Web サーバーでは、httpd/conf ディレクトリーにある mime.types ファイルを修正するだけでよいはずです。

# This file controls what Internet media types are sent to the client for
# given file extension(s).  Sending the correct media type to the client
# is important so they know how to handle the content of the file.
# Extra types can either be added here or by using an AddType directive
# in your config files. For more information about Internet media types,
# please read RFC 2045, 2046, 2047, 2048, and 2077.  The Internet media type
# registry is at <http://www.iana.org/assignments/media-types/>.

# MIME type                     Extensions
text/cache-manifest             mf
# many more mappings...

どちらの例でも、マニフェスト・ファイルの拡張子に mf を使っています。これはマニフェスト・ファイルが manifest.mf であったからです。この拡張子はまったく任意です。構成ファイルの中でマッピングに使用されている拡張子とマニフェスト・ファイルの拡張子が一致している限り、.manifest や .foo のような拡張子も可能です。他のアプリケーションや Web サーバーには他の構成メカニズムも使えることに注意してください。これで HTML 5 を使ってオフラインのモバイル Web アプリケーションを作成する上で欠かせない要素については説明したので、オフラインのモバイル Web アプリケーションの機能をさらに活用する、もっと複雑な例を見てみましょう。

上に戻る

高度な例

先ほどの例では、すべてのコンテンツは静的であり、オフライン・モードですべてを表示できるのは便利でした。より一般的なアプリケーションでは、そのアプリケーションのサーバーや Web サービスから動的にデータを読み込める必要があります。この記事の例をより現実的なものにするために、Twitter から少しデータを読み込むことにします。この連載の前回までの記事を読んでいれば、この話題はおなじみのはずです (「参考文献」を参照)。まず、この例の HTML を変更したものを見てみましょう (リスト 6)。

<body onload="init()">
    <div class="toolbar">
        <h1 id="pageTitle">Going offline</h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <ul id="menu" title="Sports" selected="true">
        <li><a href="#gym">
            <img height="80" width="80" src="/images/gym.jpg" align="middle"/>
            <span style="display:inline-block; vertical-align:middle">Gymnastics</span>
        </a></li>
        <li><a href="#soccer"><img src="/images/soccer.jpg" align="middle"/>
            <span style="display:inline-block; vertical-align:middle">Soccer</span>
        </a></li>
        <li id="online" style="display: none"><img src="/images/online.jpg"/></li>
    </ul>
    <ul id="gym" title="Gymnastics"></ul> 
    <ul id="soccer" title="Soccer"></ul>
</body>

この HTML での主な違いは、gym 要素と soccer 要素がリストになっており、そのリストの中身が空である点です。この 2 つのリストに対し、それぞれ体操とサッカーの話題に関する Twitter のツイートを追加します。また、online という id のリスト項目要素によって画像を表示し、その画像によってアプリケーションがオンラインかオフラインかをユーザーに示していることにも注意してください。ただし、この要素はデフォルトで非表示になっています。つまりデフォルト・モードはオフラインです。body 要素は本体がロードされたら init 関数を呼び出すことを規定しています。リスト 7は、この関数を示しています。

function init(){
    if (navigator.onLine){
        searchTwitter("gymnastics", "showGymTweets");
        searchTwitter("soccer", "showSoccerTweets");
        $("online").style.display = "inline";
    } 
    gymTweets = localStorage.getItem("gymnastics");
    if (gymTweets){
        gymTweets = JSON.parse(gymTweets);
        showGymTweets();
    }
    soccerTweets = localStorage.getItem("soccer");
    if (soccerTweets){
        soccerTweets = JSON.parse(soccerTweets);
        showSoccerTweets();
    }
    document.body.addEventListener("online", function() {
            $("online").style.display= "inline";
            applicationCache.update();
            applicationCache.addEventListener("updateready", function() {
                applicationCache.swapCache();
            }, false);
        }, false);
    document.body.addEventListener("offline", function() {
        $("online").style.display = "none";
    }, false);        
}

このコードではまず、オンラインかオフラインかのチェックを行っています。オンラインの場合には、オンライン用の画像を表示します。もっと重要な点として、オンラインの場合には searchTwitter 関数を呼び出し、Twitter からデータをロードします。これも、JSONP を使ってブラウザーから直接 Twitter を検索するための手法です (この手法については、この連載の前回までの記事で説明しました。「参考文献」を参照)。次に、localStorage から既存のツイートをロードしようとします。localStorage を理解していればわかると思いますが、localStorage もオフライン・モードで非常に便利な HTML 5 の機能の 1 つです。ローカル・ストレージについての詳細は、この連載の第 2 回を調べてください (「参考文献」を参照)。新しい検索 (オンラインであることが検出されると起動されます) の場合も、ローカルに保存されたツイートをロードする場合も、showGymTweets 関数と showSoccerTweets 関数が呼び出されることに注意してください。この 2 つの関数は似ています。リスト 8 は showGymTweets を示しています。

function showGymTweets(response){
    var gymList = $("gym");
    gymList.innerHTML = "";
    if (gymTweets){
        if (response){
            gymTweets = response.results.reverse().concat(gymTweets);
        }
    } else {
        gymTweets = response.results.reverse();
    }
    showTweets(gymTweets, gymList);
    localStorage.setItem("gymnastics", JSON.stringify(gymTweets));
}

この関数は、ローカルに保存されたツイートを表示したり Twitter から取得した新しいツイートを表示したりすることができ、両方が存在する場合には両方を組み合わせて表示することもできます。最も重要な点として、この関数はすべてをローカルに保存し、ツイート・データのローカル・キャッシュを構築します。このコードはすべて、ローカルにキャッシュされたデータとサーバーからのライブ・データの両方を管理するための標準的なコードです。このようにすることによって、アプリケーションはオンラインでもオフラインでもスムーズに動作することができます。

リスト 7 に戻ると、最後にイベント・ハンドラーを登録しています。ここではオンラインのイベントとオフラインのイベントを登録しています。こうすることで、ブラウザーがオンライン状態またはオフライン状態に切り替わると通知されるようになります。少なくとも、オンライン用の画像の表示/非表示を切り替えることができます。アプリケーションがオフライン動作をした後にオンラインになった場合には、applicationCache オブジェクトにアクセスします。applicationCache オブジェクトは、キャッシュ・マニフェスト・ファイルで宣言されている内容に従って、キャッシュされているすべてのリソースを表しています。この場合には、このオブジェクトの update メソッドを呼び出します。このメソッドはブラウザーに対し、applicationCache の更新を検出したかどうかを調べるように指示します。先ほど触れたように、ブラウザーはキャッシュ・マニフェスト・ファイルが更新されているかどうかを最初にチェックします。キャッシュの更新があるかどうかをチェックするために、別のイベント・リスナーを追加します。キャッシュの更新がある場合には、applicationCache の swapCache メソッドを呼び出します。するとキャッシュ・マニフェスト・ファイルに指定されたすべてのファイルがリロードされます。

キャッシュ・マニフェスト・ファイルに関して言えば、この高度な例に最終的な修正を 1 つ加える必要があります。キャッシュ・マニフェスト・ファイルをリスト 9 のように変更する必要があります。

CACHE MANIFEST
# Version 0.2
CACHE:
offline.html
json2.js
/iui/iui.js
/iui/iui.css
/iui/loading.gif
/iui/backButton.png
/iui/blueButton.png
/iui/cancel.png
/iui/grayButton.png
/iui/listArrow.png
/iui/listArrowSel.png
/iui/listGroup.png
/iui/pinstripes.png
/iui/redButton.png
/iui/selection.png
/iui/thumb.png
/iui/toggle.png
/iui/toggleOn.png
/iui/toolbar.png
/iui/whiteButton.png
/images/gym.jpg
/images/soccer.jpg
/images/online.jpg

NETWORK:
http://search.twitter.com/

この例では、マニフェスト・ファイルに CACHE セクションを明示的に追加しています。マニフェスト・ファイルにはさまざまなセクションを記述することができますが、1 つしかセクションがない場合には、そのセクションは CACHE とみなされ、省略することができます。ここで CACHE セクションを明示的に追加している理由は、このマニフェスト・ファイルには NETWORK セクションもあるからです。こうすることでブラウザーに対し、指定ドメイン (この場合は search.twitter.com) から得られるものはすべてネットワークから取得する必要があり、キャッシュしてはならないことを指示します。この場合は Twitter の検索結果をローカルにキャッシュしているので、もちろんブラウザーがこれ以上クエリーを間接的にキャッシュする必要はありません。こうしておけば、アプリケーションは必ず Twitter から最新のツイートをロードしますが、そうしたツイートの保存も行い、たとえユーザーの機器がインターネットへ接続できなくなった場合でも保存されたツイートをユーザーが利用できるようにします。

上に戻る

まとめ

Web アプリケーションは Mosaic の時代から大きく進歩しました。モバイル Web アプリケーションは、それよりもさらに進化しています。WML (Wireless Markup Language) しか使えない WAP フォンの時代は終わりつつあります。今やモバイル・ブラウザーに対し、大規模なデスクトップ・ブラウザーにすら要求しないことを要求するようになっています。オフライン機能はそうした機能の 1 つです。HTML 5 で規定された標準も大きく進歩し、モバイル Web アプリケーションを非常に容易にオフライン対応にできるようになっています。この連載の次回の記事では、もう 1 つの HTML 5 標準である Web ワーカーについて調べ、Web ワーカーによってモバイル Web アプリケーションのパフォーマンスが大幅に向上することを説明します。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

学ぶために

• 「HTML 5 を使ってモバイル Web アプリケーションを作成する、第 1 回: HTML 5、ジオロケーション API、Web サービスを組み合わせ、モバイル・マッシュアップを作成する」(Michael Galpin 著、developerWorks、2010年5月) は、位置座標を取得、追跡し、さまざまな Web サービスで使用する方法を解説しています。この連載の第 1 回で、HTML 5 のジオロケーション標準の多様な側面、また一般的な Web サービスを利用して興味深いモバイル・マッシュアップを作成する方法を学んでください。
  
  
• 「HTML 5 を使ってモバイル Web アプリケーションを作成する: 第 2 回、HTML 5 を使ってモバイル Web アプリケーションでローカル・ストレージを使用する」(Michael Galpin 著、developerWorks、2010年5月) では、ワイヤレス・アプリケーションに関する HTML5 の重要な新機能について調査しています。またローカルのストレージと簡単な API が規格化されたことを利用して、クライアント上に多量のデータを保存し、性能を向上させる方法についても紹介しています。
  
  
• 「HTML 5 を使ってモバイル Web アプリケーションを作成する: 第 4 回、Web ワーカーを使ってモバイル Web アプリケーションを高速化する」 (Michael Galpin, developerWorks, June 2010) では、Web ワーカーによって実現する Web アプリケーションのマルチスレッド化を紹介し、Web ワーカーの扱い方と、どんなタスクが Web ワーカーに最も適切なのかについて学びます。
  
  
• マニフェスト・ファイルやアプリケーションのキャッシュに関して Apple が詳細に解説した資料、HTML 5 Offline Application Cache を調べてください。
  
  
• オフライン機能はモバイル専用のものではありません。Firefox がこの標準をどのように実装しているかを、Mozilla の資料、Offline resources in Firefox で読んでください。
  
  
• 「モバイル Web 用の Ajax アプリケーションを作成する」(Michael Galpin 著、developerWorks、2010年3月) を読み、モバイル Web アプリケーションの重要部分である Ajax の使い方を学んでください。
  
  
• 「HTML 5 の新要素」(Elliotte Rusty Harold 著、developerWorks、2007年8月) を読んでください。HTML 5 では JavaScript がすべてというわけではありません。この developerWorks の記事では、HTML 5 で導入された新しいマークアップをいくつか紹介しています。
  
  
• 「Android と iPhone のブラウザー戦争: 第 1 回 WebKit による救いの手」(Frank Ableson 著、developerWorks、2009年12月) を読んでください。HTML 5 を使用したモバイル Web アプリケーションという手法を好んでいるものの、iPhone App Store や Android Market にアプリケーションを置いてみたいという人達のために、この 2 回連載の記事の第 1 回では 2 つの世界の最高の部分を活用する方法を解説しています。
  
  
• HTML 5 の持つ検出手法や HTML 5 の多くの機能を解説した素晴らしい無料の本、Dive Into Html 5 を読んでみてください。
  
  
• iPhone 用に Web アプリケーションを開発するのであれば、Safari Reference Library が必ず役立ちます。
  
  
• W3C の HTML 5 Specification (2010年3月のワーキング・ドラフト) は HTML 5 に関して最も信頼のおけるソースです。
  
  
• この記事の著者による他の記事を読んでください (Michael Galpin 著、developerWorks、2006年4月から現在まで)。XML、Eclipse、Apache Geronimo、Ajax、他の Google API、その他の技術が解説されています。
  
  
• My developerWorks で developerWorks のエクスペリエンスをパーソナライズしてください。
  
  
• XML および関連技術において IBM 認定技術者になる方法については、IBM XML certification を参照してください。
  
  
• developerWorks の XML ゾーンを XML の技術ライブラリーとして利用してください。広範な話題を網羅した技術記事やヒント、チュートリアル、技術標準、IBM Redbooks などが用意されています。
  
  
• developerWorks の Technical events and webcasts で最新情報を入手してください。
  
  
• developerWorks に参加し、developerWorks を Twitter でフォローしてください。
  
  
• developerWorks podcasts ではソフトウェア開発者のための興味深いインタビューや議論を聞くことができます。
  
  

製品や技術を入手するために

• Modernizr プロジェクトを訪れ、localStorage、Web ワーカー、applicationCache など、HTML 5 の機能を検出するための包括的なユーティリティーを入手してください。
  
  
• Android Developers の Web サイトを訪れ、Android SDK をダウンロードし、API 資料にアクセスし、また Android の最新ニュースを入手してください。
  
  
• 最新の iPhone SDK を入手し、iPad、iPhone、iPod タッチなどのアプリケーションを開発してください。
  
  
• Android Open Source Project を訪れ、Android モバイル・プラットフォームのオープンソース・コードを入手してください。
  
  
• Google App Engine SDK をダウンロードし、Google を使ったスケーラブルな Web アプリケーションを作成するための Java ツールや Python ツールを入手してください。
  
  
• IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2®、Lotus®、Rational®、Tivoli®、WebSphere® などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。
  
  

議論するために

• ディスカッション・フォーラムに参加してください。
  
  
• XML zone discussion forums に参加してください。これらのフォーラムでは XML を中心に議論が行われています。
  
  
• developerWorks blogs に参加してください。
  
  

著者について

Michael Galpin は eBay のアーキテクトであり、developerWorks に頻繁に寄稿しています。彼は JavaOne、EclipseCon、AjaxWorld など、さまざまな技術カンファレンスで講演を行っています。彼が次に取り組もうとしていることを知るには、Twitter で @michaelg をフォローしてください。

この記事を評価する

コメント

上に戻る

目次

• この連載について
• 前提条件
• なぜオフラインでアプリケーションを動作させるのか
• オフラインのマニフェスト・ファイル
• マニフェスト・ファイルに関してブラウザーに指示する
• Web サーバーの構成
• 高度な例
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント