こんにちは、『プチペット』を担当している吉沢です。
最近のモバイルサイトはキャリア間や機種に依存する問題が少なくなり、表現の制約も少なくなってグラフィカルに魅せることできるようになってきましたね。

グラフィカルに魅せることができるようになった分、HTMLソースも複雑になり、デザイナーやマックアッパーにコーディングを依頼する機会が増えてきていると思います。

状況は会社によって様々だと思いますが、今回は、効率よくデバックを行って完成度を高めたい、ちょっとした作業はディレクター側で行いたいというときに、PCサイトの作成でもおなじみのツールを含めた、モバイルならではのツールの使い方をご紹介したいと思います。

【１】FireMobileSimulator

PCでモバイルの画面を表示することができるので、電波状況や通信速度を気にしなくてもよく、レイアウトのチェックから、機能面のデバックをスピーディに行うことができます。
大まかなチェックをFireMobileSimulatorですませて、レイアウトについては最後にモバイルでチェックを行います。
これはPCとモバイルでタグの解釈の違いがあるためです。

【２】Mobile Barcoder

こちらでも紹介していますが、モバイルにURLをメールで送信してアクセスする方法もありますが、このアドオンをインストールすると、表示している画面のQRコードを表示してくれるので、メールを送るひと手間が不要になります。

【３】Firebug

・画像とHTMLソースの容量を計測
サーバを介したときに、画像とHTMLソースの容量がいくらになるのかを計測するときに使っています。
年々通信速度がアップしていますが、情報を詰め込みすぎると表示にまだまだ時間がかかってしまうので、容量には注意しています。
コンテンツの内容にもよりますが、画像はトータルで30〜50KB以下になるように、HTMLソースは10〜20KB以内になるようにしています。

【４】Web Developer

・画像の幅や高さ、alt属性のチェック
画像の幅や高さ、alt属性の指定し忘れをチェックするときに使用しています。
画像の幅や高さを指定していないと、画像を多様したコンテンツの場合、HTMLソースと画像の読み込みに大幅なタイムラグが発生してしまい、読み込み時にレイアウトがくずれてしまいます。

・背景画像を指定したとき、しなかったときのチェック
コンテンツに背景画像を指定したときは、背景画像を非表示にして文字やリンクの色のバランスをチェックします。
これは、Docomoの900i、901i、700、700iが背景画像の表示に対応していないためです。

・モバイルと同じ画面サイズでのレイアウトのチェック
任意のウィンドウサイズを登録することができるので、幅240pxを登録して、モバイルと同じ画面サイズでレイアウトのチェックを行います。FireMobileSimulatorでも同様のことができます。

・構文チェック
タグを閉じ忘れて表示がくずれてしまったときのチェックに使用しています。
モバイルサイトでタグを閉じ忘れると、まったく表示されなくなる機種もあるので注意したいですね。

【５】Pearl Crescent Page Server Basic

デザイナーやマックアッパーへ修正内容を示すとき、企画書や仕様書などの資料を作るときに便利です。

【６】OshimaExe

絵文字の入力の他に、特殊文字の変換やテキストを全角、半角に変換することができます。

【７】辞書ツール
ちょっと特殊な使い方ですが、日本語入力ソフトの辞書ツールに、よく使うタグ、スタイルを登録してコーディングしています。
ライブドアのモバイルサイトのコーディングには、テキストエディタを用いてコーディングすることが多く、毎度 style="background-color─"と入力するのは手間です。

モバイルサイトのコーディングは、PCほど複雑にはならないので、罫線は「けいせん」と入力したら<hr class="line-base" />を呼び出すように登録していたり、インラインの背景色であれば「はいけいしょく」で<div style="background-color:#FFFFCC;">を呼び出すように登録して、適宜カスタマイズしてコーディングする場合があります。

いかがでしたか？効率よくチェック、デバックを行って、完成度の高いモバイルサイトをリリースしていきたいですね。