Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save okunokentaro/1df6b0c26f54474775dde9666fcc4947 to your computer and use it in GitHub Desktop.
Save okunokentaro/1df6b0c26f54474775dde9666fcc4947 to your computer and use it in GitHub Desktop.
User agentパースするやつ作った
2015/07/08 にQiitaに投稿した記事のアーカイブです
---
追記: やっぱり作る必要なかった。https://github.com/woothee/woothee-js
---
こんにちは、@armorik83です。[cw-user-agent](https://github.com/crescware/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
```
```js: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はこちらを参照。](https://github.com/crescware/cw-user-agent/blob/master/api/cw-user-agent.d.ts)
`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が最古ラインで考えています。
[使ってね!](https://github.com/crescware/cw-user-agent)
# おまけ - 資料集
自分が作るときに参考にした資料。
- http://faisalman.github.io/ua-parser-js/
- http://user-agents.me/
- http://www.useragentstring.com/
- [NTTドコモ 端末スペック](http://spec.nttdocomo.co.jp/spmss/)
- [au Android™ 技術情報 > User Agent](http://www.au.kddi.com/developer/android/kishu/ua/)
- [Gecko ユーザエージェント文字列リファレンス](https://developer.mozilla.org/ja/docs/Gecko_user_agent_string_reference)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment