Webブラウザ徹底比較(1)

Webブラウザ徹底比較(1) 定番編

Webブラウザ徹底比較定番編

先日、リニューアルを行った当サイト。その動作テストとして、様々なブラウザで表示を確認していました。そのテストの中でキレイに見えるもの、見えないものがいろいろあり、なかなかおもしろい表示をするものもありました。

Webが登場してからそれなりの時がたち、各社が機能を拡張していったブラウザ戦争、Webの本質に気づき初めた仕様統一、そして現在は携帯端末から大型システムでまで利用されるようになってきています。ここでは、Webには欠かせない存在であるWebブラウザの現状を見直してみようと思います。

テスト方法

テストは「定番編」「独自編」の二回にわけて行おうと思います。今回はその第1回目「定番編」。昔と今の定番ブラウザでの表示の違いを確かめてみようと思います。

方法はいたってシンプルで、「同一のページをいろんなブラウザで見てみる」というもの。今回のテストでは次の7種類のブラウザを用意しました。いずれもWin2000で動作するバージョンを使用します。

マシン環境は、Windows2000 SP4の入ったVAIO PCG-R505R/AK。購入時はIE5.5がインストールされていましたが、それをIE6.0へバージョンアップしています。また、IE6.0とIE5.01はひとつのPC（のOS）に共存できないため、IE5.01のテストのみ別なPCで行いました。こちらもWindows2000 SP4がインストールされているデスクトップPCです。

ブラウザのアイコンだらけのデスクトップ。見ただけで具合が悪くなってきます。ここにアイコンが見えているブラウザで、今回テストしていないものに関しては次回やるつもりです。お楽しみに。

テストでは、以下の4ページを表示してみます。

Webを利用するほとんどの人が一度は行くといわれ、どんなユーザでも見えること重きを置いたWebの定番Yahoo!と、標準文法への準拠は完璧でValidでStrictな文法で記述されている（はず）のW3Cによるxhtml1.0の仕様書のページ、さらに一部の人の間では大人気の、見る人のことを一切考えない、限られた環境のみにおけるハデな演出しか考えられてない激重チカチカ鬼サイト、愛生会。そして一応ですが当サイト。いずれのサイトもTOPページと考えることができるページを対象にしました。

テスト結果の前に

今回のテスト結果は、あくまで私の環境におけるそのテストを実施した時点での表示結果です。サイトにしてもブラウザにしても、以前のことも将来のことも保証することはできません。

Internet Explorer 5.01

まずは一昔前までの定番ブラウザ、IE5。一般的な認識としては、標準のスタイルシートになんとか準拠した表示をする最低限のブラウザといったところでしょうか。特に凝った記述をせずに正しくシンプルな文法だけを使用していれば大体は表示されるはずですが、実際のところはどうでしょうか。

当サイトの表示で一部線が重なっている個所もありますが、基本的にまったく問題はないようです。また、当サイトで使用されているJavaScriptも問題なく動作しました。

古くなり配布中止されたとは言え、事情があって使い続けている人も多いはず、この結果を見る限りでは、まだ使ってもそれほど支障はないんじゃないかな、とさえ思えます。

Internet Explorer 6.0

2番目は、現時点で最大のシェアを誇るIE6。マイクロソフトがWebブラウザ単体として配布する最後のバージョンとも言われ、その完成度は十分に高いです。一般的なサイトは（IE6で表示できるように記述されていることもあり）ほぼすべてマトモに表示されると思われます。

さすがIE6ということで、すべてにおいて問題はありませんでした(おそらく作者が意図したとおりに表示されているであろうという意味)。

Opera 6.06

Opera。今では3大ブラウザに分類され、一般にはすでにNetscape系よりもシェアが高く、携帯端末への採用も進むと言われるブラウザ。シェアウェア(または広告表示)ながら高い普及率によりインターネット上で無視できない存在までになりました。その普及が加速したのが、日本語を含む世界の多くの言語に対応したこのバージョン6からと言われます。

さすが、Yahoo!とxhtml仕様書はほぼ問題なし。愛生会は・・・重すぎてかなり待たされた結果、この程度の表示です。「推奨するブラウザは～」という表示自体が見えていないので、Opera6しか持ってない人はこのサイトがどのブラウザを推奨しているのかを知ることすらできないという状態。

当サイトの表示はまあまあです。一部オカシナ点はありますが、閲覧に支障がある部分は「ささやき」の折り返した文字が次の行と重なってしまっているところだけのようです。当サイトのJavaScriptは動作しませんでした。

Opera 7.23

バージョン6で日本語に対応し、一気にOperaの勢いが強まった中で登場したバージョン7。コードを1から書き直したという話もあり、htmlの解析エンジンが完全に新しいものになっているのが一目見てわかります。JavaScriptも低速とは言え基本的なものは一通り使えるようになり、常用に耐えるブラウザとなりました。

ほぼ完璧です。と言いたいところですが、実際には愛生会の表示において途中で数分フリーズ状態になりました。もうだめかなーと思ったころにやっと表示されました。ですが、表示されてからもアニメーションGIFが動いたり止まったりと不安定な動作。さらにページを閉じようとしても閉じることができず、強制終了することに。エライ目にあったという感想。とはいえこれをOperaの問題だというのは残酷でしょう。軽いと言われるOperaですら固まる愛生会の方に問題がありそうです。まあ言うまでも無いか。

それ以外はほぼ問題ないです。当サイトの表示ではOpera6同様、「ささやき」の折り返した文字が次の行に重なっていますが、これはおそらく私のCSSの書き方がマズイのでしょう。Operaで正しく表示できるよう記述すると、今度はIEでおかしくなるため、これは仕方ない部分としています。JavaScriptも私の意図するような動作をしました。

Netscape Communicator 4.78

続いては、昔はその多機能ぶりに多くの人が利用していたものの、標準化されたWebへの対応度合いがあまりに低いため、現在ではみんなから嫌われているというかわいそうなネスケ4.7。CSSのほぼすべてを中途半端に実装しているため、どんな表示をするのか予測不可能な点が多いです。

さすがネスケ4.7です。期待を裏切りません。愛生会が何も出ません。URIを入力すると、読み込んで「完了」と出すんですが画面は真っ白。さらに、当サイトの表示はメチャクチャです。ひどいもんです。当サイト以外にもCSSのみでレイアウトされてるサイトを表示させて見ましたが、やはり似たような結果でした。文字の色を変えることで精一杯といったところ。CSSに関してのネスケ4.7のダメっぷりが発揮されました。軽いっていう謎の理由で使い続ける人さえいなくなればWebはもっとよくなるような気がします。

そんななか、完璧な表示を見せてくれたYahoo!とxhtml仕様書には感動してしまいました。

ネスケ4.7は、ウィンドウのサイズを変更したりツールバーの位置を変更したりするだけで、再描画のためにページを再読込するということが発覚。ダサい。

Netscape 6.2.3

開発はしていたもののなぜか途中で打ち切られたNetscape 5。そして登場したNetscape 6は、これまでの旧Mozillaエンジンとは全く違うGeckoというhtml解析エンジンを搭載しました。ここからNetscapeとMozillaはGeckoベースへと進化していくことになります。ではGeckoのお手並み拝見。

まあまあです。ていうか上出来。あのネスケ4.7の後継とは思えません。これまでの旧Mozillaエンジンは捨てて正解だったと言えるでしょう。愛生会で使用されているmarquee要素には非対応ですが、こんな物理要素には対応してなくて結構です。

当サイトのボタン(「search」とか「送信」とか)がなぜか下にズレちゃってますが、Yahoo!の「検索」ボタンはちゃんと表示されています。私はこのボタンにもCSSを適用させているのでその辺のバグなのでしょうか。ただまあ閲覧に支障が出るというほどではない細かいところです。ネスケの場合、そういう細かいところのヘンな表示は多々あります。

また、当サイトで使用されているJavaScriptは動作しませんでした。正しいDOMの概念を使って記述するとそれなりに正しく動作することを確認済みですので、これは対応しようと思えばできなくもないのですが、いろいろと面倒な部分もでてくるので(DOMにはDOMでできないことがあったり)、これは今後の課題ということにしておきます。

Netscape 7.1

最新のGeckoエンジンと、流行のタブ切り替え・マウスジェスチャー・ポップアップ広告排除機能を備えて登場したNetscape 7。Netscape 6時代にまだまだと言われたGeckoエンジンの完成度はどんなもんでしょうか。IE6、Opera7に対抗する世代はこれに当たるわけで、それなりに高い性能が求められます。

よくやったと思います。ほぼ問題なしです。しなくていいのにmarquee要素にまで対応(多少ズレましたが)。あとは当サイトのボタンの文字が下にズレる問題も解決。JavaScriptが動かないのは相変わらずですが、これはこちらにも原因があるためあまり責めれません。

やはりネスケ特有の「ちょっと気になる表示」はまだ消え去ってはいませんが、それなりに安心して常用もできる完成度は持っていると思われます。

また、直接表示と関係ある部分ではありませんが、ネスケの6と7の同時起動はできないようです。6を起動中に7を起動させても、6がもう一個起動するだけ。逆に7が起動してるときに6を立ち上げても、やはり7がもう一個出るだけです。片方を終了してからじゃないとダメってことです。まあ6と7を同時に使うという用途が想像できませんけど。

総評

定番ブラウザというだけのことはあり、最新のものは普通に見るだけで支障がでるようなものは特にありませんでした。さらに定番サイトであるYahoo!側でも多くのブラウザで問題がないような工夫をしているため、Yahoo!の表示に問題があるということは起こりませんでした。

やはり困ったのはネスケ4.7。これはもう仕方が無いので利用者ひとりひとりが「自分が使ってるネスケ4.7はオカシナことが多すぎる」という風に認識していればいいんですが。

また、個人的には愛生会の表示が意外にも多くのブラウザでできたことに驚いています。Operaは苦手なようですが、まああんなサイトに対応する必要はまったくないわけで、問題なく表示できるっていうのも逆にどうかと思うって話もちらほら。

結論としては、サイト作成側としては、やはり最新ブラウザをぜひ使って欲しいというところ。私はどちらかというと環境に依存しないサイト作りを目指してましたが、ネスケ4.7だけはお手上げです。あれならいっそのことスタイルシート非対応ブラウザの方がよっぽど見やすいのです。

次回予告

次回は「独自編」ということで、独自のレンダリングエンジンを持ったブラウザを使って同様の表示テストをしてみたいと思います。

テキストブラウザ、縦書きブラウザなどの過酷な環境においてもYahoo!は美しい表示を保てるのか、またそうなったときこそ当サイトの標準に準拠した記述は役にたつのか、その辺が気になるところです。

muumoo.jp

ニュース記事検索

ナビゲーション