サイト制作

サイト訪問者が、機能に対応しているかどうかの識別方法

更新日:2014/03/18 公開日:2016/09/26

西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

こんにちは。All About ホームページ作成ガイドの西村文宏です。 ウェブサイトを作る際、どんなサイト訪問者に対しても同じように情報を提供したいと思うなら、「古いブラウザで閲覧された場合の対策」が必要です。 サイト訪問者は、全員が最新バージョンのブラウザを使っているとは限りません。 OSもブラウザも様々でしょう。ですから、HTML5やCSS3で追加された「比較的新しい機能」を使いたい場合には特に、対策は必須だと言えます。 ここでの「古いブラウザ」とは、「自サイト上で使いたい機能に『対応していない』ブラウザ」のことです。 逆に「新しいブラウザ」とは、「自サイト上で使いたい機能に『対応している』ブラウザ」のことです。 古いブラウザで閲覧された場合の対策としては、 (1) 古いブラウザでもそれなりに見えるよう工夫する (2) 古いブラウザ専用のページに移動させる といった方法があります。管理が楽で望ましいのは、(1)の方でしょう。

ここで問題なのは、「どのバージョンまでが古いブラウザで、どのバージョンからが新しいブラウザなのか」を調べるのが非常に面倒だという点です。

例えば、R(赤)・G(緑)・B(青)の三原色に、A(透明度)を加えた「RGBAカラーモデル」という色指定方法が、CSS3で追加されました。

この機能は、代表的な各ブラウザでは、

・Internet Explorerなら、Ver.9から対応(つまりIE8以下が未対応)
・Firefoxなら、Ver.3から対応(つまりFirefox2以下が未対応)
・Chromeなら、Ver.1から対応
・Sarariなら、Ver.3から対応(つまりSafari2以下が未対応)
・Operaなら、Ver.10から対応(つまりOpera9以下が未対応)

……という対応状況になっています。

これらの情報を、使いたい機能ごとに1つ1つ調べるのは手間がかかります。

また、それを調べた後、対応状況ごとに条件分岐を作るのも大変です。

そこでオススメなのが、「Modernizr」というスクリプトです。

このスクリプトをウェブページに読み込むと、HTML5やCSS3の各機能について、「指定の機能がそのブラウザで使えるのかどうか」を自動識別してくれます。

その結果、自身の使いたい機能が「使える場合」と「使えない場合」の、わずか2種類の条件分岐さえ用意しておけば、古いブラウザへの対処が済むことになります。

ブラウザの対応状況を1つ1つ調べる必要はありませんし、ブラウザのバージョンを元にした「複雑な条件分岐」を書く必要もありません。

以下のサンプルページをご覧ください。

ここには、1枚の風景写真と文章が掲載してあります。

もし、閲覧者のブラウザが「RGBAカラーモデル」に対応している場合には、文章の背景を「黄色の半透明」にした上で、画像に重ねて表示します。

もし、「RGBAカラーモデル」に対応していない場合には、文章は画像の下部に表示します。

対応ブラウザで閲覧した場合は、下図のように見えます。

▼Chrome33の表示例

未対応ブラウザで閲覧した場合は、下図のように見えます。

▼IE6の表示例

スクリプト「Modernizr」を使うと、このような分岐が、自力で「ブラウザのバージョン」をチェックすることなく、短い記述だけで簡単に作れます。

ここまでで、「古いブラウザで閲覧された場合の対策」が簡単にできるスクリプト「Modernizr」について、概要をご紹介いたしました。HTML5やCSS3で新しく追加された機能を使いたい場合に便利です。 次に、その「Modernizr」の具体的な使い方を解説いたします。 サンプルページは、以下の通りです。

前回の記事や、上記サンプルページのHTMLソースもご覧になりながら、以下の解説をお読みください。ここでは、4ステップに分けてご紹介いたします。


  • (1) スクリプト「Modernizr」をダウンロードする
  • (2) スクリプト「Modernizr」をウェブページに読み込む
  • (3) サンプルHTMLを記述する
  • (4) CSSを使って、条件分岐を作る

●1. スクリプト「Modernizr」をダウンロードする

まずは、「Modernizr」をダウンロードしましょう。

下記の公式サイトにアクセスして、右側の「PRODUCTION」と書かれたボタンをクリックします。

Modernizr(※英語サイト)

すると、HTML5やCSS3などの機能一覧が表示されます。この中から、ウェブページ内で利用したい機能名をすべて選択します。面倒なら全部選択しても構いません。

リストの下部にある「Non-core detects」という部分をクリックすると、さらに機能が表示されます。サンプルページのように、「RGBAカラーモデル」の使用可否を識別したい場合は、リストの「CSS3」枠内にある「rgba()」項目にチェックを入れます。

必要な機能にチェックが入れられたら、下部の「GENERATE!」ボタンをクリックします。だいたい10秒弱くらい待つと、スクリプトが生成されます。

生成されると「DOWNLOAD」ボタンが表示されますから、それをクリックして、スクリプト(JavaScriptファイル)をダウンロードします。


●2. スクリプト「Modernizr」をウェブページに読み込む

ダウンロードしたファイル(例えば「modernizr.custom.35127.js」など)はウェブ上の適当な場所にアップロードしてください。

その上で、HTMLのhead要素内に、以下のように記述して読み込みます。

<script src=”modernizr.custom.35127.js”></script>

これで、準備は完了です。


●3. サンプルHTMLを記述する

サンプルページでは、HTMLソースを、以下のように記述しています。段落(p要素)が2つあり、片方には画像を、もう片方には文章を掲載しているだけのシンプルなソースです。

<p>
	<img src="im29-image.jpg" width="400″height="267" alt="風景写真">
</p>
<p>
	ブラウザがRGBAカラーモデルに対応している場合は半透明にして表示。
	対応していない場合は画像の下部に表示。
</p>

●4. CSSを使って、条件分岐を作る

CSSソースは以下のような感じで記述します。ここでは、説明のために、簡略化して掲載しています。ボックスを半透明にするなどの具体的な記述は、サンプルページのソースをご参照ください。

<style type=”text/css”>
	.rgba {
		/* 〜RGBAカラーモデルに対応している場合のスタイル〜 */
	}
	.no-rgba {
		/* 〜RGBAカラーモデルに対応していない場合のスタイル〜 */
	}
</style>

RGBAカラーモデルが利用可能なブラウザで閲覧すると、「Modernizr」スクリプトによって、html要素に「rgba」というclass名が付加されます。

したがって、上記のように「.rgba」とセレクタを記述すると、「RGBAカラーモデルが有効なブラウザに対してだけ適用される装飾」を記述できます。

また、RGBAカラーモデルが利用できないブラウザで閲覧すると、html要素に「no-rgba」というclass名が付加されます。

したがって、「.no-rgba」とセレクタを記述すると、「RGBAカラーモデルが無効なブラウザに対してだけ適用される装飾」を記述できます。

このようにして、使いたい機能に「対応している場合」と「対応していない場合」の2つの条件分岐を記述することができます。

各ブラウザの対応状況を自力で調べる必要はありません。なお、どの機能が、どのようなclass名で識別できるのかは、「Modernizr」公式サイト内の、Documentationページに掲載されています。

リストにある「Feature」欄が機能名で、「CSS classname」欄がclass名です。
例えば、「border-radius」機能に対しては、「borderradius」と表記されています。

これは、
・border-radiusに対応していれば、「borderradius」classが付加
・border-radiusに非対応なら、「no-borderradius」classが付加
されるという意味です。

今回は、使いたい新機能の対応状況を自力で調べることなく、「古いブラウザで閲覧された場合の対策」が簡単にできるスクリプト「Modernizr」の使い方を簡単にご紹介いたしました。

HTML5やCSS3などで追加された新機能を使いたい場合に、ぜひご活用ください。

SHARE
西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2014/03/18更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう!
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら