こんにちは。ライブドアでディレクターをしている渡辺です。

今回はウェブサイト開発で必須のデバッグ項目について紹介したいと思います。
携帯コンテンツのデバッグに関しては『ケータイコンテンツのデバッグ事情』で述べられているのでご覧ください。

一口にデバッグと言っても、コンテンツによって確認すべきポイントは異なってきます。
そこで、ここではコンテンツの内容に左右されずによく行われている、デバッグの基礎的なものをまとめました。

そもそもデバッグの目的はコンテンツを本来の仕様にすることです。
そのため、心がける点は一般ユーザーの視点よりは、「どこかにバグがあるんじゃないか?」と厳しい目でサービスをチェックしてくれるユーザーの視点に立って行うことです。

修正点を見つけたら、すぐマークアップエンジニアさんやプログラマーさんに伝えて対応してもらうことになります。


【01】異なるブラウザで確認する
まずはブラウザです。
ライブドアでは推奨ブラウザを指定していますが、ユーザーが必ずしも推奨ブラウザを利用しているとは限らないので、可能な限り多くのブラウザで確認しています。

Windows : InternetExplorer6,InternetExplorer7,Firefox,Opera
Mac : Safari,Firefox


【02】入力フォーム関連

ユーザーがこちらの意図したような行動を行ってくれるとは限らないので、さまざまなパターンを試すことになります。また、入力フォームでは、ブラウザ上で Javascript などのスクリプトコードが実行できてしまう、XSS(クロスサイトスクリプティング)の確認も欠かせません。


  • 数値、半角カナ、機種依存文字

  • 文字数制限を越える文字の入力。

  • XSS(クロスサイトスクリプティング)のチェック

    <script>alert('hoge')</script>を入力して実行してみます。



また、ブログなどでも良く見かける絵文字が利用できるコンテンツでは、さまざまな文章パターンの中でも正常に表示されるかなども確認のポイントになります。

【03】プルダウン/ラジオボタン/セレクトボタン/チェックボックスなど

すべての選択肢を試したり、逆に何も選択しない状態で処理を続けて動作を確認します。
また、Firebug を利用することもあります。Firebug に関しては「仕事を加速する FireFox アドオン」でも紹介されています。私も Firebug の使い方は勉強中ですが......

【04】リンク

ページのリンクはすべてクリックして、確認します。特に開発環境の URL が残っていないかなどがポイントとなってきます。

【05】ファイルのアップロード

フレパlivedoor Wiki など、画像などのファイルをアップロードできるコンテンツでは、実際に
以下のようなファイルをアップロードしてみて、エラーの有無などを確認します。


  • 対応していない拡張子のファイル

  • 制限より大きなサイズのファイル

  • 拡張子を偽造しているファイル(.exe を .jpg などに変換しているもの)



【06】不正使用対策

livedoor ナレッジしたらばなどのコンテンツでは、一定期間の中で規定数以上の投稿を許可しないサービスもあります。また、フレパやプロフィールなど、他のユーザーにメッセージを送信できるサービスはスパム業者に利用される可能性があるので、実際に規定回数以上のメッセージなどを送信してエラーが返されるかなどを確認することも大事です。

【07】認証関連

ライブドアのコンテンツは livedoor ID でログインして利用するサービスが多く存在します。
そこでログインしない「ゲスト」の状態で利用、またはログインした状態での利用でそれぞれ確認する必要があります。

たとえば、ログアウトした後にログインしないと閲覧できないページのURLを入力してみたり、他のユーザーアカウントでログインして閲覧できるかなど確認したりします。

また、退会した livedoor ID でログインできるかなども確認項目になります。

【08】ページデザイン、CSS、文言など

デザイナーさんのデザインと、マークアップエンジニアさんがコーディングしれくれたものの確認や、CSS が当てられているか文字サイズを変更したり、ページングやパンくすリストが決められたように
表示している確認します。

また、ラベルや説明文などの文章に関しては、定められたレギュレーションに則っているかなども対象ですが、どちらかというとこれは普段の文章作成時から気をつけたいですね。

【08】まとめ

簡単に書いてしまいましたが、確認項目は提供するサービスで大きく異なってくると思います。実際のデバッグの作業では、ディレクターだけでは何を確認していいか分からないことも多く、その場合はあらかじめテスト項目をリスト化してみて、それを手にシステムを一番理解しているプログラマーさんと相談してテスト項目をブラッシュアップしていくこともあります。

ライブドアでは「デバッグなら任せろ!」というディレクターを募集しております。