Lesson 01 スマートフォンサイトとHTML5＋CSS3 - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

2011.9.20 TUE

HTML5＋CSS3
次世代Webコーディングの
超・最新動向

Smartphone編

	Lesson 1			スマートフォンサイトと HTML5＋CSS3
	制作・文			山田敬美（ネイバージャパン株式会社）

最近のスマートフォンにはモダンブラウザが搭載されているため、PCサイトのように古いブラウザに合わせる必要がない。スマートフォンサイトの制作は、新しい技術を試す絶好の機会だ。

スマートフォンのブラウザと
HTML5＋CSS3

さまざまな画面サイズにも
対応できるCSS3

PCサイトの制作では、HTML5やCSS3に対応していない古いブラウザのシェアが多く、その基準に合わせて制作しなければならないという制約がつきまとっていた。

しかし、スマートフォンサイトの制作ではそのような考えは不要だ。

iPhone やAndroid のデフォルトブラウザは、WebKit というHTML レンダリングエンジンをベースに作られており、HTML5やCSS3への対応が比較的進んでいるのが特徴だ。

そのような状況であるため、スマートフォンサイトの制作ではHTML5とCSS3を使うのが主流となっている。

iPhone もAndroid も基本的には横幅320px を想定して制作していくが、Androidの場合はユーザー側で表示サイズの調整ができるため、制作者の意図したとおりのサイズで表示されるかどうかは保証できない。

また、縦置きと横置きの場合でも画面の横幅は変わってくる。

そのような理由から、スマートフォンサイトではコンテンツ幅を固定にせず、幅100% のリキッドレイアウトで制作するのが一般的だ。

リキッドレイアウトでは、コンテンツは画面の幅に合わせて伸縮するが、画像だけは固定サイズとなるため、要素同士の比率を保てなくなる【1】【2】。

CSS3では角丸やグラデーション、テキストシャドウなど、画像を使わずともリッチな装飾ができるプロパティが多数追加された。スマートフォンサイトでは極力画像を使わずにCSS3を効果的に使ったコーディングをしていこう【2】。

3G回線でもサクサク見れる
サイトにするために

スマートフォンサイトでは回線速度を考慮し、少しでも表示を速くするためにHTML5とCSS3を効果的に使おう。

まず、HTML5はXHTMLと比べてコンパクトに記述できるようになった。

たとえば、DOCTYPE宣言が＜!DOCTYPE html＞のみのシンプルなものに変更されており、終了タグや要素自体を省略することも可能になった【3】※01。

微々たるものかもしれないが、こうやって少しずつでもファイルサイズを減らしていけば、多少なりとも高速化につながっていく。

また、サーバへのリクエスト数を減らすことも表示速度改善には有効だ。

極力画像を使わずにCSS3で制作することで、サーバへのリクエストを減らすことができる（画像に関わる高速化については「LESSON 06 スマートフォンサイトでの画像の扱い方」のコラムも参照）。

他にも、静的なファイルをHTML5のアプリケーションキャッシュを使ってローカルにキャッシュさせれば、それ以降のリクエストは発生しなくなる。

※01 HTML5で省略可能なタグの解説 [W3C]
http://www.w3.org/TR/2009/WD-html5-20090825/syntax.html#optional-tags

【1】

【1】

【2】Yahoo のスマートフォンサイトはボタンやナビゲーションはCSS3で作成されており、縦横どちらで見ても要素の比率が保たれている

【3】HTMLのファイルサイズを小さくするための記述方法

低スペックなスマートフォンでも
CSS3でリッチなUI を実装

スマートフォンは、標準UIのなめらかな動きや美しいデザインによって、高性能なデバイスのように思えるが、実はPCよりもはるかにスペックが低い。

そのため、PC サイトと同じようにjQueryのアニメーションなどを使った場合、処理速度が追いつかずにカクカクした動きになってしまうことがある。

そんなときに使えるのが、CSS3のtransformとtransitionだ。 transformとtransitionはブラウザが標準で実装している機能であるため、 jQueryなどで無理やり要素を動かしてアニメーションしているかのように見せるものとは違い、ブラウザへの負担が小さく、比較的なめらかにアニメーションさせられる。

しかし、CSS3のアニメーションをいちから書くのは手間がかかる作業となる。

そこで、jQueryのanimateメソッドに似た書き方をすると、自動的にCSS3のアニメーションに書き換えてくれるjQueryプラグインもあるため、こういったものを利用するとよいだろう。

CSS3のtransitionでアニメーションするjQueryプラグイン
「jQuery transition Animate」 [to-R]
http://blog.webcreativepark.net/2010/09/17-183446.html

HTML5で追加された
Webアプリに最適な機能

最近のWebサイトは、どんどんアプリケーションに近付いている【4】。

HTML5の周辺技術では、WebアプリケーションのためのさまざまなJavaScript APIが用意されており、スマートフォン向けのブラウザでもすでにいくつか実装されている。

具体的な例では、次のようなものがある。

モバイル端末ではオフラインになることも多く、そのような場合でも使えるように、アプリケーションキャッシュやローカルストレージなどがある。

またGeolocationでは、デバイスのGPSを利用した位置情報を取得できる。ブラウザの標準機能として、マルチメディアをサポートできるようになり、今まではFlashなどのプラグインがないと使えなかったVideoやAudioなどが、プラグインなしで再生可能となった。vさらに、Web Socketやプッシュ通知を使えばリアルタイムWebも実現できる。

ネイティブアプリと
Webアプリの組み合わせ

最近のWebサイトは、どんどんアプリケーションに近付いてきている【4】【5】。

HTML5の周辺技術では、WebアプリケーションのためのさまざまなJavaScript APIが用意されており、スマートフォン向けのブラウザもすでにいくつか実装されているものもある。

Webアプリケーションは、ネイティブアプリケーションと比べると、傾きセンサやカメラなどのOS固有の機能の利用に制限があったり、ブラウザ上での動作が重いといったデメリットもあるが、反対にメリットもある。

まず、Webアプリケーションは一つのコードでさまざまなプラットフォームで動かせることが魅力である。

各デバイスごとに専用の言語を覚える必要がないため、工数や人件費の削減にもつながる。

最近ではPhoneGapなどのWebアプリケーションをネイティブアプリとしてパッケージ化できるライブラリも充実してきたので、それらを使えば通常のアプリと同じようにStoreでの配布も可能だ。

WebでできることはWebを使い、Webではできない部分のみネイティブコードを使うといったように、上手に組み合わせて実装するのがベストではないだろうか。