Internet Explorer サポートの藤代です。
IEで発生する問題についてお問い合わせを頂きご支援を承る上で、問題の切り分けがとても重要です。
Web アプリケーションでは、IE の挙動のみではなくHTML/CSS の構成内容、JavaScript の処理内容、通信、Web サーバーの処理等多くの要素が存在します。
しかし、問題はイントラネット等限られた社内からのみしかアクセスできない Web アプリケーションで発生する事があります。
また、表面的には同一の事象に見えても、技術的にはポイントが異なることも多々ある為、文面や口頭でお伝え頂く内容のみでは有益な調査が行えない場合があります。
調査をより有益なものとし、かつ、より迅速に情報のご提供に繋げられるよう、「シリーズ : 問題の切り分け」と題し、よくあるシナリオ例をベースに私たちの調査ノウハウについてご紹介をしていきたいと思います。
シリーズ : 問題の切り分け part1 は『今日からできる！再現サンプルを作成しよう！』です。
～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・～～・
お問い合わせ状況例
提供している Web システムを利用するユーザーからあるコンテンツのページの表示状態が崩れるという申告があった。
以下のような理由で再現サンプルを作成できていない。
Web サーバーはユーザー環境のイントラネットに構築されており、手元からはアクセスできない
Web システムは Java/ASP.NET などで作成されており、データーベースからデータを取得し表示するような仕組みである。
データベース等が必要であり複雑な構成であることから一部を切り出す事が難しい
問題の初診
このような事象では事象発生時／非発生時のスクリーンショットを比較することが状態を理解する為の First Step になります。
但し、以下のような事も理解しておかなくてはいけません。
・Web サーバー側でどのような技術が用いられていても、基本的には “クライアント” で受信するものは HTML/CSS/JavaScript/画像 等で構成されたコンテンツである
・ブラウザでの表示上、同じように見えるコンテンツでも HTML/CSS 等の指定方法は無数に存在する
つまり、画面のスクリーンショット等の表面上の状態や「サーバー側の処理の部分的な抜粋」ではクライアント上で受信する HTML の内容が把握できず、より詳細な調査を行う事は多くの場合困難です。
この為、IE 上における表示上の問題については何とかして「HTML/CSS/JavaScript 等でクライアントで動作するサンプル」を切り出す必要があります。
再現サンプルの作成方法
大きく分けて以下のような手法があります
IE が受信し表示に利用しているデータを保存する
実際の HTTP の通信内容で受信しているデータから再現コンテンツを生成する
今回は、まず a について、いくつかの手法をご紹介します。
a. IE が受信し表示に利用しているデータを保存する
============================
a-1 : Web ページを保存する
調査対象となるページを表示し [ファイル] – [名前を付けて保存] を選択します。
[Web ページの保存] のダイアログで最下部の [ファイルの種類] で “Web ページ、完全 (*.htm; *.html) を選択し名前を付けて任意のディレクトリに保存します。
指定したディレクトリに <名前>.htm という HTML コンテンツと <名前>.files というフォルダーが作成されます。
フォルダー内には CSS/JavaScript/画像等のページを構成するリソースが含まれます。
※メニューバーが表示されていない場合は Alt キーを押下してください
※以降のより詳細な切り分けのため、必ず Web ページ、完全でコンテンツを保存します
a-2 : F12 開発者ツールを用いて部分的に抜粋する
事象の発生状態に画像は直接的には関連せず、HTML/CSS で一部分を抜粋できればよいときには F12 で開発者ツールを開きます。
開発者ツールで対象となる部分をフォーカスし、その部分のスタイル付きの要素を抽出します。
バージョンにより若干操作方法が異なりますが、以下のスクリーンショットを参考にしてください。
IE10/IE11 の場合
※テキストエディターなどに貼り付け html 形式として保存します
IE8/IE9 の場合
※表示された要素付きのソースをコピーしテキストエディターなどに貼り付け html 形式として保存します
いかがでしょうか。
このように保存・抽出したコンテンツを直接開く、もしくは、Web サーバーに配置し、実際のコンテンツと同じセキュリティゾーンでアクセスする等の方法で事象の再現性を確認します。
保存・抽出したコンテンツには事象とは直接関連性のない構成要素も含まれます。
さらにサンプルを最小化する為には以下のような事を繰り返していきます。
テキストエディター等で HTML を開き事象に不要と思われる箇所を削る。再度表示して事象を確認するを繰り返し、発生ポイントを絞り込む。
F12 開発者ツールを駆使し、スタイルの指定を解除／一時的な編集等を行い、関連するポイントを絞り込む。
地道な作業ですが、構成要素をシンプル化することで事象の状況がさらに見えてきます。
また、回避策／対処方法をお手元で確認することができ、お問い合わせにかかる時間やお手間を軽減できるかと思います。
お問い合わせを頂く場合
描画関連の問題でお問い合わせを頂く際には、是非、上記のような切り分けの結果のシンプルなサンプルコンテンツと、保存／抽出直後のコンテンツを合わせてご提供ください。
※保存／抽出直後のコンテンツはより妥当で容易な回避策の検討に利用させて頂きます。
描画に関連する事象は多くの場合、コンテンツでの変更／修正による対応をお願いさせて頂く事が多いものですが、ここに至る切り分けや対処方法の検討は実はお手元でも実施頂くことができます。
今回は対象のコンテンツにアクセスできる前提で、サンプルの作成手法についてご紹介しましたが、ご参考となれば幸いです。
参考情報
Windows Internet Explorer 8 開発者ツールを使用してサイトを修正する