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

Googleは2020年に、プライバシー向上のためユーザーエージェントを段階的に廃止していく方針を発表しました。原因点としては、このユーザーエージェントには個人情報は含まれませんが端末の製造番号が含まれる場合があります。そのほかにも取得できるユーザー情報が多かったり、文字列が長くなり過ぎたということもあります。現在、ホームページを制作されている方でもユーザーエージェントで表示を分岐させているという方もいらっしゃるかもしれませんがいずれは使用できなくなる可能性もあります。
今回はJavascriptでClient Hintsを使用してデバイスを分岐させる方法を紹介します。

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

まずはコードを紹介します。

// User-Agent Client Hints APIを使用してデバイスのタイプを判断する関数を定義
function detectDeviceType() {
    // navigator.userAgentDataをチェックしてClient Hints APIがブラウザにサポートされているか確認
    if (navigator.userAgentData) {
        // Client Hints APIがサポートされている場合、'mobile'に関する情報を取得
        navigator.userAgentData.getHighEntropyValues(['mobile'])
        .then(ua => {
            // 'mobile'の情報がtrueの場合はモバイルデバイスとして扱う
            if (ua.mobile) {
                //ここにスマホの処理
            } else {
                //ここにPCの処理
            }
        });
    } else {
        // Client Hints APIがサポートされていない場合、従来のUser-Agent文字列を使ってデバイスタイプを推測
        console.log('User-Agent Client Hints is not supported. Falling back to traditional User-Agent string.');
        if (/Mobi|Android/i.test(navigator.userAgent)) {
            //ここにスマホの処理
        } else {
            //ここにPCの処理
        }
    }
}
// ドキュメントが読み込まれた後にデバイスタイプ判定関数を実行
document.addEventListener('DOMContentLoaded', detectDeviceType);

コードの解説

以下で関数を設定します。

function detectDeviceType() {

}

関数の中に処理を書いていきますが、navigator.userAgentDataで値を返すかどうかでClient Hints APIに対応しているブラウザかどうかを振り分けます。

if (navigator.userAgentData) {
} else {
    
}

Client Hints APIがサポートされている場合の処理

getHighEntropyValues([‘mobile’])でモバイルに関する情報を取得します。
mobileの情報が取得できた場合はtrueが返ってきますので分岐させてそれぞれの処理を実行させます。

navigator.userAgentData.getHighEntropyValues(['mobile'])
.then(ua => {
    if (ua.mobile) {
       //ここにスマホの処理
    } else {
       //ここにPCの処理
    }
});

Client Hints APIがサポートされていない場合の処理

Client Hints APIがサポートされていない場合はUser-Agentを使用してデバイスをさせます。

console.log('User-Agent Client Hints is not supported. Falling back to traditional User-Agent string.');
if (/Mobi|Android/i.test(navigator.userAgent)) {
    //ここにスマホの処理
} else {
    //ここにPCの処理
}

最後に以下でドキュメントが読み込まれた時に実行させます。

document.addEventListener('DOMContentLoaded', detectDeviceType);

まとめ

デバイスサイズで分岐させることもできますので使用する場面は少ないかもしれませんが厳密にPCとスマホを切り替えたい場合には役に立つかと思います。