2012/04/05更新

[Web] Webページでスマートフォンかどうかを見分ける(JavaScript編)

今日はWebサイトにおいて、PCやスマートフォンによってページの内容を変える実装に取り組んでみました♪(´ε｀ )面白いですね。今回はとりあえずJavaScriptを利用してみた。今後はPHPやJavaでもやってみようかと思います。

f:id:yoheiM:20110707093619j:image

ユーザの利用する端末によってページ内容を変えるとは

Webページで同じURLなのに、PCで見る時とスマートフォンで見る時で、ページの内容やレイアウトが変わるページがあるかと思います。それです。その実現方法は、PHPやJavaといったサーバーサイドプログラムで、アクセスしてきたのがPCかスマートフォンかを見極める事も出来ますし、JavaScriptのようなクライアントサイドプログラムで見極める事も出来るようです。

今回は、JavaScriptを利用して、スマートフォンからのアクセスの場合に、メッセージを表示するサンプルを作成してみました。

振り分け判別に使うUserAgent

UserAgentsというものを使います。JavaScriptでは以下のように取得します。

var uAgents = navigator.userAgent;
alert(uAgents);

どんな内容が取得出来るかというと、例えばiPhoneでWebページにアクセスした場合のUserAgentは以下のような内容です。例です。

[05/Jul/2011:07:16:38 -0700] "GET /gp/initRegist HTTP/1.1" 
200 958 "http://www.yoheim.net/hogehoge" 
"Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; ja-jp) 
AppleWebKit/533.17.9 (KHTML, like Gecko) 
Version/5.0.2 Mobile/8J2 Safari/6533.18.5,gzip(gfe)"

いろんな情報が入っているのです。日付、OS、ブラウザなどなど、色々です。この情報を元に、スマートフォンがアクセスしてきたのかを判別します。例えば、このUserAgentには「iPhone」という文字列があるので、iPhone（＝スマートフォン）からアクセスされた事が分かります。

UserAgent × JavaScriptで判別する

実際にJavaScriptでスマートフォンかどうかを判別するコードを作成してみました。全部のスマートフォンに対応している訳ではないですよー。一部です。。

// スマートフォンかそれ以外かを判別する。
function is_smartPhone () {
  var media = [
    'iPhone',
    'iPad',
    'Android'
    /*その他、blackberry,windowsPhoneなど必要なものがあれば追加する*/
    /*Androidは'Android'という文字列だけで全てのAndroid端末を判別出来ないので注意*/
    ];
  var pattern = new RegExp(media.join('|'), 'i');
  return pattern.test(navigator.userAgent);
}
if (is_smartPhone()) {
  alert('スマートフォンからのアクセスですね！！');
  // ここに画面内容変更コードを書けば、スマートフォン用の画面に大変身。
}

スマートフォンからのアクセスのときのUserAgentに含まれる文字列(iPhone、iPad、Androidなど)から正規表現を作成し、UserAgentの内容が正規表現にマッチするかで、スマートフォンかどうかを判別しています。意外と簡単(*´∇｀*)

いじょーでーす。