AWS Amplify と Amazon Rekognition を使って施設の混雑状況をモニタリングするアプリを作ってみよう !
Author : 水馬 拓也
こんにちは。プロトタイピング ソリューションアーキテクト の水馬です。
皆さんは、ランチタイムの食堂、通勤ラッシュ時の駅のホーム、役所や図書館などの公共施設で、なるべく混雑は避けたいけれどいつ空いているのかがわからない・・・。そんな経験はないでしょうか？
今回は、AWS Amplify と Amazon Rekognition を使って施設の混雑状況をリアルタイムに知ることができるサーバレス Web アプリケーションを作っていきたいと思います。
デモ動画
いきなりですが今回の完成品はこんな感じになります。
AWSのコワーキングスペースである AWS Loft Tokyo で混雑状況をモニタリングする実験を行ってみました。
上のデモではPCのWebカメラで定期的に施設の画像を撮影しています(画面左)。Web カメラで撮影された画像はクラウドに送信され、Amazon Rekognition が画像に映った人数をカウントしています。その結果を元に Amazon AppSync を使ってリアルタイムにスマートフォン (画面右) に反映しています。少し文字が小さいですが、画面に写っている人数を正しくカウントできているのがおわかりいただけると思います。Web カメラは定期的に (デモでは 1 秒に 1 回の頻度で) 画像を撮影しています。これらの仕組みを AWS Amplify のクライアントライブラリで実装しています。
アーキテクチャは以下のようになります。
また、これらのバックエンドは Amplify CLI を用いることで、マネジメントコンソールからインフラを一つ一つ構築することなく、CLI 操作だけで完結させることができます。
AWS Amplify について
今回アプリケーションの開発に使用する AWS Amplify についておさらいしていきます。
Amplify とはサーバーレスなバックエンドをセットアップするための CLI、フロントエンドで利用できる UI コンポーネント、CI/CD やホスティングのためのコンソールを含む Web およびモバイルアプリ開発のためのフレームワークです。
Amplify は以下 3 つのサービスで構成されています。
- Amplify CLI
- Amplify Framework
- Amplify Console
Amplify CLI
Amplify CLI はコマンドラインで AWS のバックエンドを構築できるインターフェースです。AWS のバックエンドを構築するにはマネジメントコンソールから開発を行う方法や、Cloudformation など Infrastracture as a Code の仕組みを用いる必要がありました。 Amplify CLI を用いれば コマンドラインから対話形式にバックエンドを構築できます。Amplify CLI はバックエンドの構築だけでなく、バックエンドとの連携に必要な設定ファイルやソースコードを自動で 生成 してくれます。 Amplify Framework と合わせて使用することで、極めて少ない工数で認証、ストレージ、API、プッシュ通知といった基盤を構築することができ、開発者は本質的な課題に集中することができます。
Amplify Framework
Amplify Framework は、AWS のバックエンドと連携する処理を極めて少ない行数で記述できる Framework です。 iOS、Android、Web (React / Vue / Angular)、React Native にそれぞれ最適化されたインターフェースを提供します。先ほど紹介した Amplify CLI と統合することで、認証やファイルストレージ (S3) へのアクセス、Websocket の利用、AppSync や API Gateway ＋ Lambda とのやりとりを極めて簡単に実装することができます。
Amplify Console
Amplify Console は SPA (シングルページアプリケーション) や静的サイトのホスティング、CI/CD の運用を自動化するマネージドサービスです。 Github や AWS CodeCommit のようなソースリポジトリと連携し、CI/CD の仕組みを数クリックで構築することができます。また、ブランチごとにテスト環境を自動で構築したり、特定の環境のみ Basic 認証を付与するといった、柔軟な開発フローの設計が可能なサービスです。 Amplify Console と銘打っていますが、静的サイトであれば Amplify を用いなくても使用できるサービスです。
今回の開発スコープ
今回は Amplify CLI を用いて、いかに簡単にバックエンドを構築できるかを体験いただきます。アプリケーションのソースコードはこちらからダウンロードできます。
開発環境の前提条件
以下の環境が整っていることを確認してください
- Administrator権限でアクセスできるAWSアカウントがあること
- npm が利用可能であること
今回資料する技術スタック
フロントエンド
- React (16.12.0)
- Typescript (3.7.4)
CLI
- Amplify CLI (4.16.0)
- create-react-app (3.4.0)
Amplify CLI のセットアップ
次に Amplify CLI のセットアップを行います。
npm install -g @aws-amplify/cliバージョン情報が表示されれば Amplify CLI のインストールは成功です。
amplify --versionアプリケーションのセットアップ
こちらからアプリケーションのソースコードをダウンロードします。ダウンロードしたファイルを解凍し、フォルダ内のディレクトリに移動します。
unzip <*** ダウンロードしたZIPファイル ***>
cd <*** 解凍したディレクトリ ***>プロジェクトフォルダに移動したら、必要なパッケージをインストールします。
npm installエラー無く処理が完了したら成功です。
バックエンド構築のための設定
次にバックエンドにアクセスするための設定を行います。Amplify CLI がバックエンドに接続できるようにするための IAM ユーザの作成と認証情報の設定を行います。
amplify configureEnter キーを押すと使用するリージョンや IAM ユーザー名を訊かれます。リージョンには us-east-1 を選択し、他は全てデフォルトを指定します。https://console.aws.amazon.com/iam/~~ から始まる URL が発行されるので、別のブラウザでこの URL にアクセスします。
※ この時、すでに AWS のクレデンシャルをお持ちの方は、マネジメントコンソールで IAM ユーザーを作成する手順をスキップしてください。ターミナルで Enter キーを押下し、既にお持ちのクレデンシャルを入力してください。
画面に沿って IAM ユーザーを作成します。特に選択肢や設定を変更する必要はなく、次に進めていきます。
ユーザー作成完了後、アクセスキー ID とシークレットアクセスキーが発行されるので、これをメモします。シークレットアクセスキーは一度画面を閉じると、二度と確認できなくなってしまうので、忘れずにメモしてください。
ターミナルに戻り、Enter キーを押します。アクセスキー ID、シークレットアクセスキー を訊かれるので、ブラウザの IAM ユーザー作成完了画面に表示されているものをコピーしてください。
Profile Name はデフォルト（default）のままでも OK です。もし、既に Profile の設定を持っている場合は、「amplifyapp」のようなわかりやすい名前をつけてください。
コンソール上に「Successfully set up the new user.」と表示されることを確認してください。
これで、作成した IAM ユーザーの権限で Amplify CLI からコマンドを発行できるようになりました。
Amplify CLI でバックエンドを構築する
本アプリケーションに必要なバックエンドを構築していきます。Amplify CLI では、対話的にバックエンドの構築を行うことができます。プロジェクトのトップディレクトリで amplify init コマンドを実行します。
amplify init途中いくつか質問をされます。基本的にはデフォルトの設定で OK です。「Enter a name for the environment」には任意の環境名(dev や test など)を入力してください。
Amplify は、各 AWS サービスをそれぞれ個別に設定するのでなく、amplify init コマンドによって生成された src/aws-exports.js で設定を集中的、自動的に管理することをサポートしています。このファイルには、アプリケーションで利用する全てのリージョン情報やサービスのエンドポイント情報が含まれますが、amplify add コマンド等によって追加・更新された情報は amplify push コマンド実行時に自動的に反映されるため、開発者はファイルの中身を強く意識する必要はありません。
しばらくすると、init 処理が完了します。src/aws-exportsjs が存在することと、amplify status コマンドを発行し、以下のような表示になることを確認してください。
amplify status
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |認証基盤の設定
Amplify CLI を使ってAuth モジュールをセットアップします。
amplify add authいくつか質問されますが、全てデフォルトのまま設定を続けます。
AppSync 基盤の設定
Amplify CLI を使ってAPI 基盤 (AppSync) モジュールをセットアップします。
amplify add api途中いくつか質問をされるので、以下の設定以外はデフォルトの設定で進めます。
- Please select from one of the below mentioned services => GraphQL
- Choose an authorization type for the API Amazon => Amazon Cognito User Pool
の二つの箇所の選択を間違わないようにしてください。この設定で先ほど作成した Cognito の認証情報を持って AppSync の GraphQL API を呼び出すことができるようになります。
設定が完了すると amplify/backend/api/myamplifyproject/schema.graphql ファイルが作成されます。このファイルは、AppSyncのスキーマを定義するファイルです。今回は施設の混雑状況をモニタリングするためのスキーマを作成したいと思います。schema.graphql を以下のように修正してください。
enum RecordingStatus {
ACTIVE
INACTIVE
}
type Facility @model {
id: ID!
name: String!
numberOfPeople: Int!
description: String
recordingStatus: RecordingStatus
}このスキーマで施設の情報を管理します。それぞれの属性は以下のような意味を持ちます。
- id: 施設を一意に特定するための ID
- name: 施設の名前
- numberOfPeople: 施設にいる人の数
- description: 施設の説明文
- recordingStatus: モニタリングのカメラが起動中かどうかを示すステータス(ACTIVE / INACTIVE)
施設に設置されたカメラが有効になると、recordingStatus が Active になり、施設のモニタリングを開始します。アプリケーションはカメラに映った人数を判定し、numberOfPeople の値を更新することでリアルタイムに施設の人数をユーザーに通知します。
AI 基盤 (Amazon Rekognition) の設定
カメラに映った人数を把握するには、Amazon が提供する AI サービスの一つである「Amazon Rekognition」を用います。Amplify CLI を用いて Amazon Rekognition の構築を行います。
amplify add predictionsPrediction にはいくつかの AI に関する機能が存在します。今回はカメラで撮影した写真から特定の物体(人)を検知する機能を用いるため、「Identify」を選択します。
? Please select from one of the categories below
❯ Identify
Convert
Interpret
Infer
Learn More続いて「Identify Labels」を選択します。以降の設定は全てデフォルトを選択します。
? What would you like to identify?
Identify Text
Identify Entities
❯ Identify Labelsバックエンドへの反映
認証基盤である Cognito、GraphQL 基盤である AppSync、AI 基盤である Rekognition の設定を行いました。この設定をバックエンドに反映します。
amplify push途中いくつか質問をされますが、「Choose the code generation language target」の項目で typescript を選択することに注意し、他は全てデフォルトを選択します。
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target
javascript
❯ typescript <-- typescript を選択！
flowここで typescript を選択することで Amplify は src/API.ts というファイルを出力します。このファイルには AppSync にアクセスするためのソースコードが記述されています。しばらくすると、バックエンドの構築が完了します。バックエンドの設定が src/aws-exportsjs に書き込まれていることを確認します。
これでバックエンドの構築は完了です。
アプリケーションを実行し、アカウントを作成する
以下のコマンドを発行し、アプリケーションを起動させます
npm startnpm start でアプリケーションを起動し、次のようにログイン画面が表示されていれば成功です。
「Create account」ボタンを押下し、ユーザーを作成します。
ユーザー名、パスワード、Email、電話番号を入力し、ユーザーを作成します。
入力した Email に検証コードが送信されるので、コードを正しく入力すると、ユーザーが Activate されます。
再度、ログイン画面に戻ってくるので、先ほど作成したユーザ名とパスワードでログインしてみましょう。
「Hello ユーザ名」と「Sign out」ボタン、施設の画面が表示されていれば成功です。
動作が確認できたら、一度「SIGN OUT」ボタンを押下して、再びログイン画面に戻ることを確認してください。
管理者のみ管理画面にアクセスできるようにする
施設に端末を配置し、カメラを起動できるユーザは、施設の管理者のみアクセスできるよう権限の設定を行います。Cognito はユーザーを特定のグループに所属させることができます。admin グループを作成し、このグループに参加しているユーザーのみカメラを起動する画面に遷移できるよう実装してみましょう。
Cognito のマネジメントコンソールにアクセスし、admin グループを作成します。
以下の URL にアクセスし、作成したユーザープールを選択します。
https://us-east-1.console.aws.amazon.com/cognito/users/?region=us-east-1
「ユーザーとグループ」 > 「グループ」タブを選択して「グループの作成」を選択します。
グループ名に「admin」と入力し、「グループの作成」ボタンを押下します。
「ユーザーとグループ」 > 「グループ」タブを選択して「admin」グループが作成されていることを確認します。
「ユーザーを追加する」ボタンを押下します。
先ほど作成したユーザーを admin グループに参加させます。
npm start でアプリケーションを起動し、先ほど作成したユーザーでログインします。以下のような画面が表示されれば成功です。
施設情報を登録する
ここまで来るとアプリケーションはほぼ完成です。最後に、施設情報を登録してアプリケーションの動作を確認してみましょう。
以下の URL から AppSync のマネジメントコンソールに移動し、施設情報の登録を行います。
https://us-east-1.console.aws.amazon.com/appsync/home?region=us-east-1#/apis
対象の AppSync の API を選択します。
「クエリ」>「ユーザープールでログイン」を選択します。
クエリの発行には、Client ID の入力と、先ほど作成したユーザー情報でのログインが必要になります。Client ID には src/aws-exports.js に記載されている aws_user_pools_web_client_id の値を入力します。
ログインが成功したら、施設情報を登録する Mutation を発行します。
mutation CreateFacility(
$input: CreateFacilityInput!
$condition: ModelFacilityConditionInput
) {
createFacility(input: $input, condition: $condition) {
id
}
}{
"input": {
"name": "Amazon カフェ",
"numberOfPeople": 0,
"description": "美味しいコーヒーはいかがですか？",
"recordingStatus": "INACTIVE"
}
}上記クエリとクエリ変数をマネジメントコンソールにコピー & ペーストします。Mutation が成功したら、施設 ID が返却されます。src/hooks/RekognitionWebCam.ts の < *** Replace your facility ID. ***>'; の箇所をこの施設 ID で置き換えます。
const useRekognitionWebCam = (props: Options) => {
// 実装の簡易化のため、Facility IDには固定値を指定
const targetFacilityId = '< *** Replace your facility ID. ***>'; <-- ここを施設IDで置き換える動作確認
さて、これでアプリケーションの実装は完了です ! 最後にアプリケーションの動作確認をしてみましょう。
ログイン画面の「Create account」ボタンを押下し、もう一人ユーザーを作成します。ここで作成したユーザーは Admin グループに所属しないユーザーとなるため、このユーザーでログインした場合、混雑状況を確認するスマートフォン用の画面に遷移します。
Admin グループに所属するユーザーで、施設の Recording を開始してみましょう。「Record」ボタンを押下すると、緑色のカメラボタンが表示されます。
Start ボタンを押下すると、施設の混雑状況の確認画面のステータスが ACTIVE になり、施設情報と人数が表示されます。カメラに映った人数がリアルタイムに画面に反映されることを確認してみてください。
【注意】この時、管理者アカウントと他のアカウントで別のブラウザを使うなどしてセッションを共有しないようにしてください。
Stop ボタンを押下すると、施設の混雑状況の確認画面のステータスが INACTIVE になり、施設の情報が表示されなくなります。
アプリケーションのデプロイ
最後にこのアプリケーションをデプロイしてみましょう。コマンドラインに amplify add hosting と打ち込むと、hosting 設定を追加することができます。Hosting with Amplify Console を選択すると、 Amplify Console を使ってデプロイを行うことができます。
amplify add hosting
? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
Amazon CloudFront and S3$ amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type
Continuous deployment (Git-based deployments)
❯ Manual deployment <-- こちらを選択しますamplify publish でアプリケーションをデプロイします。
amplify publish
? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
Amazon CloudFront and S3デプロイが完了すると、URL が発行されます。
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.dui6j3chl4gg4.amplifyapp.com <-- アプリがデプロイされたURLアプリケーションをクラウドにデプロイすることで、施設のモニタリング画面をスマートフォンで確認することができます。
あとかたづけ
バックエンドが残っている状態では、ごく僅かではありますが費用が発生します。アプリケーションの検証が終わったら、以下のコマンドを発行し、バックエンドを全て削除します。
amplify deleteいくつか質問をされますが、全てデフォルトを選択します。
まとめ
いかがでしたでしょうか？ Amplify を用いて簡単に Rekognition や AppSync と連携したサービスを構築できることがお分りいただけたと思います。
次回は、今回説明を省略したソースコードの解説を行いますので楽しみにしておいてください。Amplify ライブラリを用いた実装の解説を行うので楽しみにしていてください！
4/15 (水) ~ 4/17 (金) 18:00 ~ 3 夜連続で Amplify のハンズオンイベントを実施します！このハンズオンは 3 日間でスタートアップのシード / アーリー / ミドルステージまでを駆け抜ける超実践型のハンズオンです。「もっと Amplify について知りたい！」という方は是非このワークショップにもご参加ください！
筆者紹介
水馬 拓也 (みずま たくや)
アマゾン ウェブ サービス ジャパン合同会社
プロトタイピング ソリューションアーキテクト
2018 年に OPEN した AWS Loft Tokyo が好きすぎて毎日通っていたら、いつの間にか AWS に入社していました。普段はプロトタイピング SA としてお客様のアーキテクティング & プロトタイピングの支援をしております。
好きな AWS サービスは AWS Amplify。好きな言語は Javascript。好きなライブラリは React。趣味は週末の草野球とランニング。
さらに最新記事・デベロッパー向けイベントを検索
AWS を無料でお試しいただけます