mabots' blog

知のレバレッジを最大化せよ (旧はてなダイアリーから移転しました。)

iPhoneむけに携帯サイトの内容を表示しようとしたときに考えるべきポイント

携帯サイトを運営している人むけなどに、とりあえずまとめてみた。ほぼ携帯サイトを構築する要領でできそうではあるが、一部携帯サイトのつくりと比べて気をつけなければいけなかったりコストが掛かりそうな点がある。(この記事はちょくちょく更新されます)

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回線からのアクセスに限定させ、WiFiUA偽装のアクセスの入り口をふさいだ方が良いだろう

ユーザーエージェントはどうなるのか

  • 「Modzilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; ja-jp)*」となるので、iPhone OSあたりでマッチしておけばよい
    • versionは結構頻繁に変わる可能性がある
    • ipodiphoneUAは異なる

認証関連

  • かんたんログインは利用できない。むしろ携帯サイトから改変するなら削除ほうがよいだろう。
  • セッション管理にはcookieのみ利用し、URIにセッションキーをなるべく含めるべきではない
  • かんたんログインが利用できなくなるが、SafariのID?PASSWORDを覚えさせるようにHTMLが適切に記載されているかどうか検証する。Safariの設定だけではID/PASSを覚えてくれないケース(Passwordをパスワード型で表示してない場合等)も存在する

画面の横幅はどうやって指定されるのか

  • サイズを指定しなければ文字がものすごく小さくなる可能性がある
  • viewport指定
    • フォーム入力時にズームしすぎてしまうので、最大ズーム量を制限しておく必要がある。以下にQVGAむけに設定した例を示しておく。なおズームできないようにもできるが、縦横切り替えたときの動作などに留意し、ズームを受け入れるようにしたほうが最終的にはベターな気がする。
<meta name="viewport" content="width=240, initial-scale=1, maximum-scale=1.3>
  • style media属性でiPhone用のCSSを渡す
    • jsで携帯用のDOM書き換えるのも良いかもしれない。(XHTML用のビューを用意している場合はいろいろできるだろう)

メール投稿

  • i.softbank.jpはあまり有効に活用されていないかもしれないので、softbank.ne.jp(MMS)を主たるアドレスとする
    • i.softbank.jpとsoftbank.ne.jp(MMS)が存在する。さらにvodafone.ne.jpから機種変してくる可能性もある。
  • さらにSafariからmailto:としてaタグで渡すと、標準のメールアプリが立ち上がるので、sms:としてaタグを渡すように修正する。appleの技術書では数字とハイフンとなっているが普通にメールアドレスも渡せる。(iPhone OSでしか動作しない)
<a href="sms:あなたのメールアドレス">メールで投稿する</a>

絵文字

  • 絵文字はフォームの書き込みにおいては利用できない
    • 将来にわたって変更の恐れがある。メール投稿などは注意必要。
  • 絵文字の表示については、画像で絵文字を表示するか、Unicode指定でSoftbankの絵文字コードを渡すか、あるいは、絵文字を除去するJSをiPhoneの場合は呼び出して除去する
    • このあたりはキャリア依存に成りうるので、除去するか画像で表示するのが正攻法か。

その他

  • iPhoneSafariからファイルシステムへのアクセスはできないので排除する
    • upload, download
    • iPadだとできるようになるらしいのでSafariの対応待ちか。
  • 当然flashは利用不可
  • JavaScriptは利用できるもののwindowまわりに制約や5秒の実行時間制限、5MBのメモリ(配列を処理しようとすると大変)などAjaxでなにかやるにも制約は大きい
    • IUIを使ったとしても適宜ページ分割が必要だろう
  • 10/04/14 13:20などの数字を発信先電話番号としてiPhoneが評価している場合がある
<meta name="format-detection" content="telephone=no"/>

より詳細を知る