フィーチャーフォン向けサイトをiPhone/Androidのスクリーンで見やすくする

すでにフィーチャーフォン向けサイトをお持ちでしたら、わずかな改修をすることでフィーチャーフォン向けサイトをiPhoneやAndroidなどのスマートフォンに最適化させることができます。
次のステップに沿ってサイトをスマートフォンに最適化させることによりAdLantisのスマートフォン向け広告枠を利用することもできるようになります。

検証環境

必須ではありませんが、サイトの表示確認用にiPhone 3G / 3GS, iPod touchの実機を手元に準備しておくことで最適化の結果を実際に確認することができます。
またIntel CPUを搭載したMacをお持ちの場合はiPhone SimulatorをMacにインストールすることができます。iPhone SimulatorはAppleのiPhone Dev Centerで配布されているiPhone SDKを入手(無料の会員登録が必要)しインストールすることで使うことができます。
実機、iPhone Simulatorの両方がない場合はSafariまたはGoogle Chromeでプレビューすることをおすすめします。

3GC型のYahoo!ケータイ向けサイトをベースにする

多くのモバイルサイトではi-modeのFOMA, EZwebのWIN, そしてYahoo!ケータイの3GC型の3種類かそれ以上のテンプレートを用いてサイトを管理されているかと思います。スマートフォン向けサイトと3GC型のマークアップは似通っており、3GC型とスマートフォン向けサイトで同一のテンプレートを用いても互換上の問題はほぼ発生しません。iPhoneやAndroidからのアクセスは3GC型のテンプレートに振り分けするようにしましょう。

iPhoneブラウザの識別

User AgentにiPhoneまたはAndroidの文字列があるかどうかを検査してiPhoneであるかを識別させます。以下はPHPの例です。

$is_iphone = strpos('iPhone', $_SERVER['HTTP_USER_AGENT']);
$is_android = strpos('Android', $_SERVER['HTTP_USER_AGENT']);

以上のコードの評価が真ならばiPhone, iPod touch, iPhone SimulatorまたはAndroidからのアクセスであると推定できます。
なお、iPhoneやiPod touch、AndroidなどのスマートフォンはWiFi経由であらゆるインターネット網から接続されるためIPによる制限を施すことはできません。

View Portの設定

iPhone SafariやAndroidブラウザなどのWebKitベースのブラウザは<meta>タグのviewport属性でサイトの横幅を明示することができます。viewportが明示されていない場合、iPhoneはパソコン用の一般的なサイトを想定し横幅980pxで表示するため、非常に見にくくなってしまいます(図1)。

図1: viewportの指定がない状態

iPhoneユーザに携帯と同様の操作感を提供するために、viewportでサイトの横幅をiPhoneの画面の横幅と同じ(等倍)になるようにし、さらにズームを禁止させます。(ズームを禁止することでサイトのアクセシビリティが低下するようなケースでは maximum-scale と user-scalableの記述を取り除いてください)

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

上記のタグを挿入することで、図2のように改善されます。
図2: viewportの指定をした状態

画像の幅を最適化

携帯サイトでは携帯の画面幅ギリギリの画像サイズを指定しているケースがあります。view-portの指定だけでは画面幅が320pxとなり、240px程度に設計されている携帯の画像を配置すると前後左右に余白ができてしまいます。そこで次のようにCSSを指定します。
<style type="text/css">
body {margin:0;padding:0;}
img {zoom:140%;}
</style>
この指定を行うことにより、QVGAの携帯画面幅とiPhoneのスクリーンの差が吸収され、画像が画面の幅いっぱいに表示されるようになります(図3)。
図3: zoom属性の指定で画面幅いっぱいに画像を表示

絵文字

iPhone(iPhoneソフトウェア2.2以降)では絵文字に対応しています。3GC型の絵文字と文字コードは同一ですが、Unicodeを直接埋め込むか実体参照(&#xE04A;などと入力)する必要があります (Webコードは使えません)
また、Androidは絵文字に対応していなかったりキャリアによって異なる絵文字セットが収録されていることがあります。

技術資料

viewportなどiPhone OS上で動作するSafari固有の仕様について、下記のドキュメントが参考になります。
iPhone OS 2.2以降で利用可能な絵文字については、SoftBank Mobile Creationの情報が参考になります。

文書情報

2009年9月25日 第1版公開
2010年4月27日 第2版公開
Comments