Kawanet Blog II

アクセスカウンタ

zoom RSS PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法

<<   作成日時 : 2008/07/06 23:33   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 95 / トラックバック 0 / コメント 0

長い時間をかけて iPhone SDK をダウンロードしてみたら、
手元の Mac Mini は OS X 10.4.x (Tiger) なので SDK のインストールすら
できなかったというオチが待ち受けていたのですが(←これは NDA 対象外?)、
発売まで1週間ということで7月4日(金)アップルストア銀座で開催された
『誰でも出来るiPhoneのウェブサイト』 のセミナーに行ってきました。
来場者は100人を超えて満席+立ち見が出ている盛況ぶりでした。

スライドは こちら



iPhone (iPod touch)でウェブサイトを見ているとき、本体(画面)を傾けると
画面横幅に合わせてズームレベルを自動的に調整してくれる機能があり、
他にはない『空気を読んでくれる』iPhone の便利な機能と思いますが、
これを「ブレる」と読んで、避けたいとのこと。

通常のPCサイトを iPhone で見ると、縦型の portlait モード(横320px)だと約1/3、
横型の landscape モード(横480px)だと約1/2に縮小されて表示されるそうです。
ズームレベルが変わった分、画面上の文字の表示サイズやページの表示範囲が
変わってしまうのが問題らしい。

作りこんだ通りのサイズで、そのまま表示させたい場合は、
<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" />
とするのが吉とのこと。
ユーザの拡大縮小操作も禁止して、デザイナが意図したサイズに表示させる。
(このピンチイン・ピンチアウトも iPhone の素晴らしい機能だと思うけど?)

JavaScriptでユーザエージェントの判別を使わずに、CSSを使って
<link media="only screen and (max-device-width:480px)"
href="ipodtouch.css" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:481px)"
href="pc.css" type="text/css" rel="stylesheet"/>
とすると、PC 用と iPhone 用の CSS を 区別できて吉、とのこと。
会場では [if IE] も案内されていましたが、公開スライドでは省かれている模様。

条件分岐が複雑になりそうなので、あるいは gihyo.jp に載っている
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->
も良さそうですね。

ここで、やっと理解したのですが、これまで、携帯サイトを作る場合は、
PC サイトの HTML コンテンツとは別に携帯専用の HTML コンテンツを
作りこむ必要があったわけですが、このセミナーで解説されていたのは、
“Web 標準”としての CSS を使いこないこなすことで、(←ここ重要)
(-webkit-〜 系の iPhone (iPod touch) 向けの仕組みも利用しながら)
既存の PC 向けの HTML コンテンツ(例えば MT で作ったブログ)を
そのままで iPhone でも見れるようにするための方法なのですね!

要は、CSSだけでPCサイトを iPhone (iPod touch)に対応させる方法。

てっきり、iPhone でも PC サイトは見れるけど、せっかく iPhone 用の
サイトを作るなら専用コンテンツを作らなければならないとばかり思っていたので、
CSS のみでiPhone (iPod touch)対応させる逆転の発想は意外でした。

最後に、iui.js (User Interface (UI) Library for Safari development on iPhone)
さくっと紹介されていました。
こちらは、PC サイトを流用するのとは逆のアプローチ(専用化)ですね。

セミナーの詳しい内容については、スライド を参照してください。
ところで、「iPhone」という名前を使ってイベントを開催するのは、いろいろと制限が
厳しそうな気がしますが、実現できたのは、さすがアップルストアだから?;-)

(オマケで宣伝)


リクルートでも、Hot Pepper for iPod touch をリリースしました。
http://www.hotpepper.jp/doc/ihp/
iPod touch を使ってホットペッパーの飲食店クーポンをカンタンに探すことができます。
このサービスは、メディアテクノロジーラボで開発を担当しています。
携帯電話よりも大きな画面なので情報量も多く、分かりやすい。
無線 LAN がなくても使える iPhone 3G の登場が楽しみです。
 

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 95
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!)
面白い 面白い 面白い 面白い 面白い 面白い
かわいい かわいい かわいい かわいい かわいい

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法 Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる