スマートフォンからのアクセスを判別して振り分け動作をする4つの方法

この記事が良ければ、ぜひシェアお願いします

最近はWordPressのテーマでも”レスポンシブWeb”対応のものが増えてきているような気がしますが、個人的にはアプリケーションパッケージに”レスポンシブWeb”化するのは、かなり難しいのではないかと感じてきています。それは、PCサイトが充実していれば充実しているほど、その難易度は上がると感じています。(シンプルなブログサイトなら全然問題ないと思います。)

自分でもWordPressのテーマを作りながら、いつかスマフォ対応はさせたいなと考えていたのですが、一つのテーマで”レスポンシブWeb”にするのは難しいと感じました。その理由は、テーマのテンプレートファイル(***.php)の規則が決まっていると、index.phpに書いてある内容でスマフォからのアクセスかどうかをいちいち考えていたら、かなり大変だと思ったからです。

PCサイトで表示しているものをスマフォでも表示しようとすると、情報量が多くなりすぎてスマートフォン向けのサイトにはならなくなってしまいます。WordPressのバージョンが上がって、うまいこと切り替えられるようになればいいのですが・・・なんて(笑)

こちらのサイトでも、”レスポンシブWeb”について書かれていますが、考えるポイントが難しいと述べられています。私も、「CSS3のMediaQueryを使えばいいじゃん~」なんて思っていたのですが、完全静的サイトであれば良いかもしれないですが、WordPressでは関数の使い分けは難しいと思っています。

参考元 : レスポンシブwebデザインで制作する時のポイント | Design Spice

スマートフォンからのアクセスをどう判別しているのか

「スマートフォンからのアクセスかどうかをどう判別しているのか?」は、アクセスしてきたブラウザのUserAgentで判別します。こちらのサイトでUserAgentを纏められていますが、”iPhone”なのか”Android”なのかVer.とともに分かるようになっています。

ここで気をつけて欲しいのが、Apple系のデバイスは”iPhone””iPod””iPad”とそれぞれ判別が付くようになっているのですが、Android端末は全て”Android”となっているので、2.x系のAndroidでもそれがスマートフォンなのかタブレットなのか判別が付きません。じゃあ、端末1個1個定義して判別するかというと、そんなことに時間を割いていたら専任担当者も必要になってしまいますよね。

そのことを考えると、スマートフォン対応で一歩進んで取り組まれているYahoo!JAPANさんのように『PC』『モバイル』『スマフォ』でどういう画面でみたいか選べるようにすると良いと思います。ただ、私自身Javaで組まれたサイトのスマートフォン化をしたことがありますが、JSPの組み方やサーブレットの構造の問題で、簡単にPC←→モバイル←→スマフォと切り替えるのはできませんでした。

また、もっと単純な方法では、その「アクセスしてきた端末の画面幅がいくつなのか」をCSS側で判別するという方法もあります。ただ、ここは落とし穴があって、同じVer.のAndroidだったとしても、端末によってはブラウザの標準画面幅がデフォルトで異なっていたりします。「あれ?この端末だと上手く表示されるのに、こっちの端末だと変な余白ができるなぁ・・・」なんてことはざらにありますので要注意です。

スマートフォンからのアクセスの振り分け方法

基本的には、”UserAgent”でスマフォか判別するか、解像度幅で判別するかになるので、これを用いて対応するためには3つの対応策があります。

  • ApacheでURLを振り分ける(.htaccessを使う)
  • PHPでCSSを切り替える
  • CSSで表示を変える
  • JavascriptでCSSを切り替える

Apache(.htaccess)版

まずご利用のサーバがmod_rewriteに対応しているかどうかが前提条件になりますが、Apache側でUserAgentを判別して、振り分け先となるURLを振り分ける方法となります。つまり、PC用サイトとスマフォ用サイトは別にフロントエンドを作る発想になります。

【.htaccessの記述例】

RewriteEngine On

# iPod
RewriteCond %{HTTP_USER_AGENT} iPod
RewriteRule ^$ /m/ [R]

# iPhone
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^$ /m/ [R]

# iPad
RewriteCond %{HTTP_USER_AGENT} iPad
RewriteRule ^$ /m/ [R]

# Android
RewriteCond %{HTTP_USER_AGENT} Android
RewriteRule ^$ /m/ [R]

PHP版

これはフロントエンドにPHPを利用していることが前提になってしまうのですが、PHPでUserAgentを判別して、表示させるためのCSSを使い分けさせる方法になります。こちらは全ページに適用できるようにしておく必要があります。

【PHP記述例】

<?php
  $ua=$_SERVER['HTTP_USER_AGENT'];
  $browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
    if ($browser == true){
    $browser = 'sp';
  }
?>
<?php if($browser == 'sp'){ ?>
    <link rel="stylesheet" type="text/css" href="css/sp.css"/>
<?php }else{ ?>
    <link rel="stylesheet" type="text/css" href="css/pc.css" />
<?php } ?>

CSS版

こちらはアクセス元の端末の解像度で判別する方法です。関連しそうなところで言うと、HTMLのViewportもありますが、ここではちょっと違うかなと思うので割愛させてもらいます。

【CSS記述例】

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="./css/sp.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:560px)" href="./css/pc.css" />

Javascript版

こちらはPHP版がJavascriptで実装された感じですね。

【Javascript記述例】

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	document.write('<link rel="stylesheet" type="text/css" href="./css/sp.css">');
}else {
        document.write('<link rel="stylesheet" type="text/css" href="./css/pc.css">');
    }

個人的な考察

静的なサイトを作るのであれば、上記の方法でお好きなやり方を選べば良いと思うのですが、WordPressなどアプリケーションパッケージを使っている場合やスクラッチ開発をしているようなサイトの場合だと、Apache(.htaccess)での振り分けが最善策かと思います。結局、フロントエンド用にサイトは作らなければいけないのですが、MediaQueryを使って複雑度を増すよりは、局所化と最適化を意識した方が良いと思います。

WordPressに限っても、Apache振り分けが一番良いと思うのですが、WordPressでは『WPtouch』という素晴らしいプラグインがあります。ただ、無料版だと制限があり、スマフォ対応できてもちょっと寂しい感じになってしまいます。そこで『WPtouch Pro』を導入するのが一番楽かもしれません。(もちろんお金は掛かりますが)

となると、テーマを作成する際にはPC版とスマフォ版とそれぞれテーマを作らないといけないですね。。。むむむ、スマフォ対応は色々と大変です。私の目指す道は長そうです。。。

<

参照元 : WPtouch Pro のライセンス購入、インストールから有効化まで

HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
谷拓樹
ラトルズ
売り上げランキング: 1938

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク