JavaScriptでユーザーエージェントを取得する方法を解説!

JavaScriptでユーザーエージェントを取得する方法を解説します。またユーザーエージェントを変更する方法についてもご紹介します。

コンテンツ [表示]

  1. 1JavaScriptでユーザーエージェントを取得する方法
  2. 2ユーザーエージェントは変更可能
  3. 2.1デベロッパーツールでユーザーエージェントを変更する

JavaScriptでユーザーエージェントを取得する方法

JavaScriptでユーザーエージェント(UserAgent)を取得する方法は下記となります。

JavaScriptでユーザーエージェントを取得する方法

var ua = navigator.userAgent;
// 表示
alert(ua);

ユーザーエージェントはJavaScriptでnavigator.userAgentで取得出来ます。

また下記にアクセスするとご自身のユーザーエージェントを表示して確認することが出来ます。ぜひいくつかブラウザをかえてアクセスしてみてユーザーエージェントが変わることを確認しましょう。

ユーザーエージェントを表示して確認!のイメージ
ユーザーエージェントを表示して確認!
ユーザーエージェントをすぐに表示して確認することが出来ます。ご自身のユーザーエージェントを確認したい方はアクセスしてみましょう。

ユーザーエージェントは変更可能

さて、JavaScriptで取得できたユーザーエージェントですが、実はこれは変更可能なのです。変更するやり方を解説します。

デベロッパーツールでユーザーエージェントを変更する

まずはChromeのブラウザを開きデベロッパーツールを起動します。デベロッパーツールは下記のショートカットから起動が出来ます。
(もし起動できない方がいましたら、こちらを参考にしましょう。)

デベロッパーツールを起動するショートカット

[WindowsのChrome]
Ctrl + Shift + I
または
F12

[MacのChrome]
Command + Option + I
デベロッパーツールで表示切り替え
このようなツールが開きますので、左上にあるデバイスのアイコンをクリックします。

すると表示がスマートフォンのサイズに切り替わります。
端末を切り替える
次に左上のiPhoneなど端末名が表示されている箇所をクリックします。すると候補となるデバイス名が選択できますので、任意のデバイス名をクリックします。

それでは再度ユーザーエージェントを調べてみましょう。下記にアクセスすることでユーザーエージェントを確認出来ます。アクセスするとユーザーエージェントが先程と切り替わっているのが確認できるかと思います。

ユーザーエージェントを表示して確認!のイメージ
ユーザーエージェントを表示して確認!
ユーザーエージェントをすぐに表示して確認することが出来ます。ご自身のユーザーエージェントを確認したい方はアクセスしてみましょう。

このようにユーザーエージェンは簡単に切り替え(偽装)することが出来るため、ユーザーエージェントを見てその端末がアクセスしてきたと判断するのは危険です。

とはいえ、ブラウザの判定などにはユーザーエージェントを用います。偽装可能なものであるが、ブラウザや端末の判定の材料に使えるものとして認識しておきましょう。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次