ロコガイド テックブログ

「地域のくらしを、かしこく、たのしく」する、株式会社ロコガイドの社員がいろいろな記事を書いています。

「地域のくらしを、かしこく、たのしく」する、株式会社ロコガイドの社員がいろいろな記事を書いています。

Amplify Studio を触ってみた

f:id:daijiro_ma:20220304155220p:plain

こんにちは。最近家の近くにあるバッティングセンターに行ってストレスを発散している前山です。

昨年12月に AWS の re:Invent カンファレンスで発表された、Amplify Studio が個人的に気になっていたので、その Amplify Studio を触ってみて感じたことを書いていきます。

Amplify Studio とは

Amplify Studio は、Figma で作成されたデザインを人間が読める React UI コンポーネントコードに自動的に変換します。

image

引用: AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現 | Amazon Web Services ブログ

また、Amplify Studio 内で UI コンポーネントをアプリケーションのバックエンドに視覚的に接続でき、Web アプリケーションやモバイルアプリケーションを高速に構築できます。

やったこと・内容

私たちの運用しているトクバイというサービスでは、チラシの他に商品を単品で投稿してそれを一覧として掲載する機能があります。その商品一覧のサンプルを AWS Amplify UI Kit に用意されている Figma データを使って、コンポーネント化して Web アプリケーションにしてみるというのを試してみたいと思います。

データモデルを作成

まずアプリケーションを作成し、Amplify Studio を起動します。

f:id:daijiro_ma:20220304155424p:plain

次にデータモデルを作成し、データを UI コンポーネントにリンクできるようにします。このデータモデルを設定することで、動的なコンポーネントを生成することができます。今回は商品一覧ページを作成します。商品には画像と商品名と価格があるとします。

f:id:daijiro_ma:20220304155704p:plain

AWS Amplify UI Kit に用意されている Figma データを使って Figma と連携

次に Figma と連携します。AWS が提供している AWS Amplify UI Kit から Figma データのリンクをコピーして、AWS Amplify と連携します。

f:id:daijiro_ma:20220304155804p:plain

すると、Figma ファイルのすべてのコンポーネントがインポートされるので、それらを受け入れるか拒否することができます。今回は全てのコンポーネントを Accept します。

f:id:daijiro_ma:20220304160140j:plain

コンポーネントの設定

作成したデータモデルとインポートしたコンポーネントの紐付けをおこないます。コンポーネントを選択して、各プロパティに作成したデータモデルをリンクさせます。画像は現時点ではランダムな画像が表示されます。

f:id:daijiro_ma:20220304155845j:plain

テストデータの作成

次にテストデータを作成します。テストデータは Content タブで作成できます。

f:id:daijiro_ma:20220304160237p:plain

作成したデータモデルに沿ったデータを作成します。

f:id:daijiro_ma:20220304160320p:plain

作成したら、設定したコンポーネントのページで Create collection すると、以下の画像のように、テストデータが表示されます。

f:id:daijiro_ma:20220304160349p:plain

コレクションの設定

Amplify Studio では、個々のコンポーネントを繰り返して表示するコレクションという機能があります。今回は、下記 gif 画像のように、グリットレイアウトにして、カード間の間隔を設定します。

f:id:daijiro_ma:20220304160426g:plain

React アプリケーションにコンポーネントを取り込む

最後に React アプリケーションに Amplify Studio で設定したコンポーネントを取り込みます。

まず、React プロジェクトを作成します。

$ npx create-react-app studio-demo

次に Amplify UI Components のパッケージをインストールします。

$ yarn add aws-amplify @aws-amplify/ui-react

次に「amplify pull」というコマンドでコンポーネントをインポートします。コマンドは、Amplify Studio 上に記載されています。

$ amplify pull --appId 'appId' --envName staging

f:id:daijiro_ma:20220304160530p:plain

インポートが終わると、ui-components ディレクトリの中に React コンポーネントコードがあります。ファイルを見ると、型定義ファイルも作成されていますね。

f:id:daijiro_ma:20220304160559p:plain

最後に Amplify Studio で設定したコンポーネントをローカル環境に表示します。

src/index.js に以下のコードを追加します。

import config from './aws-exports'
import Amplify from 'aws-amplify'

Amplify.configure(config)

次に src/App.js ファイルを以下のように編集します。

import './App.css';
import { AmplifyProvider } from '@aws-amplify/ui-react'
import { ProductCollection } from './ui-components'
import '@aws-amplify/ui-react/styles.css'

function App() {
  return (
    <AmplifyProvider>
      <ProductCollection />
    </AmplifyProvider>
  );
}

export default App;

<AmplifyProvider> でコンポーネントをラップすることで、コンポーネントを表示できます。

yarn start で起動して動作確認をします。

$ yarn start

下記画像のように、Amplify Studio で設定したコンポーネントが表示されたら成功です。

f:id:daijiro_ma:20220304160626p:plain

感想

Figma データを元に爆速で React コンポーネントコードを生成できるのはすごいなと感じました。現時点でロコガイドでは利用はしていませんが、新規事業や仮説検証においてプロトタイプを作る際は、非常に便利なサービスだと思いました。

ただ生成される React コンポーネントのコードが jsx でまだ TypeScript には対応していなさそうなので、今後のアップデートを Watch していきたいなと思います。