Amplify Studioを使ってみた

Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
Amplify Studioを使ってみた
虎の穴ラボ株式会社西志村友基
2022/02/16 フロントエンドLT会 - vol.6
1

自己紹介
西志村　友基
● 所属：虎の穴ラボ株式会社
● 担当：Fantiaなど
● 入社理由：
○ BtoCサービスに関わりたい
○ 一生に一度はオタク業界に関わりたい
● 趣味：アニメ鑑賞、ゲーム、競馬
2

話すこと
● AWS Amplify Studioとは
● AWS Amplify Studioを触ってみる
● AWS Amplify Studioの機能
● まとめ
● 過去の発表のご紹介
3

話すこと
● まとめ
4

話すこと
● まとめ
5

AWS Amplify Studioとは
Reactで開発するとき...
UIデザインツールでデザイン作成
Reactのコーディング (HTML / CSS)
デザインしたものを基に
Reactコンポーネントの実装が必要
6

Figmaで作成したデザインをReactのコードに自動的に変換！
7

● かつてAmplify Admin UIと呼ばれていた機能にフロントエンドの管理機能が追加
● UIデザインツールのFigmaと連携、Reactコンポーネントを自動生成できる
● Webコンソールで設定できる
● 現在はプレビュー版
Amplify Admin UI Figmaとの連携
AWS Amplify Studio
8

話すこと
● まとめ
9

Amplify Studio使ってみる
AWS コンソールでAmplify StudioをONにする
10

Figmaと連携
Amplify StudioにUI Libraryメニューが追加されています
11

Figmaと連携
Amplify UI Kit
12

Figmaとの連携
Figmaにてコンポーネントを作成します。
1から作ることもできますし
AWS Amplify UI Kitを利用することも
できます
13

Figmaと連携
FigmaのURLを入力
14

コンポーネントの取込
必要なコンポーネントだけ取
り込める
15

コンポーネントをReactのソースコードに変換
以下のコマンドを実行
以下のファイルが生成される
$ amplify pull
./src/
└── ui-components
├── NavBar.jsx
├── NavBar.jsx.d.ts
└── index.js
※AWS Amplify UI KitのHeaderを取り込んだ場合
16

話すこと
● まとめ
17

AWS Amplify Studioの機能
1. パラメータの設定
2. Collection
3. スタイルの設定
4. クリックイベントの追加
18

パラメータの設定
必要なコンポーネントだけ取り込める
データの値をマッピング
19

Collection
取り込んだコンポーネントの
レイアウトを作成できる
20

コンポーネントの操作（スタイルの設定）
AWS Amplify UI KitのHeaderコンポーネントに設定を加えてみます
21

コンポーネントの操作（スタイルの設定）
生成されたコードは上書きされてしまうので、直接はいじれない
以下のように設定する
import {NavBar} from './ui-components';
function App() {
return (
<div className="App">
<NavBar width={"100vw"} />
</div>
);
}
画面の幅に合わせる
22

コンポーネントの操作（クリックイベント）
生成されたコンポーネント(NavBar.jsx)に記載されているパラメータを確認
<Text
fontFamily="Inter"
fontSize="16px"
fontWeight="400"
~~~~~
children="Dashboard"
{...getOverrideProps(overrides, "Flex.Flex[1].Text[0]")}
></Text>
23

パラメータを指定してクリックイベントを実装
import {NavBar} from './ui-components';
function App() {
const overrides = {
"Flex.Flex[0]": {
onClick: () => alert('ロゴがクリックされた
')
},
"Flex.Flex[1].Text[0]": {
onClick: () => alert('ダッシュボードがクリックされた
')
},
}
return (
<div className="App">
<NavBar width={"100vw"} overrides={overrides} />
</div>
);
}
24

クリックしたらアラートを表示
25

話すこと
● まとめ
26

Amplify Studioを使うメリット
● Figmaで作ったコンポーネントをReactのコードに自動変換できる
● デザインの知識が乏しいエンジニアにもある程度きれいなアプリが作れる
● アイデアを低いハードルで形にできる
27

Amplify Studioを使うデメリット
● 自動生成されたコンポーネントは直接いじれない
→Figma or Amplifyで調整が必要
　　　(デザイナーが別にいる場合、役割分担に注意)
● コンポーネントの実装に多少くせがある
28

まとめ
● UIデザインからReactコンポーネントに自動で変換！
● アイデアを短時間でプロダクトにすることができる
● デザインから実装まで一貫して開発する方におすすめ
● デザインの知識の少ない自分にとってはかなり期待できるサービス
29

過去の発表のご紹介
Next.js + AWS Amplifyを使った開発について
（虎の穴のブログ）
AWS Amplifyの過去の発表資料
（スライド）
30

Amplify Studioを使ってみた

More Related Content

What's hot (20)

Similar to Amplify Studioを使ってみた (10)

More from 虎の穴開発室 (20)