色々なブラウザで表示テストをしてみる方法

chrome

 ブログのデザインを変更した場合には出来るだけ自分がいつも使っているブラウザだけではなく、色々なブラウザを使って表示テストをしてみた方が良いのですが、面倒くさいこともあってなかなか実施しなかったりもします。しかし、自分のサイトでアクセス解析をしていると、下記のように多様なブラウザでアクセスされていることが判ります。

順位————-ブラウザおよびバージョン—————-件数—–%—————-
1 Internet Explorer/6.0 Internet Explorer/6.0 3299 61.87
2 Internet Explorer/7.0 Internet Explorer/7.0 848 15.90
3 Firefox/2.0.0.6 Firefox/2.0.0.6 401 7.52
4 msnbot/— msnbot/— 223 4.18
5 Googlebot/— Googlebot/— 138 2.58
6 Safari/— Safari/— 92 1.72
7 Firefox/2.0.0.4 Firefox/2.0.0.4 34 0.63
8 DoCoMo/2.0 DoCoMo/2.0 33 0.61
9 Opera/9.22 Opera/9.22 29 0.54
10 Yahoo! Slurp;/— Yahoo! Slurp;/— 18 0.33
11 Netscape/6 Netscape/6 18 0.33
12 Internet Explorer/5.5 Internet Explorer/5.5 16 0.30
13 Baiduspider/— 16 0.30
14 Opera/9.10 Opera/9.10 15 0.28
15 Firefox/1.5.0.12 Firefox/1.5.0.12 14 0.26
16 Opera/9.21 Opera/9.21 10 0.18
17 Lunascape/4.3.3 Lunascape/4.3.3 8 0.15
18 Mozilla compatible/— Mozilla compatible/— 8 0.15
19 Lunascape/4.3.2 Lunascape/4.3.2 8 0.15
20 Firefox/2.0.0.5 Firefox/2.0.0.5 7 0.13
21 CacheFlowプロクシ/— 6 0.11
22 Opera/9.23 Opera/9.23 6 0.11
23 Firefox/1.5.0.7 Firefox/1.5.0.7 5 0.09
24 Netscape/5.0 Netscape/5.0 4 0.07
25 Opera/9.20 Opera/9.20 4 0.07
26 Netscape/4.0 Netscape/4.0 4 0.07
27 Internet Explorer/5.0 Internet Explorer/5.0 4 0.07
28 Internet Explorer/5.01 Internet Explorer/5.01 4 0.07
29 Lunascape/4.3.1 Lunascape/4.3.1 3 0.05
30 Opera/8.50 Opera/8.50 3 0.05
31 Opera/8.60 Opera/8.60 3 0.05
32 Monazilla/— 3 0.05
33 Lunascape/3.0.5 Lunascape/3.0.5 3 0.05
34 Opera/9.02 Opera/9.02 3 0.05
35 Firefox/1.0.7 Firefox/1.0.7 3 0.05
36 Opera/8.54 Opera/8.54 2 0.03
37 Lunascape/4.2.2 Lunascape/4.2.2 2 0.03
38 Firefox/1.0 Firefox/1.0 2 0.03
39 Internet Explorer/5.14 Internet Explorer/5.14 2 0.03
40 Firefox/1.5.0 Firefox/1.5.0 2 0.03
41 Lunascape/3.6.5 Lunascape/3.6.5 2 0.03
42 Firefox/2.0 Firefox/2.0 2 0.03
43 Test Crawler(BETA)/— 2 0.03
44 Internet Explorer/5.22 Internet Explorer/5.22 2 0.03

 この一覧を見ると第1位はie6で60%以上を占めています。第2位はie7ですが15%強、そしてfirefoxについては7%強の割合しかありません。まだまだインターネットエクスプローラーの古いバージョンのシェアが高いことが判ります。

 そんなときに便利なサイトとして、「スクリーンショット.jp – 複数のブラウザ環境でサイトのレイアウトチェックツール」というサイトがあります。ここは、URLを入力するだけでそのページの表示状態を各ブラウザを使って確認することができます。以前はこのサイトを使っていたのですが、今日また使ってみると残念ながら無料版では試用できるブラウザの種類が限定されてしまっていました。これではあまり使う意味がないので、別の方法を調べてみました。

 複数のブラウザでチェックをする上で、一番頭が痛いのは、インターネットエクスプローラーです。しかし、せめてie6での表示テストくらいはしておきたいところです。自分のパソコンには出来るだけ最新のIE7を入れておきたいのですが、表示チェックでは以前のバージョンのインターネットエクスプローラーでチェックしたいところです。複数のインターネットエクスプローラーを同じパソコン上に同居させることなど出来ないだろうと諦めていたのですが、実は簡単にできることが判りました。

 こちら「Install multiple versions of IE on your PC | TredoSoft」のサイトで「multiple versions of IE」というものをダウンロードしてきてパソコンにインストールすれば現在のIE7の環境とは独立してスタンドアローンで動作してくれます。しかも、ie6だけではなく歴代のieのバージョンが単独で動作します。これは便利です。

mpie2.png

 上記のキャプチャ画面のように色々なコンポーネントをインストールすることができます。実際にインストールをしてみました。

mpie1.png

 インストールそのものは非常に簡単でウイザードに従うだけですぐにインストールすることができます。インストール後はスタートメニューから普通のプログラムと全く同じように起動することができます。ie7を立ち上げているときにも一緒にie6を立ち上げることもできます。これならば非常に便利です。

 実際にie6でこのサイトの表示テストをしてみました。すると、変なダイアログが出てきます。

  「Press OK to continue loading the content of this page」

 そのままOKをクリックすれば先に進むことができるのですが、このダイアログは一体なんなのでしょう。グーグルで調べてみました。すると、下記のページにこのダイアログに関する情報を見つけました。

 ★米MS、特許侵害訴訟に対応した「Internet Explorer 6 SP1b」を公開 | ネット | マイコミジャーナル

 特許侵害訴訟に対応するため、HTMLページ内で<object>、<embed>、<applet>タグが使用されていると、プラグインコンテンツを再生する前に「Press OK to continue loading the content of this page」という再生許可を求める警告ダイアログボックスが表示されるのだそうです。このページのソースを見ても上記のようなタグは出てこないのですが、もしかすると、最近導入したブログパーツであるコラブロでこのタグを使っているのかもしれません。

 コラブロはブログ内の全記事・全文の解析をしてくれて、そのブログにどんなジャンルの記事があるかをビジュアルに表示してくれるといった機能や、企業から提供される広告を配信することで成果報酬が貰えたりといったおもしろい機能があり、まだ外したくはないのが正直なところなのですが、何か回避方法がないか確認してみます。


 そのほかについては、特にie6では問題は発生しませんでした。

 ついでに、ie3でも表示チェックをしてみました。全然ダメです。文字はバケバケでスタイルも完全に崩れてしまいました。divといったタグを全く解釈できていないようです。ie5.5までいって、やっとそれらしく表示できるようになりました。最初に紹介したアクセス解析の結果から見ると、ie5.5よりも古いブラウザを使ってこのサイトを見ている方はかなり少ないようなので、ie5.5以上のサポートということでもあまり大きな問題はないかと思っています。

 今回インストールした「multiple versions of IE」については、このままパソコン上に残しておいて自分のサイトの表示チェックに使っていこうと思います。(逆にセキュリティパッチなどはかけられていないので、自サイトの表示チェック以外には使わない方が良いでしょう)

コメント

  1. tookitio より:

    とても参考になりました。
    僕も早速使ってみます。