WEBサイトの制作の最終段階でのお話ですが、たくさん存在するブラウザーでの表示において、デザイン・レイアウト的な崩れが無いかチェックするのは、WEB制作者として責任を持って対応しなければ行けない仕事です。
HTMLコーディングを行う方、ディレクターは確実に実施する必要がありますし、「すいません。ページを見たらこの部分がちょっとズレてるんですが、、、」なんてことをクライアントに言われてしまうと、WEB制作者としての信用がガタ落ちです。
しかしブラウザーと言っても、各ブラウザーのバージョンまで考えると本当にたくさんのものがあり、どこまでブラウザーチェックの対象にする必要があるのか悩んでしまいますよね。
そこで今回は、ブラウザーチェックすべきブラウザーの対象の決め方について整理し、そのブラウザーチェックを簡単に行うためのツールを紹介致します。
ブラウザーチェックの対象を決める
世の中の需要をチェックする。
実際にどのブラウザーがどの程度利用されているのか？
日本では？世界では？どのくらいの割合で利用されているかご存知ですか？
あまり利用されていない、使っている人が少ないブラウザーでの表示をチェックしても、実際に見る人が少ない場合、意味が無い作業になってしまいます。
「実際にどのブラウザーがどの程度利用されているか？」は下記のサイトでいつでも最新版のチェックが可能です。
http://gs.statcounter.com/
このページを開いて最初に表示されるのは、全世界での利用割合です。
やはり国によっていろいろ流行があるのか、使っているブラウザーの割合は大きく異なります。
そのため日本国内での割合をチェックしましょう！
その方法は、下記のようにグラフの下にある「JAPAN」を選びます。
最初の設定だと、「どのブラウザーが利用されているか」だけで、それぞれのバージョンの情報までが含まれていません。そのため、下記のようにブラウザーのバージョンまでチェックできるように「Browser Version」を選びましょう。
そして、期間についてはデフォルトでは過去１年間になっているので、グラフ下の「Period」で期間を最新のものが分るように設定し、グラフの種類も右下に表示される「Bar」を選んで棒グラフにすると分りやすいでしょう。
この結果を見ると
・IE 11.0 - 約28%
・Chrome 35.0 - 約25%
・Firefox 29.0 - 約7%
・Firefox 30.0 - 約5.5%
・IE 8.0 - 約5.5%
・IE 9.0 - 約5%
・IE 10.0 - 約5%
・Safari 7.0 - 約3%
となっています。「IE（Internet Explorer）」の最新バージョンが一番多いですね。
Googleのブラウザー「Chrome」も頑張ってますね。
この２つのブラウザーが大多数を占めていることが分ります。
実際に見ている人は、何を使っているかチェック
このような情報を調べる時に毎回活躍するのが、GoogleAnalytics（グーグルアナリティクス）のアクセス解析情報です。
この情報からどのブラウザーが利用されているかチェック可能です。
「ユーザー > ユーザーの環境 > ブラウザとOS」をクリックするとブラウザーの利用割合を見ることが出来ます。
これによると、先ほどの「Stat Counter」で調査した様な順位で表示されますね。
上記の数値が、「Stat Counter」と少し異なるのは、全てのバージョンを合わせた数値になっているからでしょうか？。。
更にそこからどのバージョンがどの程度利用されているか、をチェックするのは、上記画面の「ブラウザー名」部分をクリックするとバージョンごとのデータを見ることが出来ます。
こちらの赤枠内は、IEの中でのバージョンの割合なので、全ブラウザー内での割合を計算する時は、それぞれをかけ算します。IE11.0の場合は「40.11% × 39.58%」で『15.88%』になります。
全体の割合の5%を目安にきめてます。
この全ブラウザーの中で、利用割合が5%以上のものは、チェックするようにしましょう。
5%以下のものは、、、無視してしまっても良いかと思います。
そうすると、一昔前までは表示に問題の多かったIE6.0はチェックしないことになりますね^^
本当にブラウザーチェックは一度エラーが見つかると、その解決までに結構時間がかかってしまいます。
多くの制作者さんは、IE6.0の表示に悩まされてきたのかと思いますので、最近のこの利用者が少なくなっていることはとても嬉しいですね
ブラウザーチェックに便利なツール
ブラウザーチェックと言っても、どのようにチェックをすれば良いのか？っと悩んでしまう人もいるかもしれません。
もちろん主要なブラウザーを自分のパソコンにインストールして１つ１つチェックすれば良いのですが、その場合そのパソコンに入っている最新バージョンのブラウザーしかチェックできません。
ブラウザーチェックが効率的にできるツールがいろいろあるので紹介させて頂きます。
オンラインでチェックできるツール
Windows版、Mac版、Linux版の多種多様なブラウザでチェックできる「Browsershots」が便利です。
チェックしたいブラウザーのバージョンをチェックして、
チェックしたいページのURLを入力すればOKです。
しかし、チェックするのはベーシック認証などを掛けたテストアップ中かと思いますが、ベーシック認証を掛けたページだと使うことが出来ません。。。
パスワード等を入れなくても見れる場所にアップしてチェックする必要がありますね。
ユーザーエージェントを指定してチェックができる便利なツール
次は、たくさんのブラウザーをダウンロードしてそれぞれでチェックするのが面倒な人のために、１つのブラウザでいろいろなブラウザーでの表示をチェックできるツール、アドオンを紹介致します。
Firefoxのアドオン「User Agent Switcher」
まずは「Firefox」がパソコンにインストールされていないと行けません。
Firefoxは下記よりダウンロード・インストールしてください。
https://www.mozilla.org/ja/firefox/new/
次に「User Agent Switcher」をインストールします。
□「User Agent Switcher」のダウンロードは、下記サイトより可能です。
https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/
インストール完了後、ブラウザーを再起動して、
Firefoxのツールメニューから「Default User Agent」を選択します。
下記のようにブラウザーのバージョンも含めて
チェックしたいブラウザーを選択することが出来ます。
上記で選んだブラウザーでの表示になりますので、
その後チェックしたいページのURLにアクセスすれば、
表示を確認することが出来ます。
iPhoneなどのスマホでの表示も確認できる点も
とても使い勝手が良くてよいですね。
デフォルトでは、チェックできるブラウザーの種類が多くないですが、自分でチェックしたいブラウザーを追加できるのもこのツールのスゴいところです。
その方法は、
「ツール > Default User Agent > Edit User Agent…」の順でクリックします。
表示される下記の様な画面で「New User Agent…」をクリック
表示される下記画面にて、「Discription」「User Agent」を入力します。
「Discription」は自分で管理しやすい、任意の名前で大丈夫です。
「User Agent」は下記のサイトから、チェックしたいブラウザーを選択して、コピペするだけでOKです！
http://www.openspc2.org/userAgent/
簡単にチェックできますね。
まとめ
WEBサイトの最終段階において確実に必要な「ブラウザーチェック」は、
GoogleAnalyticsなどの、実際にサイトに訪れているユーザーのデータから、全体の割合のうち5%以上のものを対象としてチェックしましょう。
そしてそのチェックには、インターネット上の便利なサービスもありますし、Firefoxで利用できる便利なアドオンもあります。もちろん両方とも無料ですので、効率的なチェックのために利用してみてください。