WebアプリでスマホIoTに挑戦してみた

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改善！

デモ -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

ご清聴ありがとうございました

WebアプリでスマホIoTに挑戦してみた

WebアプリでスマホIoTに挑戦してみた

ktr03

Other Decks in Programming

Featured

Transcript