User-Agentとは？ブラウザ識別の仕組みを徹底解説

Web

「スマホ用とPC用で表示が変わるのはなぜ？」

「User-Agentって何の情報が含まれているの？」

Webサイトがブラウザを識別する鍵となるのが、User-Agentです。

この記事では、HTTPリクエストに含まれるUser-Agentについて、基礎から実践的な使い方まで分かりやすく解説していきますね。

スポンサーリンク

User-Agentの基本概念

User-Agentって何？

User-Agent（ユーザーエージェント）は、ブラウザやアプリがWebサーバーに「自分は誰です」と伝えるための情報です。

HTTPリクエストヘッダーの一部として送信され、ブラウザの種類やバージョン、OSなどが含まれています。

パスポートや身分証明書のように、クライアントの身元を示すものなんですね。

なぜUser-Agentが必要なの？

Webサイトがクライアントを識別する理由はいくつかあります。

最適なコンテンツの提供

スマホには軽量版、PCには高機能版を表示できます。

画面サイズに合わせたレイアウトを選択できるんですね。

互換性の確保

古いブラウザには対応した表示方法を使います。

新しいCSSや機能をサポートしていない場合の回避策が取れますよ。

統計とアクセス解析

どのブラウザが人気か、モバイルとPCの比率はどうかなど、貴重なデータが得られます。

セキュリティとボット対策

不審なアクセスやクローラーを識別できます。

User-Agent文字列の構造

基本的なフォーマット

User-Agent文字列は、複数の情報が連結された形式です。

Chrome on Windowsの例：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

一見複雑ですが、パーツごとに意味があります。

各部分の意味

順番に分解してみましょう。

Mozilla/5.0

歴史的な理由で、ほぼすべてのブラウザに含まれます。

互換性のために残されているレガシー情報ですね。

プラットフォーム情報

(Windows NT 10.0; Win64; x64)
  • Windows NT 10.0：Windows 10または11
  • Win64：64ビット版Windows
  • x64：64ビットプロセッサ

OSの種類とアーキテクチャが分かります。

レンダリングエンジン

AppleWebKit/537.36 (KHTML, like Gecko)

ChromeやSafariが使用するWebKitエンジンの情報です。

ブラウザ名とバージョン

Chrome/119.0.0.0

実際のブラウザとバージョン番号ですね。

Safari互換表記

Safari/537.36

Safariとの互換性を示すために追加されています。

主要ブラウザのUser-Agent例

Google Chrome

最新のChromeは以下のような文字列です。

Windows版：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Mac版：

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

Android版：

Mozilla/5.0 (Linux; Android 13) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36

「Mobile」という文字が入ることで、モバイル版と識別できますね。

Mozilla Firefox

Firefoxの文字列はシンプルです。

Windows版：

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/119.0

Geckoエンジンを使用していることが分かります。

Mac版：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/119.0

Safari

AppleのブラウザのUser-Agentです。

Mac版：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

iPhone版：

Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1

iOSのバージョン情報も含まれていますね。

Microsoft Edge

EdgeもChromiumベースになりました。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0

最後に「Edg」という識別子が追加されています。

JavaScriptでのUser-Agent取得

基本的な取得方法

ブラウザ側でUser-Agentを取得するのは簡単です。

const userAgent = navigator.userAgent;
console.log(userAgent);

navigator.userAgentプロパティで、文字列全体が取得できます。

ブラウザの判定

特定のブラウザかどうかを判定できます。

function detectBrowser() {
  const ua = navigator.userAgent;

  if (ua.indexOf('Chrome') !== -1 && ua.indexOf('Edg') === -1) {
    return 'Chrome';
  } else if (ua.indexOf('Firefox') !== -1) {
    return 'Firefox';
  } else if (ua.indexOf('Safari') !== -1 && ua.indexOf('Chrome') === -1) {
    return 'Safari';
  } else if (ua.indexOf('Edg') !== -1) {
    return 'Edge';
  }

  return 'Unknown';
}

console.log('Browser:', detectBrowser());

文字列の検索で、ブラウザを特定できますね。

モバイル判定

スマホやタブレットかどうかを判定します。

function isMobile() {
  const ua = navigator.userAgent;
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
}

if (isMobile()) {
  console.log('モバイルデバイスです');
} else {
  console.log('PCです');
}

正規表現で、モバイル端末のキーワードを検索していますよ。

OS判定

オペレーティングシステムを識別できます。

function detectOS() {
  const ua = navigator.userAgent;

  if (ua.indexOf('Win') !== -1) return 'Windows';
  if (ua.indexOf('Mac') !== -1) return 'macOS';
  if (ua.indexOf('Linux') !== -1) return 'Linux';
  if (ua.indexOf('Android') !== -1) return 'Android';
  if (ua.indexOf('iOS') !== -1 || ua.indexOf('iPhone') !== -1) return 'iOS';

  return 'Unknown';
}

console.log('OS:', detectOS());

サーバーサイドでの取得と利用

Nodeでの取得

サーバー側でもUser-Agentを取得できます。

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const userAgent = req.headers['user-agent'];
  console.log('User-Agent:', userAgent);

  res.send(`Your User-Agent: ${userAgent}`);
});

app.listen(3000);

HTTPヘッダーから取得するんですね。

PHPでの利用

PHPでは$_SERVERから取得します。

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];

if (strpos($userAgent, 'Mobile') !== false) {
    echo 'モバイル版ページを表示';
} else {
    echo 'PC版ページを表示';
}
?>

Pythonでの処理

Pythonでも簡単に扱えます。

from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def index():
    user_agent = request.headers.get('User-Agent')

    if 'Mobile' in user_agent:
        return 'モバイル版'
    else:
        return 'PC版'

if __name__ == '__main__':
    app.run()

User-Agentの実践的な活用

レスポンシブデザインとの使い分け

最近では、CSSメディアクエリが主流です。

CSSメディアクエリ（推奨）：

/* モバイル用 */
@media (max-width: 768px) {
  .content {
    font-size: 14px;
  }
}

/* PC用 */
@media (min-width: 769px) {
  .content {
    font-size: 16px;
  }
}

画面サイズで判定する方が確実ですね。

User-Agentが有効な場面：

  • サーバー側でコンテンツを切り替える
  • モバイル専用ドメインにリダイレクト
  • アクセス統計の収集
  • 特定ブラウザのバグ回避

コンテンツ最適化

ブラウザに応じた最適な表示を提供します。

const ua = navigator.userAgent;

// Safari では WebP を避ける（古いバージョンの場合）
if (ua.indexOf('Safari') !== -1 && ua.indexOf('Chrome') === -1) {
  document.getElementById('image').src = 'image.jpg';
} else {
  document.getElementById('image').src = 'image.webp';
}

アクセス解析

訪問者の環境を統計的に把握します。

function sendAnalytics() {
  const data = {
    userAgent: navigator.userAgent,
    browser: detectBrowser(),
    os: detectOS(),
    mobile: isMobile(),
    screenSize: `${screen.width}x${screen.height}`
  };

  // アナリティクスサーバーに送信
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify(data)
  });
}

ボットとクローラーのUser-Agent

検索エンジンボット

検索エンジンのクローラーは独自のUser-Agentを持っています。

Googlebot：

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

Bingbot：

Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)

これらを識別して、適切に対応する必要がありますね。

ボット判定

クローラーかどうかを判定します。

function isBot() {
  const ua = navigator.userAgent.toLowerCase();
  const botPatterns = [
    'googlebot',
    'bingbot',
    'slurp', // Yahoo
    'duckduckbot',
    'baiduspider',
    'yandexbot',
    'crawler',
    'spider',
    'bot'
  ];

  return botPatterns.some(pattern => ua.indexOf(pattern) !== -1);
}

if (isBot()) {
  console.log('ボットによるアクセスです');
}

robots.txtとの連携

クローラーには、robots.txtで適切な指示を出しましょう。

User-agent: Googlebot
Allow: /

User-agent: *
Disallow: /admin/

User-Agentを指定して、アクセス制御できますよ。

User-Agentスプーフィング

スプーフィングとは

User-Agentを偽装することです。

ブラウザの開発者ツールで、簡単に変更できます。

Chrome DevToolsでの変更：

  1. F12で開発者ツールを開く
  2. メニュー（⋮）→「その他のツール」→「ネットワーク条件」
  3. User-Agentのチェックを外してカスタム設定

スプーフィングの用途

正当な利用例もあります。

開発者のテスト

モバイル表示を確認するために、User-Agentを変更します。

アクセス制限の回避

一部のサイトは特定のブラウザしか受け付けません。

プライバシー保護

詳細な情報を隠したい場合に使われることもありますね。

セキュリティへの影響

User-Agentだけを信頼してはいけません。

重要な判断には使わない：

  • セキュリティ判定
  • 決済処理
  • ログイン認証

他の情報と組み合わせて、総合的に判断する必要があります。

プライバシーとUser-Agent

フィンガープリンティング

User-Agentは、ユーザー追跡に使われる可能性があります。

画面解像度、タイムゾーン、インストールされたフォントなどと組み合わせると、個人を特定できてしまうんです。

これを「ブラウザフィンガープリンティング」と呼びます。

User-Agent削減の動き

プライバシー保護のため、情報量を減らす取り組みがあります。

User-Agent Reduction：

Chromeなどで、段階的に詳細情報が削減されています。

将来的には、より一般的な文字列になる予定ですね。

User-Agent Client Hints

新しいアプローチとして登場しました。

従来の方法：

すべての情報を一度に送信します。

Client Hints：

サーバーが必要な情報だけを要求できます。

Accept-CH: Sec-CH-UA-Platform, Sec-CH-UA-Mobile

必要最小限の情報交換で、プライバシーを保護できますよ。

User-Agent解析ライブラリ

JavaScript用ライブラリ

複雑な解析を簡単にするツールがあります。

UAParser.js：

import UAParser from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

console.log('Browser:', result.browser.name);
console.log('Version:', result.browser.version);
console.log('OS:', result.os.name);
console.log('Device:', result.device.type);

詳細な情報を構造化して取得できます。

サーバーサイドライブラリ

Node.js – express-useragent：

const useragent = require('express-useragent');
const express = require('express');
const app = express();

app.use(useragent.express());

app.get('/', (req, res) => {
  console.log('Browser:', req.useragent.browser);
  console.log('Mobile:', req.useragent.isMobile);
  console.log('OS:', req.useragent.os);
  res.send('User-Agent analyzed!');
});

Python – user-agents：

from user_agents import parse

ua_string = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0...'
user_agent = parse(ua_string)

print(f'Mobile: {user_agent.is_mobile}')
print(f'Browser: {user_agent.browser.family}')
print(f'OS: {user_agent.os.family}')

手動で解析するより、ライブラリを使う方が確実ですね。

よくある問題とトラブルシューティング

User-Agentが取得できない

いくつかの原因が考えられます。

プライバシー拡張機能：

一部のブラウザ拡張が、User-Agentをブロックしています。

古いブラウザ：

非常に古い環境では、形式が異なる場合があります。

デフォルト値の設定：

const ua = navigator.userAgent || 'Unknown';

取得できない場合に備えて、デフォルト値を用意しましょう。

判定が正しく動かない

文字列マッチングの落とし穴です。

部分一致の問題：

// 間違い：EdgeもChromeと判定される
if (ua.indexOf('Chrome') !== -1) {
  return 'Chrome';
}

// 正しい：Edgeを先に判定
if (ua.indexOf('Edg') !== -1) {
  return 'Edge';
} else if (ua.indexOf('Chrome') !== -1) {
  return 'Chrome';
}

判定順序が重要ですね。

更新への対応

ブラウザは頻繁に更新されます。

将来性のあるコード：

// 具体的なバージョン番号に依存しない
const isModernBrowser = 'fetch' in window && 'Promise' in window;

if (isModernBrowser) {
  // 最新機能を使用
} else {
  // 代替処理
}

機能検出（Feature Detection）の方が安全です。

代替手段と将来の方向性

機能検出（Feature Detection）

User-Agentよりも推奨される方法です。

// User-Agentで判定（非推奨）
if (ua.indexOf('Chrome') !== -1) {
  // WebP対応前提の処理
}

// 機能検出（推奨）
if (window.createImageBitmap) {
  // WebP対応の処理
} else {
  // 代替処理
}

実際に機能があるか直接確認する方が確実ですね。

Modernizr

機能検出を簡単にするライブラリです。

if (Modernizr.webp) {
  // WebP対応
} else {
  // JPEGやPNG使用
}

レスポンシブデザイン

画面サイズで判定する現代的な方法です。

// JavaScript
const isMobile = window.innerWidth <= 768;

// CSS
@media (max-width: 768px) {
  /* モバイル用スタイル */
}

User-Agentに頼らない設計が主流になっていますよ。

セキュリティ上の注意点

User-Agentを信頼しすぎない

簡単に偽装できるため、重要な判断には使えません。

避けるべき使い方：

  • User-Agentだけでログイン許可
  • User-Agentだけでアクセス制御
  • User-Agentだけで料金決定

サーバーサイドでの検証

クライアント側の判定は、サーバーでも再検証しましょう。

// クライアント側
if (isMobile()) {
  // モバイル用処理
}

// サーバー側でも確認
app.get('/api/data', (req, res) => {
  const ua = req.headers['user-agent'];
  if (ua.includes('Mobile')) {
    // モバイル用データ
  } else {
    // PC用データ
  }
});

実践的なTips

User-Agentのログ記録

問題解決のために、ログを残しましょう。

app.use((req, res, next) => {
  console.log({
    timestamp: new Date(),
    ip: req.ip,
    userAgent: req.headers['user-agent'],
    path: req.path
  });
  next();
});

トラブル時の調査に役立ちますよ。

A/Bテストでの活用

特定のブラウザでの挙動テストに使えます。

function shouldShowNewFeature() {
  const ua = navigator.userAgent;

  // Chromeユーザーの50%に新機能を表示
  if (ua.indexOf('Chrome') !== -1) {
    return Math.random() < 0.5;
  }

  return false;
}

パフォーマンス最適化

ブラウザの性能に応じた最適化ができます。

const ua = navigator.userAgent;

// 古いAndroid端末では重い処理を避ける
if (ua.indexOf('Android 4') !== -1) {
  // 軽量版の処理
} else {
  // 通常処理
}

まとめ：User-Agentを適切に活用しよう

User-Agentは、Webアプリケーション開発で役立つ情報源です。

しかし、プライバシーやセキュリティを考慮して、適切に使用することが重要です。

この記事の重要ポイント：

  • User-Agentはブラウザがサーバーに送る識別情報
  • ブラウザ、OS、デバイスタイプなどが含まれる
  • JavaScriptとサーバーサイドの両方で取得可能
  • モバイル判定やブラウザ判定に使える
  • 簡単に偽装できるため、セキュリティには使えない
  • 機能検出やレスポンシブデザインの方が推奨される
  • User-Agent Client Hintsが新しい標準として登場
  • ライブラリを使うと解析が簡単

まずは開発者ツールで、自分のブラウザのUser-Agentを確認してみましょう。

実際に触れることで、User-Agentの理解が深まっていきますよ。

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました