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
Search
ufoo68
October 16, 2021
Technology
0
580
KASHIKOIHAKO
ufoo68
October 16, 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
770
結婚式のクイズアプリを自作した話
ufoo68
0
630
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
680
LIFF通話をつくろう!
ufoo68
0
1.5k
KASHIKOIHAKO計画その4
ufoo68
0
300
Other Decks in Technology
See All in Technology
Zero Trust DNS でより安全なインターネット アクセス
murachiakira
0
100
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
260
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
0
230
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
330
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
知覚とデザイン
rinchoku
1
600
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
520
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
390
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
120
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
GitHub's CSS Performance
jonrohan
1032
470k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Why Our Code Smells
bkeepers
PRO
340
57k
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
KASHIKOIHAKO PWAで作るIoTアプリケーション
自己紹介 • SNSでの名前 ◦ ufoo68(@ufoo_yuta) • 出身 ◦ 温泉じゃない方の草津 •
すきなこと ◦ シンプルなものづくり
ある日のこと こんな景品をもらいました
この箱なにかに使えそう
さらにある日のこと スイッチサイエンスにてあるものを購入した
これでなにか作れないだろうか ・・・・・・・・
それでつくったもの これをスマートボックスのプロトタイプと勝手に定義した 180度回転するサー ボアーム サーボアームが回転すると 箱がロックされる
スマートボックスとは • 箱の開閉をスマートに制御できる ◦ PC・スマホのアプリを用いた開閉制御 ◦ 箱の開閉者の認証 • 箱の状態管理ができる ◦
GPSを使った位置情報のトラッキング ◦ 内包物の状態の確認 つまりは、より賢い(KASHIKOI)ことができる箱のことをいう
イメージ図(つくりたいもの) スマホを用いた認証機能で開く箱 1. スマホアプリでログイン 2. 箱のロック解除 認証されたユーザー以外は箱を開くこ とができない
最初にやったこと • ロック機構の実装 ◦ サーボモータを使用 • セキュアな通信 ◦ M5Stack Core2
for AWSに内蔵されたセキュア通信の機能を使用 ◦ MQTT + TLSでAWS IoT coreと通信
サーボモータの動かし方 PWMの波形の形がサーボモータの角度と連動する https://monoist.atmarkit.co.jp/mn/articles/0708/22/news116.html
セキュアな通信 X.509を使用した証明書認証をデバイスとAWS IoTの間で行う デバイス AWS IoT core 認証された(証明書を持っている)デバ イス以外は通信できない
MQTT over TLSを用いた通信 openとcloseのトピックをサブスクライブする
次にやったこと • ユーザー認証との連携 ◦ CognitoとIoT Coreを組み合わせる • UIの実装 ◦ AmplifyライブラリでAWSリソースと連携
ユーザー認証との連携 やりたいことのイメージ
Cognitoとはなにか • AWSが提供する認証サービス • Apple、Facebook、Google、Amazon などのソーシャル ID プロバイダー、SAML 2.0 および
OpenID Connect によるエンタープライズ ID プロバイダーを使用した サインインをサポート • 早い話がログインとかパスワード管理とかの機能を作りたいときに使うサービス
AWS IoTと連携する 1. Cognitoでユーザーを作成する 2. 以下のコマンドを実行する aws iot attach-policy --policy-name
{{policy name}} --target {{cognito identity id}} policyは証明書を持ったデバイスが持つ権限。Cognitoのユーザーをpolicyにア タッチすることで、証明書と同じ権限をユーザーが持つことができる。
具体的な実装内容は こちらのQiita記事を参照してください
UIをつくる Amplifyを使えば認証機能を楽々実装できる
その次にやったこと AWS IoTのデバイスシャドウを使って、 箱の開閉状態を管理してみた
今までの課題 例えば箱の開閉を操作するとき、 目の前に箱があるときは 「開」「閉」の どちらを押せばいいのかがわかる
今までの課題 しかし、 箱が目の前にないときは「開」「閉」 のどちらを押せばいいのかがわからない (これはあまりかしこくない)
そして考えたこと 箱とアプリの間で箱の開閉状態を管理するものを立ててみる ?
デバイスシャドウを使ってみた デバイスの状態を管理するためのAWS IoTの機能 { "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
おまけにやったこと アプリをPWAに対応してみた WEBマニフェストを記述してスタートアイコンを作り、 ネイティブアプリのように起動させてみた。
ソースコード https://github.com/ufoo68/kashikoihako-ui https://github.com/ufoo68/kashikoihako-device デバイス側 アプリ側
さいごに • まとめ ◦ AWS IoTとAmplifyを組み合わせることで、手軽に IoTのウェブアプリケーションをつくることができた ◦ M5Stack core2
for AWSを使うと手軽にデバイスと AWS IoTとの連携が実現できる(ただし FreeRTOSでの開発となる) ◦ PWAを導入することでネイティブアプリのような動きを実装できた • 今後やってみたいこと ◦ プッシュ通知をなにかに活かしたい ◦ 箱をもう少しかっこよくしたい ◦ ロック機構とかも本格的なものを作ってみたい
というわけで より賢いスマートボックス、 KASHIKOIHAKOの製作を今年はやっていきたいと思っています