スマートフォンの普及率も年々拡大し、街を歩いても電車に乗ってもスマートフォンを手にしている人がほとんど。そんなスマートフォンは実は「幅広く普及したセンサーの塊」とも言えます。今回はHTMLとJavaScriptでそんなセンサーの制御方法をまとめました。本記事のサンプルは実際にスマートフォンでアクセスするとより楽しめます。

記事内で紹介しているサンプルのソースコードは、GitHubからダウンロードできます。

アクセスできるアクチュエーター・センサー

JavaScriptで下記のアクチュエーター・センサーから値を取得しコンテンツに反映させる方法を本記事でまとめています。「アクチュエーター」とは「駆動装置」という意味です。モーターなどがそれにあたります。

バイブレーション

バイブレーションは主にマナーモード時の着信表現として用いられます。端末内のモーターを回転させることで「ブルブルッ」と振動させることができます

HTML5のVibration APIでアクセスできます。残念ながらiOSではサポートされているブラウザはありません。一方のAndroidではChrome・Firefox・標準ブラウザバージョン4.4以降でサポートされています(2018年6月時点)。

▲灰色の行が現行版バージョンを、緑色になっているものが対応していることを示します。「Can I Use」より

以下にサンプルを用意しました。サポートされているブラウザで画面をタップすると振動します。

※Xperia ZのブラウザFirefoxで収録しています。

振動させるためには下記のようにJavaScriptでnavigator.vibrate(振動させるミリ秒)メソッドを実行します。配列を指定することで振動パターンを設定することができます。

// 1000ミリ秒振動
navigator.vibrate(1000);

// 500ミリ秒振動して100ミリ秒停止、その後500ミリ秒振動
navigator.vibrate([500, 100, 500]);

GPSセンサー(位置)

GPSは位置情報を取得する際に使用されるセンサーです。Googleの検索(「コーヒーショップ」で検索すると周囲のコーヒーショップが地図で表示される)などのさまざまなサービスで使用されています。

HTML5のGeolocation APIでアクセスできます。屋内や地下ではGPS信号が届きにくくなるため、ネット回線経由で位置情報を取得します(スマートフォンでの設定が必要です)。

▲灰色の行が現行版バージョンを、緑色になっているものが対応していることを示します。「Can I Use」より

以下にサンプルを用意しました。位置情報へのアクセスを許可すると現在いる緯度経度を取得してGoogle Maps上へマーカーを配置します。サンプルを試していただくとお分かりいただけるかと思いますが、外部環境を受けやすいため完璧な位置を検出することは現状では難しそうです。

位置情報を取得するためには下記のようにJavaScriptでnavigator.geolocation.getCurrentPosition()メソッドに取得成功時に実行したい関数(第1引数)と取得失敗時に実行したい関数(第2引数)を指定します。ここで取得したposition.coords.accuracyパラメーターは緯度経度の誤差を示しており、取得した緯度経度の位置から半径◯m以内に実際の位置があるということを表しています。

// 現在位置の取得
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
 
// 取得成功
function geoSuccess(position) {
  // 緯度
  const lat = position.coords.latitude;
  // 軽度
  const lng = position.coords.longitude;
  // 緯度経度の誤差(m)
  const accuracy = Math.floor(position.coords.accuracy);
}
 
// 取得失敗(拒否)
function geoError() {
  alert("Geolocation Error")
}

緯度経度以外に高度や方角、速度なども取得できます。(詳しくはHTML5 Geolocation | W3Schoolsをご覧ください)

次のページでは、ジャイロセンサーで傾きと方角を、加速度センサーで慣性を取得する方法を解説します。