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
KASHIKOIHAKO計画その4
Search
ufoo68
July 13, 2021
Technology
0
220
KASHIKOIHAKO計画その4
ufoo68
July 13, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
21
M5Stack用の指紋認証デバイスを試す
ufoo68
0
310
結婚式のクイズアプリを自作した話
ufoo68
0
330
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
460
KASHIKOIHAKO
ufoo68
0
390
LIFF通話をつくろう!
ufoo68
0
930
AWS CDKで作るLINE bot
ufoo68
0
300
解説!LINE bot開発
ufoo68
0
210
Udonで始めるVR開発
ufoo68
0
350
Other Decks in Technology
See All in Technology
ChatGPTのLT会-メモソフトにChatGPT入れると結構便利
okada_fuutass
0
150
あなたの知らないバグバウンティの世界
eurekaberry
1
1.4k
滑空スポーツ講習会2023 航空安全講習会 第4回 日常整備に役立ちそうな雑情報 / JSA Safety Seminar 2023 glider maintenance
jsaseminar
0
100
パフォーマンスを改善するには仕様変更が1番はやい
yamamotohiroya
12
4.6k
第131回 雲勉【オンライン】AWSを9年触ってきて経験した落とし穴、ハマったポイント
iret
6
470
AIエージェントが変えるソフトウェアのパラダイム
masahiro_nishimi
0
200
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
120
調整さんの調整結果をカレンダーへ登録するGPTsを作った話
hrsano645
1
160
JaSST_Tokyo経験発表_20240313.pdf
ktanizaki
0
190
Microsoft Fabric 開発ガイド
ryomaru0825
6
2.6k
小さく始めるAnsible
stopendy
0
200
ISUCON入門以前_ISUNARABE_LT#1
sadnessojisan
13
2.4k
Featured
See All Featured
Embracing the Ebb and Flow
colly
78
4.1k
GitHub's CSS Performance
jonrohan
1023
450k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
930
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Statistics for Hackers
jakevdp
789
220k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
How to Ace a Technical Interview
jacobian
272
22k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Bash Introduction
62gerente
604
210k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.5k
Transcript
KASHIKOIHAKO計画 その4
自己紹介 • SNSでの名前 ◦ ufoo68(@ufoo_yuta) • 本名 ◦ まつながゆうた •
やってること ◦ スポーツTechLT主催 • 今季のおすすめアニメ ◦ ひぐらしのなく頃に卒
いままでのあらすじ1 スマートボックスをつくった 180度回転するサー ボアーム サーボアームが回転すると 箱がロックされる
いままでのあらすじ2 ユーザー認証と連携した 1. スマホアプリでログイン 2. 箱のロック解除 認証されたユーザー以外は箱を開くこ とができない
いままでのあらすじ3 デバイスの状態を管理を実装してみた { "desired": { "boxStatus": "open" }, "reported": {
"boxStatus": "open" } } desired: { “boxStatus”: “open” } reported: { “boxStatus”: “open” }
動画 使用技術 • ハードウェア ◦ M5Stack Core2 for AWS ◦
Free RTOS • バックエンド ◦ AWS Cognito ◦ AWS IoT • フロントエンド ◦ Amplify ◦ React ◦ Material UI
スマートボックスとは • 箱の開閉をスマートに制御できる ◦ PC・スマホのアプリを用いた開閉制御 ◦ 箱の開閉者の認証 • 箱の状態管理ができる ◦
GPSを使った位置情報のトラッキング ◦ 内包物の状態の確認 つまりは、KASHIKOIHAKOのことをいう
今回のテーマ アプリをPWAに対応してみた
PWAとは プログレッシブウェブアプリProgressive web apps (PWA) は、ウェブアプリケーション にネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。 主に2つの要素でPWAを実現します。 • サービスワーカー
• ウェブマニフェスト
サービスワーカー ブラウザ上でウェブページとは別にバックグラウンドで実行されるJavaScriptファイル。 以下のような機能を実現することができる。 • バックグラウンドでのキャッシュの更新 • プッシュ通知 • 特定の日付・時刻に対する反応 •
特定の地理的範囲へ入った事を検知
ウェブマニフェスト ウェブマニフェストはウェブアプリをネイティブアプリのように見せるために必要な情報が 書かれたJSONファイル。たとえば以下のような情報を記述する。 • ホーム画面上に表示するアイコン • アプリの表示名 • アプリ起動時にアクセスするURL •
背景・テーマの色 詳細はこちら
PWAに対応してみた
ソースコード https://github.com/ufoo68/kashikoihako-ui https://github.com/ufoo68/kashikoihako-device デバイス側 アプリ側
まとめ • PWAに対応した ◦ GPSの情報をバックグラウンドでとりAmazon Locationとの連携とかもやってみたい • 状態管理についての発展課題 ◦ センサを使った開閉の管理
• その他の手つかずの課題 ◦ 箱をもっといい感じにする ◦ SORACOMのSIMを使って外でも通信できるようにする
というわけで より賢いスマートボックス、 KASHIKOIHAKOの製作を今年はやっていきたいと思っています