今年7月にiPhone3Gが発売されてしばらく経ちます。
発売時にかなり売れただけあって、私のまわりでもお持ちの方をたまに見かけます。
今回は普通のケータイ向けサイトをiPhoneに対応させる方法について。
※iPhone特有のアクションに対応するという意味ではなく、あくまでもケータイサイトをiPhoneでも表示できるようにするということを目的としています。
※以下の内容は2008年8月頃のものですので現在では状況が一部変わっている可能性があります。ご了承ください。
機種判別
ユーザーエージェントでケータイ/PCを振り分けているサイトではiPhoneをケータイとして判別するように.htaccessやhttpd.confを修正します。
※iPhoneのユーザーエージェントについては以下参照
userAgent一覧-ユーザーエージェント一覧
http://www.openspc2.org/userAgent/
(ケータイ→PCへの転送例)
RewriteCond %{HTTP_USER_AGENT} !^Mozilla.+(DDIPOCKET|WILLCOM|iPhone)
RewriteCond %{HTTP_USER_AGENT} ^(Mozilla|Opera)
RewriteCond %{HTTP_HOST} ^sample.com
RewriteRule ^(.*)$ http://www.sample.com/ [R]
(PC→ケータイへの転送例)
RewriteCond %{HTTP_USER_AGENT} ^(UP\.Browser|KDDI|DoCoMo|J-PHONE|Vodafone|MOT|SoftBank|emobile|Mozilla.+(DDIPOCKET|WILLCOM|iPhone))
RewriteCond %{HTTP_HOST} ^www.sample.com
RewriteRule ^(.*)$ http://sample.com/ [R]
機種別に画面サイズの出力を変えているサイトではiPhoneの画面サイズ設定を追加します。
▼CSVファイルサンプル（一部抜粋）
機種名,ユーザーエージェント機種IDまで,横サイズ,縦サイズ
921SH,SoftBank/1.0/921SH,468,754 iPhone 3G,Mozilla/5.0 (iPhone,320,396 WX331K,Mozilla/3.0(WILLCOM;KYOCERA/WX331K,235,245
メール関連
空メール登録をケータイからの登録に制限しているサイトでは許可ドメインにi.softbank.jpを追加します。
プルダウンメニューでケータイのドメイン一覧を表示している場合もリストにi.softbank.jpを追加します。
※.ne.jpではありませんので注意してください。
現状ではiPhoneでのメールへのファイル添付は、ファイルを選択してから行う必要があるようです。
つまり、
「mailtoリンクから空メール立ち上げ→画像を添付→送る」
という流れで行うような画像投稿方法は難しいようです。
文字コード関連
iPhoneのブラウザ「Safari」はエンコードの判別が弱いですので、必ずサイトのエンコーディング設定をMETAタグで設定します。
※一部設定しても効果のないエンコード設定があるようです。（少なくとも「SJIS-WIN」という設定は効果がありませんでした。）
※設定できていない場合は欧州の文字コードで表示されて文字化けします。
(METAタグの例)
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
サイトの文字コードはShift-JISにもUTF-8にも対応しています。
mailtoの本文に関しては、日本語及びURLエンコードした文字列を含めることはできず、英数字・記号以外の内容が含まれていると内容が空の状態でメールが作成されます。
iPhoneのズームアウト対策
デフォルトの表示ではズームアウトされてしまい、ケータイサイトとしては非常に見にくいですので、HEADタグ内に以下のタグを追加することでズームされないように表示を固定することができます。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
絵文字表示
ソフトバンクから発売されているiPhoneですが、絵文字に対応していませんので、PCブラウザの場合と同様に画像で表示するようにします。
Flash
Flashに関しては、現状ではPC用・ケータイ用問わず対応していませんので、以下のように対応します。
※AdobeがiPhone用Flashを開発予定のようですので今後は見えるようになるかもしれません。
インラインFlashを表示している場合
→代替画像を表示
Flashでページを作成している場合
→代替のHTMLサイトを表示
その他
Mac専用ですがiPhoneのシミュレータがあります。
iPhoney
http://www.marketcircle.com/iphoney/
※確認したところではズームの動作は実機と異なるようです。
iPhone対応サイトサンプル
サンプルはこちらからご確認下さい。
※iPhoneで確認していただくと、ズームアウト対策結果の違いが確認できます。
実機ではQRが読み取れませんでしたので、メールでURLを転送して確認されることをおすすめします。
→URLをメールで送る
http://ookura.tanikaze.com/Sample/post1045/
