シンプルな暮らし。

スマートフォンサイトの作り方(2/8) - UserAgentの判定

June 7, 2011

スマートフォン端末の判定方法です。環境変数のUserAgentを判定します。UserAgentの判定はクライアントで行ってもサーバー側のどの言語で行っても良いのですが、JSとPHPの両方を書いておきます。

スマートフォンでない携帯端末であれば、キャリアのIPで判定を行うケースも多いのですが、スマートフォンの場合はwifi経由でアクセスしてきますので、キャリアのIP判定を行ってしまうとwifi環境でスマートフォン画面を閲覧できなくなってしまいますので、注意が必要です。

userAgent判定を行う前提で調べたところ、WordPressのWPtouchというプラグインで処理が公開されていましたので、それを流用しました(以下のPHPとJSはWordPressでなくても動きます)。

PHPで処理する場合

▼1. 外部ファイルとして保存(例えば、/includes/is_mobile.php)

<?php
  // Thanks to BraveNewCode's WPtouch iPhone Theme for the UA list.
  // (http://wordpress.org/extend/plugins/wptouch/)
  function is_mobile () {
    $useragents = array(
      'iPhone',         // Apple iPhone
      'iPod',           // Apple iPod touch
      'Android',        // 1.5+ Android
      'dream',          // Pre 1.5 Android
      'CUPCAKE',        // 1.5+ Android
      'blackberry9500', // Storm
      'blackberry9530', // Storm
      'blackberry9520', // Storm v2
      'blackberry9550', // Storm v2
      'blackberry9800', // Torch
      'webOS',          // Palm Pre Experimental
      'incognito',      // Other iPhone browser
      'webmate'         // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
  }
?>

▼2. スマートフォンの判定をする各HTMLに記述

<?php
//HTML内の先頭行(1行目に記述)
include_once("/includes/is_mobile.php");
?>
<html>
<title>タイトルタグなど</title>
<head>

<?php if (is_mobile()) { ?>
//スマートフォンの場合
<link href="smartphone.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="smartphone.js"></script>
<?php } ?>

<?php if (!is_mobile()) { ?>
//PCの場合
<link href="pc.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="pc.js"></script>
<?php } ?>

</head>

<body>
<ul>
<li>PCだとpc.cssとpc.jsを読み込みます。</li>
<li>スマートフォンだとsmartphone.cssとsmartphone.jsを読みます。</li>
</ul>
</body>

</html>

 

JSで処理する場合

▼1. 外部ファイルとして保存(例えば、is_mobile.js)

// Thanks to BraveNewCode's WPtouch iPhone Theme for the UA list.
// (http://wordpress.org/extend/plugins/wptouch/)
function is_mobile () {
  var useragents = [
    'iPhone',         // Apple iPhone
    'iPod',           // Apple iPod touch
    'Android',        // 1.5+ Android
    'dream',          // Pre 1.5 Android
    'CUPCAKE',        // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS',          // Palm Pre Experimental
    'incognito',      // Other iPhone browser
    'webmate'         // Other iPhone browser
  ];
  var pattern = new RegExp(useragents.join('|'), 'i');
  return pattern.test(navigator.userAgent);
}

▼2. スマートフォンの判定をする各HTMLに記述

<html>
<title>タイトルタグなど</title>
<head>
<script type="text/javascript" src="is_mobile.js"></script>

<script type="text/javascript">
//PC用のCSS
if(!is_mobile()){
 var link = document.createElement('link');
 link.rel = 'stylesheet';
 link.type = 'text/css';
 link.href = 'pc.css';
 document.getElementsByTagName('head')[0].appendChild(link);
}

//スマートフォン用のCSS
if(is_mobile()){
 var link = document.createElement('link');
 link.rel = 'stylesheet';
 link.type = 'text/css';
 link.href = 'smartphone.css';
 document.getElementsByTagName('head')[0].appendChild(link);
}

</script>

</head>
<body>
<ul>
<li>PCだとpc.cssを読み込みます。</li>
<li>スマートフォンだとsmartphone.cssを読みます。</li>
</ul>
</body>
</html>

Categories

関連記事

ads by google

Ads by goolge

Recent Entries

Ads by Rakuten