• HOME > 
  • JavaScript > 
  • JavascriptでブラウザやOSを判定する方法【plat...

JavascriptでブラウザやOSを判定する方法【platform.jsの使い方】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ブラウザやOSを判定するには?

WebサイトやWebアプリを制作しているとユーザーが使用しているブラウザやOSによって処理を分けたい場面があります。

Javascriptのplatform.jsというライブラリを利用すれば、簡単にそれらの情報を取得し判別する処理を作ることが可能です。

platform.jsの使い方

platform.jsはGitHubで公開されている誰でも利用可能なJavascriptライブラリです。

ダウンロードしてサイトに読み込んでおけば、簡潔なコードでブラウザやOSの情報を取得することができます。

platform.jsをダウンロードする

まずはGitHubに公開されているplatform.jsのファイルをダウンロードしましょう。

【GitHub】platform.js

ソースコードが表示されているページを開いたら右上の「Download raw file」をクリックすれば、Javascriptファイルをダウンロードできます。

Download raw file

ダウンロードしたファイルは任意のディレクトリにアップロードして、サイトに読み込みを行います。(ファイルパスはご自身のものに合わせてください)

HTML

<script type="text/javascript" src="platform.js"></script>

これでplatform.jsを使用する準備が整いました。

platform.jsでブラウザやOSの情報を取得する

platform.jsの使い方はとても簡単で、以下のコードによってそれぞれ情報を取得することができます。

Javascript

var browser = platform.name;//ブラウザの名前を取得
console.log(browser);//例 Microsoft Edge

var version = platform.version;//ブラウザのバージョンを取得
console.log(version);//例 116.0.1938.54

var os = platform.os.toString();//OSの名前を取得
console.log(os);//例 Windows 10 64-bit

OSの時はtoString()で文字列化する必要あり

platform.osの返り値はオブジェクトになっているため上記のようにtoString()メソッドを使って文字列に変換する必要があります。

platform.jsではこれら以外の情報も取得できます。詳しい説明はGitHubのplatform.jsのページをご確認ください。

ブラウザやOSごとに条件分岐させる

platform.jsで取得した情報を使って条件分岐させたい場合はindexOf()メソッドを使用します。

indexOf()メソッドは検索対象に指定した文字列が含まれていれば「0」を含まれていなければ「-1」を返します。

以下のように記述することで、ブラウザがEdgeの場合とChromeの場合とで処理を分けることができます。

Javascript

    var browser = platform.name;//ブラウザの名前を取得
    console.log(browser);//例 Microsoft Edge

    if(browser.toLowerCase().indexOf("edge") !== -1){
        console.log("Edgeです!");
    }else if(browser.toLowerCase().indexOf("chrome") !== -1){
        console.log("Chromeです!");
    }

小文字に変換してから検索を行う

platfomr.jsで取得されるブラウザやOSの情報は頭文字が大文字になっています。

indexOf()は大文字小文字を別のものとして判別してしまうので、誤判定を予防するためにtoLowerCase()メソッドを使ってすべて小文字に変換して統一させておきます。

まとめ

以上がJavascriptのplatform.jsを使ってブラウザやOSを判定する方法です。

読み込みすれば簡単に必要な情報を取得できるので、ブラウザやOSの判別が必要な場面があれば是非利用してみてください。

関連する記事

サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]
サムネイル

HTMLのチェックボックスに選択上限を設ける方法【Javas……

2023年10月01日
最終更新日:2023年09月28日
チェックボックスに選択上限を設けるには、JavaScriptを使ってチェックの数をカウントし設定した数を超えたらチェックできないようにします。
サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。