携帯サイトの作り方

Google Technorati Buzzurl Digg Bloglines DRECOM niftyクリップ pookmark pingking Choix

【引用ページ】http://www.limy.org/program/mobile/list1.html

ファイルサイズの制限
画像も含めて5Kbytes程に収めなければなりません。
i-mode …初期の機種は全体で5K。FOMAでは30K(全体では100K)。
Vodafone …初期の機種は全体で6K。3GC端末では10K(全体では300K)。
EZweb…全体で9K。

スタイルシート関連
携帯向けサイトでは、一切のスタイルシートが使えません。

JavaScript
これも一切使えません。

クッキー、セッション
クッキーはVodafoneの比較的新しい機種なら使えるようです。
i-mode、ez-webでは技術情報でクッキーについて触れていないので不明ですが
使えないと思った方がいいでしょう。

メーカーによる違い
PC向けサイトでも、ブラウザによって動作やレイアウトが異なるといった事はありましたが
携帯向けサイトにおいてもその傾向は無くなりません。




携帯共通サイトを作るにあたって


文字コードはShift_JISにする

そして、METAタグは必ず入れるようにします。
【meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"】

画像について
i-mode … 全ての機種で対応しているのが GIF です。
2003年以降発売の機種では JPEG も使えます。

Vodafone…全ての機種で対応しているのが PNG / JPEG です。
3GC端末(2005年以降発売)では GIF も使えます。

EZweb …全ての機種で対応しているのが PNG です。
2001年後半以降発売の機種では JPEG に、
2003年以降発売の機種では GIF にも対応しています。

※以上を踏まえると、JPEGならば2003年以降発売のほぼ全機種で使うことが出来ます。
GIFはVodafoneの対応が若干遅いのですが、他の2メーカーなら2003年以降で対応しています。
PNGはi-modeが対応していないので止めた方がいいでしょう。
※ i-modeさえ対応すれば、おすすめのフォーマットはPNGなんですが…

画面サイズ
これは機種によって様々ですが、
とりあえず横幅20(全角10文字)で作っておけば大体の機種には対応できそうです。
縦幅は8行~10行が目安。


ビューアについて
i-modeiモードHTMLシミュレータII
ez-webOpenwave SDK
Vodafoneウェブコンテンツヴューア 2006/9現在、2006/2/17までに発売された全てのVodafone携帯端末に対応しているという事です。
■全ての携帯からアクセスされることを考えれば
これら3つ全てのビューアで確認するのが良いのでしょうが、さすがにそれは面倒です。
通常はどれか一つのビューアで確認をすれば充分でしょう。
個人的には獵 ウェブコンテンツヴューア が一番使い易くお薦めです。




Tips
ファイルサイズを縮小する
改行を減らす
タグの使用は必要最小限にする
ダブルクォーテーションは極力使わない
【div align="right"】→【div align=right】
他にもINPUTタグのname属性など、ほとんどの場合でダブルクォーテーションは必要ありません。
例外として、属性値にシングル(ダブル)クォーテーションを含む場合には
ダブルクォーテンションで括ってやらないといけません。

フォームについて
文字数入力制限
INPUTタグにはsizeとmaxlengthという2つの属性を設定できます。
前者は表示上の大きさ、後者は入力できる最大文字数(半角単位)です。
特に、maxlengthは必ず明記しておきましょう。

アクセスキー携帯は画面が狭いので、画面内の特定位置にジャンプするために
アクセスキーというものを使って操作性を高めることが出来ます。
例えば、「1」を押したら入力欄にジャンプする、といった事が可能になります。
以前はメーカーによって違いがありましたが、
現在は accesskey という属性がほぼ全ての規格で使えます。
INPUTとAタグの属性として使います。

入力モードの設定
通常、入力欄では日本語入力モードが初期状態になっています。
しかし、実際にはメールアドレスやURLの入力欄では半角英数字しか使いません。
このような場合、わざわざ携帯で入力モードを変えるのは面倒です。
初めから半角英数字モード等にする方法があるので是非使いましょう。
これは機種により若干の違いがあります。
i-modeとez-webでは、istyle 属性が使えます。
vodafoneの昔の機種ではこの属性が使えません。代わりに、mode 属性を使います。

全角(デフォルト)istyle = 1 または mode = hiragana

半角カナ
istyle = 2 または mode = hankakukana

英字
istyle = 3 または mode = alphabet

数字
istyle = 4 または mode = numeric

istyleとmodeは属性なので、両方とも記述することが可能です。
やや冗長ですが、これが一番簡単で無難なやり方でしょう。

hidden文字列は一つにまとめる
フォームを使ったページの場合、例えば以下のようになっているとします。
【input type=hidden name=script_name value=abc】
【input type=hidden name=script_url value=def】これらは一つにまとめてしまいましょう。どうせなら、name値も簡潔にします。

もちろん、この abc,def という文字列を解析するプログラムは
CGI側で用意する必要があります。