サイトをiPhone / iPod touchに対応してみた

要約：このサイトをiPhone / iPod touchで見やすいように調整してみたプロセスについて

やっとこさ、重い腰を上げてiPhone / iPod touchで見やすいようにスタイルを調整してみました。ちょっとだけそのプロセスを書いておきます。

Appleからはわりかししっかりしたドキュメントが提供されている^*1 のですが、いざやろうとするとなにからやっていいのかという感じもします。

ビジュアルの調整は同ドキュメントの「ページを読みやすくするために最適化する」の章で説明されていますので、ここを中心にして調整していけばよいかと思います。

まず、どうやって最適化していくかについて。iPhone / iPod touchは特定のプロバイダを使っているわけではないので、UserAgent文字列から判断することになります。で、そもそもブラウザ判別が必要かと言われると、必ずしも必要ではないと思います。

iPhone / iPod touchはCSS3メディアクエリが使えますので、iPhone / iPod touchのみ適用するCSSが指定できるからです^*2 。ただ、それも現時点のみの話ですので、サーバーサイドで調整ができるのならば使っておくに越したことはないかと。

で、その際判別に使用するUserAgent文字列ですが、こんな感じになってます。

iPhone: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
iPod touch: Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A110a Safari/419.3

個々の環境や今後のバージョンアップを考えると、(iPhone; U; CPU like Mac OS X;と言う箇所で判断するのがよいかと思います。PHPですと、こんな感じで判定してます。

PHPソースコード

<?php } if (
    ereg("iPhone; U; CPU like Mac OS X;", $_SERVER['HTTP_USER_AGENT']) ||
    ereg("iPod; U; CPU like Mac OS X;", $_SERVER['HTTP_USER_AGENT'])
    ){ ?>
<!-- served for iPhone / iPod touch -->
<?php } ?>

view-portを設定する

ビューポートはmetaタグで設定するもので、Safariの初期状態での表示領域や表示スケールを設定することができます。私は以下のように設定しました。

HTMLソースコード

<meta name="viewport" content="width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0;" />

これは「初期状態の表示領域を幅320pxの縮尺1.0倍（つまりそのまま）で表示しておいて、ページの拡大・縮小は1.0-2.0倍の範囲内でやって下さい」という命令です。ご覧のようにプロパティ毎に;で区切って記述してください。

なお、ここでは書いていませんがheight=xxxという形で高さを指定できますし、user-scalable=noを追加すれば、拡大・縮小を禁止することができます。

補正CSSで調整する

で、このview-portタグを指定した時にサイトを読み込むと、こんな感じに表示されます。

iPod touch スクリーンショット1

ご覧の通り、単に表示領域がちっこくなっただけで本文領域はでかいままです。それとロゴが邪魔で検索ボックスがつかません。ので、以下のように補正CSSを指定してその中で本文領域の設定・ロゴの差し替えなどを行ってみます。

iPod touch スクリーンショット2

そこそこマシにはなりましたが、そのほかにも一例を挙げると以下のような問題がありました。

グローバルナビゲーション（ページの一番上の部分）がはみ出ていて使えない
ところどころの表示がボックス領域からはみ出ている
リストや定義リストのマージンが大きすぎて表示領域が狭くなっている

(1)のグローバルナビゲーションですが、iPod touchのようにあまり表示領域が広くないUAですと、セレクトボックスに格納して選択→移動するようなものが狭いスペースにおいてもある程度の利便性を備えていてよいかなと思ったのですけど、そうなるとマークアップを変更しないといけません^*3 。

ここで安易にブラウザ判別をつけてマークアップをセレクトボックスに変えてしまうと、HTMLが複雑になって利用しにくくなってしまうので、このマークアップを維持したままで、画像で表示していたのを文字で表示するように変更することで手を打つようにしました。

(2)はpositionプロパティで絶対配置・相対配置による位置調整を乱用していたのが問題で、position: static;に変更し、padding/marginで調整するようにしました。

(3)はPC向けにマージンを大きめに取っていたのが災いしていたので、少なめに設定しておきました。

で、これらも含めていろいろとやってみたらこのような感じになりました。

iPod touch スクリーンショット3

iPod touch スクリーンショット4

iPod touch スクリーンショット5

詳しくは実際のCSSをご覧いただきたいですが、内容としては幅やpadding/margin・positionの調整が多かったですね。あと、フォントはVerdanaを指定しておくとより綺麗に表示されるように感じます。

それに、iPhone / iPod touchは対応できないので、フォントサイズ調整スライダなんかは今回消しています。ただ、これは単にjavascriptで値を変えればいいだけなので今後はラジオボックスでフォントサイズを選べるようにしていこうかと思っています。

方向を検出する

ご存じの通り、iPhoneは縦だと320px×356px^*4 、横だと480px×196pxとデバイスを持つ方向によって幅が変わってしまいます。

コレに備えて、補正CSSは幅に依存しないように作っています（幅を % で指定するなど）が、場合によっては調整が必要かもしれません。

iPhone / iPod toucｈはjavascriptでデバイスの方向を検出できます（出典：Safari Web Content Guide for iPhone: Handling Orientation Events）ので、これを使って補正CSSを追加したりできるよう…なのですが、手元の環境で以下のサンプルを試した限りでは縦方向のwindows.orientationが-90と言われてしまいます。これって私の環境だけの問題なんでしょうかね。

JAVASCRIPTソースコード

<script type="text/javascript">
//<![CDATA[
window.onorientationchange = function () {
  if (window.orientation == 90){
    alert("現在、90です");
  } else if (window.orientation = -90){
    alert("現在、-90です");
  } else if (window.orientation = 0){
    alert("現在、0です");
  } else{
    alert("現在、その他です");
  }
}
//]]>
</script>

ちなみにApple Developper Connectionではビデオでのチュートリアルも公開されています、英語ですがわかりやすいです[戻る]
詳しくは「iPhoneスタイルシートを指定する」の項を参照[戻る]
この部分は順不同リストでマークアップしていました[戻る]
アドレスバーなどの領域を除いた表示領域[戻る]

キーワード：

Liner Note

検索