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
26
M5Stack用の指紋認証デバイスを試す
ufoo68
0
360
結婚式のクイズアプリを自作した話
ufoo68
0
370
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
490
KASHIKOIHAKO
ufoo68
0
400
LIFF通話をつくろう!
ufoo68
0
970
AWS CDKで作るLINE bot
ufoo68
0
310
解説!LINE bot開発
ufoo68
0
210
Udonで始めるVR開発
ufoo68
0
360
Other Decks in Technology
See All in Technology
エムスリーマルチデバイスチーム紹介資料 / Introduction of M3 Multi Device Team
m3_engineering
1
160
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
160
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
200
AI JIMY - 登壇(インストール編)
hanacchi
0
150
Shinagile 2024
kawaguti
PRO
2
120
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
5
3.5k
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
13
4.9k
TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略
yanaemon
6
1.2k
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
4.6k
[PyconUS 2024] Having fun with Pydantic and pattern matching
enforcerpl
0
160
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
8
8.2k
Featured
See All Featured
Docker and Python
trallard
35
2.7k
Teambox: Starting and Learning
jrom
128
8.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Code Reviewing Like a Champion
maltzj
515
39k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
RailsConf 2023
tenderlove
9
580
What's new in Ruby 2.0
geeforr
338
31k
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の製作を今年はやっていきたいと思っています