ここでは、携帯向けサイトの作り方を簡単に紹介します。
PC向けサイトを作ったことのある人を対象とさせていただきます。
まず、携帯版のファイルはPC版と完全に分けましょう。
共通のファイルで済まそうとするのはかなり無理があります。
いくつかあるので順に説明します。
これが一番大きなところでしょう。
後で詳しく説明しますが、携帯向けサイトでは1ページ当りのファイルサイズを
画像も含めて5Kbytes程に収めなければなりません。
5Kbytesでは足りない、と思われる方も多いと思いますが
試しに5Kbytesの文章を書いて携帯で表示させてみましょう。
携帯の小さい画面から見ればこれでもかなりの情報量だと感じるはずです。
携帯向けサイトでは、一切のスタイルシートが使えません。
もともと、スタイルシートとは細かな装飾方法をアレンジするためのものなので
携帯の小さな画面でこれを使う理由は特に無いでしょう。
これも一切使えません。
今までJavaScriptバリバリでページを書いてきた人にとっては
少々物足りないかもしれませんが、我慢しましょう。
クッキーはVodafoneの比較的新しい機種なら使えるようです。
i-mode、ez-webでは技術情報でクッキーについて触れていないので不明ですが
使えないと思った方がいいでしょう。
セッション管理は全機種で使うことが可能ですが、少し手順が必要になります。
参考ページ : 携帯でのセッション管理
PC向けサイトでも、ブラウザによって動作やレイアウトが異なるといった事はありましたが
携帯向けサイトにおいてもその傾向は無くなりません。
各携帯メーカーによって様々な規格の違いが存在します。
現在、i-mode / Vodafone / ez-web という3種の規格があります。
しかし、メーカーによって画面を作り替えたりするのはさすがに面倒です。
共通の作りにする事は比較的簡単なので、そうする事をお薦めします。
メーカーによって若干の違いはありますが、
ポイントを押さえれば携帯共通のページを作ることが可能です。
まずこれを忘れないようにしましょう。
i-mode、EZwebは技術資料に「Shift_JISのみ対応」と記されていますが 実際には他の文字コードでも表示できる場合もあるようです。 Vodafoneでは EUC-JP / ISO2022-JP / UTF-8(3GC端末のみ) に対応しています。
そして、METAタグは必ず入れるようにします。
ファイルサイズが勿体無いと思うかもしれませんが、
これを書かないで文字化けを起こしてしまったら元も子もありません。
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
基本的なタグは大体使えるのであまり気にしなくていいはずです。
ただ、使える属性は限られています。
これが少々厄介です。
というのも、全機種で共通して使えるフォーマットが無いからです。
全ての機種で対応しているのが GIF です。
2003年以降発売の機種では JPEG も使えます。
全ての機種で対応しているのが PNG / JPEG です。
3GC端末(2005年以降発売)では GIF も使えます。
全ての機種で対応しているのが PNG です。
2001年後半以降発売の機種では JPEG に、
2003年以降発売の機種では GIF にも対応しています。
以上を踏まえると、JPEGならば2003年以降発売のほぼ全機種で使うことが出来ます。
GIFはVodafoneの対応が若干遅いのですが、他の2メーカーなら2003年以降で対応しています。
PNGはi-modeが対応していないので止めた方がいいでしょう。
※ i-modeさえ対応すれば、おすすめのフォーマットはPNGなんですが…
これは機種によって様々ですが、
とりあえず横幅20(全角10文字)で作っておけば大体の機種には対応できそうです。
縦幅は8～10くらいが一般的でしょう。
初めにも少し紹介しましたが、これも機種により様々です。
初期の機種は全体で5K。FOMAでは30K(全体では100K)。
初期の機種は全体で6K。3GC端末では10K(全体では300K)。
全体で9K。
以上により、5K以内ならばほぼ全ての携帯で見ることができます。
これは、画像等を含めた1ページの総サイズ数です。
携帯ページではもちろんフォームを使うことが出来ますが、
気を付けなればいけない点がいくつかあります。
INPUTタグにはsizeとmaxlengthという2つの属性を設定できます。
前者は表示上の大きさ、後者は入力できる最大文字数(半角単位)です。
特に、maxlengthは必ず明記しておきましょう。
携帯は画面が狭いので、画面内の特定位置にジャンプするために
アクセスキーというものを使って操作性を高めることが出来ます。
例えば、「1」を押したら入力欄にジャンプする、といった事が可能になります。
以前はメーカーによって違いがありましたが、
現在は accesskey という属性がほぼ全ての規格で使えます。
INPUTとAタグの属性として使います。
が、Vodafoneの昔の機種では使えません。
その場合、代用の属性は無いようなので諦めるしか無さそうです。
通常、入力欄では日本語入力モードが初期状態になっています。
しかし、実際にはメールアドレスや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は属性なので、両方とも記述することが可能です。
やや冗長ですが、これが一番簡単で無難なやり方でしょう。
CGIプログラムにパラメータを渡すには2つの方法があります。
一つはフォームからSubmitする方法、もう一つはクエリー文字列を使う方法です。
ここでは後者をついて使うときの注意点を挙げます。
フォームでGET方式（デフォルト）を使う際にも同様の注意が必要です。
URLに続けて「?」記号を付加し、その後にキーと値のペアを「&」で区切って指定します。
このとき、キーと値に使えない文字がいくつかあります。
「&」「+」「 」（半角スペース）の3つです。
「&」は区切り文字ですから、当然キーと値には使えません。
「+」は半角スペースに変換されます。
「 」は、端末によって動作が異なります。
これらを含め、特殊文字はエスケープ記述を用いることができます。
例えば「&」は文字コードが0x26（10進法で38）なので「%26」と記述することができます。
「+」は「%2B」、「 」は「%20」となります。
この中で注意するのは半角スペースです。
この文字は、例えばVodafoneだとエスケープ記述をしなくても正しく動きますが
i-modeだと動きません。
ですから、全ての端末で確実に動くようにするためには
半角スペースも必ずエスケープ記述（%20）するようにしましょう。
これは機種により完全に記述方法が異なるので
静的ページではファイルを分ける必要があります。
初めに言ったように、なるべく携帯共通のページを作りたいので
絵文字を使うのは動的生成ページに限定することをお薦めします。
ez-webでは、i-modeの絵文字を自動的に変換する機能があるそうです
以下、携帯メーカー毎に説明します。
絵文字一覧
記述方法はいくつかありますが、どれも短所があります。
なぜこんな方法を採用したのか理解できませんが、
ファイル内にバイナリコードを埋め込むというものです。
確かにファイルサイズは節約できます（2バイト）が、それ以外のメリットはありません。
さらに、JavaServletを使っているとバイナリコードの埋め込みは一筋縄ではいきません。
全機種に対応しています。
文字コード表にあるUnicode文字コードを &#x\\\\; という形式で記述します。
便利ですが、2002年後半以前に発売された機種では利用できません。
文字コード表にあるShift_JIS文字コードを &#\\\\; という形式で記述します。
全機種に対応していますが、拡張絵文字が表示できません。
さらに、「非推奨」の入力方法なので将来利用できなくなる可能性があります。
絵文字一覧
上のページから絵文字に対応するコードをコピー＆ペーストするだけです。
一見バイナリコードのようですが、ちゃんとJavaServletからでも利用できます。
当然、携帯ページを作ったらそれを実際に見て確認しなければなりません。
しかし、わざわざ携帯から確認していたらお金も掛かるし大変です。
そこで、各携帯メーカーはビューアを用意しています。
iモードHTMLシミュレータII というソフトが用意されています。
HTTPからの読み込みに対応しているので
掲示板などの動的生成ページの確認に利用することが出来ます。
いくつかありますが、Openwave SDK がHTTP読み込みに対応しています。
ウェブコンテンツヴューア というソフトが用意されています。
HTTP読み込み対応、 絵文字パレット、エラーチェックなど便利な機能があり操作も簡単です。
2006/9現在、2006/2/17までに発売された全てのVodafone携帯端末に対応しているという事です。
全ての携帯からアクセスされることを考えれば
これら3つ全てのビューアで確認するのが良いのでしょうが、さすがにそれは面倒です。
通常はどれか一つのビューアで確認をすれば充分でしょう。
個人的には ウェブコンテンツヴューア が一番使い易くお薦めです。
携帯サイトを作る上でのちょっとしたテクニックを紹介します。
携帯サイトでは、これがかなり重要なポイントになってきます。
ファイルサイズには制限がありますし、制限を超えないにしても
サイズを減らすことは読み込み時間の短縮やパケット代の節約につながるからです。
地味ですが、これだけでも数十byteは縮小することが出来ます。
この大容量時代に反しているとは思いますが、
限られた資源の中ではこういう地道な努力が必要なんです。
JavaServletを使っているのならば、フィルタを使うことで
JSPに一切手を加えること無く全ての改行を削ることが出来ます。
改行削除フィルタのサンプルを作ってみました。興味がある方は参考にしてみて下さい。
冒頭でも話したように、表示文字列だけで5Kbytesを使い切れば
かなりの情報量を扱うことが出来ます。
PC向けサイトからコピーして携帯向けサイトのページを作る場合、
多くのタグは必要ないことに気付くはずです。
無駄なタグは出来る限り排除しましょう。
もちろん、タグを駆使してレイアウトにこだわることも時には必要だと思いますが
それによって表示できる情報量が減ることは頭に入れておきましょう。
フォームを使ったページの場合、例えば以下のようになっているとします。
<input type="hidden" name="script_name" value="abc"> <input type="hidden" name="script_url" value="def">
これらは一つにまとめてしまいましょう。どうせなら、name値も簡潔にします。
<input type="hidden" name="k" value="abc,def">
もちろん、この abc,def という文字列を解析するプログラムは
CGI側で用意する必要があります。
この手法を取る場合は、セキュリティに注意して下さい。文字列解析の知識が無いなら、止めておきましょう。
以下の Tips は、推奨されない方法です（W3C非互換）。
どうしてもという時だけ使って下さい。
例えば、右寄せをするときに
<div align="right">
とするよりは
<div align=right>
とした方がサイズを節約できます。
上でも書いたように、この記述法は W3C非互換 です。