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
今更ながら、開発現場での生成AI活用について
ufoo68
0
34
28歳独身エンジニア 婚活してみた
ufoo68
0
3
OpenAIでクッキー型を作る
ufoo68
1
40
初めて開発リーダーをやってみた話
ufoo68
0
110
M5Stack用の指紋認証デバイスを試す
ufoo68
0
780
結婚式のクイズアプリを自作した話
ufoo68
0
630
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
680
KASHIKOIHAKO
ufoo68
0
580
LIFF通話をつくろう!
ufoo68
0
1.5k
Other Decks in Technology
See All in Technology
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
220
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
390
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.2k
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
540
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
250
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
290
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
2
330
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
140
Featured
See All Featured
Facilitating Awesome Meetings
lara
57
6.6k
Navigating Team Friction
lara
190
15k
Docker and Python
trallard
46
3.6k
Raft: Consensus for Rubyists
vanstee
140
7.2k
The Language of Interfaces
destraynor
162
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Done Done
chrislema
185
16k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A designer walks into a library…
pauljervisheath
209
24k
Statistics for Hackers
jakevdp
799
220k
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の製作を今年はやっていきたいと思っています