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はユーザーエージェントの文字列を解析するシンプルなライブラリで、モバイル端末やブラウザ名、バージョン、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>
以上がnode.js上でUAParser.jsを使ってモバイルを判別するサンプルでした！
元々PHPの'Mobile_Detect'ライブラリを長く使っていたので、それに使い方を似せています。
ニュースサイト系のプロジェクトを行っている人は、モバイルからのアクセス時にテンプレートをAMP対応版に切り替え、その他にモバイル時にはテンプレート内のgridの値を変えたり等、使い方次第で様々な事ができます。
モバイル対応が多い人は、ゼヒ×２参考にしてください！
Github: faisalman/ua-parser-js
