はじめに
ホームページやブログを閲覧するにはブラウザを使います。主要ブラウザは10種に近いものがあります。それぞれに特長があり最初から使っているもの、動的な表現を得意としているもの、動作が速いものなど様々です。対象となる記事が同じであればその表現は同じになると思われがちですが微妙に異なることが知られています。
表示される記事側がブラウザ名を特定できると表現に幅が広がります。このようなときのためにブラウザ名を算出する方法を調べてみました。JavaScriptで記述した関数を添付します。
window.navigator.userAgent でブラウザのユーザエージェントを取得します。この値は明確な仕様が確定しておらず、これをもってブラウザを特定するのは避けた方がよいとありますが、現在、これに代わる明確な方法が見当たらず、ユーザエージェントの特徴をつかんでブラウザ名を簡便的に求めています。
0)chrome mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/83.0.4103.116 safari/537.36
1)safari mozilla/5.0 (windows nt 6.2; wow64) applewebkit/534.57.2 (khtml, like gecko) version/5.1.7 safari/534.57.2
2)opera mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/83.0.4103.116 safari/537.36 opr/69.0.3686.77
3)firefox mozilla/5.0 (windows nt 10.0; win64; x64; rv:78.0) gecko/20100101 firefox/78.0 myArgent.html:12:9 Browser= 3 firefox
4)edge mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/84.0.4147.89 safari/537.36 edg/84.0.522.40
算出の概略
MicrosoftからリリースされているEdgeはchromium版の検索エンジンの採用が始まっています。よって主要モダーンブラウザはおしなべてグーグル系と言えます。しかしながらユーザエージェント文字列にはchrome, safariなど複数のブラウザ名が混在しています。とはいっても、ブラウザごとに出現順が決まっており、順番を解析することによってブラウザ名を特定することができます。
主要モダーンブラウザ名を特定する方法
以下に5つの主要モダーンブラウザ名の特徴を表に示します。
| ブラウザ名 | 出現文字列1 | 出現文字列2 | 出現文字列3 | 検出順番 | 適用 |
| chrome | crome | safari | 4 | ||
| opera | chrome | safari | opr | 2 | |
| firefox | firefox | 1 | |||
| edge | chrome | safari | edg | 3 | chromium版 |
| safari | safari | 5 | windows10版 | ||
| ie11 | – | – | – | – | 調査除外 |
特長
❶firefox の場合、この文字列が唯一、ブラウザ名として検出できる。
❷opera はchrome に加えてopr と短縮された文字列が用いられる。
❸chromium版edge はchrome, safari に続いてedg が用いられる。
❹chrome はchrome に加えてsafari が用いられる。
❺safari の場合、この文字列が唯一、ブラウザ名として検出できる。
特長を具現化する
解析の順番を以下のように決めてブラウザ名を確定します。文字列を検索する順序が肝心です。現在のところ、以下の判定順序で特定できました。
❶ユーザエージェントにfirefox/を見つければ、firefoxとみなす。このように/を付加して検索する。
❷opr/をユーザエージェント文字列に見つければ、operaとする。
❸edg/をユーザエージェント文字列に見つければ、edgeとする。
❹chrome/をユーザエージェント文字列に見つければ、chromeとする。
❺safari/をユーザエージェント文字列に見つければ、safariとする。
ブラウザを特定する関数
<!DOCTYPE html>
<html>
<script type="text/javascript" charset="UTF-8">
// -1 0 1 2 3 4
const BrowsN = ["unknown", "chrome", "safari", "opera", "firefox", "edge"];
var b = getBrowser() + 1;
console.log("Browser=", b, BrowsN[b]);
function getBrowser(){
var userAgent = window.navigator.userAgent.toLowerCase();
console.log("userAgent=", userAgent);
if(userAgent.indexOf('firefox/') != -1) return 3; // firefox
if(userAgent.indexOf('opr/') != -1) return 2; // opera
if(userAgent.indexOf('edg/') != -1) return 4; // edge
if(userAgent.indexOf('chrome/') != -1) return 0; // chrome
if(userAgent.indexOf('safari/') != -1) return 1; // safari
return -1; //-1 // unknown
}
</script>
</html>
さいごに
銀行コードなどは業界によりきちんと確定しており、ブラウザを利用する側にブラウザコードが知らされないことは利用者にとって不利益この上ありません。ユーザエージェントに出現する文字列とその順番を解析することによってブラウザ名を特定する方法をまとめました。Windows10-x64の場合を調査しました。すべてのケースに当てはまるかはわかりません。ブラウザコードとして統一されるよう期待します。