Zenn
🦁

Amplify Studioを触ってみる

2021/12/06に公開
AWS
Amplify
amplifystudio
tech

先週、テック記事を眺めていたらAWS Amplify Studioというローコードアプリ開発ツールが発表されているのを見つけた。
https://jp.techcrunch.com/2021/12/04/2021-12-02-aws-launches-amplify-studio-a-new-low-code-app-development-tool/

figmaで作ったUIを取り込んでReactコードを自動生成出来るらしい！へぇ〜、おもしれーじゃん。
ということで、実際に「figma作って取り込んでReactコンポーネントを取得・表示するところまで」やってみた。
なお、AWSもReactも超ド素人なのであしからず…。

大まかな作業の流れ

今回行う作業はざっくり以下のような流れになる

  1. データモデルを定義
  2. figmaからUI Componentを取り込む
  3. UI Componentのパーツとデータモデルの項目をマッピング
  4. Amplify pullでReactコード取得

それでは詳細な手順を見ていこう。

手順

AWS Amplify Studioを開始する

まずは、AWS上でアプリケーションを作成する必要がある。

  1. AWSでAmplifyと検索
    Untitled0

  2. 「新しいアプリケーション」から「アプリケーションをビルド」を選択
    Untitled1

  3. アプリケーションの名前を入力し、「Comfirm deployment」をクリック
    Untitled2

    しばらく待つ…
    Untitled3

  4. セットアップが完了すると、以下のような画面になる。「Studioを起動する」を選択する。
    Untitled4

データモデルを定義する

アプリ内で扱う情報のデータモデルを定義していく。
ここで定義したものは後の工程で画面パーツとマッピングします。
それと、このデータモデルを基にDynamoDBのテーブル定義やGraphqlのAPI定義も自動で作ってくれるっぽい。（すごい）

  1. サイドメニューから「Set up > Data」を選択する
    Untitled5

  2. 「Add model」をクリックして、モデルを定義し、「Save and deploy」をクリックする。今回はギャラリーアプリの中に表示するコンテンツをイメージして、「GalleryItem」というモデルを定義した。
    Untitled6
    デプロイには数分かかる模様
    Untitled7

UIライブラリを作成する

figmaと連携してUIライブラリを取り込み、後の工程でReactコードに変換できるようにする。

  1. figmaアカウントを作成して、figma上でWebパーツを描画していく
    Amplify Studioに取り込みたいものは「右クリック＞Create Component」でコンポーネント化しておく。
    Untitled10
    Untitled11

  2. Amplify Studioの「UI Library」をクリック。「Get started」をクリックする。
    Untitled12
    先程作ったfigmaのURLをペーストする
    Untitled13

  3. Amplify Studioに取り込みたいfigmaコンポーネントをAcceptしていく
    Untitled14

UIコンポーネントとデータモデルのマッピングを行う

UIコンポーネントの各要素とデータモデルの各項目の紐付けを行う。

  1. コンポーネントが取り込まれたら、Configureボタンをクリックする。
    Untitled15

  2. 以下の様な画面が表示されるので、データモデル項目とマッピングしたい画面要素をクリックして、プロパティを設定していく。（今回は画像要素をGalleryItemのimageUrlとマッピングさせます)
    Untitled16

    • 「Component properties」の「Name」・・・任意のプロパティ名を入力
    • 「Component properties」の「Type」・・・紐付けたいデータモデルを選択(今回はGalleryItem)
    • 「Child properties」の「Prop」・・・値を代入したいHTML属性を選択。
    • 「Child properties」の「Value」・・・紐付けたいデータモデル項目を選択(今回はGalleryItem内に定義したimageUrl)

    Untitled17

定義したUIコンポーネントをReactコードとして取り込む

figmaからUIコンポーネントを取り込んだことで、Reactコードが生成されるはず！実際のコードを見てみましょう。

  1. reactプロジェクトを作成する。

    npx create-react-app .
npm install aws-amplify @aws-amplify/ui-react

  2. amplifyからソースを取得する。

    # amplify cliをインストール
npm install -g @aws-amplify/cli
# amplify studioページ右上の「Local setup instrucitons」に書かれているコマンド
amplify pull --appId ***** --envName staging

    ログインを要求されたあと、確認ダイアログが出るのでYesを選択。
    Untitled18

  3. コンソールで質問に回答していく。

    % amplify pull --appId *** --envName staging
Opening link: https://****.amplifyapp.com/admin/****/staging/verify/
✔ Successfully received Amplify Studio tokens.
Amplify AppID found: ***. Amplify App name is: ****
Backend environment staging found in Amplify Console app: ***
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
✔ Synced UI components.
GraphQL schema compiled successfully.
...
Successfully pulled backend environment staging from the cloud.
Run 'amplify pull' to sync future upstream changes.

    自動生成されたソースが取り込まれた
    Untitled19
    Untitled20

自動生成されたコンポーネントを画面に表示してみる

実際に作ったGalleryItemコンポーネントを画面に出してみよう。

GalleryItemコンポーネントのソースを見てみるとsrc={GalleryItem?.imageUrl}となっているので、親コンポーネントからGalleryItemというpropを渡してあげればいいっぽい。

<Image
padding="0px 0px 0px 0px"
top="0px"
left="0px"
src={GalleryItem?.imageUrl}
width="200px"
position="absolute"
height="157px"
{...getOverrideProps(overrides, "View.Image[0]")}
></Image>

つまりApp.jsをこうする。

import "./App.css";
import GalleryItem from "./ui-components/GalleryItem";

function App() {
  const item = {
    title: "キャットタワーにて",
    imageUrl:
      "https://images.unsplash.com/photo-1636543132856-8e2d31a79082?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzODYwNDY1OQ&ixlib=rb-1.2.1&q=80&w=1080",
    category: "cute",
  };
  return (
    <div className="App">
      <GalleryItem GalleryItem={item}></GalleryItem>
    </div>
  );
}

export default App;

で、出た…！

じゃあ、後はAmplifyで自動生成されたGraphQLのAPIを使ってコンテンツを取得してきてGalleryItemをいっぱい並べればフォトアルバムみたいに出来るぞ〜〜〜！！！
と、ここまでやって、データを取得する方法が分からず時間と体力が尽きました。
誰か親切な方教えてください…。

実際に使ってみて

Reactコードが自動生成できるのは便利かと思ったけど、生成されたコードに対してロジックを追加したりできない(figmaと同期したら上書きされてしまうため)のは辛いかもなと思った。実際にこれを使って開発して保守し続けるイメージはあまり沸かなかった。
本当に小さいアプリケーションを作るときや、サービス立ち上げ段階にモック的な動くものをパパッと動くもの作りたいときなら良いのかな…？

いかんせんAmplifyの知識が乏しいので、今後もちょくちょく触ってみて分かった事があれば記事を更新していきたいと思う。

Discussion