Hebikuzure's Tech Memo

2011年12月23日

HTML5 AppCache のマニフェストを Fiddler で生成する

Filed under: Internet Explorer — hebikuzure @ 11:59 AM

Generating HTML5 AppCache Manifests with Fiddler 
http://blogs.msdn.com/b/fiddler/archive/2011/09/15/generate-html5-appcache-manifests-using-fiddler-export.aspx

ひとつ前の記事でも紹介したように Fiddler は Eric Lawrence さんが開発している強力な HTTP キャプチャ/デバッグ ツールですが、その製品ブログ (http://blogs.msdn.com/b/fiddler/) に掲載されている記事から一つ私訳しました。 Fiddler でキャプチャした HTTP リクエストを利用して、HTML5 Application Cache に必要なマニフェスト ファイル (どのコンテンツがローカルにキャッシュ可能で、どのコンテンツは常にネットワークから取得すべきかを指定したファイル) を作成する方法が紹介されています。
Fiddler と HTML5 に関した事としてもう一つ、HTML5 WebSockets についても最新版の Fiddler で基礎的なサポートがされている事がブログの記事で報告されています

以下の文章は Fiddler Web Debugger の 9/14 の記事 Generating HTML5 AppCache Manifests with Fiddler を hebikuzure が私的に試訳したものです。翻訳については Microsoft Corporation および日本マイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。


HTML5 AppCache のマニフェストを Fiddler で生成する

EricLaw [MSFT]

2011年9月14日 午後9時32分

HTML5 では Application Cache というコンセプトが取り入れられ、オフライン利用するためにキャッシュすべきページのマニフェストを Web 開発者が規定できるようになりました。AppCache の実例は IETestDrive サイト でご覧いただけますが、マークアップを分析されれば HTML タグに AppCache マニフェストの URI を指定するための属性が含まれている事がわかるでしょう。

マニフェストはブラウザーにどのリソースを AppCache にダウンロードすべきで、どのリソースを常にネットワークから取得すべきかを指定します。AppCache については数多くのオンライン リソースで学ぶ事ができますが、そのいくつかを以下に示します:

マニフェストは単純なテキスト ファイルで、好みのテキスト エディターで作成できます。しかし、このプロセスは退屈で、自動化されたソリューションが欲しくなります。

Fiddler には、想像可能などんなフォーマットにでも Fiddler からセッションを容易にエクスポートできる、着脱可能なインポート/エクスポート アーキテクチャがあります。そこで私は AppCache マニフェストのエクスポーターを追加する事にしました。皆さんには Fiddler v2.3.6.2 で利用していただけます。Fiddler の新たな HTML5 AppCache マニフェスト エクスポーターはマニフェスト作成のプロセスを単純な課題にします:

1. ブラウザーのキャッシュを削除します。

2. Fiddler を起動します。

3. Web サイトをブラウザーで読み込みます。

4. Fiddler で、File > Export > All Sessions の順にクリックします。

5. フォーマット選択のダイアログ ボックスで、HTML5 AppCache Manifest を選択します。

6. Next をクリックします。Adjust AppCache Manifest ボックスで、マニフェストの セクションから除外したいリソースにチェックを付けます。これらはマニフェストの NETWORK セクションに追加されます:

7. 必要であれば、下の方のテキスト ボックスでURL をマニフェストからの相対参照にする場合の Base URL を指定する事ができます。例えば、上記の例ではマニフェストを http://ie.microsoft.com/testdrive に置くので、これをBase URL にします。

8. Save ボタンをクリックしてマニフェストの生成と表示をさせます。

9. このマニフェストに問題が無ければ、これを Web サーバーの適切な場所に保存します。この時 Web サーバーがマニフェスト ファイルに対して Content-Type: text/cache-manifest を返すよう構成されている事を確認してください。

10. Web ページで、ページが (HTML5 doctype が使われるよう) 標準モードで実行される事を確認し、アプリケーションのマニフェストを指定する manifest 属性を追加します。

ブラウザーが App-Cache されているコンテンツを利用する際、それらのリソースはキャッシュから再利用され、(キャッシュが期限切れになるまでは) ネットワークから取得されない事に注意してください。コンテンツがローカルにキャッシュされているため、それらのコンテンツの再ダウンロード リクエストは Fiddler 内では確認できません。こうしたコンテンツの修正に Fiddler を利用したい場合は、ブラウザーが次回の利用時にネットワークからコンテンツを再ダウンロードするよう、ブラウザーのキャッシュを削除する必要があります。

もしこの新たな AppCache マニフェスト エクスポーターの機能に不具合を見つけられたら、ぜひお知らせください。これは新規に作成したコードなので、いくつかのバグがあるかもしれません。:-)

ありがとうございました。

Eric Lawrence

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com で無料サイトやブログを作成.

%d人のブロガーが「いいね」をつけました。