AWS Amplify Admin UI を使ってゲームデータを管理してみる

2022-04-10AWS Amplify,IT記事Admin UI,AWS Amplify

追記(2021/12/11)—

更新によりAdmin UIはAdmin Studioへと名前を変えています。

AWS AmplifyのAdmin UIを使ってゲーム内のコンテンツデータを管理してみる。データを変更しやすくなったりするだろうか?

今回できたゲーム。ホロライブ名前当てゲームはこちら

https://main.d3fbxa8hujijs9.amplifyapp.com/

Admin UI

まずAdmin UIについて。

AWS AmplifyにはAdmin UIという”UI”でデータのモデリングやコンテンツの作成や認証機能・管理者などの管理をできるツールがある。

Admin UI起動の仕方

アプリページから起動すると使える。

AWS Amplify Consoleにブラウザでアクセス。> アプリを選択。> アプリの画面のBackend environmentsタブをクリック > Admin UIを使うボタンをクリック。これでAdmin UIを起動できる。

なにか不具合が出たら、メニューのAdmin UI managementからoffにして見なかったことにできる。

(メニューのAdmin UI managementからonにして起動してうまくいかなかったら、 Backend environmentsタブ からいったほうがよい

モデリング

set upのDataからデータモデリングができる。

UIなので基本的な使い方は何となく分かるが、まだList型とかカスタムタイプまわりがよくわからない。

関係あたりはイメージ通り。

モデリングをしたあとSave and deployを押すとモデルからテーブルが作成される。

UIからローカルへ

UIからデプロイしたあと、ローカルからpullコマンドでローカル側に反映することができる。コマンドは画面右上のLocal setup instructionsなどをクリックするとわかる。

amplify pull --appId ### --envName dev

ローカルからUIぺ

逆にローカルでスキーマファイルを編集してからpushして、UI側でdeployボタンを押すとAdmin UIの画面へ反映される。

List型とかAdmin UIから作る方法がわからなかったのでローカルでスキーマを書いてからpushすることに。

コンテンツ

メニューのContentという項目を押すと、テーブルにデータを入れることができる。

今回は主にゲームの問題文の作成、管理に使ってみた。

テーブルを選んで、Create テーブル名ボタンを押すと項目に入力していく感じで作れる。

メモ

・ランダム値を入力できる。Actionsの項目からauto-generateを選択すると、StringとかIntにランダムな文字列や数字を入れて複数作成してくれる。(1:1対応の他の型とのリンクとかはしてくれない。

・文字列の項目ではマークダウン記法での入力も可能。簡単なブログ記事とかならこれで書けということだろう。

・CSVデータを連続で流し込んだりとかはできない?。

ゲーム側実装

ゲームの実装では、ゲーム起動時にGrapahQLでデータを全部取るようにした。

Storage を作る

Admin UIから離れるが、AmplifyではStorageというコマンドでS3を管理することができる。今回はゲームの画像データをS3にいれることにしたのでStorageを作る必要がある。

Storageはローカルからamplify add storageというコマンドをして質問に答えていくと作成される

amplify add storage

ゲストもreadできるように設定する。

コマンドで作成したあと、Admin UIのStorageのメニューを押すと、作ったStorageリソースが並ぶ。Admin UI側で出来ることはそれだけ。とくにAdmin UIからストレージをいじったりする機能はない。(追記 アプデで権限の管理が出来るようになっている

並んだStorageリソースをクリックするとS3に飛ぶ。

S3 でのフォルダ管理について

S3画面でpublicというフォルダを作ってその配下に画像ファイルを入れると、画像が全体公開になる。

あとはファイル名をAmplifyのJSライブラリのStorage.getすると取得することができる。

await Storage.get(ファイル名);

S3には画像データを複数一度にアップロードできるのでホロライブサイトから複数選択して…ゴニョゴニョ…(今回作るのサンプルサイトだし許して…)。

ゲーム側実装

ゲーム側実装では、Storage.getで返ってくるのはキャッシュ機能のあるStorageオブジェクトで、そいつをimageタグのsourceに突っ込むと画像データに勝手にアクセスしてレンダリングされる、みたいな感じだったはず。

今回のまとめ

Admin UIの認証や管理者側の機能は使わず、Admin UIのコンテンツの管理機能を今回は触ってみた。

文字列や数字の変更だけであまりできることは少ないと感じた。でも個人的にはゲームデータの変更しようとする時、ソースコードの中を編集しにいくよりしやすいと感じる。

csvとか連番データを入れたりできないのでランダム作成以外は一つずつ手で作る必要がある。

あとローカルからpushすると、何故かモデル構築(deploy)ボタンを押せという画面になって、deploy時間を取られる。

Posted by opvel