携帯サイト制作のすゝめ

最近、ドップリと制作期間に入っていてブログの更新もやや滞っていますが、いま作成しているのはとある携帯サイト。
携帯サイト開発に関わったことがある人なら、何度か携帯サイト特有の仕様に悩まされたという経験も多いことでしょう。

ということで今さら感もありますが、これから初めて携帯サイトを制作される方のために、ハマりやすいポイントを書いておくことにしましょう。

なお、対象はi-mode(NTTドコモ)、EZweb(auECナビケータイ)、Yahoo!ケータイ(ソフトバンクモバイルディズニー・モバイル)となります。

1. Cookie、セッションが使えない

i-mode端末の仕様で、2009年春機種からはCookie、JavaScriptともに使えるようになりましたが、それ以前の機種では利用できません。
セッションを利用する場合は、GETパラメータにセッションIDを付与してページ遷移する必要があります。

PHPでセッションIDを利用する場合は、session_id();で取得することができます。
ただし外部サイトに遷移する場合は、リファラーにセッションIDが残らないように気をつけましょう。

2. JavaScriptが使えない

上記に該当するi-mode端末と、EZweb端末、Yahoo!ケータイ端末全般で、JavaScriptが利用できません。
フォーム内の戻るボタンに、javascript:history.back();などは指定できませんので、気をつけましょう。

3. 外部CSSが使えない

headのlinkタグ内で外部CSSを読み込むのはPCサイトでは当たり前ですが、携帯サイトでは指定できません。
また、内部記述のCSSを使用する場合でも、使えるスタイルが少なかったりします。

それと、i-modeのXHTML環境で利用する場合は、XML宣言、DOCTYPEの記述を工夫する必要があるのと、プログラム内でheader関数を書いておく必要があります。

header(“Content-type: application/xhtml+xml”);

4. ファイルのアップロードが使えない

i-mode端末では、2008年夏機種からフォームでのファイルアップロードに対応しましたが、それ以外ではアップロードができません。
ファイルをアップロードするためには、メールに添付して送ってもらう必要があります。

メールを受け取った後、メールサーバ側でプログラムに転送してPEARのMail_mimeDecode::decodeなどで処理するようにしましょう。
メールサーバにqmailを使用している場合は、.qmailや.qmail-defaultファイルに転送先を書くことでプログラムに送ることができます。

5. SSLを使用する場合はShift_JISで

SSLを使用しない場合はUTF-8で作成しても大丈夫ですが、EZweb端末でSSL環境を利用する場合はShift_JIS以外は文字化けします。
DBから取得した文字列などはmb_convert_encodingで、Shift_JISに変換して出力しましょう。

6. いきなりSSL環境に遷移しないように

Yahoo!ケータイ端末では、メールなどからいきなりhttps://〜のアドレスに遷移すると絵文字が文字化けします。
いったんhttp://〜に遷移させてから、header(“Location: https://〜”);などでSSL環境に遷移しましょう。

7. header(“Location: 〜”);は絶対パスで

これは機種依存が大きいですが、相対パスで書くとトラブルが多いようなので、絶対パスで遷移させるようにしておきましょう。

8. 端末固有IDを取る場合は、GETパラメータにguid=ON

携帯サイトでよくある、簡単ログインなどの機能は端末固有IDを利用します。
以前のi-mode環境では、公式サイトでしか端末固有IDがスムーズに取得できませんでしたが、現在はiモードIDが利用できます。

PHPでは$_SERVER変数で取得することができますが、i-mode環境だけは遷移元のページでGETパラメータにguid=ONと付けておく必要があります。
(POSTでも利用できますが、その場合はactionの値からindex.phpを省略しないように注意しましょう)

9. 絵文字をDBに保存

Shift_JISのフォームから送信された絵文字をUTF-8のDBに保存する場合は、mb_convert_encodingしただけではうまく保存できません。
mb_substitute_character(“long”);などでフォーマットを変換してからmb_convert_encodingするようにしましょう。

10. 絵文字をDBから取得

上記の方法でDBに保存した絵文字を呼び出す場合は、pack(“H*”, $hoge);などで元に戻してあげましょう。

また、各キャリアに合わせた絵文字に変換する場合は、MobilePictogramConverterなどでマッピングしてもらいます。
http://php-develop.org/MobilePictogramConverter/
(現在、リンク切れの状態になっています)

11. 絵文字をメールで送信

絵文字をメールで送る場合は、base64_encodeでサブジェクト、ボディを変換し、メールヘッダを各キャリアに合わせた形式にします。
ただ、メール送信先のキャリアは完全にはわかりませんので、@以降のドメインから予測するしかありません。

…ということで、モバイル特有のサービスは他にもありますが、まぁ一般的な携帯サイトを作るにはこういった注意点に気をつける必要があります。
Studio Pumpkinheadでも携帯サイトを用意していますが、それにしてもなかなか厄介なものです。

「携帯サイト制作のすゝめ」への1件のフィードバック

コメントを残す