スマートフォンは実は「幅広く普及したセンサーの塊」とも言えます。今回はHTMLとJavaScriptで扱えるセンサーの制御方法をまとめました。本記事のサンプルは実際にスマートフォンでアクセスして試してください。

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

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

本記事では次のセンサーを扱います。

バイブレーション

マナーモード時の着信で動作するバイブレーション。モーターが回転することで、スマートフォンが「ブルブル」と振動します。

Vibration APIを使うと、この機能にアクセスできます。AndroidではChrome・Firefox・標準ブラウザバージョン4.4以降でサポートされていますが、iOSでは利用できません(2018年6月時点)。

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

以下のサンプルでは、ブラウザで画面をタップすると振動します。

使い方ですが、JavaScriptでnavigator.vibrate(振動させるミリ秒)メソッドを実行します。数値の配列を指定すれば、振動パターンを設定できます。

// 1秒、振動させる。数値はミリ秒を指定します
navigator.vibrate(1000);

// 1秒振動して、0.2秒停止、その後1秒振動
navigator.vibrate([1000, 200, 1000]);

GPSセンサー(位置)

GPSは位置情報を取得する際に使用されるセンサーです。位置情報を扱うアプリで利用されています。ウェブ技術においては、Geolocation APIで利用できます。

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

次のサンプルでは、位置情報へのアクセス許可をすることで、緯度経度を取得しGoogle Maps上へマーカーを配置します。

位置情報を取得するためにはJavaScriptでnavigator.geolocation.getCurrentPosition()メソッドを使います。引数として取得成功時に実行したい関数と取得失敗時に実行したい関数を指定します。取得したposition.coords.accuracyパラメーターは緯度経度の誤差です(単位はメートル)。緯度経度以外に高度や方角、速度などの取得にも活用できます。

// 現在位置の呼び出し
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
 
// 取得成功したときのハンドラー
function geoSuccess(position) {
  // 緯度
  const latitude = position.coords.latitude;
  // 軽度
  const longitude = position.coords.longitude;
  // 緯度経度の誤差(メートル)
  const accuracy = Math.floor(position.coords.accuracy);
}
 
// 取得失敗したときのハンドラー
function geoError() {
  console.log("とれませんでした!")
}

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