ランプの中身(Ruby on Railsのシステム開発)
ランプの中身(Ruby on Railsのシステム開発)では、株式会社ケイビーエムジェイのRuby on Railsエンジニアが蓄積したノウハウを公開しています。Ruby on Railに関する技術解説や実践的なノウハウなど、開発現場の技術に則したコンテンツを随時追加していきます。 初心者の方でもわかりやすい技術解説を心がけています。リクエスト、ご質問も受け付けいますので、お気軽にコメントを記述して下さい。

< Rubyを使ってPaSoRi経由でSui... | メイン | iPhoneを確保しました >

佐藤伸吾(akio0911)のデジタルライフハック(Ruby
2008.06.10

社内SNSをiPhoneで快適に見るためのCSSを書いてみた

KBMJの佐藤です。 ついにiPhoneが日本国内で発売されますね。

時間がない人のための、「WWDC 2008 基調講演」が5分でわかるハイライト

アップル - iPhone

昨日はジョブズの講演に関する情報を リアルタイムで最初から最後までネットでチェックしていました。

興奮さめやらず、今日は昼食をデスクでとりながら、 社内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の購読をお忘れなく!!

ブックマークに追加する

KBMJのWebソリューション
Ruby on Rails Summer Festival 2008開催決定!!

TOPICS

2008/08/14
ZD Net Builder」の連載記事です。第七回は「Rubyでどう書く?:RubyCocoa+Core Animationでお手軽アニメーション」が掲載されました。

2008/08/06
ZD Net Builder」の連載記事です。第六回は「Rubyでどう書く?特別編:Matzからのお題」が掲載されました。

2008/07/29
アットマーク・アイティ」にケータイWebアプリ開発、9つの注意点が掲載されました。

2008/07/11
ZD Net Builder」の連載記事です。第五回は「Rubyでどう書く?:RubyでWord文書を作成する」が掲載されました。

全体のRoR最新ブログ一覧

プロフィール

  • ssato
  • 佐藤伸吾(akio0911)です。2008/01からWeb業界に入りました。フィジカルコンピューティングやユビキタスコンピューティングに興味があります。

ブログの購読

RSS

timelog
株式会社ケイビーエムジェイロゴ