node.jsで「UAParser.js」を使ってモバイルの判別をする方法の紹介です。

javascriptでモバイルを判別するライブラリの1つに "mobile-detect.js"が挙げられます。

mobile-detectをnode.jsで使う場合、モバイル以外からのアクセス(ユーザーエージェントの解析時)は「null」を返すので少々使いドコロに癖があります。

// expressを使った例
const MobileDetect = require('mobile-detect');

// mobile-detect.jsの場合
app.get('/mobileDetect', (req, res) => {

    md = new MobileDetect(req.headers['user-agent']);

    const resp = {
        agent: md.userAgent() // モバイルからだと'Safari'などのブラウザ名を返す
    };
    // PCだとnullを返す
    res.json(resp);
});


そこで「UAParser.js」という、ユーザーエージェントを解析するライブラリを使って、モバイル判別をよりし易くしましょう!


UAParser.jsの導入 〜 使い方

UAParser.jsはユーザーエージェントの文字列を解析するシンプルなライブラリで、モバイル端末やブラウザ名、バージョン、OS等の各種情報が文字列の加工無しに簡単に取得出来ます。また、node.jsの他にブラウザでも使用にも対応しています。

UAParser.jsの導入はnpmを使ってコマンドライン上で行います。

# UAParser.jsのインストール
$ npm install ua-parser-js


導入を終えると、以下のように各種情報が取得できるようになります。基本的にユーザーエージェントを解析して、その結果のオブジェクト内からosやデバイスの情報を抜き取るという感じです。

// expressを使った例 * node.js v 6.2.2で検証しました
const parser = require('ua-parser-js');

app.get('/example',(req, res) => {
  
  // parser関数を使ってユーザーエージェントを解析
  const agent = parser(req.headers['user-agent']);
  
  // 使い方
  // agent.os // OS名を取得  (Mac OS, Windows, iOS, Android OS ...)
  // agent.browser.name // ブラウザ名を取得 (Chrome, Firefox ...)
  // agent.device.model // デバイス名を取得 (iPad, iPhone ..)
  
  res.json(agent);
  
});

// *アウトプット例 *モバイルからの場合
{
  ua: "Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1",
  browser: {
    name: "Mobile Safari", // ブラウザ名
    version: "9.0", // ブラウザのバージョン ( 詳細情報 )
    major: "9" // ブラウザのバージョン
  },
  engine: {
    version: "601.1.46", // ブラウザエンジンのバージョン
    name: "WebKit" // ブラウザエンジン名
  },
  os: {
    name: "iOS", // OS名
    version: "9.1" // OSのバージョン
  },
  device: {
    // pc からの場合はdevice下が部分が空になります
    model: "iPad", // デバイス名
    vendor: "Apple", // デバイスの会社
    type: "tablet" // デバイスのタイプ
  },
  // 検証時にchrome devツールを使ったので空になっています
  cpu: { }
}


このままでもアクセスログを取る時等には問題ありませんが、様々なシーンでも使い回しが出来るようにUAParser.jsのラッパーを作っていきます!例えば、viewのテンプレート内で使う場合など。

っということで、MediaHelperというクラスを作成しました。
( クラス内でlodash.jsも使っています * npm install lodash --save )

'use strict'

// helpers/ClientHelper.js
const
  _set = require('lodash/set'),
  parser = require('ua-parser-js')

class ClientHelper {
  constructor(request) {
    this.ua = parser(request.headers['user-agent']);
  }
  
  /* 
  ** UAParser.jsはユーザーエージェント内に詳細情報がセットされていれば、
  **  isIOS9() , isWindows10(), isTablet()等のことも簡単にできます
  */
  // モバイルか判別
  isMobile() {
    // requestデータの受け取り
    return _set(this.ua.device.type) ? true : null;
  }
  
  // OS名を取得
  // return: iOS, Windows, Mac OS ..
  os() {
    return this.ua.os.name;
  }
  
  // デバイス名を取得
  // iPad, iPhone .. モバイル以外だとnullを返す
  device_name() {
    const device = this.ua.device.model;
    return _set(device) ? device : null;
  }
  
  // ブラウザ名を取得
  // Chrome, Safari ...
  browser() {
    return this.ua.browser.name;
  }
  
  // ユーザーエージェント情報
  all() {
    return this.ua;
  }

  // go on ....

} // ! ClientHelper

module.exports = ClientHelper;

// 使い方
//
// var client = new ClientHelper(request)
// client.device_name()


上のクラスを実際に使う場合は下記のようになります。下のスニペットはテンプレート変数として、クラスをそのまま割り当てています。

/* 
** express上で使う場合 
** app.js
*/
const
    express = require('express'),
    app = express(),
    nunjucks = require('nunjucks'),
    // ClientHelperクラスをインポート
    ClientHelper = require('./helpers/ClientHelper')

// テンプレートにnunjucksを使って検証しました
nunjucks.configure('views', {
    autoescape: true,
    express: app
});

// viewフォルダのセット
app.set('views', __dirname + '/views');

app.get('/test', (req, res) => {
   
    // views/index.njkのテンプレートをレンダーしています
    res.render('index.njk', {
        // テンプレートに'client'という変数名で渡しています
        client: new ClientHelper(req) // ClientHelperのインスタンス化
    });

});

app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});


下がテンプレート内で使う場合のサンプル。
モバイルからアクセスすれば " From Mobile!! "それ以外からだと " From PC! "と表示されます。
( テンプレートにはnunjucksを使っています )

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>UAParser.jsを使ったラッパーのテスト</title>
  </head>
  
  <body>
    {# isMobile()を使ったテスト  #}

    {% if client.isMobile() %}
      <h2>From Mobile!!</h2>

    {% else %}
      <h2>From PC!</h2>
    {% endif %}
  </body>
</html>


Summary

以上がnode.js上でUAParser.jsを使ってモバイルを判別するサンプルでした!

元々PHPの'Mobile_Detect'ライブラリを長く使っていたので、それに使い方を似せています。

ニュースサイト系のプロジェクトを行っている人は、モバイルからのアクセス時にテンプレートをAMP対応版に切り替え、その他にモバイル時にはテンプレート内のgridの値を変えたり等、使い方次第で様々な事ができます。

モバイル対応が多い人は、ゼヒ×2参考にしてください!

Github: faisalman/ua-parser-js

 

この記事のカテゴリ

プログラミング

この記事のタグ

nodejs , jsライブラリー

Socialシェアボタン

スポンサーリンク