JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでWebブラウザの名前とバージョンを検出する方法

WebサイトやWebアプリを開発していると、「訪問者がどのブラウザを使用しているのか」を把握し、ブラウザごとに異なる処理を行いたいケースがあります。JavaScriptでは、navigator.userAgentプロパティを参照することでブラウザの種類を判別でき、さらにnavigator.appVersionを組み合わせればバージョン情報も取得できます。

ブラウザ判定の仕組み

すべての主要ブラウザは、HTTPリクエスト時に自分自身を識別するための「ユーザーエージェント文字列」を送信します。この文字列はnavigator.userAgentで取得でき、たとえばChromeでは以下のような値になります。

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

文字列中に含まれるキーワード（Opera、MSIE、Gecko、Mozillaなど）をindexOf()で検索すれば、使用されているブラウザの種類を特定できます。

サンプルコード

次のコードは、ユーザーエージェントを解析してブラウザの種類を判定し、その結果とバージョン情報を画面に表示する例です。

<html>
   <head>
      <title>ブラウザ判定のサンプル</title>
   </head>
   <body>
      <script>
         var userAgent = navigator.userAgent;
         var opera = (userAgent.indexOf('Opera') != -1);
         var ie = (userAgent.indexOf('MSIE') != -1);
         var gecko = (userAgent.indexOf('Gecko') != -1);
         var netscape = (userAgent.indexOf('Mozilla') != -1);
         var version = navigator.appVersion;

         if (opera) {
            document.write("Opera系のブラウザです");
            // Opera向けのURLや処理をここに記述します。
         }
         else if (gecko) {
            document.write("Mozilla(Gecko)系のブラウザです");
            // Gecko向けのURLや処理をここに記述します。
         }
         else if (ie) {
            document.write("Internet Explorer系のブラウザです");
            // IE向けのURLや処理をここに記述します。
         }
         else if (netscape) {
            document.write("Netscape系のブラウザです");
            // Netscape向けのURLや処理をここに記述します。
         } else {
            document.write("不明なブラウザです");
         }

         // 上記のいずれの条件にもバージョン情報を組み合わせられます。
         document.write("<br />ブラウザのバージョン情報 : " + version);
      </script>
   </body>
</html>

コードのポイント

  • navigator.userAgent：ブラウザが送信するユーザーエージェント文字列を取得します。
  • indexOf()による判定：文字列内に特定のキーワードが存在するかを確認します。キーワードが見つからない場合は-1が返される仕組みを利用しています。
  • navigator.appVersion：ブラウザのバージョン情報を取得し、判定結果とあわせて表示します。
  • 条件分岐：判定結果に応じて、ブラウザ固有のURLや処理へ振り分けることができます。

実行結果の例

Chromeで実行した場合、ユーザーエージェントに「Gecko」「Mozilla」というキーワードが含まれるため、「Mozilla(Gecko)系のブラウザ」と判定されます。その直後に、改行されてバージョン情報が表示されます。

注意点：モダンな開発におけるブラウザ判定

上記の手法は古典的な方法であり、実際の開発では以下の点に注意が必要です。

  • ユーザーエージェント文字列はユーザー側で簡単に偽装できるため、100%正確な判定は保証されません。
  • 近年のほぼすべてのブラウザは互換性のため「Mozilla」で始まる文字列を返すため、判定順序やロジックは慎重に設計する必要があります。
  • document.write()は現在非推奨とされているため、実際の開発ではconsole.log()やDOM操作による表示をおすすめします。
  • より堅牢な判定が必要な場合は、機能の有無を確認する「フィーチャーディテクション」や、Bowserなどの専用ライブラリの利用を検討しましょう。
  1. JavaScriptでWebページをリダイレクトする方法をわかりやすく解説

    Webページを閲覧していると、あるURLをクリックしてページXにアクセスしようとしたのに、実際には別のページYへ移動させられたという経験はありませんか？これは「ページリダイレクト（転送）」と呼ばれる仕組みが働いているためです。JavaScriptを使えば、クライアント側でページリダイレクトを非常に簡単に実装できます。サイト訪問者を新しいページへ誘導したい場合は、<head>セクションに数行のコードを追加するだけで実現可能です。サンプルコード：ボタンクリックでトップページへリダイレクト以下のコードを実行すると、JavaScriptを使ってHTMLページをリダイレクトする方法を実際に確

  2. JavaScriptでブラウザのオンライン・オフライン状態を検出する方法

    Webアプリケーションを開発していると、ユーザーが現在インターネットに接続しているかどうかを判定したい場面があります。JavaScriptでは、navigator.onLineプロパティを使うことで、ブラウザがオンライン状態かオフライン状態かを簡単に検出できます。 navigator.onLine プロパティとは navigator.onLineは、ブラウザの接続状態を真偽値（boolean）で返すプロパティです。 インターネットに接続している場合：true オフラインの場合：false このプロパティをボタンのクリックイベントなどと組み合わせることで、ユーザーの接続状況に応じた処理を実装