多様なデバイスからアクセスがある昨今のWebサイトでは、
それらに応じた対応が必要になる。
特に読み物や漫画・ゲームなどの
集中して利用してもらうコンテンツでは
細かな気配りが物を言う（に違いない）。
というわけで今回はJavaScriptでの環境チェックについてのお話
サーバー側が利用できる情報
多様なデバイスでも動作を保証できるように、ブラウザはそのブラウザを動作させているデバイスの情報を得ており、ブラウザを介してサーバーへ伝えられます。サーバー側はそれらの情報を利用することができます。
それらの情報は例えば、
- ブラウザの情報
- プラットフォーム（OS）
- バッテリー残量
- ネットワーク状態
- 利用言語
- 実際の場所
があり、これらを取得するにはwindow.navigatorプロパティを利用します。
window.navigatorプロパティ
window.navigatorプロパティは今のwindowに対応するNavigatorオブジェクトを返します。Navigatorオブジェクトは、ユーザーに関する数多くのプロパティを持っています。
これらのプロパティの値によって条件分岐して、デバイスやそのブラウザに合わせた記述をしていくことになります。
詳細はリファレンスに任せることとしますが、
あとは、ホームページの状態をどう表示するかも大事だと思います。
例えばPC用に横幅のあるデザインで、AndroidやiOSなどのスマホ用に縦長のデザインを用意したとしても、AndroidタブレットやiPadで横向きにブラウジングされる方もいます。そういった方には、見難い、あるいは使いにくいデザインになってしまいます。スマホも横向き表示しますしね。
そんなときはブラウザの表示状態、横幅と縦幅を見てデザインを条件分岐させることも大事だと思います。
横幅や縦幅などの、画面の情報を取得するにはwindow.screenプロパティを利用します。
window.screenプロパティ
window.screenプロパティは今のwindowに関するScreenオブジェクトを返します。Screenオブジェクトは、ウィンドウが描画されている画面に関するパラメータを持っています。
こちらも詳細はリファレンスに任せますが、
上記NavigatorオブジェクトとこのScreenオブジェクトを利用した簡単な情報表示をするページはこんな感じです。
なんとなく、JavaScriptへの理解が深まってきました。
次回はこの環境を利用した条件分岐について触れてみます。
御覧いただきありがとうございました。