新しいHTTPヘッダー「Sec-CH-UA-Model」でWeb開発をレベルアップ

Sec-CH-UA-Model ヘッダーは、以下の形式で送信されます。

Sec-CH-UA-Model: <device_model>

ここで、<device_model> は、デバイスのモデル名を表す文字列です。例えば、iPhone 13 Pro Max の場合は iPhone13,3 となります。

Sec-CH-UA-Model ヘッダーの利点は以下の通りです。

• 将来の互換性
  Sec-CH-UA-Model ヘッダーは、将来のデバイスやブラウザをサポートするために設計されています。
• 最適なユーザー体験の提供
  Web 開発者は、Sec-CH-UA-Model ヘッダーを使用して、デバイスに固有の機能やレイアウトを提供することができます。
• ユーザーデバイスのより正確な識別
  Sec-CH-UA-Model ヘッダーは、従来の User-Agent ヘッダーよりも詳細なデバイス情報を提供します。これは、特にモバイルデバイスにおいて重要です。

Sec-CH-UA-Model ヘッダーを使用するには、以下の点に注意する必要があります。

• ヘッダーの値
  Sec-CH-UA-Model ヘッダーの値は、デバイスによって異なります。
• サポート対象ブラウザ
  Sec-CH-UA-Model ヘッダーは、すべてのブラウザでサポートされているわけではありません。

Sec-CH-UA-Model ヘッダーは、Web 開発者がユーザーのデバイスをより正確に識別し、最適なユーザー体験を提供するための貴重なツールです。しかし、ヘッダーを使用する際には、サポート対象ブラウザ、ヘッダーの値、およびプライバシーに関する考慮事項に注意する必要があります。

• Sec-CH-UA-Model ヘッダーは、Sec-CH-UA ヘッダーファミリの一部です。Sec-CH-UA ヘッダーファミリには、Sec-CH-UA-Arch ヘッダー (デバイスアーキテクチャ) や Sec-CH-UA-Bitness ヘッダー (デバイスビットネス) などのヘッダーも含まれます。
• Sec-CH-UA-Model ヘッダーは、2020 年 11 月に提案され、2022 年 3 月に正式に仕様化されました。

---

• 統計情報の収集
  サーバーは、Sec-CH-UA-Model ヘッダーを使用して、ユーザーデバイスに関する統計情報を収集することができます。この情報は、Web サイトの分析や開発に役立ちます。
• ユーザーデバイスの識別
  サーバーは、Sec-CH-UA-Model ヘッダーを使用して、ユーザーが使用しているデバイスを識別することができます。これにより、デバイスに固有のコンテンツや機能を提供することができます。

以下に、Sec-CH-UA-Model ヘッダーを使用する例を示します。

例 1: ユーザーデバイスに基づいてコンテンツを提供する

from flask import Flask, request

app = Flask(__name__)

@app.route("/")
def index():
    if request.headers.get("Sec-CH-UA-Model"):
        device_model = request.headers.get("Sec-CH-UA-Model")
        if device_model.startswith("iPhone"):
            # ユーザーが iPhone を使用している場合、iPhone 向けのコンテンツを提供する
            return "<h1>iPhone コンテンツ</h1>"
        elif device_model.startswith("Android"):
            # ユーザーが Android デバイスを使用している場合、Android 向けのコンテンツを提供する
            return "<h1>Android コンテンツ</h1>"
        else:
            # ユーザーのデバイスが不明な場合、デフォルトのコンテンツを提供する
            return "<h1>デフォルトコンテンツ</h1>"
    else:
        # Sec-CH-UA-Model ヘッダーが提供されていない場合、デフォルトのコンテンツを提供する
        return "<h1>デフォルトコンテンツ</h1>"

if __name__ == "__main__":
    app.run(debug=True)

この例では、Flask フレームワークを使用して Web サーバーを作成しています。/ エンドポイントにアクセスすると、サーバーは Sec-CH-UA-Model ヘッダーをチェックします。ヘッダーが存在する場合、サーバーはデバイスモデルに基づいてコンテンツを返します。ヘッダーが存在しない場合、サーバーはデフォルトのコンテンツを返します。

例 2: ユーザーデバイスに関する統計情報を収集する

import requests

def collect_device_stats():
    response = requests.get("https://www.example.com")
    if response.headers.get("Sec-CH-UA-Model"):
        device_model = response.headers.get("Sec-CH-UA-Model")
        # デバイスモデルに関する統計情報を収集する
        print(f"デバイスモデル: {device_model}")

if __name__ == "__main__":
    collect_device_stats()

この例では、requests ライブラリを使用して Web サイトから要求を送信しています。応答ヘッダーに Sec-CH-UA-Model ヘッダーが存在する場合、スクリプトはデバイスモデルをコンソールに印刷します。この情報をデータベースに保存したり、分析ツールで処理したりすることができます。

これらの例は、Sec-CH-UA-Model ヘッダーをどのように使用できるかのほんの一例です。このヘッダーは、Web 開発者がユーザーのデバイスをよりよく理解し、より良いユーザー体験を提供するのに役立ちます。

• Sec-CH-UA-Model ヘッダーの値は、デバイスによって異なります。
• Sec-CH-UA-Model ヘッダーは、すべてのブラウザでサポートされているわけではありません。
• 上記のコード例はあくまでも例であり、実際の用途に合わせて変更する必要があります。

---

Sec-CH-UA-Model の代替手段として、以下の方法が考えられます。

User-Agent ヘッダー

従来の User-Agent ヘッダーは、Sec-CH-UA-Model ほど詳細ではありませんが、すべてのブラウザでサポートされています。

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome 100.0.4896.127 Safari/537.36

このヘッダーからは、ブラウザの種類、バージョン、およびオペレーティングシステムに関する情報を得ることができます。

Accept ヘッダー

Accept ヘッダーは、クライアントが受け入れられるコンテンツの種類を指定するために使用されます。このヘッダーを使用して、デバイスの種類を推測することができます。

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

例えば、Accept ヘッダーに application/vnd.wap.xhtml+xml が含まれている場合、クライアントはモバイルデバイスである可能性が高いです。

JavaScript によるデバイス検出

JavaScript を使用して、ユーザーのデバイスに関する情報を取得することができます。ただし、この方法はユーザーが JavaScript を無効にしている場合に機能しません。

const userAgent = navigator.userAgent;
const deviceType = getDeviceType(userAgent);

function getDeviceType(userAgent) {
  if (/iPhone|iPad|iPod/i.test(userAgent)) {
    return "mobile";
  } else if (/Android/i.test(userAgent)) {
    return "mobile";
  } else {
    return "desktop";
  }
}

サーバサイドのデバイス検出ライブラリ

Sec-CH-UA-Model の代替手段を選択する際には、以下の点を考慮する必要があります。

• プライバシー
  選択した方法は、ユーザーのプライバシーを尊重する必要があります。
• 精度
  選択した方法は、デバイスの種類を正確に識別する必要があります。
• サポート対象ブラウザ
  選択した方法は、すべてのブラウザでサポートされている必要があります。