UserAgentでスマホとPC・タブレットのアクセスを振り分ける(不完全なメモ)
投稿日：
当ブログもようやくスマホ対応のテーマに更新しました。WEBサイトをスマホ対応させるアプローチはいろいろありますが、当方ではスマホのアクセスかそうでないかを判定し、それによって出力するHTMLと読み込ませるスタイルシートを変えています。その辺りについて不完全ながらメモ書きします。目次
- UserAgentによるアクセス判定用PHPコード(functions.php)
- WordPressでアクセス判定の結果によって出力するHTMLを変化させる(各テーマのファイル)
- 同 適用するスタイルシートを変える(functions.php)
- PCモード/スマホモード切替スイッチ(テーマの適当な場所に設置)
UserAgentによるアクセス判定用PHPコード(functions.php)
とにかくUserAgentによってアクセスを振り分けます。UserAgentってなんだ？みたいな人は適当にググッてもらえばなんとなく理解できるかと思います。誤解を恐れずにざっくり言えば(クライアントの自己申告・偽装可能な)サーバー側でアクセス環境の判定に用いられる文字列です。
UserAgentの文字列に、「iPhone」と入っていればこれはもう一発でiPhoneユーザーだとわかります(偽装していなければ)。また、Androidでも、「Mobile」の文字列が入っていればスマホユーザーの可能性は高い(ネット上の何処かで見た気がする・ソース失念)みたいなので、この2つの文字列に反応してスマホ判定を行います。判定ミスが出る可能性はあるので、別途切り替えスイッチを設け、「スマホなのにPC向けページが表示されたよ(´・ω・｀)」な人や「PCだけどスマホ向けページを見たいよヽ(｀Д´#)ﾉ」みたいな人に対処しましょう。コードはこんな感じです。WordPressの場合はfunctions.phpに記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php $mobilemode = is_mymobile();// WordPressのグローバル変数に判定結果を入れる function is_mymobile() { $expireday = 21;// Cookieの有効日数を入れる $mydomain = 'hogehoge.com';// 自分のサイトのドメイン名を入れる if(isset($_COOKIE["page_mode"])){ $mode = $_COOKIE["page_mode"];// 2回目以降はCookieを読み込んで判定する if($mode){ return true; }else{ return false; } }else{ if(isset($_SERVER["HTTP_USER_AGENT"])){ $ua = $_SERVER["HTTP_USER_AGENT"]; if(strpos("$ua", 'iPhone') !== false){ setcookie("page_mode", '1', time()+(60*60*24*$expireday), "/", "$mydomain"); return true;// スマホユーザー }elseif(strpos("$ua", 'Mobile') !== false){ setcookie("page_mode", '1', time()+(60*60*24*$expireday), "/", "$mydomain"); return true;// スマホユーザー }else{ setcookie("page_mode", '0', time()+(60*60*24*$expireday), "/", "$mydomain"); return false;// PC・タブレットユーザー } }else{ setcookie("page_mode", '0', time()+(60*60*24*$expireday), "/", "$mydomain"); return false;// UserAgentが無いユーザー(PC・タブレットユーザー) } } } ;?> |
アクセス1回目は判定プログラムで端末を判定し、2回目以降はCookieによってページモードを判定します(これによって後述する切り替えスイッチが動きます)。WordPressのグローバル変数にページモードの判定結果を入れ、コレをテーマの各ファイルで使うようにします。
WordPressでアクセス判定の結果によって出力するHTMLを変化させる(各テーマのファイル)
PCモードとスマホモードのどちらで表示するかの判定が終わったら、各モードごとに出力するHTMLを変えてみます。WordPressの場合はfunctions.phpに先述のコードを記載したうえで、こんな感じのコードを使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php global $mobilemode; if($mobilemode):?> ここにスマホモード時のタグを記述します <?php else:?> ここにPCモード時のコードを記述します <?php endif;?> |
アクセス判定はfunctions.phpの関数で行い、実行結果をグローバル変数にしています。各テーマファイルで、判定結果を使う前に(ファイルのPHP部分の頭あたりでやるのがいいかもしれない) global $mobilemode; の一文を入れ、グローバル変数を使えるようにします。スマホに最適化したHTMLを出力するときに使えます。
同 適用するスタイルシートを変える(functions.php)
HTMLを変えたらスタイルシートも変えます。PC用とスマホ用のスタイルシートを分離するので、(特にスマホ版では)ムダに大きいファイルを読まなくて良くなります(私の場合はせいぜい10KBくらいですが)。functions.phpに以下のコードを記述します。こちらのサイトを参考にさせていただきました→[WP]WordPressのfunctions.phpでCSSの読み込みを管理・制御する方法 | EMiAC-Works
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php function register_stylesheet() { // 使用するスタイルシートを全部登録しておく wp_register_style('basic', get_bloginfo('template_directory').'/style.css'."?time=".time(), array(), null, 'all');// PC向け wp_register_style('mobile', get_bloginfo('template_directory').'/style-mobile.css'."?time=".time(), array(), null, 'all');// スマホ向け } function load_stylesheet() { global $mobilemode;// アクセス判定の結果を利用 register_stylesheet();// スタイルシート登録関数を実行 if($mobilemode){ wp_enqueue_style('mobile'); }else{ wp_enqueue_style('basic'); } } add_action('wp_enqueue_scripts', 'load_stylesheet'); ?> |
実行する処理の詳細は先述した参考サイト様の記事をお読みいただければと思います。
PCモード/スマホモード切替スイッチ(テーマの適当な場所に設置)
最後にモード切替スイッチを実装します。判定ミスへの備えとして必ず設置すべきものになります。コードはこんな感じになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php global $mobilemode; if($mobilemode){ $changemodevalue = 'true'; $changetext = 'PCモードに切り替え'; }else{ $changemodevalue = 'false'; $changetext = 'スマホモードに切り替え'; };?> <div class="changemodebutton"> <a href="" onclick="changemode()"><?php echo $changetext;?></a> </div><!-- .changemodebutton --> <!-- PC/SP切り替えスクリプト --> <script> function changemode(){ var nowmode = <?php echo $changemodevalue;/* SP mode === true,PC mode === false */?>; expireday = 21;// Cookieの有効日数 cookieage = 60*60*24*expireday; if(nowmode){ document.cookie = 'page_mode=' + '0' + '; path=/; max-age=' + cookieage + ';'; }else{ document.cookie = 'page_mode=' + '1' + '; path=/; max-age=' + cookieage + ';'; } location.reload(true); } </script> |
こんな感じのコードをサイトのフッターに記述して、閲覧モードの切り替えスイッチを用意します。仕組みとしてはJavaScriptで任意の閲覧モード向けにCookieを書き換えるだけの実に単純なものです。Cookieの有効日数が経過したら再設定が必要になるので、適当な日数をセットしましょう。また、切り替えボタンはスマホユーザーでも押せるような設計にすべきです。この記事の締めに、切り替えスイッチに適用するCSSの例を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.changemodebutton { width:35%; text-align:center; padding:0; background-color:#fefefe; } .changemodebutton a { color:#010101; text-decoration:none; display:block; padding:10px; } .changemodebutton a:hover { text-decoration:none; background:#ffb866; } .changemodebutton a:active { text-decoration:none; background:#ffb866; } |