Amplify Studioを使ってみた｜ミツエーリンクスTSD

Amplify Studioを使ってみたミツエーリンクスTSD プロダクトマネジメント部古川佑紀

Amplify Studioとは 1

Amplify StudioがAWS re:Invent 2021で発表されました 2 https://aws.amazon.com/jp/about-aws/whats-new/2021/12/aws-announces-aws-amplify-studio/

Amplify Studioとは？ 3 • ローコードのアプリ開発ツール • Figmaと連携してUI開発を最小のコーディングで行いつつ、簡単かつ高速にバックエンドを構築できる • これまでのAmplify
Admin UI は、Amplify Studio に統合された • 東京をはじめ17のリージョンでパブリックプレビューとして利用可能（22/01/31現在）

Amplify Studioデモ 4

かんたん5ステップで爆速アプリ開発！ 5 1. Amplify Studioを起動 2. データモデルを定義 3. データを投入 4.
Figmaと連携 5. UIコンポーネントとデータを接続

1. Amplify Studioを起動 6 メニューの「Amplify Studioの設定」から、Amplify Studioを有効化、起動する。

2. データモデルを定義 7 データモデルを定義して、「Save and deploy」をクリック

3. データを投入 8 「Content」に移動して、シードデータの自動作成ボタンをクリック

9 シードデータの数を入力して、ボタンをクリック

4. Figmaと連携 11 「UI Library 」から、 Get startedをクリック

12 FigmaのURLを入力後、ボタンをクリック

13 Amplify Studioで管理するコンポーネントを選択

5. UIコンポーネントとデータを接続 14 コンポーネントを編集するため、ボタンをクリック

15 コンポーネントにデータをバインド

16 データのプレビューもできる

17 リストも作成可能

18 リストのスタイルを調整

アプリケーションへの読み込み方法 19 ボタンをクリックすると、コンポーネントを読み込むためのコードが確認できる

20 1. 依存関係のライブラリを読み込む npm install aws-amplify @aws-amplify/ui-react 2. index.jsに以下のコードをコピペ import
Amplify from 'aws-amplify'; import "@aws-amplify/ui-react/styles.css"; import {AmplifyProvider} from "@aws-amplify/ui- react"; import awsconfig from './aws-exports'; Amplify.configure(awsconfig);

21 3. <App />を<AmplifyProvider />で囲う <AmplifyProvider> <App /> </AmplifyProvider> 4.
ローカル環境をアップデート amplify pull --appId <app id> --envName <env> 5. アプリケーションに設置 import { FAQItem } from './ui-components’; <FAQItem />

まとめ 22

• よりクリエイティブな仕事に集中できる – コンポーネントを作る手間が省け、Webアプリケーションの機能設計や改善など、ダイレクトに価値に繋がる業務に注力できる • デザイナーと開発者の距離がぐっと縮まりFBループを回しやすくなる – 開発サイクルを早くまわしてより高品質なアプリケーションを作成できる –
高速でサイクルを回すことによって正解に近づくやり方の体現 • ただしAWS Amplify Studio の UI 開発機能は現在公開プレビュー中 – 一日も早い、一般提供開始（GA）が待ち望まれます Amplify Studioの良いところ 23

ご清聴ありがとうございました！ 24

Amplify Studioを使ってみた｜ミツエーリンクスTSD

Amplify Studioを使ってみた｜ミツエーリンクスTSD

ミツエーリンクスTSD

More Decks by ミツエーリンクスTSD

Other Decks in Technology

Featured

Transcript