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
300
KASHIKOIHAKO計画その4
ufoo68
July 13, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
OpenAIでクッキー型を作る
ufoo68
1
39
初めて開発リーダーをやってみた話
ufoo68
0
110
M5Stack用の指紋認証デバイスを試す
ufoo68
0
770
結婚式のクイズアプリを自作した話
ufoo68
0
630
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
680
KASHIKOIHAKO
ufoo68
0
580
LIFF通話をつくろう!
ufoo68
0
1.5k
AWS CDKで作るLINE bot
ufoo68
0
390
解説!LINE bot開発
ufoo68
0
300
Other Decks in Technology
See All in Technology
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
110
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
220
CoRL 2025 Survey
harukiabe
1
200
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
1.9k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
4.3k
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
140
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
14k
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
3
2.5k
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
130
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Leading Effective Engineering Teams in the AI Era
addyosmani
6
450
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
RailsConf 2023
tenderlove
30
1.2k
Designing for Performance
lara
610
69k
Bash Introduction
62gerente
615
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
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の製作を今年はやっていきたいと思っています