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
WebアプリでスマホIoTに挑戦してみた
Search
ktr03
December 13, 2020
Programming
0
450
WebアプリでスマホIoTに挑戦してみた
2020/12/11に社内LT大会で発表した際のスライド資料です。スマホを使ってツーリングの走行記録を可視化するサービスを、学習を兼ねて個人開発しました。
ktr03
December 13, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
Amazon Nova Reelの可能性
hideg
0
280
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
2025.01.17_Sansan × DMM.swift
riofujimon
3
690
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
180
Flatt Security XSS Challenge 解答・解説
flatt_security
0
1.1k
Immutable ActiveRecord
megane42
0
130
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
270
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.1k
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
3.6k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
DROBEの生成AI活用事例 with AWS
ippey
0
110
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
550
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Practical Orchestrator
shlominoach
186
10k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
4 Signs Your Business is Dying
shpigford
182
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
910
Raft: Consensus for Rubyists
vanstee
137
6.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Code Review Best Practice
trishagee
65
17k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Making Projects Easy
brettharned
116
6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
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
ご清聴 ありがとうございました