nobu417.jp

ブログエントリー

タイトルの通り、http://www.nobu417.jp/ のトップページと、ブログの各エントリのページを iPhone で閲覧した時に iPhone の画面に最適化して表示されるよう対応した。

きっかけは Twitter からのアクセス

Twitter は iPhone のクライアントで閲覧している人も数多く、Twitter にブログのフィードを流していることもあってか、実際にこのブログへのアクセス解析を見ても iPhone からの閲覧がかなりの数に達するようになっていた。しかし今までは iPhone 向けのページを特別用意せず、既存の PC レイアウトのページを iPhone で閲覧してもらうカタチにしていたので、自分で見ていても拡大縮小などせねばならず、少々面倒に感じるようになってきていた。

今回試みた iPhone 対応方法

今回は時間もそんなになかったため、サーバーの設定を深くいじってみたり、PHP で条件分岐したりといったことは一切していない。代わりに、Apache の mod_rewrite モジュールを使って読み込む CSS をユーザーエージェントが iPhone の場合は専用 CSS の方を読み込むように設定してやった。そのため、純粋な HTML のソースには PC 版と iPhone 版のページのソースが混在している。Body 要素内の一番上位に位置する DIV 要素を、PC 版と iPhone 版で切り分けて表示するようにしているだけなのだ。要は、PC からのアクセスの場合に読み込まれる CSS では iPhone 用の DIV 要素の Display 属性を none に設定してあり、iPhone の場合はその逆に PC 用の DIV 要素の Display 属性を none にしてやっている。

少し難しかった Retina ディスプレイへの対応

手元にある iPhone は iPhone 4で Retina ディスプレイだ。しかし iPhone 3GS までは 480x320 の解像度であり、iPhone に搭載されている Safari も iPhone 4 でも以前のレイアウトに準じたモノになっている。しかし 480x320 のディスプレイのみに対応したサイトの場合、iPhone 4 の Retina ディスプレイで見た時にディザなどが発生しがちなのは Retina ディスプレイ未対応の iPhone アプリと同じだ。そこで、ヘッダーなどの素材に使う画像は Retina ディスプレイに最適化したモノにしてやった。しかしながら、画像の実際のピクセル数と HTML ソース上のピクセル数が一致しない (実際のピクセル数は2倍になる) ため、その対応には苦慮した。また、ポートレイトモード (縦表示) とランドスケープモード (横表示) にも同時に対応しなければならなかったため、余計にヘッダー画像の作成に時間を要することとなった。結果的には、ランドスケープモードで表示した時にヨコ幅である480ピクセルの2倍の960ピクセルの画像を用意してやり、width 属性で 100% と指定してやることで解決した。これは、今後 iPhone 4 や iPhone 3GS、iPhone 3G 対応サイトを構築する上でのデザイン上の重要な問題となってくるかもしれない。

その他のページは順次対応予定

正直、主要ページを iPhone 対応させたものの、ページナビゲーションは未だに悩んでいる。そのため、トップページとブログの各エントリのページ以外は iPhone 対応させておらず、iPhone から閲覧すると空白のページが表示されるようになっている (このブログのエントリの執筆時点) 。アーカイブのページも早急に iPhone に対応したいところではあるが、iPhone 向けにわかりやすいナビゲーションを考えると、どのようなデザインやレイアウトが最適であるのか答えが出ず、未だに着手していない。しかし今後はケータイ向けのページのみならず (ちなみにこのサイトは一般的なケータイには対応していないのだが) 、iPhone 向けのページの需要も出てきそうなので、自分のブログを使ってテストをしているところでもあるわけだ。自分のサイトでの iPhone 対応でいろいろなノウハウも生まれてくるだろう。それを還元していくことができたら、と思っている。

この記事へのコメント