$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebアプリでスマホIoTに挑戦してみた
Search
ktr03
December 13, 2020
Programming
0
490
WebアプリでスマホIoTに挑戦してみた
2020/12/11に社内LT大会で発表した際のスライド資料です。スマホを使ってツーリングの走行記録を可視化するサービスを、学習を兼ねて個人開発しました。
ktr03
December 13, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
codenote
0
210
AIエージェントを活かすPM術 AI駆動開発の現場から
gyuta
0
430
TUIライブラリつくってみた / i-just-make-TUI-library
kazto
1
390
LLMで複雑な検索条件アセットから脱却する!! 生成的検索インタフェースの設計論
po3rin
3
810
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
ayumu_yamaguchi
1
120
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
2
220
宅宅自以為的浪漫:跟 AI 一起為自己辦的研討會寫一個售票系統
eddie
0
510
tparseでgo testの出力を見やすくする
utgwkk
2
230
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
120
React Native New Architecture 移行実践報告
taminif
1
160
Microservices rules: What good looks like
cer
PRO
0
1.5k
Cell-Based Architecture
larchanjo
0
130
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
KATA
mclloyd
PRO
33
15k
How STYLIGHT went responsive
nonsquared
100
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
The Cult of Friendly URLs
andyhume
79
6.7k
Done Done
chrislema
186
16k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Why Our Code Smells
bkeepers
PRO
340
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Designing Experiences People Love
moore
143
24k
Transcript
Webアプリで スマホIoTに挑戦してみた ktr03
ktr03 DI室 All Whitesチーム エンジニア ⚾️が好き 開発してます! 自己紹介
ツーリング記録を残したい かっこよく可視化したい
構成
構成 今日はWebアプリをメイ ンに話します!!
収集するデータ ・位置情報(緯度/経度/高度) ・温度/湿度
収集するデータ ・位置情報(緯度/経度/高度) ・温度/湿度 スマホ内蔵センサから取れる!
収集するデータ ・位置情報(緯度/経度/高度) ・温度/湿度 Bluetoothデバイスから取る!
Linkingデバイスで始めよう 豊富なラインナップでお手頃価格! 手軽に始められるNode.js ライブラリがある! https://github.com/futomi/node-linking
Webアプリから計測する ・位置情報(緯度/経度/高度) ・温度/湿度 Geolocation API Bluetooth API
Web APIがあるから簡単でしょ!
調子に乗って Progressive Web Apps にしてみる
・ホーム画面のアイコンから呼び出せる ・オフラインでも動作する ・プッシュ通知が受け取れる PWAとは。。。 Webアプリにネイティブアプリと同様の使い勝 手をもたらすウェブアプリのこと
・Service Worker ・Fetch ・Cache モバイルだけでなくPCでのUX改善にも効果あり! Googleのトレーニング資料がおすすめ! https://developers.google.com/web/ilt/pwa 関連する技術 ・Notifications ・Push
・IndexedDB などなど
・Service Worker ・Fetch ・Cache ホームアイコン起動 オフライン動作 バックグラウンド動作 今回使った技術 UX改善!
・Service Worker ・Fetch ・Cache ホームアイコン起動 オフライン動作 バックグラウンド動作 今回使った技術 UX改善!
デモ -IoTアプリ-
デモ -データ可視化-
PWA化したけど。。。 データ取得するWeb APIは制限が厳しく、妥協点が多かった。。
PWA化したけど。。。 Service Workerから呼び出せない! バックグラウンド実行できない! ナビアプリと併用できない! Geolocation API Bluetooth API
さらに。。。 iOS非対応! iphoneからはchromeでも使えません! Bluetooth API Safariと同じWebKitを使用している
続・さらに。。。 iphoneはWakeLock API非対応! ユーザが画面に触れ続ける必要がある 事実上、位置情報の自動計測も不可!
まとめ Webアプリで実現できる IoTユースケースは限られる (特にiphoneは制約多い) PWA技術はフロントエンド側でできる 性能改善の手段として学ぶ価値ある 趣味で個人開発するとスキルアップも できて一石二鳥 資格取得!
最後に。。。 Qiitaでクラウド側の内容とともに記事を公開予定です! PWAのソースコードを公開しています! https://github.com/ktr03rtk/iot-web-app
ご清聴 ありがとうございました