【よく使う】JavaScriptでユーザーエージェント(userAgent)からOS、ブラウザを取得する汎用的なユーティリティ

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
JavaScriptで閲覧者のOSやブラウザを取得する必要があったので
汎用的なユーティリティを作成しました。
JavaScriptでOSを取得する
ユーティリティ関数
Utills.jsexport const getOS = () => {
const userAgent = navigator.userAgent.toLowerCase();
if(userAgent.indexOf("windows nt") !== -1) {
return "Microsoft Windows";
} else if(userAgent.indexOf("android") !== -1) {
return "Android";
} else if(userAgent.indexOf("iphone") !== -1 || userAgent.indexOf("ipad") !== -1) {
return "iOS";
} else if(userAgent.indexOf("mac os x") !== -1) {
return "macOS";
} else {
return "Unknown";
}
}
OSを表示する
main.jsimport { getOS } from 'Utills.js;
console.log(getOS);
// macOS
コードの解説
ユーザーエージェントを取得する
ユーザーエージェントの文字列を取得
JavaScriptconst userAgent = navigator.userAgent.toLowerCase();
OS名の判定
OS名が含まれているか判定する
JavaScriptif(userAgent.indexOf("OS名") !== -1) {
// 処理
}
JavaScriptでブラウザ名を取得する
ユーティリティ関数
Utills.jsexport const getBrowser = () => {
const userAgent = navigator.userAgent.toLowerCase();
if(userAgent.indexOf("edge") !== -1 || userAgent.indexOf("edga") !== -1 || userAgent.indexOf("edgios") !== -1) {
return "Microsoft Edge";
} else if (userAgent.indexOf("opera") !== -1 || userAgent.indexOf("opr") !== -1) {
return "Opera";
} else if (userAgent.indexOf("samsungbrowser") !== -1) {
return "Samsung Internet Browser";
} else if (userAgent.indexOf("ucbrowser") !== -1) {
return "UC Browser";
} else if(userAgent.indexOf("chrome") !== -1 || userAgent.indexOf("crios") !== -1) {
return "Google Chrome";
} else if(userAgent.indexOf("firefox") !== -1 || userAgent.indexOf("fxios") !== -1) {
return "Mozilla Firefox";
} else if(userAgent.indexOf("safari") !== -1) {
return "Safari";
} else if (userAgent.indexOf("msie") !== -1 || userAgent.indexOf("trident") !== -1) {
return "Internet Explorer";
} else {
return "Unknown";
}
}
ブラウザを表示する
main.jsimport { getBrowser } from 'Utills.js;
console.log(getBrowser);
// Google Chrome
コードの解説
ユーザーエージェントを取得する
ユーザーエージェントの文字列を取得
JavaScriptconst userAgent = navigator.userAgent.toLowerCase();
ブラウザ名の判定
ブラウザ名が含まれているか判定する
JavaScriptif(userAgent.indexOf("ブラウザ名") !== -1) {
// 処理
}
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来
- review
人類はなぜ地球を支配できた?『サピエンス全史 上巻』ユヴァル・ノア・ハラリが解き明かす驚愕の真実