ちょっと話題の記事

AWS Amplify Studio パブリックプレビュー(2021/12/04版)をさわってみた

Figma 力を高めるのじゃ…

januswel

2021.12.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

[速報] AWS上でWeb/モバイル開発をローコードで実現する AWS Amplify Studio が発表されました！(パブリックプレビュー) #reInvent

Amplify StudioはFigmaと連携しており、Figmaで作成したデザインをReact UIコンポーネントに自動的に変換します。

近年のアプリケーション開発の高速化を支えている Amplify に UI 面の自動化がサポートされたら Amplify だけで開発が完結するのでは？これは気になる！ということで早速触ってみました。

公式の資料は次にまとまっています。

本記事では最後の記事に沿って UI Library に関するチュートリアルを実施し、得られた所感をお届けします。

Amplify Studio の環境を作る

Amplify Studio を触るために、まず環境を作る必要があります。

チュートリアル記事の中ほどにある Deploy with Amplify Hosting というボタンを押し、 GitHub 連携などしていくとサンプル用のプロジェクトをベースに Amplify にアプリケーションが作成されます。

新しく作成された amplify-home アプリケーションを開きます。さらにサイドバーの Amplify Studio Settings を開きましょう。

一番上の Enable Amplify Studio が On であることを確認し、中ほどにある Invite users からご自身のメールアドレスを指定してください。権限は Full access としておきましょう。

"Welcome to Amplify Studio | Your temporary account details" というタイトルで no-reply@verificationemail.com から暫定パスワードとともにメールが送られてきます。

一番下には環境が並んでいます。デフォルトでひとつ作成されるようです。右側の URL を直接クリックすることで Amplify Studio が起動します。

Amplify Studio が起動すると、ログイン画面が表示されます。こちらに先ほどメールで届いた暫定パスワードを入力し、ログインしましょう。ログインが成功すると新しいパスワードの入力を求められますので、十分にセキュアなものへ変更してください。

このように、 Amplify Studio の認証は AWS アカウントから独立しています。開発チームに AWS の知識を要求することがないので、フレキシブルなチーム構成が組めるのはメリットと感じました。

UI Library を触る

早速 UI Library を触りましょう !! マニュアル上では "Figma to code" のページです。

Amplify Studio の UI Library を開くと、 Figma のファイル URL を求められます。ここへ入力する値を取得するために、 Figma のデザインファイルを開き、右上の Share ボタンを押してください。

Copy Link を押し、ファイルの URL を取得します。この URL を Amplify Studio に渡すことで、デザインと UI コードが同期されるようです。

設定が終わると、 Amplify Studio に Figma のデータが流れ込んできます。うまく同期されたようです。

Figma と Amplify Studio 間でやりとりするデータは JSON のようです。

ちなみに同期したファイルはプライベートプロジェクトで作っていたデザインシステムです。中安とスキマ時間で作っているのですが、彼がきっちり作り込んでくれていたので素早く検証できました。この場を借りてありがとう！

UI Library で生成されたコンポーネントを使う

では作成されたコンポーネントを使って画面を作ってみます。適当なコンポーネントの Configure を開くと、画面下部に </> Get component code というボタンがあるのでそちらをクリック。すると次のような画面が表示されます。

Amplify CLI 経由で手元にコード生成させる手順となっています。さっそく一番上のコマンドを実行すると、 Python や JavaScript などの言語選択と React や Vue.js などの UI ライブラリーの選択を迫られます。この時点で、先ほどの JSON データからコンポーネントコードを生成しているようです。

次の外観を持つボタンのコードを生成してみます。

次のようになりました。

/***************************************************************************
 * The contents of this file were generated with Amplify FrontendManager.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 **************************************************************************/

/* eslint-disable */
import React from "react";
import { getOverrideProps } from "@aws-amplify/ui-react/internal";
import { Flex, Text } from "@aws-amplify/ui-react";
export default function Button(props) {
  const { label, overrides: overridesProp, ...rest } = props;
  const overrides = { ...overridesProp };
  return (
    <Flex
      padding="16px 16px 16px 16px"
      backgroundColor="rgba(85.0000025331974,188.0000039935112,173.00000488758087,1)"
      position="relative"
      label={label}
      gap="4px"
      direction="column"
      {...rest}
      {...getOverrideProps(overrides, "Flex")}
    >
      <Text
        padding="0px 0px 0px 0px"
        color="rgba(255,255,255,1)"
        textAlign="center"
        shrink="0"
        display="flex"
        justifyContent="center"
        fontFamily="Noto Sans JP"
        fontSize="18px"
        lineHeight="21.09375px"
        position="relative"
        fontWeight="700"
        direction="column"
        children="ボタン"
        {...getOverrideProps(overrides, "Flex.Text[0]")}
      ></Text>
    </Flex>
  );
}

スタイル情報がベタ書きになっています。 width なども固定されていて再利用が難しそうな雰囲気ですが、これは使用するときに上書きが可能となっているようです。

最上位コンポーネントの場合は変更したい props を指定するだけで良いとのこと。上の例では Flex コンポーネントが最上位なので、マニュアルに記載がある width や height props を指定することで変更が可能です。幅を 400px 、高さを 128px に変更する例は次となります。

<Button
  width={400}
  height={128}
/>

最上位以外のコンポーネントは overrides props を用いて書き換えるようです。上の例における Text コンポーネントを例にあげると、 Flex.Text[0] がこのコンポーネント内における該当コンポーネントの識別子となっています。これを使って、例えば次のように上書きが可能です。この例では文字色を赤に変えています。

<Button overrides={{"Flex.Text[0]": { color: "red" } }} />

また、ボタンを実現するコンポーネントであれば onClick なども指定したいですが、この指定方法に一癖あります。

<Button
  as="button"
  onClick={() => {
    console.log("pressed");
  }}
/>

Button というコンポーネントの定義に戻ってみると、最上位は Flex コンポーネントです。ちょっとわかりづらいのですが @aws-amplify/ui-react のソースを読んでみると View コンポーネントと同様に as および onClick props をサポートしていることがわかるので、これらを指定します。

所感

Figma への習熟度 === 生産効率

まず、 Figma を使いこなせていないと手に余る機能であるな、という印象が非常に大きいです。次は手癖として最適なものを設定できるていどに習熟している必要があります。

  • 余計な要素を省いたデザイン
  • Variants
  • Auto layout
  • Resizing
  • Components

これらの設定によって出力されるコードの実行効率やコンポーネントの使用しやすさが如実に変わりました。普段から Figma を使ってきたデザイナーさんやフロントエンドエンジニアには朗報です。

また、プロダクトマネージャーなどアプリの企画担当者が Figma の使い方を覚えることで、デプロイまでひとりで作業できる可能性も持っています。

小さいプロジェクトにおいてもデザインシステム構築の加速化が進みそう

Storybook を用いたデザインシステム構築では、アプリケーション開発とは別に、デザインシステム構築チームを別途設けることが現実的でした。言い換えると、 Figma などデザインツールを用いたデザインと動くコンポーネントとして作り込むところまでがセットで、工数やデリバリーパスを考えたときに、チームを組成する選択肢しかなかったわけです。

ところが、 Amplify Studio の UI Library を用いることで、 Figma によるデザインまでの工数のみでデザインシステム構築が可能となる可能性が出てきました。工数の縮小により、デザインシステム構築がアプリケーションチームの仕事として吸収できるようになるかもしれないのです。

工数の問題がなくなれば、デザインシステムはメリットをより享受しやすくなるため、作成することを選択するチームも増えるのではないでしょうか？

立ち上げフェイズに少人数で使用するツールに特化

出力コードの最初に書かれているコメントの通り、コードを書くことを極力避けることができるツールであると理解しています。

Figma 上のコンポーネントを使って新たにコンポーネントを作成すると、 Amplify Studio 上でもその依存関係が再現されていました。このことから、極力部品を Figma 上で作り込み、アプリケーションとして仕立てる際に model を注入することで完成までにかかる工数を極力下げることを目的として設計されているように感じました。

その分、コンポーネント設計に多くの制約を課しており、柔軟な表現が求められるアプリケーションには向かないこと、また、開発者体験が良い分、トランスパイルに時間がかかる重厚なつくりであることなどから、プロダクトマーケットフィット以降のグロース段階はスコープ外としているよ、というメッセージも同時に感じられました。

以上から、このツールを使いこなせるのは、新たにサービスを立ち上げたり課題検証のために動くものが必要なプロダクトマネージャーなのではないか、と考えています。より極端な例として、企画からデプロイまでのスキルセットをひとりでも習得可能とし、迅速に課題検証をするロールを実現可能と捉えるとこのツールの凄さがわかります。

Amplify UI

Amplify Studio が生成するコードは Amplify UI という UI ライブラリーに依存したものになっています。

この UI ライブラリーで定義されているコンポーネントをよく見てみると、 View や Text など、抽象化された概念が使われています。 Amplify Studio が多言語 / 多 UI ライブラリー対応する必要があるためにこうなっていると思うのですが、 React Native など先行事例での検証結果が引き継がれているのだな、と感じました。

型

現状、出力されるコンポーネントに型情報が付与されていません。 TypeScript が言語選択時の候補として出ていなかったので、まだサポートしていない可能性があります。

ユースケースによると思うのですが、エンジニア視点では props の指定を間違えるなど、使用時のケアレスミスを防ぐことができれば、より生産効率が上がるでしょう。

こちらは本家にリクエストしました。気になる方は watch してください。賛同メッセージも歓迎です。

Web フォント

現状、 Web フォント指定には対応していないようです。フォントがユーザーへ与える影響は大きいため、そのうち対応される可能性が高いですが、使用する際は気に留めておいたほうが良いでしょう。

こちらもリクエストしています。同様に応援お待ちしています。

まとめ

開発効率の高さはもとより、 Figma の学習が捗るプロダクトとなっています。今まで二の足を踏んでいた方も、これを機会に触ってみてはいかがでしょうか？

GitHub 上に issue tracker が立っていますので、触ってみて何かみつけたらぜひフィードバックしましょう！

AWS