携帯サイトを運営している人むけなどに、とりあえずまとめてみた。ほぼ携帯サイトを構築する要領でできそうではあるが、一部携帯サイトのつくりと比べて気をつけなければいけなかったりコストが掛かりそうな点がある。(この記事はちょくちょく更新されます)
IPアドレスはどうなるのか
- 既存のソフトバンクのガラパゴス携帯とは異なる
- 126.240.0.0/12
- 逆引きすると*panda-world.ne.jpとなっており、ソフトバンクがiPhone用に取得したネットワークである
- 追伸 実は増えているIPレンジ
- 予告なく変更になるおそりがあり相当注意が必要だがiPhoneの運用に相当なグローバルIPが必要だったと思われる。たぶん。
- 効率的に処理するにはUserAgentがiPhone OSであった場合gethostbyaddr($_SERVER["REMOTE_ADDR"]などで逆引きして*panda-world.ne.jpとマッチするかどうか検証すべき
- 携帯むけに設計されたサイトでは3GS回線からのアクセスに限定させ、WiFiやUA偽装のアクセスの入り口をふさいだ方が良いだろう
ユーザーエージェントはどうなるのか
認証関連
- かんたんログインは利用できない。むしろ携帯サイトから改変するなら削除ほうがよいだろう。
- セッション管理にはcookieのみ利用し、URIにセッションキーをなるべく含めるべきではない
- かんたんログインが利用できなくなるが、SafariのID?PASSWORDを覚えさせるようにHTMLが適切に記載されているかどうか検証する。Safariの設定だけではID/PASSを覚えてくれないケース(Passwordをパスワード型で表示してない場合等)も存在する
- 詳しくはhttp://d.hatena.ne.jp/mabots/20100422#1271908023
- なお、Safariの設定方法(デフォルトでは無効)やiPhone紛失時のリスクについても説明が必要だろう。
画面の横幅はどうやって指定されるのか
- サイズを指定しなければ文字がものすごく小さくなる可能性がある
- viewport指定
- フォーム入力時にズームしすぎてしまうので、最大ズーム量を制限しておく必要がある。以下にQVGAむけに設定した例を示しておく。なおズームできないようにもできるが、縦横切り替えたときの動作などに留意し、ズームを受け入れるようにしたほうが最終的にはベターな気がする。
<meta name="viewport" content="width=240, initial-scale=1, maximum-scale=1.3>
メール投稿
- i.softbank.jpはあまり有効に活用されていないかもしれないので、softbank.ne.jp(MMS)を主たるアドレスとする
- さらにSafariからmailto:としてaタグで渡すと、標準のメールアプリが立ち上がるので、sms:としてaタグを渡すように修正する。appleの技術書では数字とハイフンとなっているが普通にメールアドレスも渡せる。(iPhone OSでしか動作しない)
<a href="sms:あなたのメールアドレス">メールで投稿する</a>
絵文字
- 絵文字はフォームの書き込みにおいては利用できない
- 将来にわたって変更の恐れがある。メール投稿などは注意必要。
- 絵文字の表示については、画像で絵文字を表示するか、Unicode指定でSoftbankの絵文字コードを渡すか、あるいは、絵文字を除去するJSをiPhoneの場合は呼び出して除去する
- このあたりはキャリア依存に成りうるので、除去するか画像で表示するのが正攻法か。
その他
- iPhoneのSafariからファイルシステムへのアクセスはできないので排除する
- 当然flashは利用不可
- JavaScriptは利用できるもののwindowまわりに制約や5秒の実行時間制限、5MBのメモリ(配列を処理しようとすると大変)などAjaxでなにかやるにも制約は大きい
- IUIを使ったとしても適宜ページ分割が必要だろう
- 10/04/14 13:20などの数字を発信先電話番号としてiPhoneが評価している場合がある
- 各種iPhone独自リンクの作り方については下記を確認する
- (ちょっと精度が悪いので)勝手に評価されないように下記METAタグを指定する
<meta name="format-detection" content="telephone=no"/>
より詳細を知る
