月: 2009年8月

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

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

なお、対象はi-mode(NTTドコモ)、EZweb(au、ECナビケータイ)、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でも携帯サイトを用意していますが、それにしてもなかなか厄介なものです。

韓国の検索エンジン「NAVER(ネイバー)」が、モバイル版サイト「NAVERモバイルβ」を公開したということです。
…と、その前にNAVERって、いつの間にかPC版がオープンしてたのですね。

NAVERの名前を聞くと、古くからWebに接している人は懐かしいと感じることでしょうが、いったん日本市場から撤退した後、最近になって再オープンしていたようです。

ちなみに、検索エンジンは独自の仕様になっており、検索結果はイマイチ弱いようにも感じますが、ユーザー参加型のコンテンツもあって、ポータル的な仕掛けがちょっと面白いかも。
韓国ではGoogleを上回るシェアを取っていますが、日本では中国産の検索エンジン「百度(バイドゥ)」と並んでどこまで検討するのか、注目したいところです。

まぁYahoo!の検索エンジンは、Bingに置き換わりそうですし、最近のSEO関連は情報の入れ替わりが激しいですね。

少し前には日経新聞の記事にもなるぐらい、TwitterやTumblrといった1行ブログが人気を博していますが、実際使ってみると「あれっ？」と感じたりします。
ブログやSNSが最初に出てきた時は面白さを感じましたが、Twitterはイマイチ良さがわかりませんでした。

なぜこのサービスがそれほどもてはやされるものかと思っていたのですが、最近iPhoneを使い始めてやっとその理由がわかりました。

モバイル端末との親和性がすごく良いのです。

ガラケーやWindows Mobile端末では感じませんでしたが、iPhoneで専用アプリケーションをインストールしたりすると非常に使い勝手が上がります。
また、携帯電話で長文を書くのは辛いので、Twitterのようなチョコっと更新するサービスの方がピッタリなわけなのです。

Twitterが元々、モバイル環境を意識していたのかどうかはわかりませんが、ちょうど時代にマッチしたサービスになっているとは思います。
ちょっと目から鱗でした。