Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KASHIKOIHAKO計画その4

ufoo68
July 13, 2021

 KASHIKOIHAKO計画その4

ufoo68

July 13, 2021
Tweet

More Decks by ufoo68

Other Decks in Technology

Transcript

  1. KASHIKOIHAKO計画
    その4

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. いままでのあらすじ3
    デバイスの状態を管理を実装してみた
    {
    "desired": {
    "boxStatus": "open"
    },
    "reported": {
    "boxStatus": "open"
    }
    }
    desired: {
    “boxStatus”: “open”
    }
    reported: {
    “boxStatus”: “open”
    }

    View Slide

  6. 動画
    使用技術
    ● ハードウェア
    ○ M5Stack Core2 for AWS
    ○ Free RTOS
    ● バックエンド
    ○ AWS Cognito
    ○ AWS IoT
    ● フロントエンド
    ○ Amplify
    ○ React
    ○ Material UI

    View Slide

  7. スマートボックスとは
    ● 箱の開閉をスマートに制御できる
    ○ PC・スマホのアプリを用いた開閉制御
    ○ 箱の開閉者の認証
    ● 箱の状態管理ができる
    ○ GPSを使った位置情報のトラッキング
    ○ 内包物の状態の確認
    つまりは、KASHIKOIHAKOのことをいう

    View Slide

  8. 今回のテーマ
    アプリをPWAに対応してみた

    View Slide

  9. PWAとは
    プログレッシブウェブアプリProgressive web apps (PWA) は、ウェブアプリケーション
    にネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。
    主に2つの要素でPWAを実現します。
    ● サービスワーカー
    ● ウェブマニフェスト

    View Slide

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

    View Slide

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

    View Slide

  12. PWAに対応してみた

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide