ブログデザイン備忘録～閲覧環境情報の取得

1. ブラウザ情報の取得
2. スクリーン情報
3. まとめ

　今回は閲覧環境の情報を取得するjavascript関数について紹介する。まだ文字列、配列、数学関数などあるが必要に応じて適宜紹介することにして、javascript関数の紹介としては今回で一度終わりにする。

1. ブラウザ情報の取得

　閲覧しているブラウザの情報を取得する。ページがブラウザに対応しているかどうか、あるいはブラウザによって処理を変える場合に有用だと思う。

ブラウザの特定に関する情報については以下4つがある。

navigator.appName：ブラウザ公式名称
navigator.appCodeName：ブラウザコード名
navigator.appVersion：ブラウザバージョン
navigator.userAgent ：ブラウザのユーザーエージェント

navigator.appNameはIE:Microsoft Internet Explorer, Opera:Opera, FireFox/Chrome/Safari/(新しい)Edge:Netscapeとなる。ブラウザの公式名称だけではIE, Operaとその他しか区別がつかない。ブラウザのコード名はたいてい「Mozilla」になる。navigator.appVersionおよびnavigator.userAgentにChrome,Safari, Edgeなど識別する情報が含まれている。

参考までに自分の環境では以下のように表示された。

Chromeで閲覧した場合

ブラウザの公式名称は「Netscape」
ブラウザのコード名は「Mozilla」
ブラウザのバージョンは「5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36」
ブラウザのユーザーエージェントは「Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36」

(新しい)Edgeで閲覧した場合

ブラウザの公式名称は「Netscape」
ブラウザのコード名は「Mozilla」
ブラウザのバージョンは「5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36 Edg/84.0.522.61」
ブラウザのユーザーエージェントは「Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36 Edg/84.0.522.61」

具体的にブラウザを特定する方法(Edgeは含まれていないが)としてはnavigatorでブラウザを調べる２－JavaScript入門などを参照。

その他の情報については以下を用いる。

navigator.language：ブラウザ使用言語,「ja-JP」など navigator.platform：プラットフォーム, 「Win32」など

navigator.onLine ：ブラウザがオンラインかどうか,True or False navigator.cookieEnabled ：ブラウザでCookieが有効かどうか,True or False navigator.javaEnabled() ：ブラウザでJavaが有効かどうか,True or False

ブラウザ情報を取得・表示するには以下のコードを実行する。

<script>
document.write("<div>ブラウザの公式名称は「" + navigator.appName + "」</div>");
document.write("<div>ブラウザのコード名は「" + navigator.appCodeName + "」</div>");
document.write("<div>ブラウザのバージョンは「" + navigator.appVersion + "」</div>");
document.write("<div>ブラウザの使用言語は「" + navigator.language + "」</div>");
document.write("<div>ブラウザのプラットフォームは「" + navigator.platform + "」</div>");
document.write("<div>ブラウザのユーザーエージェントは「" + navigator.userAgent + "」</div>");
document.write("<div>ブラウザの接続状態がオンラインかどうかは「" + navigator.onLine + "」</div>");
document.write("<div>ブラウザでCookieが有効かどうかは「" + navigator.cookieEnabled + "」</div>");
document.write("<div>ブラウザでJavaが有効かどうかは「" + navigator.javaEnabled() + "」</div>");
</script>

下にこのページを閲覧しているブラウザの情報があらわれる。

2. スクリーン情報

　スクリーン幅および高さはscreen.width,screen.heightで取得できる。また色深度、ビット深度はscreen.colorDepth, screen.pixelDepthで取得できる。

<script>
document.write("スクリーンの幅：" + screen.width + "ピクセル<br>");
document.write("スクリーンの高さ：" + screen.height + "ピクセル<br>");
document.write("スクリーンの有効領域の幅：" + screen.availWidth + "ピクセル<br>");
document.write("スクリーンの有効領域の高さ：" + screen.availHeight + "ピクセル<br>");
document.write("スクリーンの色深度：" + screen.colorDepth + "ビット<br>");
document.write("スクリーンのビット深度：" + screen.pixelDepth + "ビット<br>");
</script>