2021-12-11

AWS Amplify について (2) figma連携

先日こんな記事がありました。

www.publickey1.jp

要はfigmaで作成されたワイヤーフレームからReactのアプリケーションを作成し、 Gitへpushしてくれるみたいです。

試す

Figmaでページをワイヤーを作成する

Amplify UI Kit

Figmaで作成にあたって Amplify UI Kit というものが提供されています。

READMEが英語で書かれていますが、ページを作る部分の説明は下のような感じです。

適当な Layer で frame を作成してコンポーネントにする。
コンポーネントがStudioに取り込まれる。
コンポーネント名は PascalCase で定義する。
Amplifyから Primitives として提供されているアセットが利用できる。(Shift + I でショートカットが利用できる)
Amplifyが提供しているコンポーネントはフレームを右クリックして Auto Layout を追加すると、プロパティからスタイルを調整できる。
右クリックでコンポーネントを作成する。
Auto Layout のフレームとは別のフレームを作成することで希望のレイアウトにできる。

wire

今回のテストのためにこのようなワイヤーを用意しました。
リンクで前後に行き来できます。
ボタンは押しても何も起こらないはずです。

アプリケーションのビルド

まずAWS Amplifyでアプリケーションをビルドします。

アプリケーションの名前を決めるだけで、特にこの点で難しいことはありません。

Amplify Studio を立ち上げる

Amplify Consoleの以下の場所で起動ができます。

Amp amplify studio

Amplify Studio

メニューの Design → UI Library から作成したFigmaのテンプレートを読み込めます。

left side column menu

読み込むと、取り込むコンポーネントを一つずつ確認していきます。

Amplify Studioからソースコードを取得する

コンソール画面の右上の「Local setup Instructions」からpullするためのコマンドが見れます。

$ amplify pull --appId ****************** --envName staging

自分の環境では ~/.aws/credentials にdefaultのprofileを設定していなかったので、
当初上記のコマンドを実行した際に "Aborted!" のメッセージが出ましたが、
以下のようにprofileを指定することでコマンドが通りました。

$ amplify pull --appId ****************** --envName staging --providers {"awscloudformation":{"configLevel":"project","useProfile":true,"profileName":"your_aws_profile"}}

実行したところブラウザ経由でのログインが行われ、
初回のみjsフレームワークの選択などがありました。

reactを選択したところ以下のReact用のコンポーネントのjsxファイルが出力されました。

f:id:captain-goblin:20211210185028p:plain

vueも試しに選択してみましたが、vueファイルなどは出力されませんでした。

まとめ

figmaを利用してコンポーネントを作成する際もAtomic Designを意識して作成することが大事なのかな、と感じました。

figma上での要素の構成や配置を行うのは良いかなと思いますが、細かなデザインはどこで行うべきかは課題です。

2021-12-05

AWS Amplify について (1) 101

AWS Amplifyについて

以下の内容はAWS BlackBelt Online Seminar AWS Amplify の内容の個人的なまとめです。

AWS Amplifyとは

Webフロント、モバイルアプリ開発のためのプラットフォーム。
以下の仕組みを持っている。
- サーバレスバックエンドを構築するCLI
- バックエンドの接続を行うためのクライアントライブラリ
- Webサイトホスティング
以下のAWSのサービスをCLIコマンドで構築してくれる。
- Cognito (認証機能)
- DynamoDB (データストア)
- API Gateway, AppSync (API基盤)
- S3 (ストレージ)
- AppSync, IoT Core (リアルタイム通知)
- CloudFront, S3 (Webホスティング)

Amplify Framework

バックエンドに直感的に接続できるライブラリ。 js, iOS, Android に対応。

// e.g. ファイルをプライベートでアップロードするためのコード
Storage.put('test.png', file: {
  contentType: 'image/png',
  level: 'private',
});

Amplifyのワークフロー

CLIでバックエンド構築
Amplify Frameworkでアプリケーション実装
デプロイ

1. Amplify CLI

Amplify CLI インストール

$ npm install -g @aws-amplify/cli
$ amplify configure

ルートディレクトリで初期化

$ amplify init

カテゴリ（バックエンドの設定）を追加する

# カテゴリの作成
$ amplify add <category name>

# e.g. APIのバックエンド構築
$ amplify add api

# カテゴリの更新
$ amplify update <category name>

# カテゴリの削除
$ amplify remove <category name>

# 設定ステータスの確認
$ amplify status

下記のコマンドで構築がされる。
※ アプリケーションに設定ファイルが作成されるが、CLIで上書きされるので直接編集はしてはいけない。

# バックエンドの構築
$ amplify push

2. Amplify Frameworkを用いたアプリケーションの実装

Amplify Frameworkのインストール

$ npm install aws-amplify

ソースコードで先に生成されたバックエンドの設定ファイルの読み込みを行う。

// jsの例
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

構築できる機能の一覧

f:id:captain-goblin:20211204222724p:plain

3. アプリケーションのデプロイ

$ amplify add hosting

デプロイ方法は以下の２つがあるが、自分の場合は後者しか使わないと感じた。

(1) Amazon CloudFront and S3
- CLIから直接デプロイ
- CI/CD, GitHubとの連携が不要の場合
(2) Hosting with Amplify Console
- Amplify Consoleを用いてデプロイ
  - Amplify Consoleの機能が利用できる
    - テスト環境へのBasic認証設定
    - CI/CD結果をEmail通知
    - WebhookでCI/CDパイプラインを起動
    - ビルド設定のカスタマイズ (amplify.yml)
- CI/CD, GitHubとの連携
  - Cypressを用いたE2EテストをCI/CDパイプラインに組み込める
    - テスト結果のArtifactをダウンロード可能
- マネジメントコンソールから操作可

まとめ

ご多分にもれず、弊社でも現在エンジニアの人手不足に悩まされているので、一人のエンジニアが担う役割というのは広範囲になっています。

そんな中でスコープを絞り込むことができるAWS Amplifyを使用するのは良い選択なのかもしれません。

各カテゴリとの連携方法については別記事でまとめようと思います。

OGreブログ

少しずつネタを増やしていくためのブログです。