携帯端末での自動変換等を利用する際の注意点

仕事 ぷろぐらむ(笑)

PHPを使って3分で作る3キャリア対応ケータイサイト | ke-tai.org PHPを使って3分で作る3キャリア対応ケータイサイト | ke-tai.org
これ見てかっとなって書いた

反省はしていない

というかぶっちゃけキャリア別のHTMLの差異

結構知らない人が多そうな上に特定のキャリア意外ではまともに動くので気がつきにくい部分です。

というか僕も最近気がつきました。

ラジオボタンがまともに動作しない場合

以下の画像のようなHTML


ソースは以下

<form action="http://example.com" method="POST">
	<input type="hidden" name="jb" value="test2_ez">
	<input type="radio" name="mail_receive" value="ALL">ALL<br />
	<input type="radio" name="mail_receive" value="YES" checked>YES<br />
	<select name="s_hour">
		<option value="00">00</option>
		<option value="01">01</option>
	</select>
	<br />
	<input type="radio" name="mail_receive" value="NO">NO<br />
	<div style="text-align:center;">
		<input type="submit" name="regist" value="設定する" /><br />
	</div>
</form>

複数個のラジオボタンがあってセレクトボックスがある普通のフォームです。
ラジオボタンのグループはすべて同じグループです。

PCのブラウザやDoCoMo,SoftBankの携帯端末では正常に動作します。

が

EzWebの一部の機種(かなり多そうな感じではありますが)では正常に動作しません。

以下の画像のようになります。

ALLとNOの2個のラジオボタンにチェックが入ってしまう状態です。
もう一度言いますが、グループは同一です。

これでPOSTしてしまうとセレクトボックスの下側(NOの方)が優先されてしまい、
上にあるALL、YESが2度と選択できなくなります。

解決方法は以下のHTML

<form action="http://example.com" method="POST">
	<input type="hidden" name="jb" value="test2_ez">
	<input type="radio" name="mail_receive" value="NO">NO<br />
	<input type="radio" name="mail_receive" value="ALL">ALL<br />
	<input type="radio" name="mail_receive" value="YES" checked>YES<br />
	<select name="s_hour">
		<option value="00">00</option>
		<option value="01">01</option>
	</select>
	<br />
	<div style="text-align:center;">
		<input type="submit" name="regist" value="設定する" /><br />
	</div>
</form>

ラジオボタンを一か所にまとめてしまい、間にセレクトボックスを挟まないようにします。
なんかそんなHTMLの規定とかありましたっけ？
まぁ、そんな感じらしいです。

ドコモの端末で動くからOKとかは危険なので気を付けてください。

セレクトボックスを指定したのにラジオボタンになる

HTMLは以下

<div style="text-align:center;">
	<form action="http://example.com" method="POST">
</div>	
	<input type="hidden" name="jb" value="test2_ez">
	<select name="s_hour">
		<option value="00">00</option>
		<option value="01">01</option>
	</select>
	<div style="text-align:center;">
		<input type="submit" name="regist" value="設定する" /><br />
	</div>
</form>

HTML的にどうなんだという部分はありますが、このHTMLでも
PCのブラウザやDoCoMo,SoftBankの携帯端末だとまともに表示され、POST,GETが可能です。

普通にこう見えます。

しかしやはりEzWeb　ここでもやってくれます。

以下の画像や

こんなことになります。


この状態だとどのボタンを押しても前の画面に戻ります。
次のページへ移動はできません。

解決方法は以下

<form action="http://example.com" method="POST">
	<input type="hidden" name="jb" value="test2_ez">
	<select name="s_hour">
		<option value="00">00</option>
		<option value="01">01</option>
	</select>
	<div style="text-align:center;">
		<input type="submit" name="regist" value="設定する" /><br />
	</div>
</form>


まぁ、divの指定が悪いのは見ての通りなので消してやるか、formすべてを囲ってやればOK

ほかにも色々あります

気が向けば色々書いていきますが、とりあえず過去の物にリンクはっときますね。
・携帯電話のキャリア毎のHTMLの解釈の差を吸収する
　　http://labs.pakureserve.jp/archives/325
・各キャリアのHTMLの違い(FORM)
　　http://labs.pakureserve.jp/archives/47
・auの携帯電話でセレクトボックス(プルダウンメニュー)内部が改行されることについて
　　http://labs.pakureserve.jp/archives/5

以下は僕が書いたわけではないけど、同僚の書いたやつ
・携帯CSSちょっとメモ
　　http://labs.pakureserve.jp/archives/111