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
29
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
67
今日から始めるgithub actions
remrem0090
0
32
Reactでのマルチストア運用を考察する
remrem0090
0
200
effectorを使い倒してReduxのかわりになるか検証する
remrem0090
1
710
React code Splitting
remrem0090
1
450
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Facilitating Awesome Meetings
lara
39
5.5k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Web development in the modern age
philhawksworth
201
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Visualization
eitanlees
135
14k
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/)