3キャリア対応ケータイXHTMLのTIPS 8つ
最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。
キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振 り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。
なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。
■文字コード
UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。
※上記で特定の文字のひとつとしてあげました三点リーダーですが、UTF-8の問題ではなく文字実体参照の「…」を表示できる機種と表示できない機種が存在することによる問題でした。(2008年4月16日追記)
■CSS
auやSoftBankは外部ファイルで定義できるのですが、DoCoMoのみ
作ろうiモード：iモード対応XHTMLのバージョン | サービス・機能 | NTTドコモ
・インラインのみに対応しています。
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。
どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。
■画像形式
GIFとJPEGであれば大丈夫なようです。
・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ
・KDDI au: 技術情報 > 機種別情報一覧
・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4
・Mobile Creation 対応フォーマット一覧
ただ、SoftBankの場合、
ソフトバンク3G携帯電話では、gif形式を表示することができます。(V801SH、V801SAを除く)
と気になる記述があったりするのですが、この2機種は、
・V801SHをご利用のお客さまへ
・V-NM701/V801SAをご利用のお客さまへ重要なお知らせ
によると利用不可になる予定ですので、とりあえず気にしない方向でいーかなーと……。ユーザーの方がいらっしゃいましたら、ゴメンなさい。m(_ _)m
■ブラウザの解像度
QVGA液晶というくらいなので、横240ピクセルはあると思っていたら、ブラウザの縦スクロールバーの分などで削られて、意外とそこまで使えなかったりします。
・作ろうiモードコンテンツ：画面領域 | サービス・機能 | NTTドコモ
・KDDI au: 技術情報 > 機種別情報一覧
・ソフトバンク 端末情報 Part1 ～ ソフト バンク 端末情報 Part4
・Mobile Creation 画面領域情報一覧
自動縮小させたくない場合は、横228ピクセル以内に抑えておいたほうがいいようです。
■フォントのサイズ
DoCoMoはiモード対応HTMLとiモード対応XHTML比較表に書かれているように、
小 … xx-small～small
中 … medium
大 … large～xx-large
と統一されているので楽なのですが、auとSoftBankは端末によって挙動が全然違います。
特にauではsmallやx-smallでは変化せず、xx-smallにしてやっと一段階小さくなる端末があったりと、なかなか曲者です。そのため、
<span style="font-size:12px">フォントサイズ小</span>
などのようにauはピクセルで指定するのが無難なようです。
こういった状況のため、フォントサイズに関してはキャリアを判別して指定方法を変えるしかないようです。
また、auはdivタグなどでフォームを囲むような形でフォントサイズを小さくすると、セレクトメニューの内容が変な位置で改行されてしまいます。
有名なケータイサイトでもよく改行されているのを見かけるため、そーゆーものなのかなと思っていたのですが、::Kellogg:: | auの馬鹿っ！の記事を参考に、個別にサイズを指定するようにしたら、無事改行されなくなり、文字も小さくなりました。
■入力文字制御
テキストフォームで入力文字の指定を行う場合、いろいろ調べてみたところ、おまじないも含めて、
全角かなモード
<input type="text" name="hoge" istyle="1" format="*M" mode="hiragana" style="-wap-input-format:"*<ja:h>";-wap-input-format:*M;" />
半角カナモード(auは全角かな)
<input type="text" name="hoge" istyle="2" format="*M" mode="hankakukana" style="-wap-input-format:"*<ja:hk>";-wap-input-format:*M;" />
半角英字モード
<input type="text" name="hoge" istyle="3" format="*m" mode="alphabet" style="-wap-input-format:"*<ja:en>";-wap-input-format:*m;" />
半角数字モード
<input type="text" name="hoge" istyle="4" format="*N" mode="numeric" style="-wap-input-format:"*<ja:n>";-wap-input-format:*N;" />
のように記述するといいようです。
なお、上記の「;;」は書き間違いではなく、このようにセミコロンを2つ記述しないと正しく動作しないので、注意してください。
※機種によって、初期入力モードが変更されるだけのものと、入力モードが固定されて変更できなくなるものがあります。変更禁止になる機種の場合、全角かなモードでカタカナが入力できなかったり、半角英字モードで数字が入力できなかったりしますので、指定する際はご注意ください。(2008年8月14日追記)
■回り込み
画像に文字を回り込ませたい場合はfloatでいいはずなのですが、auは意図した動作をしなかったので、align属性も追加する必要があります。
<a href="https://www.asial.co.jphoge.gif &mode=1" class="popupimg"><img src="https://www.asial.co.jphoge.gif"></a>
■mailto
SoftBankはUTF-8のままURLエンコードして大丈夫だったのですが、DoCoMoとauはURLエンコード前にShift_JISに変換しておかないと、題名などの文字が化けてしまうようです。
以上、会社にあるケータイでの動作結果をもとにしていますので、何か間違っていることなどありましたら、ぜひぜひお知らせくださいませ。
