スマートフォン時代のWebサイト制作 第3回 スマートフォン向けのコーディング
作成日
7 September 2011
ページ ツール |
必要条件
スマートフォン向けサイトには、いくつかのデザインパターンが見られます。今回は、そのコーディング方法について、以下のサンプルサイトをもとに解説します。
※このサンプルサイトは本連載用に作成したものであり、公式のページではありません。
スマートフォン向けのセッティング
デザインパターンを解説する前に、復習としてhead要素におけるスマートフォン向けのセッティングを確認します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Adobe Developer Connection</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="img/home.png" />
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
HTML5を採用しています。そして前回解説したように、Viewportをスマートフォン向けに最適化するため、以下のように指定しています。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
また、スマートフォン向けの特殊なコードとして、さらに次の2つを指定しています。1つ目は、電話番号の自動検出機能に関する指定です。
<meta name="format-detection" content="telephone=no" />
スマートフォンブラウザーでは、Webページ上にある電話番号のような数字の文字列に対し、電話のコールができるようリンクを自動で張ります。これは親切な機能に思えますが、必ずしもその数字の文字列が電話番号であるとは限りません。例えば、製品型番のような数字の文字列にもリンクが張られてしまう可能性があります。それでは不都合があるため、上記のようにmeta要素で「無効」にする方が好ましいでしょう。
なお、任意で電話コールできるようにリンクを張りたい場合は、次のように「tel:」から始まる数字の文字列をa要素のhref属性に指定します。
<p>お問い合わせは<a href="tel:06-0000-0000">06-0000-0000</a>までおかけください。</p>
2つ目は、アイコンの指定です。
<link rel="apple-touch-icon-precomposed" href="img/home.png" />
これはスマートフォンのホームスクリーン画面にブックマークされる場合に、そのホームスクリーン上で利用するアイコンを指定するための要素です。いわゆるファビコンのようなものですが、ホームスクリーン上での見栄えをよくするために指定しておく方がよいでしょう。特にWebアプリのような、常用されるタイプのサイトであれば、ほぼ必須といってよいでしょう。ちなみに、属性値に「apple」とありますが、Androidでも対応している点に注意してください（ただし、機種やOSバージョンによって非対応の場合もあります）。
指定する画像の形式は、PNGが推奨されています。またサイズは、iPhone4など高解像度端末でもきれいに表示させるために、114☓114pxのPNG画像を指定するのがよいでしょう。なお、以下のように、端末が対応しているサイズごとに指定することもできます。
<!-- iPhone4など高解像度向けのアイコン画像 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/home.png">
<!-- iPad向けのアイコン画像 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/home_ipad.png">
<!-- iPhone4／iOS4.2以前のiPhoneやiPod Touch、Android 2.1以上の機種向けのアイコン画像 -->
<link rel="apple-touch-icon-precomposed" href="img/home_low.png">
iOS4.2以上ではsizes属性を使って、端末ごとの対応サイズに振り分けることができます。この方法により、高解像度端末向けの少し重い画像を、低解像度端末では使わないようにすることができます。このサンプルコードのように、iPad向けも考慮する場合は、72☓72pxの画像も必要となります。少し古いバージョンのiOS、Androidではsizes属性に対応していません。最小サイズ（サンプルコードではhome_low.png）の推奨サイズは、57☓57pxです。
なお、「apple-touch-icon-precomposed」を「apple-touch-icon」とすると、iPhone（iOS）ではアイコンに対して自動的に光沢処理を施します。しかしAndroidはそれに対応していないので、「apple-touch-icon-precomposed」とし、iPhone／Androidともに同じ見栄えになるようにする方がよいでしょう。
A要素でブロックを包括する
次に解説するのは、新着記事の一覧部分のマークアップとスタイルです。
<section class="entry-list" id="new-entries">
<header class="section-header">
<h1 class="heading">新着記事</h1>
<p class="more"><a href="#">その他記事</a></p>
</header>
<article class="entry">
<a href="entry.html">
<h1 class="title"><span class="series">スマートフォン時代のWebサイト制作 第2回</span>スマートフォン特有の表示環境を理解する</h1>
<img src="img/author_tani.jpg" class="author-image" />
<div class="summary">
<p>今回はコーディングの前に知っておくべきこととして、スマートフォンのスクリーンサイズなどについて解説します。</p>
</div>
<footer>
<small>
<span class="author">谷 拓樹 氏</span>
<time datetime="2011-06-22" class="entry-date" pubdate>2011年6月22日</time>
</small>
</footer>
</a>
</article><!-- /.entry -->
~省略～
</section>
HTML5の新要素として、sectionやheader、article要素などを用いていますが、注目してほしいのはarticle要素直下のa要素です。HTML5以前ではa要素でブロックレベルの要素を包括することはできなかったのですが、HTML5からは可能になったため、まとめて要素を包括しています。この部分は、次のようにマークアップすることも可能です。
<a href="entry.html">
<article class="entry">
～省略～
</article>
</a><!-- /.entry -->
スマートフォンではリンクエリア（タップできるエリア）をなるべく広くするべきです。その点において、a要素はこのように上手く使うとリンクエリアを広くまとめて取ることができます。
リンクエリアについてもう1つ重要なことを補足しておきます。リンクエリアやリンクテキストには、それが「リンク」とわかるように、なるべくアイコンや矢印などをつけるようにすることです。サンプルでは右矢印のアイコンをつけています。
なぜなら、スマートフォンには、デスクトップのようなマウスオーバーの表現が無いからです。デスクトップの場合、マウスオーバーで対象要素が変化したり、マウスポインタが変化すれば、それがリンクであることを想像できます。しかし、スマートフォン（タッチデバイス）の場合、タップしてみなければ、それがリンクであるかどうかわかりません。
見た目でリンクであることをわかりやすくするために、少しの工夫を加えましょう。もちろんこれはデスクトップ向けサイトにおいても効果があることです。
※なお、HTML5のa要素はこのように多くの要素をまとめて包括できますが、インタラクティブな要素（a要素、button要素など）を含めることはできないので注意してください。
アイコンを並べる
「記事カテゴリー」では各製品のアイコンを横並びに配置しています。このパターンは、スマートフォンのホームスクリーンでアプリアイコンが並んでいるような形で、スマートフォン向けサイトでもよく見られます。ここではどのようなCSSで並べるのかを解説をします。サンプルのHTMLは次のようになっています。
<nav class="entry-category">
<header class="section-header">
<h1 class="heading">記事カテゴリ</h1>
<p class="more"><a href="#">その他カテゴリ</a></p>
</header>
<ul>
<li><a href="/dreamweaver"><img src="img/ico_dw.png" /><br />Dreamweaver</a></li>
<li><a href="/flash"><img src="img/ico_fl.png" alt="Dreamweaver" /><br />Flash</a></li>
<li><a href="/flashcatalyst"><img src="img/ico_fc.png" alt="Dreamweaver" /><br />Flash Catalyst</a></li>
<li><a href="/flex"><img src="img/ico_fx.png" alt="Dreamweaver" /><br />Flex</a></li>
</ul>
</nav>
アイコンの箇所はリストとしてマークアップし、アイコン画像とそのラベルがあります。それではCSSを見てみましょう。
.entry-category ul {
overflow: hidden;
}
.entry-category li {
float: left;
width: 25%;
text-align: center;
font-size: smaller;
}
.entry-category li a {
display: block;
}
.entry-category li img {
width: 60px;
}
横に並べる方法はfloatを利用しており、特別な方法ではありません。ポイントは、li要素の幅を25%とし、その中の要素が中央寄せになるよう「text-align: center」としているところです。このサンプルでは対象のアイコンは4つであるため、横幅100%に対して割ると25%になります。このように%で指定しておくと、Landscape（横向き）にした場合のように、横幅が変わっても、その割合で広がります。
縦リスト型のナビゲーション
下部のナビゲーションのような縦リスト型のスタイルは、アプリ開発では「TableView」と呼ばれています。HTMLは次のように非常にシンプルです。
<ul class="global-navigation">
<li><a href="products">製品</a></li>
<li><a href="solutions">ソリューション</a></li>
<li><a href="communities">コミュニティ</a></li>
<li><a href="support">サポート</a></li>
<li><a href="company">会社概要</a></li>
<li><a href="store" class="pc">ご購入</a></li>
</ul>
次はCSSです。この形を作る部分だけのCSSです。
.global-navigation {
margin-bottom: 10px;
}
.global-navigation li {
border-bottom: 1px solid #666666;
}
.global-navigation li a {
display: block;
padding: 10px 20px 10px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ポイントは、a要素をブロックレベルとし、そのpaddingを広げることでリンクエリアを拡大しているところです。もう1つポイントは、text-overflowを活用した処理です。これはアンカーテキストが長くなってしまった場合の対応です。
このサンプルではアンカーテキストがあらかじめ短いものになっているので問題ありませんが、仮に長いテキストが入ったとしても、text-overflowで対応しておくと次のようになります（対応しない場合も合わせて確認しましょう）。
未対応だとバランスが崩れてしまいますが、対応しているとテキストの折り返しのところでテキストが省略されます。JavaScriptを使わずに、CSSだけでこうした処理が可能です（「...」という処理は、text-overflowプロパティのellipsisという値により適用されます）。text-overflowを有効にするためには、合わせて「white-space:nowrap」が必要です。「white-space:nowrap」でテキストの折り返しを無効とし、「overflow:hidden」により内容を要素幅（widthを指定していればその幅）を超えた内容を隠し、「text-overflow: ellipsis」で折り返しせず要素幅を超えたテキストを隠します。このいずれかが欠けても、このような形になりません。
またこのテキストの処理については、必ずしもこの省略する処理がよいとは言い切れません。見ての通り、要素幅を超えるテキストを隠さなければデザインのバランスは崩れてしまうのですが、テキストが隠れて省略されてしまうことで、省略された内容がユーザーには見えなくなります。このメリット／デメリットを考えて使うようにしましょう。
今回紹介した各マークアップやスタイルはあくまでも一例です。同じ見た目を再現する方法は他にもありますので、色々な方法を模索してみてください。
次回は今回解説をしなかった、矢印アイコンなどを適用させるCSSと、スマートフォンでの画像の扱いについて解説します。
