Reactで始めるsencer入門

create-react-appでPWAを作り、スマートフォンのセンサーの値を拾って状態を監視する

Transcript

1. Reactで始めるsensor入門 hayashi takao
2. アジェンダ
3. テーマ sensor制御 怖くないよ? - 動機 - 見据える最終ゴール - 今回達成できたこと - 学び/発見 - まとめ
4. 1. 動機
5. もっと簡単に友達と繋がりたい！！ 友達とSNSや連絡先を交換するときこんな会話したことありませんか? 『ぜひご飯行きましょう！！』 『いいですね！何で連絡すると連絡つきやすいですか？』 『TwitterのDMですかね... (ツイ廃)』 （ごそごそと交換のためのコードを探す) 『あれ？うまく読み込めない...』
6. 2. 最終ゴール
7. これに連絡してくれってSNSを選んで簡単に交換 自分がやっている各種SNSを連携して、交換したい相手の携帯とバンプさせる すると簡単に連絡先が交換できて人に応じて教えるSNSも選べて便利では？ とにかく連絡先の交換を死ぬほど簡単にしたい！！
8. 3. 今回達成できたこと
9. demoをご覧ください
10. 4. 学び/発見
11. 学び - windowオブジェクトにはそのブラウザがホストされてるデバイスのジャイロセン サーやモーションセンサーにアクセスできるAPIが存在する。 - chromeにはデバイスごとにセンサーをエミュレートするデバッガが内臓されており とても便利。 - センサー類はブラウザのメモリ内で計算されるのであんまり重い処理をさせるとメモ リを食い切る場合も。 - TS/JS系のライブラリが豊富でセンサー系以外にも音声やシンセサイザのライブラ リも存在する。 - ネイティブアプリとほぼ同様のことが実装可能
12. 発見 - センサーの挙動はイベントリスナーを通じて取得。 - 加速と、ジャイロのセンサーが異なり加速度センサーには慣性の計算が組み込ま れた変数が存在する。 - abusoluteと呼ばれる位置に対しての変化分を表示するのでlet地獄 - かなり計算量が多いのでメモリへの負荷が高い - 将来的にやりたいbumpにはスマホをぶつけた時のジャイロと加速の閾値が必要で 再現が難しいそう
13. 5. まとめ
14. 学び - windowオブジェクトにはそのブラウザがホストされてるデバイスのジャイロセン サーやモーションセンサーにアクセスできるAPIが存在する。 - chromeにはデバイスごとにセンサーをエミュレートするデバッガが内臓されており とても便利。 - センサー類はブラウザのメモリ内で計算されるのであんまり重い処理をさせるとメモ リを食い切る場合も。 - TS/JS系のライブラリが豊富でセンサー系以外にも音声やシンセサイザのライブラ リも存在する。
15. 参考にしたドキュメント - Google Developer Docs(https://developers.google.com/web/updates/2017/09/sensors-for-the-web) - 日本語版(https://developers.google.com/web/fundamentals/native-hardware/device-orientation/?hl=ja) - sencer-polifill資料 (https://www.pika.dev/npm/motion-sensors-polyfill) DeviceOriantasionEventの仕様(https://w3c.github.io/deviceorientation/)