Zenn
👀

User agentパースするやつ作った

2021/07/04に公開
Web
tech

追記: やっぱり作る必要なかった。https://github.com/woothee/woothee-js

こんにちは、@armorik83 です。cw-user-agentを作りました。

これは何?

User agent をパースするやつです。ご存知の通り膨大な数がある User agent ですが、ある程度規則があるので、そこを地道に引っ掛けていく手法です。OS 名やブラウザ名を返します。

利用者による UA 書き換えには無力です。

なぜ作った?

UA 分岐が業務で必要になったから。ゴリゴリっと式を書いてもいいんですが、モバイル対応以外に Mac, Windows 分岐なども考えだすとそれなりの行数になりそうだったので、だったら OSS 化しようというわけです。今回は解像度別対応とは異なる話題だったので、Media Queries といった関心は扱っていません。

当然この手の OSS は探せばあったわけですが、残念なことにwindow.navigator.useragentと密結合していたり、jQuery プラグインだったり、モバイルばかりに目を向けていたり、ライセンスの問題がクリアできなかったりで、この選定に費やす時間でサクっと作ったほうが早いという結論を出し、サクっと作りました。モバイルはもちろん、Mac, Windows についても扱っています。

使い方

npm install cw-user-agent
usage.js
import Parser from 'cw-user-agent';
// もしくは
var Parser = require('cw-user-agent');
var parser = new Parser();

parser.setUA('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2450.0 Safari/537.36');
var info = parser.deviceInfo();

console.log(
  info.userAgent,
  info.browser,
  info.engine,
  info.os,
  info.device
);

API はこちらを参照。

windowにも他のライブラリにも一切依存していません。

今後の予定

スタンドアロン

今の案件が webpack だったので、require前提で作っています。逆に言えば isomorphic なので Node.js としてバックでも使えます。ただ、これが必要な局面はフロントの方が多いので、次期アップデートでは<script src="">で使えるスタンドアロン出力を予定しています。bower とかは必要なのかな、npm で十分じゃないかと考えてるのでちょっと様子見。

対応 UA の増強

まだ Linux, Windows Phone, BlackBerry, Firefox OS, 各種ゲーム機などは全滅で、今後増やします。古いブラウザも全部網羅しきれてないので拡充が必要。

リクエストがあったらコメント、Twitter、Issues などで UA 添えてください。こっちで作ったぞ! という方は PR 下さい（この場合テスト必須です）。モバイルは概ね 5 年以内は取りこぼしも拾っていく姿勢で、i モード端末とかそういうのは予定にありません、PR が来たら考えます。デスクトップは IE6 が最古ラインで考えています。

使ってね!

おまけ - 資料集

自分が作るときに参考にした資料。

Discussion