目次
この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
KBMJの佐藤です。 ついにiPhoneが日本国内で発売されますね。
時間がない人のための、「WWDC 2008 基調講演」が5分でわかるハイライト
昨日はジョブズの講演に関する情報を リアルタイムで最初から最後までネットでチェックしていました。
興奮さめやらず、今日は昼食をデスクでとりながら、 社内SNS(SNS構築パッケージ「SNSエンジン」にて構築)を iPhoneのSafariに最適化する実験を行なってみました。
実験機材として使用したのはiPod touchです。
iPhoneのSafariはPCサイトも表示できるけど…
iPhoneのSafariはPCサイトも表示できるのですが、 iPhoneの画面はPCに比べて小さいこともあり、 そのまま快適に閲覧できるとは限りません。 PCのブラウザで表示した内容がそのまま縮小されて表示されるようなイメージになります。
iPhoneでは指先でリンクをクリックする必要がありますので 操作もしづらくなります。
いくつかの解決策があるのですが、 今回はiPhoneのSafari向けにCSSを作成することにしました。
iPhone向けのCSSを書く
HTMLからiPhone向けのCSSを参照するには、以下のようにします。<meta name=”viewport” content=”width=device-width, user-scalable=no” />
user-scalableをnoに設定すると、2本指による拡大・縮小などができなくなります。 ここは考え方にもよるのですが、拡大・縮小の操作を無効化することによって、 上下にスクロールするだけで閲覧可能な、 見やすいiPhone向けサイトを作成することができます。
<link media=”only screen and (max-device-width:480px)”
href=”small-device.css” type=”text/css” rel=”stylesheet”>
<link media=”screen and (min-device-width:481px)”
href=”not-small-device.css” type=”text/css” rel=”stylesheet”>
などとすることによって、PC向けとiPhone向けでCSSを切り替えられるようです。
iPhoneらしいデザインのCSSを書く
今回はiPhoneらしいデザインのCSSを記述しました。 iPhoneの設定画面などのデザインと合わせることによって、 統一感のあるサイトを作成できます。
画像の表示
基本はiPhoneの画面幅に合わせた解像度で表示すると良いでしょう。 Safari上で画像ファイルのURLを指定して表示した場合は 2本指による拡大縮小ができます。 コンパクトデジカメなどで撮影した高解像度の画像も表示できるようです。
iPhoneに最適化したサイトのメリット
iPhoneの売りであるタッチ操作によって、非常に快適にサイトを閲覧することができるようになります。
サイト表示にかかる時間は回線状態によって変化?
iPhone 3GではHSDPAなどによる高速なデータ通信が可能になると思われますが、 無線LANにて接続した場合に比べて通信速度は遅くなることが予想されます。 よって、iPhone向けのサイトでユーザービリティを追求すると CSSによる表示切り替えだけではなく、 場合によってはHTMLや画像の情報量削減が必要かもしれません。
Safari上にて回線接続状態を取得してHTMLなどの情報量をコントロールできれば良いのですが、 この辺の細かい仕様については更なる調査が必要です。
さいごに
いかがでしたでしょうか?
今日は各地のソフトバンクショップでiPhoneの予約が殺到したと聞きます。 私もiPhone 3G 16GBを2台ほど予約確保しました。
日本国内の携帯市場でiPhoneがどれだけのシェアを押さえられるのかはまだまだ未知数ですが、 iPhoneで見やすいサイトというのは今後確実にニーズが出てくるかと思います。
次回はもう少し踏み込んだ内容で、iPhoneに関する技術記事を書きたいと思います。
RSSの購読をお忘れなく!!
個人ブログ : 拡張現実ライフ
