EC studio EC studio デザインブログ

2010年02月08日投稿者:谷 拓樹

iPhone向けサイト構築 基礎文法最速マスター

弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone(iPod Touch)向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。

HTML5+CSS3で作る 魅せるiPhoneサイト

2010/11/18追記:

iPhone向けサイト制作の書籍を執筆しました!
既存のデスクトップ向けサイトをモデルにした
iPhoneに最適化したサンプルサイトの紹介と
コードの解説をしています。
iPhone向けサイト制作の入門書に最適です。
HTML5+CSS3で作る 魅せるiPhoneサイト

基礎編

対象ブラウザはMobileSafariです

レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張(CSS)があります。検証の際は、通常のSafariのウィンドウサイズを狭くして見るのも良いですし、できれば記事の最後で紹介するシミュレータを使うことをおすすめします。

話題のHTML5で書けます

宣言など簡素化できます

HTML:
  1. <!doctype html>
  2.     <meta charset="UTF-8">
  3.     <title>タイトル</title>
  4.   </meta></head>
  5.   <body></body>
  6.  </html>

ただしHTML5のすべてが実装されているわけではないので、HTML5の新要素や機能を積極的に使うことはオススメできません。
HTML5"的"に書ける、という感覚で導入するといいでしょう。

CSS3の機能が結構使える

box-shadow,border-radiusや新しいセレクタやCSS gradientなどが使えます。
ただし新しいプロパティなどには「-webkit-」というプレフィックスは必要です。
ちょっとしたボタンならCSSだけでそれらしいものがデザインできます。

CSS:
  1. .button {
  2. -webkit-border-radius: 10px;
  3. -webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px; background: #02488D;
  4. background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
  5.  from(rgba(255, 255, 255, 0.4)),
  6.  to(rgba(255, 255, 255, 0.1)),
  7.  color-stop(.5,rgba(230, 230, 230, 0.3)),
  8.  color-stop(.5,rgba(230, 230, 230, 0.2)));
  9. }

CSSを読み込むときのmedia対応は「screen」で。

HTML:
  1. <link media="screen" href="iphone.css" rel="stylesheet" type="text/css" />

「viewport」の概念を押さえる

viewportは「表示領域」です。
縦のモードを「portrait」といい、幅は320pxに相当します。
横のモードは「landscape」といい、幅は480pxに相当します。

viewport

しかしMobileSafariはデフォルトで仮想で横幅980pxの解像度でシミュレーションしてサイトを表示します。
なので単純に縦で見た場合を想定して、横幅320pxのサイトをデザインしても思うように表示されません。

default

そのコントロールをするためにはviewportについてのmetaの記述が必要です。
下記はデフォルトの値を記述したものです。

HTML:
  1. <meta name="viewport" content="width=980,initial-scale=1.0,user-scalable=yes,maximum-scale=3.0" />

widthには表示領域を指定することができます。直接数字をいれるか、device-widthと指定できます。
device-widthにすれば前述の「portrait」「landscape」問わず、横幅320pxになります。

device-width

initial-scaleは初期表示の倍率です。例えばinitial-scale=2.0とした場合、widthが320pxであれば、2倍にズームされた状態になるので、画面には横幅160pxの内容が表示されることになります。

initial-scale

user-scalableはユーザーによる拡大・縮小の操作を強化するかどうかです。値はyesかnoかいずれかの指定になります。
maximum-scaleは拡大を許可した場合の最大倍率となります。

基本的にはデフォルトに近い値である方がユーザーには親切であると思いますので、iPhone向けにちょうどいいサイト幅で閲覧できるようwidth=device-widthのみ指定すると良いでしょう。

HTML:
  1. <meta name="viewport" content="width=device-width" />

サイトの幅はリキッドレイアウトを採用する

iPhoneは前述の通り、縦でも横でも閲覧ができ、viewportによって解像度および表示領域が代わります。
そのためサイトの横幅はpx単位などで絶対指定するよりも、%単位など相対指定する方が可変になるので、可能であればpxで幅固定するのは避ける方が好ましいといえます。

クリックではなくタップを意識する

iPhoneではマウスカーソルおよびマウスオーバーなどの機能はありません。指による画面操作が必要となり、クリックも「タップ」という方法になります。
:hoverによるスタイルの調整もできないので、専用のプロパティを使いましょう。

CSS:
  1. a {
  2. -webkit-tap-highlight-color: rgba(255,255,555,0.5); /*白背景・不透明度50%*/
  3. }

またマウスカーソルのように繊細にリンク領域を指定することは難しいので、marginpaddingline-heightを調整してリンク領域は大きめに取るようにしましょう。可読性も向上します。下記はline-heightの例です。

CSS:
  1. .paragraph {
  2.  line-height: 1.8;/* 1.6から1.8推奨 */
  3. }

iPhone からのアクセスを判定してページを振り分ける

PC用向けのページにアクセスされた場合に、iPhone(iPod Touch)向けのページへとリダイレクトさせたい場合には、サーバやプログラムでユーザーエージェントを判別して振り分ける方法があります。

PHPでおこなう場合:

PHP:
  1. <? php
  2.  $ua = $_SERVER['HTTP_USER_AGENT'];
  3.  if ((strpos($ua, “iPhone”) !== false) || (strpos($ua, "iPod") !== false)){
  4.   //iPhone・iPod Touchの場合の処理
  5.   include('iphone.html');
  6.  }else{
  7.   //それ以外のブラウザの場合の処理
  8.   include('pc.html');
  9.  }
  10. ?>

.htaccessの場合:

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPod [OR]
RewriteCond %{HTTP_USER_AGENT} iPhone [OR]
RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule ^$ /iphone.html [R]

これらの方法は強制的にiPhone向けのページへとリダイレクトする方法になるので、iPhoneでもPC向けのデザインでサイトをみたいユーザーを考慮したい場合は、別途PC向けのデザインで閲覧できるようにした方が良いでしょう。

応用編

mailto:やtel:を問い合わせ手段に利用する

PCサイトのコーディングで採用することは減ってきたmailto:のプロトコルをアンカーリンクに利用すると、iPhoneのメーラーが起動します。
またtel:と電話番号を組み合わせると、サイトからiPhoneでのコールが可能になります。

HTML:
  1. <a href="tel:06-1234-5678">お問い合わせ電話番号</a>

tel:の方はクリックをすると確認ダイアログが表示されるので、それほどユーザーに驚きは与えません。サイトに応じて問い合わせ手段として採用してはどうでしょうか。
なおmailto:もPCサイトのときよりもメーラーの起動にはそれほどストレスを感じないと個人的には考えていますが、こちらは確認ダイアログが出ないのでJavascriptなどでそのような処理を加えると好ましいでしょう。

表示領域を固定したい

サイト幅をリキッドにして表示領域は柔軟にすることを推奨しましたが、都合上なるべく固定したいという場合にはHolygrailと呼ばれるテクニックがあります。

HTML:
  1. <meta name="viewport" content="width=480,user-scalable=no,maximum-scale=0.6667" />

裏技的な方法ですが、480×0.6667=320.016 という計算により、縦横どちらのモードでも表示領域上のサイト幅がそれぞれのモードにフィットした形で表示されます。
なおかつユーザーによる拡大・縮小の操作を禁止することで、それが崩れることはなくなります。

HTMLはPC用のまま、iPhoneには専用CSSを適用したい

CSS3のメディアクエリを利用することで、iPhoneからのアクセスの場合にのみ専用のCSSを適用することができます。

HTML:
  1. /* iPhone, iPod Touch向け */
  2. <link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
  3. /* PC向け */
  4. <link media="only screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
  5. /* IE向け */
  6. <!--[if IE]>
  7. <link rel="stylesheet" type="text/css" href="pc.css" />
  8. <![endif]-->

mediaにデバイスの解像度を指定することで、iPhoneにおける最大解像度の横幅である480pxよりも、大きいか小さいかの判定でCSSの読み込みを振り分けることができます。ただし、IEの場合はメディアクエリの認識ができないので、IE用にも追記をしています。
なお同様の理由で古いブラウザの場合はIEと同等の判定をしてしまう場合があるので、この方法は万全とはいえませんが
既存のサイトをiPhone向けに少しスタイルを調整したい場合などには採用する価値はあるかもしれません。

高速化・軽量化をする

PCのようにサイトを閲覧することができるiPhoneですが、3G回線やWifiでは重いページの表示がユーザーにストレスを与えます。
下記の記事のテクニックなどを参考に、iPhone向けサイトも軽量化するようにしましょう。

簡単作業でスピードアップ!パフォーマンスアップまとめ

なお上記記事にないテクニックとしては、CSS3を活用してCSSとHTMLを簡素化することと、CSSやJSファイルの圧縮化です。
CSS3については記事の最後でまとめるリンク集などを参考にしてください。

ファイルの圧縮化とは、ソースコードのインデントやコメント、改行などを削除することでファイルサイズの軽減をすることです。
開発環境では可読性を維持するために圧縮化は不要ですが、本番環境ではなるべく圧縮化する方が好ましいといえます。
※ただし圧縮した結果、ソースコードに不具合が生じる可能性もあるので、テストは忘れないようにしましょう。

まとめ

iPhone向けにデザインを提供することには賛否ありますが、実際にiPhoneをお持ちの場合はPC版の対象サイトへとアクセスして必要かどうかを感じてください。
少なくともFlashを大々的に利用しているようなサイトではiPhoneで見る価値が大きく損なわれるので、何かしたの代替コンテンツを提供する価値はあります。
もちろん、アクセス解析などをみてそれらのユーザーが存在するかをチェックするのも重要です。
iPhoneユーザーも着実に増えてきている現状ですので、一度iPhone向けサイトの構築を検討してみてはいかがでしょうか。
開発者的には挑戦するだけで色々発見があって面白いですよ。

その他参考になりそうなリンクを下記にまとめてみたので、参考まで。

iPhone関連総合

Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方
iPhone制作TIPS情報の用意とまとめ - WEBデザイン&コンサルティング
iPhone 3G用のWebページを作る1 - [JavaScript]All About

CSS3関連

SafariのCSS3拡張 - iPhone 3G DevWiki
CSS 3 Properties and support in Browsers

Viewport関連

iPhone Webアプリテンプレート(CSS Nite Vol.40 reprise) | Topics | DB - KAYAC Designer's Blog (カヤック デザイナーブログ)
viewportの表示を検証してみました - ProjectDD Blog

UA関連

iPhone・iPod TouchをPHPで判定して分岐 | 凸凹
MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawa.netブログ(川崎有亮)/ウェブリブログ

圧縮化関連

CSSの圧縮と"CSS Compressor" - ありんく tech-log

その他

JSライブラリ
iui - Project Hosting on Google Code
jQTouch — jQuery plugin for mobile web development
iPhoneならではのアニメーションなどが簡単につかえるライブラリです。「iPhoneとツイッターで会社は儲かる」特設サイトのiPhone版サイトはjQtouchをベースにつくっています。

wordpressプラグイン
iWPhone WordPress Plugin and Theme
WordpressをiPhoneに最適化したテーマにしてくれます。当ブログでも採用。

ショーケースサイト
http://cssiphone.com/
http://www.ishowcase.jp/
国内のiPhone対応サイトを紹介しています。

モックアップ作成キット
iPhone Mockup

サービス
MOBIFY - Make Your Website Mobile
iPhone向けにPC向けサイトを変換してくれます。


関連した記事:

この記事へのコメント

面白い記事ありがとう!
僕は自分のブログをウエブキットブラウザーで見る端末のためにモバイルデザインを作っていました。日本でのモバイル開発についてドイツ語で書いているモバイルデベロパーです。
Regards from Berlin, Martin

投稿者: Martin Menzel | 2010/2/11 木曜日 17:28:55

コメントありがとうございます。
ドイツ語は詳しくわからないですが、日本人の僕にも興味深いブログを書かれていますね。
この記事が色々と参考になったなら嬉しいです。

投稿者: 谷 拓樹 | 2010/2/12 金曜日 1:46:37

普通な携帯ためのフラッシュで作ったウエブサイトが好きですから、iPhoneとAndroidためにフラッシュみたいなウエブサイトをデザインして、micrositeやwordpressやnews portalなどのサイトをプログラッムしています。JQTouchとJQueryはフラッシュの代わりにとても便利で、新しいuser experienceがAndroidとiPhoneの端末に可能です。
この記事はとても便利ですから、私が英語に翻訳して、私のブログで投稿者の谷様がguest authorに発行する可能です。どう思いますか。メールアデェレッスは martin ( A T mark )maniac-lizard.com
ところで次のベルリンのmobile mondayで日本のモバイルトレンドについてプレーゼンテーションをします。Regards, Martin Menzel

投稿者: Martin Menzel | 2010/2/15 月曜日 18:29:14

strposのパラメータの順番が逆です。
正しくは、検索文字列が後ろです。
strpos($ua, “iPhone”) !== false)

投稿者: とおりがかり | 2010/3/5 金曜日 18:01:56

本当ですね、ありがとうございます!修正しました。

投稿者: 谷 拓樹 | 2010/3/8 月曜日 17:39:11

少し気になったのですが、meta要素の書き方はXHTMLの書き方ではないのでしょうか?
空要素閉じは必要ないと。

投稿者: はじめまして | 2011/3/22 火曜日 21:45:26

>device-widthにすれば前述の「portlait」の場合は横幅320px、「landscape」の場合は横幅480pxになります。

とありますが、
device-widthは、向きに関わらず320pxではないでしょうか?

投稿者: tomo2000 | 2011/3/27 日曜日 4:49:25

ご指摘ありがとうございます。
ブログの内容を修正させていただきました。

投稿者: 赤堀 巴絵 | 2011/3/28 月曜日 12:46:22

コメントありがとうございます。
HTML5ではどちらの書き方でも問題ありません。
また混ざっていても問題はありませんが、各々で、書き方は統一する方がルール的には好ましいかとおもいます。

投稿者: 赤堀 巴絵 | 2011/3/28 月曜日 14:24:17
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.