オンラインコンテンツが使用している JavaScript ライブラリを手元で置き換えて検証する方法について

前回の記事では、Edge 対応こと、Web ブラウザー同士の相互運用性を高める方法として以下の 5 つの点について紹介しました。 ドキュメントモードの指定を行わない 新しい JS ライブラリ/フレームワークを使用する ブラウザープラグインを使用しない CSS ベンダープレフィックスを使用しない ブラウザーの検出を使用しない 今回は上記の項目、「 2 新しい JS ライブラリ/フレームワークを使用する」に対応する際、検証方法を楽にする手段として、オンライン上にある Web コンテンツが使用している JavaScript ライブラリを手元で置き換えて検証する方法について紹介します。 これには Fiddler という無償の HTTP デバッガーツール使用します(※) (※) Fiddler を使用したオンライン上のファイルの置き換え方法については、すでに幾人かの方がブログで書かれているので、いまさらという感じもしますが、お客様の手順を紹介する際に、他人様のブログ記事を紹介するのもなんだかアレなので、記事を投稿することにしました。 実習用のページも用意しましたので、ぜひお試しくださいませ。 その前に Fiddler について簡単に紹介しておきましょう。   Fiddler とは? Fiddler はプロキシ型の HTTP デバッガです。Web サーバーとクライアントの間を流れる HTTP パケットをキャプチャすることはもちろん、改ざんしたり、ステップ実行したりといったことも可能です。 Fiddler については、以前このブログで使い方を含めた詳しい紹介を行っていますので、詳細についてはそちらの記事をご覧くださいませ。 「Fiddler ユーザーの集い」フォローアップ (1/2) 「Fiddler ユーザーの集い」フォローアップ (2/2) 「Fiddler ユーザーの集い」フォローアップ(おまけ)  …


de:code 2014 セッション DE-016 資料

マイクロソフトの開発者向け有償イベント de:code で、私が担当しますセッション「これだけは知っておきたい Old IE コンテンツの最新 Web ブラウザー向けコンテンツへのマイグレーション」で紹介します、資料のリンクを掲載します。 ドキュメントモード 「ドキュメント互換性の定義 」(ドキュメントモード) http://msdn.microsoft.com/ja-jp/library/cc288325(v=vs.85).aspx 「ドキュメント モードの非推奨」(Internet Explorer 11) http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx エンタープライズモード エンタープライズモードについて以下をご覧ください。 「Windows 8.1 Update で追加された Internet Explorer 11 の新機能まとめ」 http://blogs.msdn.com/b/osamum/archive/2014/04/24/windows-8-1-update-internet-explorer-11.aspx Internet Explorer バージョン間互換資料について 「Internet Explorer 互換性クックブック」 http://msdn.microsoft.com/library/ie/dn384059 「Internet Explorer 11 移行ガイド」 http://download.microsoft.com/download/2/5/2/25221F1B-A7B2-4828-9D80-3A882302A076/InternetExplorer11_MigrationGuide.docx 「Internet Explorer 11 影響調査報告書」 http://technet.microsoft.com/ja-jp/ie/dn642437 Compat Inspector IEBlog 日本語「Compat Inspector」 http://blogs.msdn.com/b/ie_ja/archive/2012/02/08/ie10-compat-inspector.aspx 「Compat Inspector User Guide」(英語)…

1

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

6 月 30 日(2013) に開催されました「Fiddler ユーザーの集い」で登壇させていただきました「今日から使う Fiddler」のフォローアップ記事の 3 回目です。 「Fiddler ってなに?」、「どう使うの?」って人はどうぞ以下の前回と前々回の記事をご覧くださいませ。 「Fiddler ユーザーの集い」フォローアップ (1/2) 「Fiddler ユーザーの集い」フォローアップ (2/2)   また、以下はセッションで使用したスライドです。 今日から使う Fiddler from Osamu Monoe   今回は、前回の記事で紹介しきれなかった、Firefox Web ブラウザーのネットワークトラフィックを取得する方法についてです。     Fiddler を使用して Firefox のネットワークトラフィックをキャプチャする方法   Fiddler は 自身を Windows のデフォルト プロキシとして登録するため、この設定を使用するアプリケーションのネットワークトラフィックをキャプチャすることができます。 しかし、Firefox はWindows のデフォルト プロキシの設定を使用しないため、Fiddler だけでは Firefox のネットワークトラフィックをキャプチャすることはできません。 そのため Firefox については、そのネットワークトラフィックをキャプチャするためのアドオンが用意されています。   FireHook FireHook は、Fiddler…


「Fiddler ユーザーの集い」フォローアップ (2/2)

6 月 30 日 (2013) に「Fiddler ユーザーの集い」 で 登壇させていただきました「今日から使う Fiddler」というセッションのフォローアップの第二回目記事です。 Fiddler とはなにか? 入手先などについては、前回のこちらの記事の内容をご参照ください。 当日使用したスライドは以下になります。 今日から使う Fiddler from Osamu Monoe   今回は Web セッションの内容を調べるためのタブ付きビューの各タブについて紹介していきます。     トラフィックの確認 Fiddler でキャプチャした Web セッションの内容を確認するには、目的に合わせタブ付きビューの各タブを使用します。 タブ付きビューに既定で表示される各タブの内訳は以下のとおりです。 以降は各タブの役割について紹介していききます。     Statistics タブ Statistics タブは Web セッションの基本情報を表示します。 クライアントの接続数であるとかバイト数であるとか、接続に関する情報が一覧となって表示されます。   画面下の Show Chart をクリックすると、選択されている Web セッションの容量を占めるヘッダーと本体の割合が円グラフで表示されます。     Filters タブ Filters キャプチャした Web…


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

先月、日本オライリーさんの 「実践 Fiddler」 という書籍の監訳のお手伝いをさせていただきました関係で、6 月 30 日 (2013) に「Fiddler ユーザーの集い」 で 「今日から使う Fiddler」というタイトルで、セッションを持たせていただきました。 内容は、初学者が Fiddler を使い始めるめの基本的なものとなっており、エキスパートな方々には少々物足りなかったかもしれません。 さて、スライドをシェアしたものの、ほとんどがデモで構成されたセッションなので、きっとスライドを見てもわけわからんだろうということで、フォローアップの記事を書いておきます。(長いので 2 回にわけます) 今日から使う Fiddler from Osamu Monoe   今日から使う Fiddler この記事ではセッションの内容の抜粋を紹介していきます。   Fiddler とは 無償の HTTP 専門のネットワークキャプチャツールで、Web をプロトコルレベルでデバッグする際に使用します。 もうちょっとわかりやすく説明すると、通常我々が見ている Web というものは、HTTP、HTTPS というプロトコル (通信規約) によってデータのやり取りがなされています。 これら HTTP で Web サーバーから送られた情報は Web を見るための道具である Web ブラウザーによって人間が理解しやすいように Web ページとして表現されます。 しかし、このやりとりされるデータに問題があると、Web ブラウザーで正しく Web…


『Internet Explorer 10 移行セミナー』フォローアップ

去る 6 月 6 日 (水) に『Internet Explorer 10 移行セミナー』 が開催されました。 このセミナーは、既存の Web コンテンツを支障なくかつ速やかに、最新の Internet Explorer 10 のドキュメントモードで正しく動作するよう移行していただくことを目的にしたセミナーです。 私も 『最新開発支援ツールを使ったデバッグ対応』というタイトルでセッションを担当し、Internet Explorer F12 開発者ツール、Compat Inspentor、Fiddler の紹介、また、それらを組み合わせて、古い Internet Explorer に合わせて作った Web コンテンツを、最新の Internet Explorer 10 のドキュメントモードで正しく動作するよう検証、修正するための手順を紹介しました。 スライドをシェアしましたので、ご興味のある方はご覧ください。 ※私のセッションは、小粋なデモと楽しいお喋りがメインですので、スライドだけを見てもありよく分からないかもしれませんが。 最新開発支援ツールを使ったデバッグ対応 View more presentations from Osamu Monoe. セッションして紹介しましたツールの情報は以下で入手することができます。   使ってみよう! [F12] IE9 開発者ツール – 検証機能 http://blogs.msdn.com/b/osamum/archive/2011/10/05/hehehe.aspx   F12 開発者ツールで…