iPhone生活

iPhone向けホームページ開発

iPhone User Guideを作る

スポンサードリンク

実際にiPhone向けのサイトを作成してみます。
ここでは、デフォルトのブックマークであるAppleのiPhone用オンラインヘルプページ「iPhone User Guide」を取り上げます。

今回取り上げるiPhone User Guideの特徴

実際のiPhone User GuideはプレーンHTMLではなくJavascriptで生成され、かなり深い入れ子構造になっていますが、 今回はこのページの特徴の一部を取り上げて再現してみます。

取り上げる特徴は

です。その他、PC/iPhone問わずSafariで使用可能なWebkitオプションにより、

の2点を加えた全5点に着目します。

結果とソース

iPhone User Guideを真似る

上記のようにほぼ再現することが出来ました。（実際のページはこちら）ソースは以下です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320px, user-scalable=no">		viewportの宣言
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background: url(../photo/apple4.gif);
}

h1 {
	width: 320px;		コンテンツ幅を320pxにする
	margin: 0 auto;
	padding: 12px 0;
	background: url(../photo/apple3.gif) repeat-x;
	color: #fff;
	text-shadow: #333 0px -1px 0px;		テキストに影をつける
	font-size: 120%;
	text-align: center;
}

ul {
	width: 300px;
	margin: 10px auto 0;
	padding: 0;
	background-color: #fff;
	border: 1px solid #999;
	-webkit-border-radius: 10px;		要素を角丸にする
	list-style: none;
}
ul li {
	margin: 0;
	padding: 0;
	background: url(../photo/apple1.gif) no-repeat 285px center;
}
ul a {
	display: block;
	padding: 12px;
	border-bottom: 1px solid #999;
	background: url(../photo/apple2.gif) no-repeat 245px center;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	font-size: 110%;
}
ul a.noborder {
	border-bottom: none;
}

div {
	width: 320px;		コンテンツ幅を320pxにする
	margin: 20px auto;
	padding: 0;
	font-size: 60%;
	text-align: center;
	color: #666;
}
</style>
</head>
<body onLoad="window.setTimeout('window.scrollTo(0, 1)', 500);">		URLバーを隠す
<h1>iPhone ユーザーガイド</h1>
<ul>
	<li><a href="#">お使いになる前に</a></li>
	<li><a href="#">基本</a></li>
	<li><a href="#">電話</a></li>
	<li><a href="#">メール</a></li>
	<li><a href="#">Safari</a></li>
	<li><a href="#">iPod</a></li>
	<li><a href="#">その他のアプリケーション</a></li>
	<li><a href="#">設定</a></li>
	<li><a href="#">iTunes Store</a></li>
	<li><a href="#">トラブルシューティング</a></li>
	<li><a href="#" class="noborder">その他の参考資料</a></li>
</ul>
<div>Trademark and &copy; 2008 Apple Inc.l All rights reserved.</div>
</body>
</html>

要点

ポイントは以下です。

width=320px
予めコンテンツの横幅を320pxとします。
<meta name="viewport" content="width=320px, user-scalable=no">
コンテンツと同幅のviewportを指定します。またuser-scalebleを指定し拡大・縮小が出来ないようにします。 initial-scaleはコンテンツとviewportが同幅であることから常に同じ値（iPhone縦持ちで1、横持ちで1.5）になることが期待できるため指定しません。
尚、iPhone User Guideで実際に指定されているviewportは 
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.6, user-scalable=no">
です。
onload="window.setTimeout('window.scrollTo(0, 1)', 500);"
ページをロードし500/1000=0.5秒後にウィンドウを縦方向に1pxスクロールします。 スクロールにより、iPhone用SafariはURLバーを自動的に隠してくれます。
text-shadow: #333 0px -1px 0px;
テキストに影をつけます。
-webkit-border-radius: 10px;
要素を角丸にします。
Copyright © ipn3g.com, All Rights Reserved.