LoginSignup
18
4

More than 1 year has passed since last update.

システムアイ Advent Calendar 2021Advent Calendar 2021Day 23systemi
@takekojiin株式会社システムアイ

【AWS初学者向け】AWS Amplify Studioをさわってみた

Last updated at Posted at 2021-12-22

はじめに

システムアイ Advent Calendar 2021 23日目の記事です。

2021年12月2日に発表されたAWSの新サービス『AWS Amplify Studio』（以降Amplify Studio）がテック系メディアを中心に話題になっていますね。
従来の『Amplify Admin UI』の後継ということですが特徴としては、

  • フルスタックのウェブアプリとモバイルアプリを構築するためのビジュアル開発環境
  • ブラウザのWebデザインツール『Figma』のデザインからReactコードを生成

などがあるようです。

「FigmaからReactコード生成」できる点が気になる、とAWSもReactも経験ほぼゼロな私が公式チュートリアルを参考に『Amplify Studio』をさわってみました。

なお、『Amplify Studio』については他のQiita Advent Calendarでも複数取り上げられていますが、本記事では“できるだけ丁寧に”心がけて解説しています。

ページは長いですが画像が多いのでさらっと読んでいただけます。（というかほぼ画像）

対象の読者

「公式のチュートリアルがよくわからない」
「（話題の）Amplify Studioって開発の現場で使えるの？」
「知らない単語が多いと読む気がなくなる」

という、（私のような）AWS初学者の方を対象としています。

チュートリアルではReactコードを生成しますが、Reactの知識は不要です。

チュートリアル

チュートリアルの大まかな流れとしては以下の通りです。

  1. Amplify Studioの環境構築
  2. Figma⇒Amplify Studio連携
  3. データモデル作成
  4. UIコンポーネントにデータバインド
  5. Reactコードのダウンロード

なお、以降のチュートリアルはおおむねAWSのAmplify Docsに沿った内容となっており、適宜補足して解説しています。AWS初学者以外の方で英語のドキュメントが読める方は直接参照してください。

それでは行きましょう。

Amplify Studioの環境構築

まずはhttps://aws.amazon.com/jp/console/ からAWSコンソールにログインします。

右上の「コンソールにサインイン」をクリックします。
00_2.jpg

アカウント情報を入力して「サインイン」をクリックします。
00.jpg

画面上部の検索窓に「amplify」を入力し、「AWS Amplify」を選択します。
01.jpg

画面下部にある『Amplify Studio』で「使用を開始する」をクリックします。
02.jpg

任意のアプリケーションの名前を入力し、「Confirm deployment」をクリックします。
03.jpg

デプロイが開始されます。
04.jpg

（通常は1）5分ほど待つと、デプロイされたアプリケーションの画面が表示されます。
09_IAM変更しても変わらず、できていたものを使ってみる.jpg

画面中央の「Backend environments」タブをクリックし、「Get started」をクリックします。
10.jpg

2分ほど待ちます。
11.jpg

完了すると以下画面になるため、「Studio を起動する」をクリックします。
12.jpg

Figma⇒Amplify Studio連携

ここからはAmplify Studioをさわっていきます。

この章ではFigmaのデザインをAmplify Studioに取り込みます。今回は『AWS Amplify UI Kit』というテンプレートを使用しますが、もちろんご自身で作成されたものを取り込むこともできます。

まずは画面左側の「UI Library（Preview）」をクリックします。
13.jpg

「Use our Figma template」をクリックしてFigmaにGoします。
14.jpg

「Duplicate」からAWS Amplify UI Kitを取り込み、URLをコピーします。

Figmaのアカウントが必要になります。

15_figma.jpg

FigmaのURLを貼り付け、「Continue」をクリックします。
15.jpg

「Allow access」をクリックしてFigma⇒Amplify Studio間の連携を許可します。
16.jpg

「Accept all」をクリックしてすべて取り込みます。
17.jpg

Successfullyが出ているので、取り込み成功。
Figmaのデザインと違うようにも見えますが…
18.jpg

FigmaのPages > My Componentsが取り込まれているようです。
19.jpg

データモデル作成

画面左側の「Data」をクリックし、Data modelingに進みます。
24.jpg

「Add model」をクリックし、フィールド名（Field name）と型（Type）を入力。
ここでは以下の通り入力しました。
　モデル名：Home
　Field name：id　Type：id
　Field name：address　Type：String
　Field name：price　Type：String
　Field name：image_url　Type：String

「Save and deploy」をクリックします。
25.jpg

「Deploy」をクリックします。
26.jpg

デプロイ中です。画面右上の「Deploying」からデプロイの進行状況が確認できます。
27.jpg

Deployedと出ているので、問題なくデプロイできたようです。
28.jpg

サンプルデータ作成

こちらの章では作成したデータモデルにサンプルデータを流し込めます。

画面左側から「Content」をクリックします。
29.jpg

「Actions」から「Auto-generate data」をクリックします。
30.jpg

自動で生成するデータを決めます。
ここでは以下のように入力しました。
　How many rows～：5
　Field Name：address　Range/setting：Street address

「Generate data」をクリックします。
32.jpg

自動生成されたレコードが確認できますね。

画像についてはサーバ上に公開していないため、後続のデータバインドでも画像はリンク切れ状態になります。表示切れさせない場合は実際にサーバにある画像URLの指定が必要になります。

33.jpg

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

この章ではFigmaで取り込んだコンポーネントと作成したデータ項目を紐づけます（データバインド）。

画面左側の「UI Library」をクリックします。
34.jpg

「CardB」を選択し、「Configure」をクリックします。
ここでは「CardB」コンポーネントに対して、作成した「Home」モデルを紐づけます。
35.jpg

画面右側の「Add prop」をクリックします。
36.jpg

親コンポーネントを設定します。
ここでは以下の通り入力しました。
　Name：home
　Type：Home

37.jpg

「Elements tree」から「$99 USD」を選択、「Add prop」をクリックして子コンポーネントのプロパティを設定します。
ここでは以下の通り設定しました。
　Prop：label
　Value：Price: $　 + ：home.price
38.jpg

先ほどと同様に「Elements tree」から「image」を選択、「Add prop」をクリックして子コンポーネントのプロパティを設定します。
ここでは以下の通り設定しました。
　Prop：src
　Value：home.image_url

次に「Create collection」をクリックします。
コレクションにより、コンポーネントを使ってレイアウトした画面を別のコンポーネントとして簡単に作成できます。
39.jpg

コレクション名を入力し、「Create」をクリックします。
40.jpg

データバインドしたコンポーネントが表示されました。
41.jpg

コレクションのレイアウトを変更します。
ここでは以下の通り設定しました。
　Type：Grid
　Columns：3
　margin：10px

41_collection.jpg

Reactコードのダウンロード

ここからはローカル環境を構築し、Amplify Studioで作成したReactコードをpull（ダウンロード）します。

なお、ローカルPCにNode.jsがインストールされていることが前提となります。
まだインストールされていない場合は、下記の記事などを参考にインストールしてください。
Node.jsをインストールする

また、エディターはVisual Studio Codeを使用しています。こちらは必須ではありませんが、必要に応じてインストールしてください。

参考までに私のNode.js、npmのバージョンは下記の通りです。
　Node.js：v16.13.1
　npm：8.1.2
44.jpg

まずはnpx create-react-appコマンドでReactアプリを用意します。

npx create-react-app studio-demo

51.jpg

アプリ作成後の画面。
52.jpg

Amplify Studioに戻ります。
54.jpg

画面右上の「Local setup instructions」をクリックします。
55.jpg

Amplify CLIをすでにインストール済の方はこちらは対応不要です。

「View Amplify CLI installation instructions」をクリックし、コマンドをコピーします。
56.jpg

Amplify CLIをすでにインストール済の方はこちらは対応不要です。

コマンドプロンプトでコピーしたコマンドを実行します。
57_2.jpg

再度『Amplify Studio』に戻り、amplify pull --appId XXXXXXXXXXXXXX --envName stagingをコピーします。
49.jpg

コマンドプロンプトでコピーしたコマンドを実行します。
63.jpg

ブラウザ上で『Amplify CLI』にログインしてよいか確認されるため「Yes」をクリックします。
64.jpg

成功しました。
65.jpg

場合によっては以下のようなWindows Defenderファイアウォールの警告がでるかもしれません。許可します。
66.jpg

デフォルトのエディターが聞かれます。Visual Studio Codeを選択します。
67.jpg

アプリの種類が聞かれます。javascriptを選択します。
68.jpg

利用するフレームワークが聞かれます。reactを選択します。
69.jpg

そのほかいくつか質問がありますが、すべてEnterキーで進めます。
71.jpg

成功しました。Yを入力しEnter。
72.jpg

完了です。
73.jpg

『Amplify Studio』で作成したコードがCloneされました。
74_2.jpg

以下のコマンドを実行し、必要なライブラリを取り込みます。

npm install aws-amplify @aws-amplify/ui-react

87_npm.jpg

完了。
88.jpg

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

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  # 追加初め
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)
  # 追加終わり

ReactDOM.render(
  # 省略

89.jpg

src/index.jsの<App />を<AmplifyProvider>で下記の通りラップします。

src/index.js
import React from 'react';
  # 省略
ReactDOM.render(
  <React.StrictMode>
    <AmplifyProvider>
      <App />
    </AmplifyProvider>
  # 省略

90.jpg

Node.jsを起動します。

npm run start

92.jpg

ローカル上で確認できました。
93.jpg

作成したコレクションコンポーネントに変更します。
src/App.jsのHeroLayout1をCardBCollectionに変更します。

src/App.js
import "./App.css"
import CardBCollection from "./ui-components/CardBCollection"

function App() {
  return (
    <div className="App">
      <CardBCollection />
    </div>
  )
}

export default App

94.jpg

作成したコレクションが確認できました。
95.jpg

以上がチュートリアルになります。

Amplify Studioをさわってみて

今回Amplify Studioをさわってみて、特徴にも書いた「FigmaのデザインからReactコードを生成」がかなり強力だなと。Reactコードの生成もさることながら、GUIでレイアウトの変更などもかなり容易だと感じました。
Amplify Studioによりデザイナー、フロントエンド開発者の領域や仕事のやり方を大きく可能性を秘めているかもしれません。

  1. 通常では、と記載したのは理由があり、私の環境では1時間たってもデプロイが完了しませんでした。完了はしませんでしたが、アプリは作成されていたため私の環境ではそのまま進めることができました。（IAMの設定も疑いましたが関係ありませんでした） ↩

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
Sign upLogin
18
4