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

投稿日:2023年09月01日

ブラウザや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ファイルをダウンロードできます。

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

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の判別が必要な場面があれば是非利用してみてください。