Yahoo!Japanを作る [iPhoneのある生活]

iPhone向けホームページ開発

Yahoo!Japanを作る

スポンサードリンク

ここでは、デフォルトのブックマークである「iPhone用Yahoo!Japan」を取り上げます。

今回取り上げるiPhone用Yahoo!Japanの特徴

実際のiPhone用Yahoo!Japanは、Javascriptによるニュースのスクロールや、CSSでの画像のレイヤー構築など複雑な処理がありますが、今回はこのうちの一部として以下を取り上げます。

iPhoneを回転させても拡大・縮小しない
iPhone用Safariで文字を拡大させない
iPhone回転ごとに処理を行う
iPhone縦持ち・横持ち用のスタイルを使い分ける

結果とソース

iPhone用Yahoo!Japanを真似る

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

<html>
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, 
	initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		スケールで縛りを設け、回転時に拡大･縮小を防ぐ
<script type="text/javascript">
function updateOrientation() {
	switch(window.orientation) {
		case 90: 
		case -90: 
			document.body.setAttribute("ort", "yoko");
			var ort = "yoko";
			break;

		case 0: 
		case 180: 
		default: 
			document.body.setAttribute("ort", "tate");
			break;
	}

	window.setTimeout("window.scrollTo(0, 1)", 500);
}
</script>		回転時に処理を行う
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: none;		文字の拡大を防ぐ
}

form {
	margin: 0;
	padding: 5px;
	background: url(../photo/yahoo1.png) no-repeat left bottom;
}
form div.txt {
	margin: 0 70px 0 82px;
}
form div.btn {
	float: right;
	width: 70px;
}
input[type="text"] {
	width: 100%;
	height: 33px;
}
input[type="image"] {
	float: right;
	width: 49px;
	height: 40px;
}

ul.btn {
	list-style: none;
	padding: 0;
}
body[ort="tate"] ul.btn {
	margin: 12px 0 0 10px;
}
body[ort="yoko"] ul.btn {
	margin: 12px 0 0 13px;
}
ul.btn li {
	float: left;
	width: 75px;
	padding: 0;
	background: url(../photo/yahoo3.png) no-repeat center top;
}
body[ort="tate"] ul.btn li {
	height: 87px;
	margin: 0 0 3px 0;
}
body[ort="yoko"] ul.btn li {
	height: 81px;
	margin: 0;
}
ul.btn a {
	display: block;
	margin: 64px 0 0 0;
	text-align: center;
	font-size: 11px;
	color: #000;
	text-decoration: none;
}

div.news {
	clear: both;
	margin: 0 auto;
	overflow: hidden;
}
body[ort="tate"] div.news {
	width: 303px;
	height: 80px;
	padding: 5px 0;
	background: url(../photo/yahoo6.png) no-repeat;
}
body[ort="yoko"] div.news {
	width: 465px;
	height: 42px;
	padding: 3px 0;
	background: url(../photo/yahoo62.png) no-repeat;
}
span.lbtn, span.rbtn {
	display: block;
	width: 18px;
	opacity: 0.75;
}
span.lbtn {
	float: left;
	margin: 0 4px 0 7px;
}
body[ort="tate"] span.lbtn {
	height: 71px;
	background: url(../photo/yahoo7.png) no-repeat;
}
body[ort="yoko"] span.lbtn {
	height: 33px;
	background: url(../photo/yahoo72.png) no-repeat;
}
span.rbtn {
	float: right;
	margin: 0 7px 0 4px;
}
body[ort="tate"] span.rbtn {
	height: 71px;
	background: url(../photo/yahoo8.png) no-repeat;
}
body[ort="yoko"] span.rbtn {
	height: 33px;
	background: url(../photo/yahoo82.png) no-repeat;
}
div.news ul {
	margin: 0 5px;
	padding: 0;
	list-style: none;
}

div.news li.cat, div.news li.dat {
	margin-left: 28px;
	font-size: 14px;
	color: #1a75a3;
}
div.news li.ttl {
	margin-left: 28px;
	font-size: 17px;
	white-space: nowrap;
}
body[ort="yoko"] div.news li.ttl {
	position: relative;
	top: -5px;
	margin-left: 0;
	float: right;
	width: 290px;
}
div.news a {
	color: #000;
	text-decoration: none;
}

body[ort="tate"] div.news a.all {
	position: relative;
	max-width: 35px;
	top: -70px;
	left: 200px;

	display: block;
	opacity: 0.75;
	padding: 3px 5px;
	margin: 60px 0;

	font-size: 14px;
	-webkit-border-image: url(../photo/yahoo9.png) 0 6 0 6;
}
body[ort="yoko"] div.news a.all {
	display: none;
}
</style>
</head>
<body onload="updateOrientation();" onorientationchange="updateOrientation();">
		回転時のイベントを設定
<form>
	<div class="btn"><input type="image" src="../photo/yahoo2.png" value="検索" /></div>
	<div class="txt"><input type="text" /></div>
</form>

<ul class="btn">
	<li><a href="#">天気</a></li>
	<li><a href="#">メール</a></li>
	<li><a href="#">占い</a></li>
	<li><a href="#">株価</a></li>
	<li><a href="#">オークション</a></li>
	<li><a href="#">スポーツ</a></li>
	<li><a href="#">掲示板</a></li>
	<li><a href="#">動画</a></li>
	<li><a href="#">路線</a></li>
	<li><a href="#">グルメ</a></li>
	<li><a href="#">My SoftBank</a></li>
	<li><a href="#">サービス一覧</a></li>
</ul>

<div class="news">
	<span class="lbtn"></span>
	<span class="rbtn"></span>
	<ul>
		<li class="cat">[国内]</li>
		<li class="ttl"><a href="#">ニュース</a></li>
		<li class="dat">12時53分更新</li>
	</ul>
	<a href="#" class="all">一覧</a>
</div>
</body>
</html>

要点

ポイントは以下です。

initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no: スケールを固定し、回転時の拡大縮小を防ぎます。
onorientationchange: 回転時のイベントを設定します
document.body.setAttribute("ort", "tate");: 回転時にbodyの独自属性値ortを設定（<body ort="(tate|yoko)">）し、CSSに反映させます。
body[ort="(tate|yoko)"]: bodyの独自属性値ortに依存したCSSを宣言します。

解説

まずviewportでは、初期・最大・最小スケールを1で固定し、iPhone回転時の拡大・縮小を防ぎます。 user-scalable=noだけでは回転時にスケールが変わることがあります。iPhone用Safariの解釈では、回転時の処理はユーザーによる拡大・縮小には当たらないということです。また、コンテンツはリキッド（可変長）レイアウトを採用し、回転によるドキュメント領域の変更に対応してコンテンツ領域が変動するようにします。

回転時にイベントを発生させるために、bodyタグにonorientationchangeを設定します。
1つはiPhone User Guideでの設定と同様、下記の処理によるスクロールを目的としています。

window.setTimeout("window.scrollTo(0, 1)", 500);

一方で、iPhone縦持ち時と横持ち時のCSSを別々に用意するために、bodyタグに独自の属性値ortを設定します。 ortは縦持ちの場合（window.orientationが0または180）に「tate」、横の地の場合（window.orientationが90または-90）に「yoko」の値をとるように設定します。
これに対し、CSSではbody[ort="tate"]、body[ort="yoko"]と属性値縛りのあるスタイルを宣言し、回転によってortが変動した際に別のスタイルが適用するように設定します。

iPhone生活