Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactで始めるsencer入門
Search
Hayashi Takao
December 18, 2019
0
48
Reactで始めるsencer入門
create-react-appでPWAを作り、スマートフォンのセンサーの値を拾って状態を監視する
Hayashi Takao
December 18, 2019
Tweet
Share
More Decks by Hayashi Takao
See All by Hayashi Takao
今日から始めるWeb Components
remrem0090
0
74
今日から始めるgithub actions
remrem0090
0
43
Reactでのマルチストア運用を考察する
remrem0090
0
220
effectorを使い倒してReduxのかわりになるか検証する
remrem0090
1
770
React code Splitting
remrem0090
1
550
Featured
See All Featured
Building an army of robots
kneath
306
46k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Bash Introduction
62gerente
615
210k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
GraphQLとの向き合い方2022年版
quramy
49
14k
Docker and Python
trallard
45
3.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Practical Orchestrator
shlominoach
190
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Scaling GitHub
holman
463
140k
Transcript
Reactで始めるsensor入門 hayashi takao
アジェンダ
テーマ sensor制御 怖くないよ? - 動機 - 見据える最終ゴール - 今回達成できたこと -
学び/発見 - まとめ
1. 動機
もっと簡単に友達と繋がりたい!! 友達とSNSや連絡先を交換するときこんな会話したことありませんか? 『ぜひご飯行きましょう!!』 『いいですね!何で連絡すると連絡つきやすいですか?』 『TwitterのDMですかね... (ツイ廃)』 (ごそごそと交換のためのコードを探す) 『あれ?うまく読み込めない...』
2. 最終ゴール
これに連絡してくれってSNSを選んで簡単に交換 自分がやっている各種SNSを連携して、交換したい相手の携帯とバンプさせる すると簡単に連絡先が交換できて人に応じて教えるSNSも選べて便利では? とにかく連絡先の交換を死ぬほど簡単にしたい!!
3. 今回達成できたこと
demoをご覧ください
4. 学び/発見
学び - windowオブジェクトにはそのブラウザがホストされてるデバイスのジャイロセン サーやモーションセンサーにアクセスできるAPIが存在する。 - chromeにはデバイスごとにセンサーをエミュレートするデバッガが内臓されており とても便利。 - センサー類はブラウザのメモリ内で計算されるのであんまり重い処理をさせるとメモ リを食い切る場合も。
- TS/JS系のライブラリが豊富でセンサー系以外にも音声やシンセサイザのライブラ リも存在する。 - ネイティブアプリとほぼ同様のことが実装可能
発見 - センサーの挙動はイベントリスナーを通じて取得。 - 加速と、ジャイロのセンサーが異なり加速度センサーには慣性の計算が組み込ま れた変数が存在する。 - abusoluteと呼ばれる位置に対しての変化分を表示するのでlet地獄 - かなり計算量が多いのでメモリへの負荷が高い
- 将来的にやりたいbumpにはスマホをぶつけた時のジャイロと加速の閾値が必要で 再現が難しいそう
5. まとめ
学び - windowオブジェクトにはそのブラウザがホストされてるデバイスのジャイロセン サーやモーションセンサーにアクセスできるAPIが存在する。 - chromeにはデバイスごとにセンサーをエミュレートするデバッガが内臓されており とても便利。 - センサー類はブラウザのメモリ内で計算されるのであんまり重い処理をさせるとメモ リを食い切る場合も。
- TS/JS系のライブラリが豊富でセンサー系以外にも音声やシンセサイザのライブラ リも存在する。
参考にしたドキュメント - 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/)