各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

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

  • publish_advertise
2014/03/18

 

こんにちは。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」というスクリプトです。

 

Modernizr(※英語サイト)

 

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

 

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

 

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

 

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

 

サンプルページ

 

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

 

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

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

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

 

▽Chrome33の表示例(サンプルページ

 

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

 

▽IE6の表示例(サンプルページ)

 

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

その具体的な方法は、次回にご紹介いたします。

 

 
【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2014.03.20
サイト訪問者が、機能に対応しているかどうかの識別方法(第2回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る