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

谷拓樹 — Mon, 08 Feb 2010 00:30:32 +0000

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

基礎編

対象ブラウザはMobileSafariです

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

話題のHTML5で書けます

宣言など簡素化できます

テキスト表示

HTML:

<!doctype html>
charset="UTF-8">
</span></a></span>タイトル<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">

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

CSS3の機能が結構使える

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

テキスト表示

CSS:

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

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

テキスト表示

HTML:

media="screen" href="iphone.css" rel="stylesheet" type="text/css" />

「viewport」の概念を押さえる

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

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

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

テキスト表示

HTML:

name="viewport" content="width=980,initial-scale=1.0,user-scalable=yes,maximum-scale=3.0" />

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

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

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

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

テキスト表示

HTML:

name="viewport" content="width=device-width" />

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

iPhoneは前述の通り、縦でも横でも閲覧ができ、それぞれのモードで解像度および表示領域が代わります。
そのためサイトの横幅はpx単位などで絶対指定するよりも、%単位など相対指定する方が可変になるので、どちらのモードでも対応出来ます。

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

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

テキスト表示

CSS:

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

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

テキスト表示

CSS:

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

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

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

PHPでおこなう場合：

テキスト表示

PHP:

php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos("iPhone",$ua) !== false) || (strpos("iPod",$ua) !== false)){
//iPhone・iPod Touchの場合の処理
echo("iPhone か iPod Touch です");
include('iphone.html');
}else{
//それ以外のブラウザの場合の処理
echo("それ以外のブラウザです");
include('pc.html');
}
?>

.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:

href="tel:06-1234-5678">お問い合わせ電話番号

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

表示領域を固定したい

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

テキスト表示

HTML:

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:

/* iPhone, iPod Touch向け */
media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
/* PC向け */
media="only screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
/* IE向け */

EC studio デザインブログ

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

基礎編

対象ブラウザはMobileSafariです

話題のHTML5で書けます

CSS3の機能が結構使える

「viewport」の概念を押さえる

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

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

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

応用編

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

表示領域を固定したい

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

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