前回の記事では、Edge 対応こと、Web ブラウザー同士の相互運用性を高める方法として以下の 5 つの点について紹介しました。

1. ドキュメントモードの指定を行わない
2. 新しい JS ライブラリ/フレームワークを使用する
3. ブラウザープラグインを使用しない
4. CSS ベンダープレフィックスを使用しない
5. ブラウザーの検出を使用しない

今回は上記の項目、「 2 新しい JS ライブラリ/フレームワークを使用する」に対応する際、検証方法を楽にする手段として、オンライン上にある Web コンテンツが使用している JavaScript ライブラリを手元で置き換えて検証する方法について紹介します。

これには Fiddler という無償の HTTP デバッガーツール使用します(※)

(※) Fiddler を使用したオンライン上のファイルの置き換え方法については、すでに幾人かの方がブログで書かれているので、いまさらという感じもしますが、お客様の手順を紹介する際に、他人様のブログ記事を紹介するのもなんだかアレなので、記事を投稿することにしました。

実習用のページも用意しましたので、ぜひお試しくださいませ。

その前に Fiddler について簡単に紹介しておきましょう。

Fiddler とは?

Fiddler はプロキシ型の HTTP デバッガです。Web サーバーとクライアントの間を流れる HTTP パケットをキャプチャすることはもちろん、改ざんしたり、ステップ実行したりといったことも可能です。

Fiddler については、以前このブログで使い方を含めた詳しい紹介を行っていますので、詳細についてはそちらの記事をご覧くださいませ。

• 「Fiddler ユーザーの集い」フォローアップ (1/2)
• 「Fiddler ユーザーの集い」フォローアップ (2/2)
• 「Fiddler ユーザーの集い」フォローアップ(おまけ)

Fiddler の入手

Fiddler は以下のサイトから無償入手することができます。

• Fiddler free web debugging proxy

Fiddler は Windows OS でしか動作しませんでしたが、最近は Mac や Linux で用の Mono ベースの Alpha 版が公開されています。

Edge の HTTP 通信をキャプチャするための準備

キャプチャの対象となる Web ブラウザーが Edge の場合は、Fiddler の設定に若干手を加える必要があります。

Edge は、これまでの Windows 用デスクトップアプリケーションとは異なる UWA (Universal Windows Application) として作られており、HTTP 通信の仕組みが異なるため Fiddler の既定の設定では通信をキャプチャすることができないためです。

Fiddler で Edge の HTTP 通信を行えるようにするには、以下の手順で設定を追加します。

Edge の HTTP パケットキャプチャの準備手順

1. Fiddler を起動します。
    
2. ツールバーの [WinConfig] ボタンをクリックします。

3. 「このアプリが PC に変更を加えることを許可しますか?」というメッセージボックスが表示されるので [はい] ボタンをクリックします。
    
4. [AppContainer Loopback Exemption Utility] ダイアログボックスが表示されるので、同ダイアログボックスのリスト内の「Microsoft Edge」のチェックボックスにチェックを入れ [Save Change] ボタンをクリックします。

以上の手順で Edge の HTTP 通信をキャプチャできるようになりました。

なお、この設定は Internet Explorer では必要ありません。

キャプチャする対象が Firefox の場合は、以下のドキュメントの内容を参考に Fiddler の Firefox 用アドインを有効にしてください。

• 「Fiddler ユーザーの集い」フォローアップ(おまけ)

オンライン上のファイルの置き換え

Fiddler を使用してオンライン上のファイルの置き換えを行うには、Auto Responder タブの機能を使用します。

Auto Responder タブでは Web クライアントのリクエストに対するルールを設定することができます。条件を設定し、レスポンスの改ざんなども行えます。

ここからは、こちらで用意した実習用のページを使用して、実際に手を動かしながら Fiddler の機能を実感いただければと思います。

以下の実習用のページには、jQuery のバージョン 1.7 が使用されています。

• http://osamum-web2.azurewebsites.net/jq.html

また jQueryUI は 1.8 を使用しており、サッカーボールの画像はマウスでドラッグアンドドロップで動かすことができます。

このページを使用している jQuery のライブラリを、 Fiddler を使用して  jQuery の最新のバージョンのものに置き換えます。

準備として、以下のページから jQuery の最新のバージョンをダウンロードしておいてください。

• Download jQuery

Auto Responder タブの機能を使用したファイルの置き換え手順は以下の通りです。

ファイルの置き換え手順

1. Fiddler を起動します。
    
2. 以下の URL にアクセスします。

   http://osamum-web2.azurewebsites.net/jq.html

3. Fiddler の画面左側にある Web セッションリストに jquery-1.7.min.js へのリクエストがあることを確認します。

4. Fiddler の画面右側にあるタブ付きビューで [Auto Responder] タブをアクティブにします。
    
5. 同タブ内の [Enable automaticresponses] チェックボックスにチェックをつけます。
    

6. Web セッションリストにある jquery-1.7.min.js へのリクエストを、[Auto Responder] タブ内のリストにドラッグアンドドロップして追加します。
    

7. 追加したリストアイテムを選択し、同タブの下にある [Rule Editor] の 2 つのコンボボックスの上のほうを以下のように設定し直します。
    

   元の値 : EXACT:http://osamum-web2.azurewebsites.net/js/jquery/jquery-1.7.min.js
        ↓
   変更後 : jquery-1.7.min.js

8. [Rule Editor] の下のコンボボックスでは、ドロップダウンリストを表示し、リストの一番下にある [Find a file…] を選択するとファイルを選択するダイアログボックスが表示されるので、あらかじめダウンロードしておいた最新の jQuery の *.js ファイルを参照します。
   設定が完了した [Rule Editor]  は以下のようになります。
    

   設定が完了したら [Save] ボタンをクリックして設定を保存します。

ブラウザーを更新し、ページ内の jQuery のバージョンが 1.7 ではなく新しいものになっていることを確認してください。

なお、検証が終わったら [Enable automaticresponses] チェックボックスのチェックをすぐに外すようにしてください。チェックがついたままだと、他の Web サイトに正しくアクセスできない場合があります。

余力のある人は

上記の手順では jQuery のバージョンを 2.1.4 に変えましたが、これだとサッカーボールがドラッグアンドドロップで動かなくなってしまいました。

これは jQueryUI のバージョンが古いためです。jQueryUI のサイトから現在最新のバージョン 1.11.4 をダウンロードして前述の手順で置き換えると正常に動作するようになります。

また、サッカーボールの画像 ball.jpg をローカルの画像に差し替えてみても良いかもしれません。

まとめ

今回は Fiddler を使用してオンライン上のファイルを入れ替える方法を紹介しました。

この方法を使用すると、実際にホストされているコンテンツをそのままに検証することができます。

また Fiddler は非常にたくさんの機能を持っていますので、ぜひ活用してみてください。