わりかし軽い User-Agent マッチング

結論

後述のようなUAのマッチングをする場合、体感的にはString.prototype.match()を使うより、String.prototype.indexOf()を使う方が処理が早かったです（2016/04/20現在、当社比）。

例えば、UAの文字列からAndroid 5.x以前を検出したい場合の記述は、以下の通りです。

detect-old-android.js

var ua = navigator.userAgent.toLowerCase();
var isLollipop = ua.indexOf("android 5") > -1; // If Android 5.x is true
var isAndroid4x = ua.indexOf("android 4") > -1; // If Android 4.x is true
var isAndroid2x = ua.indexOf("android 2") > -1; // If Android 2.x is true
var isOldAndroid = isLollipop || isAndroid4x || isAndroid2x; // Return true if Android version is 5.x or older 
if (isOldAndroid) {
  // Write here.
}

https://gist.github.com/takeshi81/1bb5e2cbff72a5ef46cdcc51dc9857ac

正規表現を使った方が記述はスマートですが、今回、Androidの古いバージョンに対して処理を行いたかったので、実行速度の早い書き方としました。お好みで値を変えてご利用ください。

以上です。

あとがき： 私は如何にしてString.prototype.match()するのを止めてString.prototype.indexOf()を愛するようになったか

Android 5（Lollipop）以前の端末に限って、日本語Webフォントを使いたかったからです。他の端末ではデバイスフォントを適用し、対象端末だけWebフォントの読み込みを行う処理のために、Web上のコードをいくつも試した結果、上述の方法にたどり着きました。実際には// Write here.の部分を、Webフォントサービスから提供されるコードに置き換えます。

経緯

（記事の主旨から外れるので、後でブログにまとめます。以下は下書き）

• Android 5（Lollipop）以前の日本語フォントは、モトヤマルベリやDroid Sansが標準で採用され、ベンダーによりその他のフォントがインストールされている。
  • モトヤマルベリは丸ゴシック体であり、比較的軽く甘い印象を与えてしまう（参考）。デザイナーにより意見は異なるが、私は汎用的に用いるためのフォントとしては、あまり向いていないと考えている。
  • モトヤシーダはどこ？OSのリポジトリに上がっているのに、実機に入っていないことがある。
• Android 6（Marshmallow）では、日本語フォントにNoto Sans CJK JPが採用されている。
  • Noto SansはGoogleとAdobeが共同開発した角ゴシック体である。本文へ適用しても可読性は概ね良好な印象を受ける。
• そこで、Lollipop以前のAndroidに対してWebフォントを適用することを考えた。
  • 日本語（を含むCJK）フォントはファイルサイズが大きい。自力でサブセット化しても500KB〜1MB超くらいに落ち着くことが多いようである。
  • 特にこれから古くなるデバイスへ適用するのであれば、レンダリングにあまり時間がかからない実装にしたい。
  • もっとも、対象端末のシェアが落ちたらサポートは切るつもりである。
• Webフォントサービスを使う
  • 自力実装に比べて、商用Webフォントサービスは、さすがによくチューニングされていている。
  • 日本ではFONT+、TypeSquareなどが有名。
  • Adobe TypekitのWebフォントにも日本語フォントが登場した。小塚明朝など自社製品の他、モリサワの主力書体も含まれている。
  • Creative Cloudに加入している場合、Typekitのポートフォリオプランが適用される。月間50万ページビューまで表示可能、サイト数は無制限である。

（つづく）