スマートフォンはセンサーの塊! たった数行のHTML5とJSで扱えるセンサーまとめ(デモ・動画あり)

スマートフォンはセンサーの塊! たった数行のHTML5とJSで扱えるセンサーまとめ(デモ・動画あり)

※この記事が公開されたのは1年7ヶ月前ですが、 2016年6月8日に内容をメンテナンスしています。

みなさんはスマートフォンをお持ちでしょうか? スマートフォンの普及率も年々拡大し、街を歩いても電車に乗ってもスマートフォンを手にしている人がほとんどです。私はスマートフォン = ユーザーが共通して持っているセンサーの塊だと考えています。今回はHTML5・JavaScriptでそんなセンサーの制御方法をまとめました。本記事のデモは実際にスマートフォンでアクセスするとより楽しめます。

記事内で紹介しているデモのソースコードは、下記にアップロードしましたのであわせてご覧ください。

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

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

  • バイブレーション
  • GPSセンサー [位置]
  • ジャイロセンサー [傾き]
  • 加速度センサー [慣性]
  • 照度センサー [明るさ]
  • 近接センサー [距離]

バイブレーション

バイブレーションは主にマナーモード時の着信表現として用いられます。端末内のモーターを回転させることで「ブルブルッ」と振動させることができます。HTML5のVibration APIでアクセスできます。残念ながらiOSではサポートされているブラウザはありません。一方のAndroidではChrome・Firefox・標準ブラウザバージョン4.4以降でサポートされています。(2016年5月18日時点)

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

※こちらの動画はXperia Z、Firefoxで撮影しています。

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

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

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

GPSセンサー [位置]

GPSは地図アプリやSNSアプリのチェックインなどの位置情報を取得する際に使用されるセンサーです。HTML5のGeolocation APIでアクセスできます。屋内や地下ではGPS信号が届きにくくなるため、ネット回線経由で位置情報を取得します(スマートフォンでの設定が必要です)。iOSのOpera以外でサポートされおりGoogleの検索(「コーヒーショップ」で検索すると周囲のコーヒーショップが地図で表示される)などのさまざまなサービスで使用されています。(2016年5月18日時点)

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

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

// 現在位置の取得
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);

// 取得成功
function geoSuccess(position) {
	// 緯度
	var lat = position.coords.latitude;
	// 軽度
	var lng = position.coords.longitude;
	// 緯度経度の誤差(m)
	var accuracy = Math.floor(position.coords.accuracy);
}

// 取得失敗(拒否)
function geoError() {
	alert("Geolocation Error")
}

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

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


     最新記事の一覧へ 
公開 / 更新
蔵下 まさゆき

蔵下 まさゆき

インタラクションデザイナーとして、Webサイトやスマートフォンアプリの開発に携わる。学生時代より学んできた電子技術を活かし、デジタルコンテンツとハードウェアを組み合わせた新たな表現方法の研究開発に取り組んでいる。研究開発で得た知識や最新のガジェット情報などは、Twitterや勉強会などで積極的に発信中。著書に「センサーでなんでもできる おもしろまじめ電子工作」がある。