携帯電話サイトの作成


とあるプロジェクトの一環で、携帯電話向けのウェブページを作っている。
どちらかと言えば私は、携帯電話は電話が出来れば良いと考えていた古典的な人間なので、携帯電話やそのサービスの進歩に敢えて目を背けながら過ごして来た事は否定出来ない。

が、 例えばGMailの様に一々PCを立ち上げなくても気軽に携帯電話だけでメールが確認でき、多少の努力は強いられるもののその気になれば返信も出来る等、携帯電話のそういった恩恵は徐々に今の仕事上欠かせない物になっている。

携帯用htmlのコーディングに関しては、限られた画面サイズの制限の中で情報をコンパクトにまとめながらもユーザーインターフェイスを損なう事無く、且つ如何に見栄えの良いサイトを作るかと言う努力や工夫が強いられるので、思った以上に面白い。

さて、この様な開発の現場に不可欠なのが、実際にブラウザで表示しての確認作業。
PC用サイトの場合は、複数のブラウザをインストールして確認すれば良いが、携帯電話の場合はそうも行かない。そこでPC/Mac上で動くエミュレータ(シミュレータ)を探して見たものの、中々良いプロダクトが見つからないばかりか、あちこちのブログで紹介されているDocomoの公式ツールはリンク切れになっていて使えない。
やっとの事で見つけたのは、FireMobileSimulatorという、Firefoxのアドオン。難しい設定が必要かと思いきや、アドオンをインストールしてプリインストールされた携帯電話を指定し、ページをリロードするだけであっさりと携帯電話の仮想画面が表示された。


通常通り表示されている画面を...

ブラウザが携帯電話に成り済ます様に指定し...

再読み込みするだけでこの通り。この写真では背景が黒のため解りにくいが、実際には表示領域を示す枠線が表示されている。

更に、このアドオンは、

  • サイトから任意の携帯電話の設定を追加可能
  • 位置情報を入力出来るので、GPS機能を前提としたサイトのチェックも利用可能
  • テンキーの入力による操作も可能

と、必要十分な機能が提供されている優れものである。実際の携帯電話と比べてみたところ、htmlの解釈やレンダリングに若干の差異はあるものの、もちろんMacでもWindowsでも利用する事が出来る優れものである。

トップ写真:防水が売りの私の携帯も、電源コネクタ部分の蓋が閉まらない様になってしまった。