携帯サイトのテスト方法

By nakayama - 08/08/20 - このエントリをはてなブックマークに追加このエントリをYahoo!ブックマークに追加このエントリをdel.icio.usに追加このエントリをFC2ブックマークに追加

携帯サイトの制作がPCサイトと違うところはなんと言ってもキャリア、機種によって挙動が違ってくる事です。

今回はそういう携帯サイトのテストをどうやって行なうかを紹介したいと思います。

最近では各キャリアとも互換性を重視して規格を定める傾向が出てきましたので
数年前と比べると大分作りやすくなってきました。
ですがまだまだキャリア、機種によって見え方が違うというのは起こっています。

セルバで開発する時のテストの手順を公開します。

1. PCのブラウザで確認

サイトのプログラムのロジック部分の開発から
実機を使ってテストするのは開発効率が落ちてしまいますので
まずは普通にPCからブラウザで確認します。

おすすめのブラウザはFireFoxで下記アドオンを使えば便利にテストできます。

・User Agent Switcher
https://addons.mozilla.org/ja/firefox/addon/59
USer Agent情報を自由に設定できるツールです。

・ModifyHeaders
https://addons.mozilla.org/ja/firefox/addon/967
アクセスする際にHTTPのリクエストヘッダを編集できるツールです。

※サーバーを使用出来る場合は「Moxy」というプロキシサーバーを使う手もあります。

2.シミュレータを使う

3キャリアでは携帯表示用のシミュレータを用意しています。

・docomo iモードHTMLシミュレータII
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/

・KDDI au Openwave SDK 6.2K
http://www.au.kddi.com/ezfactory/tool/ue/

※一時公開を中止しているようですが下記URLからダウンロード可能です。
http://web.archive.org/web/20041230214346/http://developer.openwave.com/ja/tools_and_sdk/openwave_mobile_sdk/SDK62K/Openwave_SDK_62K.exe
(参考:http://blog.livedoor.jp/ryukaku33/archives/50580267.html)

・ソフトバンク ウェブコンテンツビューア
http://creation.mb.softbank.jp/doc_tool/web_doc_tool.html

シミュレータでチェック出来る内容はHTMLがキャリアの規約によって正しく書かれているかの確認は出来ますが
実機と違う挙動になる事も多々あり、最終段階としてはやはり実機でのテストとなります。

3.実機テスト

実機テストする際は「どこまでテストするか?」という線引きが必要になります。

・ブラウザのバージョン毎で確認する

各キャリアが定めた携帯ブラウザのバージョン毎で最低1台確認する方法です。
docomoですと「iモード対応HTML」で規格が定められており現在7.~ です。

機種自体のバグなど確認する事が出来ません(正直結構あります)

・全機種で確認する
基本的には対応しているブラウザバージョンの全機種のテストです。

全機種持っているなんて事はないかと思いますので
実機貸し出しをサービスとしている所があり、そちらを利用します。

http://www.flexfirm.jp/product/mysta/
http://www.ktai-labo.jp/

ただ、全機種のテストは結構な工数とレンタル日数が掛かり、予算も大幅に増えますので
大規模なサイト開発の場合でしか難しいです。