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
280
KASHIKOIHAKO計画その4
ufoo68
July 13, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
97
M5Stack用の指紋認証デバイスを試す
ufoo68
0
710
結婚式のクイズアプリを自作した話
ufoo68
0
600
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
650
KASHIKOIHAKO
ufoo68
0
550
LIFF通話をつくろう!
ufoo68
0
1.4k
AWS CDKで作るLINE bot
ufoo68
0
370
解説!LINE bot開発
ufoo68
0
290
Udonで始めるVR開発
ufoo68
0
430
Other Decks in Technology
See All in Technology
AIのAIによるAIのための出力評価と改善
chocoyama
0
420
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
110
原則から考える保守しやすいComposable関数設計
moriatsushi
3
500
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.4k
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
2
870
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
220
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
140
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
2
210
DroidKnights 2025 - Jetpack XR 살펴보기: XR 개발은 어떻게 이루어지는가?
heesung6701
1
160
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
120
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
170
Prox Industries株式会社 会社紹介資料
proxindustries
0
150
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Automating Front-end Workflow
addyosmani
1370
200k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
A better future with KSS
kneath
239
17k
Agile that works and the tools we love
rasmusluckow
329
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
GitHub's CSS Performance
jonrohan
1031
460k
Music & Morning Musume
bryan
46
6.6k
It's Worth the Effort
3n
184
28k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
How to train your dragon (web standard)
notwaldorf
92
6.1k
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の製作を今年はやっていきたいと思っています