Matsui Hidetoshi

1
0
/
2
4
/
2
0
2
0



3行で言うと



  • 浜松市ハッカソン 参加メンバーから徴兵されて 浜松フラワーパーク のWebアプリを作ることに
  • Amplify , Vue.js の組み合わせを初めてチームで取り入れて、素晴らしいってことを布教した
  • ほぼ完成したけど コロナウイルス の影響で流れた... コロナ が憎い

制作経緯



浜松ハッカソンに参加した知り合いから声をかけられ

  • 知り合いが 浜松ハッカソン に参加し、準優勝した
  • どうやら浜松フラワーパーク絡みで、 AI , IoT を活用した何かをやりたいらしい
  • Rekognition を使って何かしら面白いことはできそうだったので、植物の写真をアップロードして点数が出てくる様なゲームを作ることに

構成



詳細解説

  • フロントエンドは Amplify console から CloudFrontS3 を構成、 Vue CLI で作成したアプリケーション(PWA)をデプロイ
  • Amplify AuthCognito ユーザープールを作成し、認証機能を実装
  • ゲーム画面からカメラを起動し、 S3 バケットに画像をアップロード
  • 画像アップロード後、Lambda から Rekognition を呼び出してアップロードされた画像を解析し、お題のキーワードとの適合度をフロントエンド側に返す
  • フロントエンドで結果を受け取ったら、表示するとともに点数を Amplify API で追加した AppSync 経由で DynamoDB に格納する

使用技術

  • Vue.js
    • プロジェクトメンバーが気付いたら Vuetify を入れてくれており、UIコンポーネントが充実していてデザイン面は非常に捗った
    • 今回は Vue CLI を使ってプロジェクトを作ったが、初期設定で簡単に PWA にしたり、色々とプラグインもインストールできるので非常に便利
  • Amplify
    • フロントエンドアプリケーションを非常に簡単にデプロイできる
    • CI/CD パイプラインが自動で構築され、 Previews を使用すればプレビュー用サイトもプルリクエストベースで作成できる
    • それだけだったら Netlify と大差ないが、その他の AWS 各種サービスと非常に容易に連携でき、バックエンドも構築できる
  • Cognito
    • 割と煩雑なユーザー登録/認証機能を Amplify と組み合わせて爆速で作れる
    • 今回の場合、認証絡みのバックエンドのコードは一切必要としなかった
  • AppSync
    • GraphQL インターフェースのAPIを簡単な設定でデプロイできる
    • WebSocket を応用したクライアント側へのリアルタイムなデータ反映も対応
  • Lambda
    • API Gateway と接続すれば、プログラムコードを記述するだけで簡単にAPIを作成できる
    • AWS 上の各種リソースをプログラムから簡単に操作でき、今回は Amplify Auth で追加した Cognito ユーザープールをオーソライザとして設定し、認証済みユーザーのみアクセス可能なAPIにした
  • Rekognition
    • AWS が提供する画像解析サービスで、今回は画像に含まれるモノの名前や個数をデータとして返してくれる機能を活用し、ゲームの結果判定機能を実装

まとめ



  • DynamoDBAppSync と組み合わせた使い方をもっとちゃんとしたい
  • Rekognition Custom Labels なんかも極めたら非常に面白そう
© 2020   Matsui Hidetoshi