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
570
KASHIKOIHAKO
ufoo68
October 16, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
OpenAIでクッキー型を作る
ufoo68
1
31
初めて開発リーダーをやってみた話
ufoo68
0
110
M5Stack用の指紋認証デバイスを試す
ufoo68
0
750
結婚式のクイズアプリを自作した話
ufoo68
0
620
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
670
LIFF通話をつくろう!
ufoo68
0
1.4k
KASHIKOIHAKO計画その4
ufoo68
0
290
AWS CDKで作るLINE bot
ufoo68
0
380
解説!LINE bot開発
ufoo68
0
290
Other Decks in Technology
See All in Technology
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
440
テストを軸にした生き残り術
kworkdev
PRO
0
220
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
270
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
210
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
130
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
Apache Spark もくもく会
taka_aki
0
140
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
A better future with KSS
kneath
239
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
The Cult of Friendly URLs
andyhume
79
6.6k
Embracing the Ebb and Flow
colly
87
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimizing for Happiness
mojombo
379
70k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
How to Ace a Technical Interview
jacobian
279
23k
Rails Girls Zürich Keynote
gr2m
95
14k
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の製作を今年はやっていきたいと思っています