WEB制作、マーケティングに関する情報をお届けします。

UserAgent(ユーザーエージェント)は、インターネット閲覧時の利用者のデバイス、OS、ブラウザなども文字情報のことです。例えばmacの場合は以下のようなものが文字列が吐き出されます。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Webプログラムの制作においてはユーザーの環境を把握し、それぞれに処理を変えるなど、重要な役割を担っています。ただ、Googleは2020年に、プライバシー向上のためユーザーエージェントを段階的に廃止していく方針を発表しました。原因点としては、このユーザーエージェントには個人情報は含まれませんが端末の製造番号が含まれる場合があります。そのほかにも取得できるユーザー情報が多かったり、文字列が長くなり過ぎたということもあります。現在、ホームページを制作されている方でもユーザーエージェントで表示を分岐させているという方もいらっしゃるかもしれません。
現状は大きな問題は起きていないようですがユーザーエージェントが完全に廃止になった時のために代替の方法をコードを交えて紹介していきます。

User-Agent Client Hintsを活用する

User-Agent Client HintsはUserAgentの代わりとして提供する機能です。

Sec-CH-UA: "Chromium";v="101", "Google Chrome";v="101", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"

UserAgentに比べると取得されるデータが少ないと感じるかもしれません。
ただ、モバイルデバイスかどうか、ブラウザが何か、OSが何かということはこれだけで全てわかるためWebプログラムの制作においては十分ではないかと思います。
まずモバイルかどうかという部分は以下のところに記載があります。

Sec-CH-UA-Mobile: ?0

「?0」という値が返ってきていますがこれは非モバイルデバイスを意味します。
モバイルデバイスの場合は「?1」という値が返ってきます。
そのため、PCデバイスとスマホのデバイスの処理の振り分けに使うことができます。
そのほかの値も表にまとめます。

注意点：User-Agent Client Hintsが提供されないブラウザもある

ブラウザのシェアトップのGoogleChromeはUser-Agent Client Hintsを提供していますが、他社のブラウザでは提供されていない場合があるため、その辺りも考慮したコード制作が必要です。
今回は上記を考慮しながらWordpressでのパソコンとスマホを分岐する方法を解説します。

User-Agent Client Hintsでパソコンとスマホを分岐

functions.phpに記載する

function is_mobile() {
    // Client Hints をサポートするためのヘッダーを設定します。
    // これにより、ブラウザが Client Hints 対応の情報を送信することが可能になります。
    if (function_exists('header')) {
        header('Accept-CH: Sec-CH-UA-Mobile');
    }

    // HTTP_SEC_CH_UA_MOBILE ヘッダーが存在する場合、その値を確認します。
    // '?1'はモバイルデバイスからのアクセスを意味し、'?0'は非モバイルデバイスを意味します。
    if (isset($_SERVER['HTTP_SEC_CH_UA_MOBILE'])) {
        // '?1'が返されるとtrue（モバイルデバイス）として評価されます。
        return $_SERVER['HTTP_SEC_CH_UA_MOBILE'] === '?1';
    }

    // Client Hints が提供されない場合は、従来の User-Agent 文字列を解析します。
    // 以下の配列には、モバイルデバイス特有のユーザーエージェントのキーワードが含まれています。
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android、モバイル限定
        'Windows.*Phone', // Windows Phone
        'dream', // Android 1.5未満
        'CUPCAKE', // Android 1.5以上
        'blackberry9500', // BlackBerry Storm
        'blackberry9530', // BlackBerry Storm
        'blackberry9520', // BlackBerry Storm v2
        'blackberry9550', // BlackBerry Storm v2
        'blackberry9800', // BlackBerry Torch
        'webOS', // Palm Pre（実験的）
        'incognito', // その他のiPhoneブラウザ
        'webmate' // その他のiPhoneブラウザ
    );
    // 配列内の各ユーザーエージェント文字列を結合し、正規表現パターンを作成します。
    $pattern = '/'.implode('|', $useragents).'/i';

    // User-Agent 文字列に上記のいずれかのキーワードが含まれているかをチェックします。
    // preg_matchは、マッチが見つかると1を返し、見つからなければ0を返します。
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

page.phpなどのテンプレートパーツに記載する

<?php if ( is_mobile() ) : ?>
    <!-- ここにモバイルデバイス用のコンテントを記述 -->
<?php else : ?>
    <!-- ここにデスクトップデバイス用のコンテントを記述 -->
<?php endif; ?>

コードの解説

まず、以下でClient Hints をサポートするためのヘッダーを設定します。
これにより、ブラウザがClient Hints対応の情報を送信することが可能になります。

if (function_exists('header')) {
    header('Accept-CH: Sec-CH-UA-Mobile');
}

次に取得した情報からパソコンからのアクセスなのか、スマホからのアクセスなのかを確認します。

if (isset($_SERVER['HTTP_SEC_CH_UA_MOBILE'])) {
　　　　　　　　return $_SERVER['HTTP_SEC_CH_UA_MOBILE'] === '?1';
}

‘?1’はモバイルデバイスからのアクセスを意味し、’?0’は非モバイルデバイスを意味します。
‘?1’が返された場合はtrue(モバイルデバイス)として判断されます。

また、Client Hintsが提供されない場合の処理も必要です。
これには従来の User-Agent 文字列を解析します。

$useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android、モバイル限定
    'Windows.*Phone', // Windows Phone
    'dream', // Android 1.5未満
    'CUPCAKE', // Android 1.5以上
    'blackberry9500', // BlackBerry Storm
    'blackberry9530', // BlackBerry Storm
    'blackberry9520', // BlackBerry Storm v2
    'blackberry9550', // BlackBerry Storm v2
    'blackberry9800', // BlackBerry Torch
    'webOS', // Palm Pre（実験的）
    'incognito', // その他のiPhoneブラウザ
    'webmate' // その他のiPhoneブラウザ
);

配列内の各ユーザーエージェント文字列を結合し、正規表現パターンを作成します。

$pattern = '/'.implode('|', $useragents).'/i';

preg_matchを使用してUserAgentで取得した文字列にマッチするキーワードが含まれないかを確認します。
マッチが見つかると1を返し、見つからなければ0を返します。

以上が解説でした。

まとめ

まだ、UserAgentでも問題ないというケースが多いですがいずれ使えなくなる可能性がありますので、それまでに対策を行いましょう。