【 JavaScript 】ユーザーエージェントを調べてブラウザを判定

ジャバスクリプトで画面サイズの幅とか高さとか、いろいろな情報を取得しようと思ったときに、ブラウザの種類だけが中々大変でした。

なのでその方法をしっかりと残しておこうと思います。

USER AGENT

ブラウザの種類を調べるには JavaScript の window.navigator.userAgent で取得できる文字列を見るらしいのでとりあえず見てみます。

以下には皆さんの userAgent が表示されます。

your agent

よく分からない文字列が出てると思います。

ブラウザの判定

先ほどのよく分からない文字列である user agent はブラウザ(EdgeとかFirefoxとかChromeとかSafariとか)によって内容が少しずつ変わっているようなので、その内容をよく見て振り分けていきたいと思います。

USER AGENT のブラウザごとの違い

まずはブラウザごとにどうなっているのかをまとめました。

この世に存在するすべてのブラウザをまとめたわけではありません

私が今パッと確認できるものだけです！

表は 2021年6月11日(金) 現在のものなので、user agent の数字の部分は今後のバージョンアップで変わる可能があります。もちろん文字列の部分も！

いざ、判定

さっきの表を見ると、Firefoxからアクセスした場合は Firefox が、Google Chrome からアクセスした場合は Chrome が、iPhoneアプリからアクセスした場合には iPhone といった各ブラウザ固有の文字列が含まれているのが分かります。

判定する方法

なので、user agent 文字列に各ブラウザ固有の文字列が含まれるかどうかを調べれば簡単に判定できそうです！

しかーし、かなり目を凝らして見るとGoogle Chrome のなかに Safari が、Microsoft Edge のなかに Chrome など他のブラウザの名前も見えます。

ということは、、、Safari という文字列があったら サファリだァァァ！！

としてしまうと、クロームもサファリとして判定されてしまうので、 if else で条件を書きまくる場合は判定する順番を少しだけ気にしないといけません。

順番を気にしたくない場合は AND(&&) で Chrome と Safari の両方が含まれていればクロームだ！というように判定することもできます。

今回は順番に注意しながらやっていきたいと思います。

ということで、if文で条件をモリモリ書いて判定しました！

ソースコード

var user_agent = navigator.userAgent.toLowerCase();
var user_browser = "";

if(user_agent.indexOf("iphone") != -1){
	if(user_agent.indexOf("fxi") != -1){
		user_browser = "iPhoneのFirefox";
	} else if (user_agent.indexOf("gsa") != -1){
		user_browser = "iPhoneのGoogleアプリ";
	} else if (user_agent.indexOf("crios") != -1){
		user_browser = "iPhoneのGoogle Chrome";
	} else if (user_agent.indexOf("line") != -1){
		user_browser = "iPhoneのLINE";
	} else if (user_agent.indexOf("version") != -1){
		user_browser = "iPhoneのSafari";
	} else {
		user_browser = "iPhoneの予想外のブラウザ";
	}
} else {
	if(user_agent.indexOf("msie") != -1 || user_agent.indexOf("trident") != -1){
		user_browser = "Internet Explorer";
	} else if(user_agent.indexOf("firefox") != -1){
		user_browser = "Firefox";
	} else if(user_agent.indexOf("edge") != -1){
		user_browser = "Microsoft Edge";
	} else if(user_agent.indexOf("edg") != -1){
		user_browser = "Microsoft Edge (Chromiumバージョン)";
	} else if(user_agent.indexOf("chrome") != -1){
		user_browser = "Google chrome";
	} else if(user_agent.indexOf("safari") != -1){
		user_browser = "Safari";
	} else {
		user_browser = "予想外のブラウザ";
	}
}

document.getElementById("user_browser").textContent=String(user_browser);

判定する際に大文字、小文字の区別を無くすために、最初の toLowerCase で userAgent で取得した文字列をすべて小文字に変換しています。

それを user_agent という変数に格納しています。

if文の条件部分で使っている indexOf は指定した文字列が何番目にあるかを教えてくれるもので、指定した文字列がない場合には -1 を返します。なので、indexOf で返ってくる値が -1 かどうかで指定した文字列が含まれているのかを判断します。

判定はまず iPhone かどうかを調べて、その中でさらに各ブラウザに分岐しています。

判定結果を user_browser という変数に入れておいて、最後に HTML ファイルの結果を出したい部分を判定結果で置き換えています。これには textContent を使います。

ちなみに、Microsoft Edge は新バージョンが edg、旧バージョンが edge となっているようです。

Internet Explorer に関しても 11以上か10以下かで trident と msie があるようなので、OR(||)で条件を作ってます。

それでは、、、

あなたのブラウザはxです！！！

レンダリングエンジン

さらにちなみに、 trident とか msie とかに関連して。上記の user agent 文字列に含まれている AppleWebkit とか Gecko とか、ついさっきの trident などはレンダリングエンジンの種類です。

レンダリングエンジンとはブラウザのメインパーツのようなもので、ブラウザの裏側というか、内側で動いています。

レンダリングエンジンが HTML や CSS などの人間には分かりにくいテキストを読み取り、解釈し、文字の大きさや色、配置、webページで使われている画像の大きさ、並びなどなどなどなどを計算してくれていることで、我々はブラウザを通してきれいで整った、見やすい web ページを見ることができます。

私が愛用している Firefox のレンダリングエンジンは Gecko(ゲッコー) なのですが、iPhoneアプリの方の user agent を見てみると AppleWebkit となっています。

ほかにも iPhoneアプリ系のレンダリングエンジンはすべて AppleWebkit となっています。

どうやら iOS 上で動作する web ブラウザのレンダリングエンジンはすべて Webkit を使わないといけないようです。