JBN INC.

サイト（ホームページ）を検証する際、色々なブラウザで確認しなければならなかったり、
HTMLコードを詳細にチェックしなければならないなど、チェックをする為に必要となる
ツール、ブラウザなどが多々あります。

今回は、検証する上での環境作り、特に複数ブラウザインストールについて書きたいと思います。

サイト検証する為に必要となるブラウザですが、
Windowsで検証する場合として、

・Internet Explorer
・Firefox

がブラウザのシェア的に主流となりますので、
下記の各バージョンはインストールしたいところですね。

・IE6SP3、IE7、IE8
・Firefox2.0、3.0、3.5

Firefoxは、インストール時に「カスタムインストール」を選択し、
フォルダ名を「Mozilla Firefox」から「Firefox2.0」とかに変更してインストールすれば、
各バージョンをインストールすることができ、バージョン毎に起動することができます。

※注意：バージョンが異なっても、同時に起動することはできません。
　　　　プロファイルを作成すれば同時起動できそうですが、検証用なのでなるべくノーマルで。

問題は...IEです。

IEはOSに組み込まれているアプリケーションな為、複数バージョンをインストールすることができません。

MS社の正規ではないスタンドアローン版などがありますが、
サイトの動作検証で、正規版を使用しないことは...意味がない！ので、
基本的にはIEだけのシェアを調べ、どれを入れるかを選びます。

ブラウザのインストールが終わったら、ブラウザ動作検証環境が完了です。
ブラウザの設定は、動作に影響する部分はいじらず、常に初期状態をキープします。

あとは、IEとFirefoxを同時起動で2ブラウザを横に並べて、サイト検証！

先月、今月とブラウザのバージョンアップがありました。
折角なので、ブラウザのバージョンアップについて書きたいと思います。

リリースされたブラウザは、

・Internet Explorer 8
・Firefox 3.5

上記の2ブラウザです。
サイト検証をする上で、ブラウザのバージョンアップは、とっても重要です。
バージョンアップによって、ガラッと性能が変わってしまうことや、細かい仕様変更などがあり、既に公開したサイトや、これから公開するサイトに少なからず影響がでるからです。

まずは、詳しい変更点を確認します。

・Internet Explorer8　改良・変更点情報
http://msdn.microsoft.com/ja-jp/library/cc817593.aspx

・Firefox3.5　改良・変更点情報
https://developer.mozilla.org/ja/Firefox_3.5_for_developers

ここで、タグの対応や、CSSの対応変更点など確認しつつ、既に公開されたサイトを各ブラウザで表示して確認してみます。
レイアウトが崩れていたり、画像表示がおかしくなっていたら...間違いなくバージョンアップの影響なので、上記サイトを確認し原因を探ります。
※稀に技術情報には記載されていない仕様変更点などがありますので、ご注意ください。

ブラウザのバージョンアップは対応が大変です...。

ホームページ検証において、致命的な不具合と言われるものについて幾つかご紹介します。
どんなサイトかにもよりますが、基本的なものは、

・サーバーエラー表示がされる。
　リンク切れ、パーミッションエラー、プログラムエラーなど。

・レイアウトが崩れている。
　サイドナビの下段落ち、CSSファイルが読込まれていないなど。

・文字化けしている。
　文字コードのミス、特殊文字・記号のエンコード不具合など。

・プログラムの不具合による現象。
　2重登録、2重課金、2重ログイン、HTMLエンコードがされていない、ブラウザ強制終了など。

・サーバーが落ちてしまう。
　多重処理、DOS攻撃対策がされていないなど。

になります。
上記の項目が一項目でもある場合は、致命的な不具合として、
基本的には、サービスインが認められません。
サービス自体が機能していないので、当たり前ですよね。

致命的な不具合は、必ず潰しましょう！

各ブラウザ毎で反映させたいCSSを分けるテクニックとして、
CSSハックという技術（？）がありますが、このCSS Hackとは、
ブラウザのバグを利用し、特定のブラウザ以外で無視されるCSS記述を行い、
狙ったブラウザのみにCSSを反映させるというテクニックです。

代表的なもので、スターハックというものがあります。

・通常のCSS記述
p { text-align: center; }

・スターハックでのCSS記述
* html p { text-align: center; }

上記のように記述すると、FirefoxなどではCSSが無視され、IE6でのみCSSが反映されます。
「*（アスタリスク）」を使うからスターハックなんでしょうかね？

このようなCSS Hackは、Firefoxのエラーコンソールで、記述が間違っているとしてエラー報告されますが、Firefoxでは無視されるように記述しているので、エラーが表示されるのが当たり前なのです。

これをCSS記述ミスだ！と勇んで報告すると、恥ずかしい思いをすることになります。
CSS Hackは、制作側で当たり前の技ですので、
CSSで記述が怪しいなと思ったら調べてみることをお薦めします。

今回はホームページ検証の種類について、書きたいと思います。

何気なく検証をするより、どの様な検証のパターンがあり、どの様な理論で確認するかを知っていた方が、検証の精度は上がります。知っていて損は無いです。

まず、大きく分けて3つの分類があります。

・正常系
仕様通りの動作をするか。

・準正常系
エラーが表示される動作を行った際、適切なエラーメッセージが表示されるか。

・異常系
イレギュラーな操作を行った際、適切に対応、処理されるか。

上記の3つの分類では、それぞれどの様な検証をするかと言うと、

■正常系
・テキストに誤字・脱字などが無く、表示は問題がないか。
・ページのレイアウトが崩れていないか。
・リンクは、正常に遷移しているか。
・フォームの入力は、仕様通りに入力、表示ができるか。
・プログラムの動作は、仕様通り動作するか。

■準正常系
・エラー動作を行った際、適切なエラーが表示されるか。
・入力限界値で、適切な処理がされるか。

■異常系
・認証などをまたぐブラウザバック操作を行った際、2重認証などが発生しないか。
・URL入力の直接アクセスで、認証を行わずアクセスできるか。
・入力欄などに機種依存文字、記号、第四水準漢字、HTMLタグ、プログラムコードなどを
　入力した際、文字化けなどが発生せず、適切にHTMLエスケープされて表示されるか。
・ボタン処理などを連続して押下した際、重複処理がされないか。
・単一のPCで、複数ブラウザで同時ログインをした際、適切に処理されるか。
・Cookie登録・削除を手動で行い、サイトを閲覧した際、適切に処理されるか。
・重複処理を行った際、サーバーがダウン、処理落ち、動作不具合が発生しないか。

などなどです。
正常系、準正常系は、基本の動作確認となりますが、
異常系は、サイトの機能を考慮し、ユーザーが行うであろうと思われる操作を考え、
検証する為、項目は無数にあり、何が起こるか分かりません。

これらの項目を知っていれば、サイトを検証する際も、精度が高く、効率的な
検証が行えるようになると思います。

制作にとって、異常系の検証が一番恐怖です...。

制作部　富井

またもや制作裏話、ホームページ検証について書きたいと思います。

今回は検証するコツといいますか、ポイントをちょっとだけご紹介します。

色々あるのですが、一番分かり易いところで、お問い合わせフォームなどに設置されている「確認」や「送信」などのボタンです。
ボタンを押したら、当然処理動作が行われますが、この処理動作の間に何らかの手順を割り込ませることは常套手段です。この割り込ませるというのがポイントです。
動作の間に割り込みを行った際、正常に処理されるか？動作に矛盾がないか？余計な動作をしないか？などを調べると、大体問題が発生します。
また、この様な割り込み操作はユーザーが行う可能性が非常に高いのです。

ボタン動作の不具合というのは、ショッピングサイト、会員登録系のサイトでは致命的です。二重課金、二重登録、誤った製品購入などなど、どれもが決済や料金に関係してきます。
たかがボタンと侮るなかれ、これが命取りとなったサイトを数多く見ております...。お気を付けください。


ボタンを見て...連打したらどうなる？、押した後にブラウザバックしたらどうなる？などと考えた貴方は、筋金入りのチェッカーです。

制作部：富井