MT5に限らずだが、携帯サイト制作にはPCでのブラウザ対応以上に、メーカー、機種対応のプレビューは欠かせないもの。
MT5には、テンプレートの「確認」ボタンでビューア機能がついているが、おおざっぱな確認しかできない。
そこで、いろいろなサービスが提供されている。
まずは簡単に導入できるフリーの3サービスを紹介。
次にビューアの長所、短所の考察。
■便利な携帯ビューアサービス
・ASPサービス
docomo、au、softbankの３キャリアを選択できる。
機種までは選択できない。
URLを入れるとQRコードも表示する。
「とりおきURL」機能で１０件のURLを記憶する。
メールでURLを携帯に送信する機能がある。
・ブラウザに携帯ビューア機能(User Agent偽装)が標準搭載
２．ルナスケープ
設定メニュー
Lunascape設定＞エンジン設定＞Tredent固有＞全般＞UserAgentを変更する
にチェックをいれることで対応。
携帯のメーカー、機種はプルダウンから選択する。
タブの再読み込みで、機種の変更が簡単に行える。
・ブラウザFirefoxのアドオン
Firefoxにアドオンとして組み込むタイプ。
ビューア機能だけでなく、絵文字表示、位置情報送信機能などの動作もシミュレートできる。
またその他、各種キャリアからもエミュレータソフトを提供している。
ただ、上記の3サービスからみると少々使い勝手が悪い。
■ビューアの上手な使い方、長所と短所
さていずれにしても、長所、短所があり、作りこみの段階に応じて使い分けをする必要がある。
上記3サービスいずれを使用しても、同サイトのビューアには大きな差がでないようだ。
機種を変更して表示しても大きな崩れや見え方の違いが生じない。
いいかえると、古い機種ほどきちんと反映されないことが多い。
以下の画像、左２つがiモードHTMLシミュレータIIのドコモ用ソフト、右がFirefoxアドオン。
同じ機種、docomo N904iの条件にして表示。
実機は、iモードHTMLシミュレータIIとほぼ同じ表示。
右のFirefoxの方は、1ページすべてを表示してくれるところがうれしいが、文字サイズが一回り小さく表示されている。
これは、HTMLの指定で、文字サイズ、font-size:xx-smallのための文字サイズ表示だ。
実機では、このfont-size:xx-smallは効かないので文字の大きさはこれ以上小さくならない。
ちなみに、下位機種は、HTMLのフォントサイズを指定しても、大中小の3サイズの大きさにしか制御できない。
このように3サービスのビューワ、エミュレータは下位機種表示があまりあてにならない。
また、トップページへのアクセスで、PCか携帯かを判断して、PC用サイトと携帯サイトを振り分けている構成になっていると、URLを入力してもPC用に表示される、もしくは表示されないこともある。
携帯表示の規格が、キャリア毎、世代毎に変わり、HTMLのタグの有効・無効、CSSの適用・無効などが微妙に違う。そのための機種ごとの振り分け操作などを行うこともできるが、なかなかここまで作りこむのは大変である。
第一条件として、携帯サイトはシンプルなデザインが基本だ。
もちろん、携帯サイトだけに特化しているサイトでの考え方は違ってくる。
ほかにも、一部にCSSを止むをえず指定したところ、CSSが有効でない機種を選択しても、ビューア(表示)上はCSSが有効になっている。
ということで、最終的には実機での確認が必要になってくるが、携帯専用サイト制作会社のように各キャリアを用意できる環境ではない場合、なかなか多くの機種を網羅することは難しい。
携帯変換ソフトなどを導入すること、携帯デザインの特性を理解することなど、やはり携帯サイト独自の工夫が必要だ。
情報提示という目的に限れば、テキストをメインに、画像は必要性のあるもので軽いもの、でシンプルな構成デザインを行なったうえで、できるだけこのサイト表示の検証時間を減らしていくことが必要になる。
今回、古い携帯電話をそろそろ新しい携帯電話もしくはスマートフォンに買い替えを考えているが、まだまだ確認用に手放せないかと悩んでいるところ。
けれどこの各種エミュレータソフト、欠点はあるものの特性をよく理解すれば、そろそろ買い替えもＯＫだと判断している。
PCのブラウザ対策と同じ、携帯キャリアや機種への対応、いつまでも追いかけっこが続くのは仕方がない・・・のか(^^;
次回は、いよいよ次のデバイス、スマートフォンについての考察へ。
