デバイスやネットワークに合わせたWebサイトの構築
UI開発者 泉口スマートデバイスのブラウザでWebサイトを閲覧している時、意図しないタイミングでブラウザが閉じてしまうことはないでしょうか？
これはWebサイトに限らずアプリでも同じことが言えますが、デバイスへの負荷が多いWebサイトではメモリ使用量やデバイス状況に応じてセーフティが働き、ブラウザを強制終了します。
もし管理/運営しているWebサイトでそのような事象が起きてしまった場合、ユーザーはどのように感じるでしょうか？
最初は何らかの不具合と思うかもしれませんが、何度も不具合が続くとWebサイトへの信頼が落ちてしまい、最悪の場合、二度と訪れない可能性も考えられます。
このような事象を未然に防ぐ方法としてWebサイトのパフォーマンスチューニングは勿論必須になりますが、昨今のブラウザから得られる情報はとても多く、デバイスに搭載されているメモリの量やCPUのコア数を把握することができるので、デバイスの処理能力に合わせて挙動を変更することが有効です。
今回はnavigatorオブジェクトを主に搭載されているAPIとネットワークを含めたデバイス情報を取得する方法をご紹介します。
OSとブラウザバージョンの取得
navigator.platform // ブラウザのプラットフォーム
navigator.appVersion // ブラウザのバージョン
navigator.userAgent // ユーザーエージェント
32/64bit OSの判別やブラウザごとの挙動変更などに用います、navigator.userAgentは余りにも有名ですね。
この他にもnavigator.pluginsからブラウザプラグインの情報を取得することもできます。
メモリ/CPU
navigator.deviceMemory // デバイスのメモリー搭載量
navigator.hardwareConcurrency // CPUプロセッサーコア数
例えばnavigator.deviceMemoryの値が16以上であればハイエンド、8以上であればミドルレンジ、8未満であればローエンド向けの処理を行うといった分岐が可能です。navigator.hardwareConcurrencyによるコア数と合わせて処理負荷の分散を考慮しましょう。
GPU
現在使用しているGPUの情報は次のコードで取得可能です。
結果の文字列からGPUがオンボードか、拡張ボードかどうかの判別が可能になります。
let canvas = document.createElement('canvas').getContext('webgl');
console.log(canvas.getParameter(canvas.getExtension('WEBGL_debug_renderer_info').UNMASKED_RENDERER_WEBGL));
周辺機器へのアクセス
navigator.bluetooth // Bluetooth
navigator.usb // USB
navigator.getBattery // バッテリー情報
navigator.mediaDevices // オーディオ・カメラ
接続しているデバイスへのアクセスを行います、接続していない状態でもバッテリーなどであれば情報を取得できますし、周辺機器のAPIが使用できる環境かどうかを把握することもできます。
ネットワーク/位置情報
navigator.onLine // オンライン/オフライン
navigator.connection // ネットワーク
navigator.geolocation // 位置情報
navigator.connectionではネットワークの帯域速度や、slow-2gから4gまでの接続形、RTT（ラウンドトリップタイム）などを取得することができます。ネットワークが遅い場合は低画質の画像/動画に切り替えるといった処理が考えられます。
これらの取得できるデバイス情報はGoogleアナリティクスを用いてトラッキングすることで、情報を蓄積することもできます。もし複雑な処理をしているページの解析結果でローエンドデバイスからのアクセスが多い場合であったり、多くのリクエストを行うページでネットワーク回線が細いアクセスが多い場合、Webサイト上での処理の見直しを考慮していきたいですね。