|
HTML5＋CSS3 |
Smartphone編
|
| Lesson 5 | スマートフォンサイトの 基本マークアップ |
||||
| 制作・文 | 山田 敬美（ネイバージャパン株式会社） |
 |
iPhoneもAndroidもブラウザのレンダリングエンジンが同じだが、ブラウザの独自実装や、実装方法の違いなどはある。iPhoneとAndroid両方に対応したHTMLを書いてみよう。 |
01
モバイル用WebKit には、スマートフォン独自の機能がいくつか用意されている。【1-1】は、スマートフォンサイト制作時のベースになるHTMLのコードだ。それぞれの指定については個別に解説していく。
【1-1】viewportの詳細な指定方法は2週間後に更新予定の「LESSON 07 コンテンツ内容に合わせてviewportを最適化」を参照
【1-1】viewportの詳細な指定方法は2週間後に更新予定の「LESSON 07 コンテンツ内容に合わせてviewportを最適化」を参照
02
CSS についても、PC サイトとは異なる箇所がある。スマートフォンは縦向きと横向きで横幅が変わり、デバイスの種類によっても違うため、コンテンツの幅は100% のリキッドレイアウトで作るのが一般的だ。HTML5 の新しい要素に対してもCSSのリセットを行うために、今回はhtml5doctor のCSS（http://www.html5.jp/html5doctor/html-5-resetstylesheet.html）を利用した。また、モバイル版WebKit独自のプロパティもいくつか用意されている【2-1】。
【2-1】-webkit-text-size-adjustをnoneとすれば、デバイスの向きを変えたときも文字サイズを拡大しないように指定できる。-webkit-tap-highlight-colorでは、リンク要素をタップしたときの色を指定できる。指で操作していると自分がどこをタップしたかわかりにくいため、これも指定しておくとよい
【2-1】-webkit-text-size-adjustをnoneとすれば、デバイスの向きを変えたときも文字サイズを拡大しないように指定できる。-webkit-tap-highlight-colorでは、リンク要素をタップしたときの色を指定できる。指で操作していると自分がどこをタップしたかわかりにくいため、これも指定しておくとよい
03
スマートフォン独自の機能で、電話番号らしき文字列に対して、自動でリンクをつけるものがあるが、郵便番号のような数字に対してもリンクをつけられてしまうことも多い【3-1】。これは【3-2】の指定をすることで機能を無効化できる。本当の電話番号の場合は、【3-3】のように手動でtel:リンクをつければよい。
【3-1】郵便番号を電話番号と誤認識してリンクがついてしまった例
【3-2】HTMLのhead内に上記の指定をすると、電話番号にリンクがつかなくなる
【3-3】電話番号に対して、手動で電話発信機能をつける方法
【3-1】郵便番号を電話番号と誤認識してリンクがついてしまった例
【3-2】HTMLのhead内に上記の指定をすると、電話番号にリンクがつかなくなる
【3-3】電話番号に対して、手動で電話発信機能をつける方法
04
スマートフォンの画面は小さいため、なるべく多くの情報を見せられるように、ページ表示時に自動的にアドレスバーを非表示にするスクリプトを入れておこう。 【4-1】 のように指定すれば、本体の向きを変えたときにもスクロールバーを非表示にできる【4-2】。
【4-1】
【4-2】アドレスバーを非表示にするだけで、コンテンツエリアがだいぶ広くなった
【4-1】
【4-2】アドレスバーを非表示にするだけで、コンテンツエリアがだいぶ広くなった
05
HTML5 ではフォーム周りの機能が強化されており、新しい属性がいくつか追加された。iPhone やAndroid でもすでに対応しているものもいくつかある。新し いtype 属性が対応していれば、キーボードがそれに合ったものが表示されたり【5-1】 、placeholder※01も簡単に実装できる。しかし、Androidではfrom周りのバグが多いので注意が必要だ【5-2】。
※01
ブラウザの検索バーやテキストボックスに見られるような、フィールドが空のときは薄く文字が表示されていて、クリックすると消えるもの。
【5-1】<input type="email">とすると、キーボードのUIがアルファベットに「@」や「.」がついた、メールアドレスを打ち込みやすいものに変わる
【5-2】placeholderのバグは、JavaScriptでvalueを空にする処理が必要。input[type="email"] のバグは、JavaScript で、Android の場合のみtype属性の値を"text"に書き換える処理が必要
※01
ブラウザの検索バーやテキストボックスに見られるような、フィールドが空のときは薄く文字が表示されていて、クリックすると消えるもの。
【5-1】<input type="email">とすると、キーボードのUIがアルファベットに「@」や「.」がついた、メールアドレスを打ち込みやすいものに変わる
【5-2】placeholderのバグは、JavaScriptでvalueを空にする処理が必要。input[type="email"] のバグは、JavaScript で、Android の場合のみtype属性の値を"text"に書き換える処理が必要
06
iPhone では、Web ページをホーム画面に追加するとアプリのようなアイコン（WebClipアイコン）を表示できる【6-1】。WebClipアイコンを指定するには、ルートディレクトリに「apple-touch-icon.png」という名前でアイコン用画像を置くか、HTMLのhead内にアイコン画像までのパスを指定すればよい（アイコンの名前は自由） 【6-2】【6-3】。
Androidの場合でも、基本的にはiPhoneと同じ指定でWebClipアイコンを表示できる。だが機種によって挙動が異なるため、同じ指定であってもWebClipアイコンが表示されるとは限らないので注意が必要だ【6-4】。現状では【6-3】のように指定しておくと、WebClipアイコンが表示され る確率が高くなる。なお、precomposedはiPhoneで光沢処理がされなくなるので、mixiのようにアイコン画像を作り込みしておく必要がある【6-5】。
【6-1】右下2 つのGoogle とYahoo! はWebClipアイコンだが、ネイティブアプリと見分けがつかない
【6-2】
【6-3】デフォルトでは、アイコンに対して自動的に光沢と角丸の処理が行われるが、rel="apple-touch-icon-precomposed"とすれば光沢なしにもできる
【6-4】REGZAの場合、rel="apple-touchicon-precomposed"と指定されているGoogleとmixiは、WebClipアイコンが表示される。アイコンが表示されない場合は、デフォルトのしおりの左下にPC用のfaviconがつく（faviconがつかない場合もある）。HTC-06 Desire の場合はrel="apple-touch-icon" でも表示され、さらにHTMLと同じディレクトリにapple-touch-icon.png という名前でアイコンを置くだけでも表示された。
Galaxy Sでは、relの指定方法とは関係なく、WebClipアイコンが表示 されたりされなかったりした
【6-5】mixiのWebClipに使われているアイコン。初めから角丸で、立体感が出るように作り込まれている
Androidの場合でも、基本的にはiPhoneと同じ指定でWebClipアイコンを表示できる。だが機種によって挙動が異なるため、同じ指定であってもWebClipアイコンが表示されるとは限らないので注意が必要だ【6-4】。現状では【6-3】のように指定しておくと、WebClipアイコンが表示され る確率が高くなる。なお、precomposedはiPhoneで光沢処理がされなくなるので、mixiのようにアイコン画像を作り込みしておく必要がある【6-5】。
【6-1】右下2 つのGoogle とYahoo! はWebClipアイコンだが、ネイティブアプリと見分けがつかない
【6-2】
【6-3】デフォルトでは、アイコンに対して自動的に光沢と角丸の処理が行われるが、rel="apple-touch-icon-precomposed"とすれば光沢なしにもできる
【6-4】REGZAの場合、rel="apple-touchicon-precomposed"と指定されているGoogleとmixiは、WebClipアイコンが表示される。アイコンが表示されない場合は、デフォルトのしおりの左下にPC用のfaviconがつく（faviconがつかない場合もある）。HTC-06 Desire の場合はrel="apple-touch-icon" でも表示され、さらにHTMLと同じディレクトリにapple-touch-icon.png という名前でアイコンを置くだけでも表示された。
Galaxy Sでは、relの指定方法とは関係なく、WebClipアイコンが表示 されたりされなかったりした
【6-5】mixiのWebClipに使われているアイコン。初めから角丸で、立体感が出るように作り込まれている
＞＞目次に戻る
