"Web開発ツールを使いこなせ!"クリエイターの道具箱(1) スマートフォン/タブレット向けWebサイト構築TIPS(1)

PC向けのWebサイトの製作と、スマートフォン/タブレット向けにWebサイトを製作するのは、これまでとまったく異なるノウハウが必要になってきます。コーディング、デザイン、導線…最新のWeb開発ツールを活用しながら、1歩進んだWebサイト製作を身につけましょう。

Webブラウザごとのレンダリング差をどう吸収させるか

スマートフォン/タブレット向けにWebサイトを作成することになった場合、PC向けのWebサイトをどうするかを考えます。

■PC向けWebサイトと、同一のリソースで進める

・画像サイズの調整をおこない、PCとスマートフォン/タブレット向け両方で同じ見え方になるように
・CSSの指定を細かく分類し、PCとスマートフォン/タブレット向けで別々の見え方になるように
・Webブラウザの仕様の違いを吸収・抽象化するライブラリ(jQueryなど)を利用する

■PC向けWebサイトと、スマートフォン/タブレット向けWebサイトのリソースを分離する

・HTML5+CSS3のみで、各Webブラウザごとに対応したコーディングをおこなう
・JavaScriptやサーバサイドスクリプト(ASP, PHP, Perlなど)を使用し、Webブラウザごとに違うWebページを表示するように

どちらの案もそれぞれメリット、デメリットが存在します。

方法	メリット	デメリット
同一リソースで進める場合	修正・追加する際に1つのリソースを変更するだけですむ	想定されるWebブラウザごとの検証・CSSの微調整に時間がかかる
リソースを分離する場合	特定の環境下のみにデータを修正・追加したい場合、修正の影響範囲が小さくてすむ	サーバサイドスクリプトを使用する場合、サーバ側に環境が必要と想定される。Webブラウザ・端末環境の分だけリソースを用意する必要がある。すべての環境にてデータの修正・追加が発生した場合のコストが高い

ここでは、リソースを分離せずにWebサイトを製作する場合の方法について述べていきたいと思います。まずはWebブラウザごとのレンダリング差を、コーディングでどう吸収するかを検討してみましょう。

表示の違いを吸収するテクニックとして、次の手法があります。

・特定のWebブラウザでのみ効果を発揮するコーディング・CSS Hackをおこなう
・デバイスの幅によって、読み込むCSSファイルを切り替える
・JavaScriptで来訪者のユーザエージェントを識別し、読み込むCSSファイルを切り替える
・JavaScriptライブラリ・テーマを使用してWebサイトを作成する

特定のWebブラウザでのみ効果を発揮するコーディング・CSS Hackをおこなう

各種Webブラウザ・端末の独自拡張や、実装状況の違い、バグを利用します。特定のWebブラウザでのみ効果を発揮するHTMLやCSSを記述することで、デザインの差異を吸収します。

たとえばInternet Explorer向けのCSS Hackに、次のような書き方が存在します。

・IE6向け: プロパティ名の先頭に _ を付与
・IE7向け: プロパティ名の先頭に * を付与
・IE8向け: 値の末尾に \9 を付与
・IE9向け: セレクタの先頭に : root を、値に \9 を付与

スマートフォン/タブレットが台頭する以前から使われてきたテクニックの1つです。独自拡張やバグを利用することから、国内外問わず使用是非の議論があります。また、将来的にリリースされるWebブラウザのバージョンによっては、これらのテクニックが効かなくなるリスクもあります。

デバイスの幅によって、読み込むCSSファイルを切り替える

要素でCSSをインポートする際や、CSSのセレクタにおいて、「CSSが適用される条件」を指定します。CSS3で導入された「メディアクエリ(Media Queries)」を使用して、ブラウザ/デバイスの幅や向きを検出します。結果に応じて、インポートするCSSファイルや適用するCSSルールを切り替え、デザインの差異を吸収します。

link要素書き方例

    <link rel="stylesheet" href="(画面幅が320px-480pxの場合にインポートしたいCSSファイルを指定)" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
    <link rel="stylesheet" href="(画面幅が768px-1024pxの場合にインポートしたいCSSファイルを指定)" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

CSS書き方例

@media screen and (min-width: 800px) {
      /* 画面の幅が最低800px以上の場合に適用したいCSSルールを記述 */
    }

    @media screen and (max-width: 399px) {
      /* 画面の幅が最大399px以下の場合に適用したいCSSルールを記述 */
    }

    @media screen and (orientation: portrait) {
      /* デバイスが横向きの場合に適用したいCSSルールを記述 */
    }

    @media screen and (orientation: landscape) {
      /* デバイスが縦向きの場合に適用したいCSSルールを記述 */
    }

比較的新しい仕様を用いるため、CSS3に対応していない古いWebブラウザでは対応していません。たとえば、Internet Explorer 8以前ではこの書き方はサポートされていません。古いWebブラウザでメディアクエリを使用したい場合、サードパーティ製のJavaScriptライブラリ(css3-mediaqueries-jsなど)を用いることでカバーできる場合があります。

JavaScriptで来訪者のユーザエージェントを識別し、読み込むCSSファイルを切り替える

JavaScriptで来訪者のユーザエージェントを識別し、読み込むCSSファイルを切り替えてデザインの差異を吸収する方法です。

ユーザエージェント名はnavigator.userAgentで取得できます。navigator.userAgentの取得例は次のとおりです。

OS	ブラウザ	navigator.userAgent
Windows 7	Internet Explorer 9	Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727)
Windows 7	Google Chrome	Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17
Mac OS X	Safari	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.17 (KHTML, like Gecko) Version/6.0.2 Safari/536.26.17
Mac OS X	Google Chrome	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17
iOS	Mobile Safari	Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25
Android	ブラウザ	Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

端末名やWebブラウザ名を把握しておき、特定の環境の場合に適用したいCSSファイルをインポートします。

if (navigator.userAgent.indexOf('iPhone') > 0)
    {
document.write('<link rel="stylesheet" href="(iPhoneの場合にインポートしたいCSSファイルを指定)" media="screen">');
    }
    if(navigator.userAgent.indexOf('Android') > 0)
    {
        document.write('<link rel="stylesheet" href="(Androidの場合にインポートしたいCSSファイルを指定)" media="screen">');
    }

jQueryなどの外部JavaScriptライブラリと併用することで、特定の要素の表示/非表示や、スクロール位置の調整も容易に可能となります。

JavaScriptライブラリ・テーマを使用してWebサイトを作成する

モバイル向けのテーマが充実したJavaScriptライブラリを用いることで、デザインの差異を吸収します。あらかじめひととおりのデザインが用意されているため、高速に製作したい場合やデザインの参考にもなります。jQuery Mobile、Dojo Mobile、Kendo UIなどが挙げられます。

jQuery Mobile

美しいデザインのみならず、スライダUIやグラフ描画といった強力な機能も用意されています。多機能になればなる分だけ、読み込むファイルのサイズが大きくなりがちになります。読み込むファイルサイズはページ読み込みの時間に大きな影響を与えますので、適材適所で利用しましょう。

※次回は、iOSシミュレータ、Androidエミュレータのインストール、使い方などをご紹介します。

富田宏昭 Hiroaki Tomida
「株式会社キクミミ」でFileMakerやオープンソース言語などを用いた、Webアプリ開発企業の業務改善のためのシステム開発や環境構築を行っている。主な著書に「HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門」(マイナビ)など。