KASHIKOIHAKO計画 その4 

自己紹介 ● SNSでの名前 ○ ufoo68（@ufoo_yuta） ● 本名 ○ まつながゆうた ● やってること ○ スポーツTechLT主催 ● 今季のおすすめアニメ ○ ひぐらしのなく頃に卒 

いままでのあらすじ１ スマートボックスをつくった １８０度回転するサー ボアーム サーボアームが回転すると 箱がロックされる 

いままでのあらすじ２ ユーザー認証と連携した 1. スマホアプリでログイン 2. 箱のロック解除 認証されたユーザー以外は箱を開くこ とができない 

いままでのあらすじ３ デバイスの状態を管理を実装してみた { "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) は、ウェブアプリケーション にネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。 主に２つの要素でPWAを実現します。 ● サービスワーカー ● ウェブマニフェスト 

サービスワーカー ブラウザ上でウェブページとは別にバックグラウンドで実行されるJavaScriptファイル。 以下のような機能を実現することができる。 ● バックグラウンドでのキャッシュの更新 ● プッシュ通知 ● 特定の日付・時刻に対する反応 ● 特定の地理的範囲へ入った事を検知 

ウェブマニフェスト ウェブマニフェストはウェブアプリをネイティブアプリのように見せるために必要な情報が 書かれたJSONファイル。たとえば以下のような情報を記述する。 ● ホーム画面上に表示するアイコン ● アプリの表示名 ● アプリ起動時にアクセスするURL ● 背景・テーマの色 詳細はこちら 

PWAに対応してみた 

ソースコード https://github.com/ufoo68/kashikoihako-ui https://github.com/ufoo68/kashikoihako-device デバイス側 アプリ側 

まとめ ● PWAに対応した ○ GPSの情報をバックグラウンドでとりAmazon Locationとの連携とかもやってみたい ● 状態管理についての発展課題 ○ センサを使った開閉の管理 ● その他の手つかずの課題 ○ 箱をもっといい感じにする ○ SORACOMのSIMを使って外でも通信できるようにする 

というわけで より賢いスマートボックス、 KASHIKOIHAKOの製作を今年はやっていきたいと思っています