【IoT】スマートフォンをセンサとして使う

# スマートフォンはセンサの塊
スマートフォンには加速度センサや照度センサなど、いろいろ含まれています。
なので、そのセンサから値を取れればマイコンがなくても、モノづくりに活かせる可能性が広がります。なので、スマートフォンからセンサのデータを取得してみたいと思います。

**※結構、ざっくり書きます。**

# 環境とか使ったもの
- スマートフォン：Zenfone5
- スマートフォンのOS：Android 8.0.0
- Node.js

# プログラムとか
## Node-Redのフロー
Node-Redのフローです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/212276/093a2faa-9cf8-2ceb-c5f6-613095ff9346.png)


```

[{"id":"d8228da1.bd655","type":"template","z":"f3159048.9c5b2","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>加速度の値を得る</title>\n</head>\n \n<body>\n<div id=\"txt\">ここにデータを表示</div>             <!-- データを表示するdiv要素 -->\n \n<script>\nvar aX = 0, aY = 0, aZ = 0;                     // 加速度の値を入れる変数を3個用意\n \n// 加速度センサの値が変化したら実行される devicemotion イベント\nwindow.addEventListener(\"devicemotion\", (dat) => {\n    aX = dat.accelerationIncludingGravity.x;    // x軸の重力加速度（Android と iOSでは正負が逆）\n    aY = dat.accelerationIncludingGravity.y;    // y軸の重力加速度（Android と iOSでは正負が逆）\n    aZ = dat.accelerationIncludingGravity.z;    // z軸の重力加速度（Android と iOSでは正負が逆）\n});\n \n// 指定時間ごとに繰り返し実行される setInterval(実行する内容, 間隔[ms]) タイマーを設定\nvar timer = window.setInterval(() => {\n    displayData();      // displayData 関数を実行\n}, 33); // 33msごとに（1秒間に約30回）\n \n// データを表示する displayData 関数\nfunction displayData() {\n    var txt = document.getElementById(\"txt\");   // データを表示するdiv要素の取得\n    txt.innerHTML = \"x: \" + aX + \"<br>\"         // x軸の値\n                  + \"y: \" + aY + \"<br>\"         // y軸の値\n                  + \"z: \" + aZ;                 // z軸の値\n}\n</script>\n</body>\n</html>","output":"str","x":490,"y":220,"wires":[["f44cb675.0bd878"]]}]

```

## html
htmlはNode-Red上のtemplate部分に書きます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/212276/c0a036a9-75bf-f18e-faf9-209cdc6956db.png)


```html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>加速度検出</title>
</head>
 
<body>
<div id="txt">データの表示</div> 
 
<script>
var aX = 0, aY = 0, aZ = 0;                     // 加速度の値を入れる変数を3個用意
 
// 加速度センサの値が変化したら実行される devicemotion イベント
window.addEventListener("devicemotion", (dat) => {
    aX = dat.accelerationIncludingGravity.x;
    aY = dat.accelerationIncludingGravity.y;
    aZ = dat.accelerationIncludingGravity.z;
});
 
// 指定時間ごとに繰り返し実行される setInterval(実行する内容, 間隔[ms]) タイマーを設定
var timer = window.setInterval(() => {
    displayData();      // displayData 関数を実行
}, 33); // 33msごとに（1秒間に約30回）
 
// データを表示する displayData 関数
function displayData() {
    var txt = document.getElementById("txt");   // データを表示するdiv要素の取得=その部分に表示させるよー的な感じ
    txt.innerHTML = "x: " + aX + "<br>"         // x軸の加速度
                  + "y: " + aY + "<br>"         // y軸の加速度
                  + "z: " + aZ;                 // z軸の加速度
}
</script>
</body>
</html>

```

## ブラウザで表示
URL部分に、「http://[IPアドレス]:[PORT番号]/[Node-red上で定めた名前]」といれると以下のように表示されます。
※[Node-red上で定めた名前]はhttp inのノードにあります
![image.png](https://qiita-image-store.s3.amazonaws.com/0/212276/304289e9-bcd4-e89a-558d-3c3fddbb9934.png)


![fig.png](https://qiita-image-store.s3.amazonaws.com/0/212276/47385c24-8dd5-8b3e-e0a2-dbecf730f744.png)

# おわりに
これを使って、センサのデータをjson形式か何かでマイコンに送信すれば、面白いことができそうです(検討中)。

# 参考
https://kkblab.com/make/javascript/acc.html