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
240
KASHIKOIHAKO計画その4
ufoo68
July 13, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
37
M5Stack用の指紋認証デバイスを試す
ufoo68
0
410
結婚式のクイズアプリを自作した話
ufoo68
0
410
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
520
KASHIKOIHAKO
ufoo68
0
420
LIFF通話をつくろう!
ufoo68
0
1k
AWS CDKで作るLINE bot
ufoo68
0
310
解説!LINE bot開発
ufoo68
0
230
Udonで始めるVR開発
ufoo68
0
370
Other Decks in Technology
See All in Technology
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
910
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
Azure AI ことはじめ
tsubakimoto_s
0
130
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
For a Future-Friendly Web
brad_frost
173
9.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Invisible Customer
myddelton
117
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Building Adaptive Systems
keathley
34
2k
Adopting Sorbet at Scale
ufuk
71
8.8k
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の製作を今年はやっていきたいと思っています