Amplify Studioの起動
AWSのコンソールからAmplifyを起動する
AWSのコンソールからGithubに接続を押す
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/f5e62211720048eaa173643a508d997a/image.png)
接続が完了したら、サービスロールを新規作成して、保存してデプロイをクリック(すでにロールがあれば、それを選択する)
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/5903c766761042169b9985a68d5eee3d/image.png)
続行をクリック
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/d1f0c9e7add8433fae8b016b0227e459/image.png)
デプロイが完了したら、Backend environmentのタブからStudioを起動するをクリック
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/4d9d11d3d4e64c6fa604625b0c70d1ce/image.png)
データモデルの定義
後程作成するUIコンポーネントとデータをバインドすることができる(このツールを使いこなすには、データモデルの使い方をしっかり理解する必要がありそう...)
Amplify StudioサイドメニューのDataを選択し、「Add model」をクリックして、モデルを定義し、「Save and deploy」をクリック
(図は、データモデルが作成された後の一覧です。)
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/649bb9f272454f929c4c967b4b8696c9/image.png)
データモデルの各フィールドには、ランダムなサンプルデータを登録することが可能。サイドメニューのContentをクリックして開いた後、Auto-generate seed dataボタンをクリックして、データベースにランダムなサンプルデータを生成するためのダイアログを開きます
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/fe108f9f75e94752a5ca22afa8985cf5/image.png)
この時、自動生成するデータの意味を正しく反映させるため、住所であることを制約として設定します。
ダイアログ内では、生成数を5に設定し、Add constraintをクリックして、Field Nameでaddress, Range/settingでStreet addressを選択し、最後にGenerate Dataをクリックしてランダムデータを生成します。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/891dfe6b1a3c49b6ad86c4201e9cf80a/image.png)
image_urlフィールドに画像のURLを挿入(適当なurlでOK)
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/c74cf24838cd4bc2a09037fad81c75e3/image.png)
ここまでで、FigmaとAmplify Studioの間でコンポーネントを同期するための準備は完了です。
Figmaでデザインを用意し、AWSに取り込む
1からFigmaでデザインを作成してもよいのですが、今回は時間短縮のため、Amplify Studioの提供するFigmaファイルをクローンします
Figmaのページで、AWS Amplify UI Kitを検索し、選択
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/8050a579573b4459b2835772ee27e59d/image.png)
Pageから “Primitive“ を選択します。プリビルドされたコンポーネントを探す場合は、”My Components“を選択します。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/73a113820ac042e4ba4f55ea8be6557e/image.png)
今回は、プリビルドされた “CardC” を利用します。上部に画像が、下部にいくつかのテキスト要素を配置した自動レイアウトをサポートしたコンポーネントを利用します。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/86321a7eec6b4c7abc3a05f4272e40d8/image.png)
Amplify Studioに戻り、Figmaファイルのリンクを貼りつけて、Figmaファイル内の全てのFigmaコンポーネントをインポートします。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/42f38d00695447ddb437cebd7bde573a/image.png)
個別のコンポーネントを選択してインポートするか、右上のAccept Allボタンを使い、全てのコンポーネントをインポートします。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/d8a5612ce996412ab055fec4317b15b6/image.png)
UIコンポーネントをモデルと紐付ける
コンポーネントをデータモデルと紐付けてみましょう。コンポーネントを選択し、Configureをクリックします。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/e23dda3999924c8f93fb515d0581a9f8/image.png)
このUIコンポーネントエディターでは、コンポーネントのプロパティとそれに紐づくコンポーネントのUI要素を紐づけることができます。
Add propを選択
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/13a3d8c21e7b4616ac3db30c27215afe/image.png)
このアプリケーションでは、“home“プロパティを新しく追加して、Typeを”Home“とします。ここでは、先ほど定義しておいたデータモデルが選択できるようになっています。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/25fcb8d284bb43fcaf2269a38ffa44a3/image.png)
データモデルとコンポーネントの画像を紐付けるために、Elements treeからimageを選択し、子要素からsrcを選択し、‘home.image_url’を紐付けます。そうすると、コンポーネント上の要素(今回だと画像)が選択した内容に差しかわる
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/7a4598aa092246dd99ef08f58ca64526/image.png)
同様に、テキストを住所に紐づけたり、金額に関してはデータモデルをテキストを組み合わせる構文を使うこともできます。
また、コンポーネントのスケールが様々なデータに対応しているかどうか確認するためには、Suffle preview dataをクリックしてください。Amplify Studioが表示に利用するデータをシャッフルした上で、コンポーネントにライブデータを入力してくれます
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/50e99bee95ae4ee086eb88e2eedafdcb/image.png)
コレクション
UI Libraryから繰り返しアイテムの、リスト(コンポーネントの集まり)を作成することができるようですが、今回は割愛します...
UIコンポーネントをReactAppに取り込む
Forkしたリポジトリクローンする
git clone git@github.com:<GITHUB_USERNAME>/amplify-homes.git
cd amplify-homes/
Amplify プロジェクトを初めてローカルでセットアップする場合は、次のコマンドを実行して Amplify CLI をインストールする必要があります
npm install -g @aws-amplify/cli
npm install aws-amplify @aws-amplify/ui-react
すべてのnpm依存関係をローカルにインストールする
npm install
Studio上で、Get component codeをクリック
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/85e5c2d0178f4b0cae79cc66fd02e957/image.png)
ダイアログの手順で実行する。まずはUI コンポーネントをアプリのコードベースにプルします。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/aa5ac891d99e47a28a1641ceb91b9e68/image.png)
エディターやら使用フレームワークやらいろいろ聞かれるので、順次選択
? Choose your default editor: (Use arrow keys)
> Visual Studio Code
Android Studio
Xcode (Mac OS only)
Atom Editor
Sublime Text
IntelliJ IDEA
Vim (via Terminal, Mac OS only)
(Move up and down to reveal more choices)
? Choose the type of app that you're building
android
flutter
ios
> javascript
? What javascript framework are you using (Use arrow keys)
angular
ember
ionic
> react
react-native
vue
none
? Source Directory Path: (src)
? Distribution Directory Path: (build)
? Build Command: (npm.cmd run-script build)
? Start Command: (npm.cmd run-script start)
? Do you plan on modifying this backend? Yes
/ Fetching updates to backend environment: devm from the cloud.
amplify pull後、React のコードベースにいくつかの重要なファイルが追加される
- 「ui-components/」には、Figma ファイルのすべての UI コンポーネントが React コードとして含まれています
- 「models/」にはデータモデルのローカル表現操作を行える処理が含まれており、DataStore で使用してアプリデータのフェッチ、更新、サブスクライブを行うことができます。
- 「aws-exports.js」は、API エンドポイント、API キー、Amazon Cognito ユーザープール ID など、バックエンド接続の詳細をすべて定義します。
UI コンポーネントをアプリに追加する。App.js に移動し、UI コンポーネントをインポートします。次に、それらを render 関数に配置します。App.js ファイルは次のようになります。
src\App.js
import './App.css';
import { CardC } from './ui-components';
function App() {
return (
<div className="App">
<CardC />
</div>
);
}
export default App;
開発用サーバー起動
npm run start // ここでエラーが出る場合はnode_modulesディレクトリがあるか確認し、なければnpm installを再度実行してからyarn startする
ブラウザでhttp://localhost:3000/が開き、作成したコンポーネントが表示されていればOK以上です。
とても便利だとは思うのですが、個人的には作成したコンポーネントのpropsの書き方が若干癖があるなと思いました...
<Flex
padding="0px 0px 0px 0px"
backgroundColor="rgba(255,255,255,1)"
gap="0"
width="320px"
position="relative"
justifyContent="center"
direction="column"
{...rest}
{...getOverrideProps(overrides, "Flex")}
>
<Image
padding="0px 0px 0px 0px"
alignSelf="stretch"
shrink="0"
amplifyを使いこなすには、前述のデータモデルや各コンポーネントのpropsの構成等をしっかり理解しておく必要があると感じました。
まとめ
いかがでしたでしょうか。本記事では、AWS AmplifyとFigmaを連携させて、Reactコンポーネントを生成する方法について紹介しています。簡単な操作だけでFigmaで作成したデザインをReactのコンポーネントとして生成できて便利なのでぜひ参考にしてみてください