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アプリ開発入門」(マイナビ)など。