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
510
KASHIKOIHAKO
ufoo68
October 16, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
80
M5Stack用の指紋認証デバイスを試す
ufoo68
0
610
結婚式のクイズアプリを自作した話
ufoo68
0
550
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
610
LIFF通話をつくろう!
ufoo68
0
1.3k
KASHIKOIHAKO計画その4
ufoo68
0
270
AWS CDKで作るLINE bot
ufoo68
0
350
解説!LINE bot開発
ufoo68
0
260
Udonで始めるVR開発
ufoo68
0
410
Other Decks in Technology
See All in Technology
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
130
Classmethod AI Talks(CATs) #16 司会進行スライド(2025.02.12) / classmethod-ai-talks-aka-cats_moderator-slides_vol16_2025-02-12
shinyaa31
0
110
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
110
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
2
2.9k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
240
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
130
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
740
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.3k
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
250
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.3k
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
210
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Side Projects
sachag
452
42k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Docker and Python
trallard
44
3.3k
Fireside Chat
paigeccino
34
3.2k
The Pragmatic Product Professional
lauravandoore
32
6.4k
A designer walks into a library…
pauljervisheath
205
24k
Optimizing for Happiness
mojombo
376
70k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Done Done
chrislema
182
16k
Code Review Best Practice
trishagee
67
18k
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の製作を今年はやっていきたいと思っています