【WordPress】デバイス判定関数「is_mobile」を刷新!古くなったUA判定をシンプル&モダンにアップデート
公開日
いつも読んでいただきありがとうございます。
昨日は「メディアクエリ」を使ったCSSでのレスポンシブ対応を解説しましたが、実務では『PHP側でそもそも出力するHTMLを切り替えたい』という場面も多いですよね。
今回は、これまでWordPress制作で愛用してきた独自のデバイス判定関数を、今の時代に合わせて大幅にバージョンアップしたので、その「新旧比較」とポイントをシェアします。
この記事で学べること
- 長年使い続けた「旧型」関数の課題点
- シンプルかつタブレットまでカバーする「新型」コード
- 実務での「CSS切り替え」と「PHP切り替え」の使い分け
目次
1. 【旧】長年お世話になった「正規表現ガチガチ型」
まずは、僕がこれまで数多くの案件で使い倒してきたコードです。BlackberryやiPodなど、かつてのモバイルデバイスを網羅した「歴史の詰まった」記述です。
function is_mobile($camouflage = true){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
// ... (長いので中略)
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
$sp_view = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
if($camouflage === true){
if(empty($sp_view)){
$sp_view = ($sp_view && ($_SESSION['pc_view'] !== TRUE))? TRUE:FALSE;
}
}
return $sp_view;
}
課題点:
当時はこれが正解でしたが、今の時代、BlackberryやPalm OS(webOS)を個別に判定する必要性はほぼありません。また、正規表現(preg_match)による配列ループは、記述が複雑になりがちで保守性が低いという懸念がありました。
2. 【新】シンプル&タブレット対応の「モダン型」
そして、今回リニューアルしたコードがこちらです。記述を大幅に整理し、iPadやAndroidタブレットも含めた「モバイル」判定に最適化しました。
function is_mobile($camouflage = true) {
$ua = isset($_SERVER['HTTP_USER_AGENT']) ? strtolower($_SERVER['HTTP_USER_AGENT']) : '';
// iPadやAndroidタブレットも含めて「モバイル」と判定
$is_ios = (strpos($ua, 'iphone') !== false || strpos($ua, 'ipod') !== false || strpos($ua, 'ipad') !== false);
$is_android = (strpos($ua, 'android') !== false);
$sp_view = ($is_ios || $is_android);
// PC表示モードがONなら、強制的にPC扱い(false)にする
if ($camouflage === true && $sp_view === true) {
if (isset($_SESSION['pc_view']) && $_SESSION['pc_view'] === true) {
$sp_view = false;
}
}
return $sp_view;
}
バージョンアップのポイント
- 可読性の向上: `preg_match` を使わず、シンプルな `strpos`(文字列検索)に変更。誰が見ても「何を判定しているか」が一目でわかるようになりました。
- iPad/タブレットへの対応: 以前のコードでは漏れがちだったiPadも、しっかりとモバイル(タブレット)枠として判定に含めています。
- セッション処理のスリム化: 「PC表示モード」への切り替えロジックを整理し、バグが起きにくいシンプルな条件分岐に書き換えました。
使い分けの極意:CSS or PHP?
基本は「CSS(メディアクエリ)」です。
Googleも推奨している通り、SEOやキャッシュの観点からも、見た目だけの調整ならCSSで完結させるのがベストです。
「PHP(is_mobile)」を使うべき時:
・PCとスマホで読み込む画像(バナーなど)を根本的に変えたい
・重いJavaScriptをスマホでは読み込みたくない
・特定の機能(スライダーなど)をデバイスごとに切り替えたい
など、「データ通信量」や「機能の有無」に関わる場合にのみ使うのがプロの判断基準です。
まとめ:道具は常にメンテナンスしよう
2020年から活動してきて、自分の「テンプレート」をアップデートし続けることの重要性を痛感しています。
古いコードには当時の苦労が詰まっていて愛着もありますが、よりシンプルで保守性の高いコードに置き換えていくことは、クライアントにとっても自分にとってもプラスになります。皆さんも、自分のコードをたまに見直してみませんか?
コードを短くシンプルにすることは、単なる自己満足ではありません。未来の自分がそのコードを見たときに「あ、これならすぐ直せる」と思えるかどうかが、プロの仕事の質を決めますよ!
