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
Designing for humans not robots
tammielis
253
25k
Navigating Team Friction
lara
189
15k
We Have a Design System, Now What?
morganepeng
53
7.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Code Reviewing Like a Champion
maltzj
525
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
4 Signs Your Business is Dying
shpigford
184
22k
The Invisible Side of Design
smashingmag
301
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Cult of Friendly URLs
andyhume
79
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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/)