AWS Amplify Studio 一般提供開始のお知らせ

Amplify Studio は、ウェブおよびモバイルアプリケーションのフロントエンドとバックエンドの開発を簡素化するビジュアルインターフェイスです。AWS re: Invent 2021 でプレビューとしてリリースされましたが、2022 年 4 月 21 日（米国時間）、一般提供 (GA) が開始されたことをお知らせします。Amplify Studio の主要な機能は、設計者とフロントエンドデベロッパーによる設計タスクと開発タスクでコラボレーションを可能にする Figma との統合です。設計の変更に応じて同期を維持するためにデベロッパーが行う必要があるのは、新しいコンポーネント設計を Figma から Amplify Studio のアプリケーションに取り込むことだけです。GA バージョンの Amplify Studio には、UI イベントハンドラーのサポート、コンポーネントのテーマ設定、コードから生成されたコンポーネントを拡張およびカスタマイズする方法の改善を始めとする多くの新機能も含まれています。

ユーザー認証、リアルタイムデータ、AI/ML、ファイルストレージなどのバックエンドユースケースをサポートするさまざまな AWS のサービスの設定を迅速に開始することを可能にする一連のツールと機能である AWS Amplify に馴染みのあるユーザーも多いと思われます。Amplify Studio は、この設定の容易さをフロントエンドのデベロッパーにまで拡張し、これらのアプリケーション用のビルド済みおよびカスタムのリッチユーザーインターフェイス (UI) コンポーネントで作業することが可能になります。バックエンドのデベロッパーも Amplify Studio を使用して、アプリケーションのバックエンドサービスの開発と構成を継続できます。

Amplify Studio のポイントアンドクリックのビジュアル環境では、フロントエンドデベロッパーはビルド済みおよびカスタムUIコンポーネントのライブラリからユーザーインターフェイスを迅速かつ簡単に作成できます。コンポーネントはテーマを設定することが可能で、Amplify Studio のデフォルトテーマを上書きして、自社または会社のスタイルガイドに従ってコンポーネントをカスタマイズできます。また、クラウドや AWS の専門知識がなくても、コンポーネントをバックエンドサービスにバインドすることもできます。

使用できるのは、アプリケーションのフロントエンド層とバックエンド層の開発のサポートだけではありせん。デベロッパーは、Amplify Studio 内から、Amplify のフルマネージド型 CI/CD およびスケーラブルなウェブアプリケーションのホスティングサービスである AWS Amplify ホスティングサービスを活用することもできます。このサービスでは、Git リポジトリを組み込みの継続的インテグレーションおよびデプロイワークフローに接続するだけでアプリケーションをデプロイできます。設定は必要ありません。デプロイアーティファクトは AWS クラウド開発キット (AWS CDK) などのツールにエクスポートできるため、Amplify Studio 内で直接利用できない他の AWS のサービスのサポートを簡単に追加できます。Amplify Studio で作成されたすべてのアーティファクトをコードとしてエクスポートして、任意の IDE で編集することが可能です。

re: Invent で公開されたブログ記事では、オリジナルプレビューに関する詳細に加えて、Amplify Studio と Figma を組み合わせて使用する例が紹介されています。

UI イベントハンドラー
フロントエンドデベロッパーは、UI コンポーネントでイベントをバインドして何らかのアクションを呼び出す背景にある概念に精通している傾向があります。例えば、ボタンを選択すると別の画面に遷移する処理や、バックエンドサービスから提供される可能性のあるデータが他のフィールドに入力されるような処理があります。次のスクリーンショットは、Card コンポーネントの onClick イベントにイベントハンドラーを設定して、新しいブラウザータブを開く処理を示しています。

次に、選択したアクションに対して設定を定義します。この場合は、カードオブジェクトのモデルの緯度と経度を使用して、その場所にマップビューを開きます。

コードによるコンポーネントの拡張
amplify pull コマンドを使用して Figma から Amplify Studio のプロジェクトにコンポーネントデザインをプルすると、生成された JSX コード、および Figma デザインにマップされる TypeScript 定義ファイルがプロジェクトに追加されます。生成されたコードは編集できますが、次回 pull コマンドを実行すると、変更内容が上書きされます。

Amplify Studio では、生成されたコードの編集を要求する代わりに、生成されたコードを拡張して必要な変更を実現できるメカニズムを公開しています。コンポーネントコードファイルが再生成された場合に変更内容が失われるリスクは排除されます。これはオリジナルプレビューでも可能でしたが、GA バージョンの Amplify Studio では、このプロセスははるかに簡単で便利になります。Amplify Studio 内で生成されたコンポーネントを変更するには、次の 4 つの方法があります。

デフォルトプロパティを変更する
コンポーネントのデフォルトプロパティの変更は簡単で、ほとんどのデベロッパーに馴染みのあるアプローチです。これらのデフォルトプロパティは Amplify UI ライブラリに由来します。例えば、ベースの Collection 型から派生するカスタムコレクションコンポーネントがあり、レンダリング時にコレクション内の項目がどのようにラップされるかを制御するとします。Collection 型は wrap プロパティを公開するので、これを利用することができます。
```
<MyCustomCollection wrap={"nowrap"} />
```
子 UI 要素を上書きする
個々の公開プロパティだけでなく、コンポーネント (およびすべての子コンポーネント) に対して生成されるコードは overrides プロパティを公開します。このプロパティを使用すると、複数の prop オーバーライドを含むオブジェクトを指定し、生成されたコードの拡張を完全に制御できます。次の例では、コレクションの項目の Title プロパティに属する color プロパティをオレンジに変更しています。前述したように、使用する設定オブジェクトには、ここでオーバーライドする他のプロパティも含まれている可能性があります。
```
<MyCustomCollectionItem overrides={{"Title": { color: "orange" } }} />
```
コレクション項目をデータで拡張する
コレクション内の項目を操作する際、追加データで項目を拡張できますです。これは overrideItems プロパティで行うことができます。このプロパティに関数を指定して、コレクション内の項目と項目のインデックスのパラメータを受け入れます。関数からの出力は、その項目に適用するオーバーライドプロパティのセットです。次の例では、項目のインデックスが奇数か偶数かに応じて、コレクション項目の背景色を切り替えています。項目にコードをアタッチすることもできます。この場合は、クリックされた項目の ID をレポートする onClick ハンドラーです。
```
<MyCustomCollection overrideItems={({ item, index })=>({
  backgroundColor: index % 2 === 0 ? 'white' : 'lightgray',
  onClick: () = alert(`You clicked item with id: ${item.id}`)
})} />
```
イベント用のカスタムビジネスロジック
より高いレベルの論理的なイベントに応答して、カスタムビジネスロジックを実行する場合があります。例として、データストアでオブジェクトを作成、更新、または削除したときに実行するコードがあります。この拡張性オプションにより、その機能が提供されます。コードでは、Amplify Hub の ui チャネルにリスナーをアタッチします。リスナーでは、受信したイベントを調べ、関心のあるイベントに対してアクションを実行します。イベントは名前で識別します。イベント名の形式は、actions:[カテゴリ]:[アクション名]:[] です。すべてのアクションイベント名の一覧については、ドキュメントを参照してください。次の例では、DataStore 内の新しいア項目の作成が完了したときにカスタムコードを実行するリスナーをアタッチしています。このコードでは、リスナーで ctions:datastore:create:finished という名前のイベントを検査する必要があります。
```
import { Hub } from 'aws-amplify'
…
Hub.listen("ui", (capsule) => {
  if (capsule.payload.event === "actions:datastore:create:finished"){
      // An object has been created, do something in response
  }
});
```

コンポーネントのテーマの設定
Amplify Studio の GA リリースに伴い、UI コンポーネントを会社のブランドやスタイルに合わせることができる Figma プラグインもリリースされました。これは、FigmaコミュニティリンクからTheme Editorプラグインをインストールするだけで有効にすることができます。例えば、Amazon のブランドカラーに合わせる場合を考えてみます。プライマリの色を Amazon オレンジ (#ff9900) に設定するだけで、すべてのコンポーネントに自動的にそのプライマリの色が反映されます。

AWS Amplify Studio の使用を今すぐ始める
バックエンドデベロッパーかフロントエンドデベロッパーを問わず、AWS Amplify Studio のホームページにアクセスして、その他の機能を確認してください。無料で使用することができ、アプリケーションをサポートするバックエンドサービスの設定だけでなく、アプリケーションのフロントエンド、およびバックエンドサービスへの接続の開発も簡素化できるように設計されています。Amplify Studio を初めて使用する場合は、このドキュメントに含まれる React ベースの UI の開発に関するチュートリアル、およびアプリケーションを Figma の設計に接続するための情報を参照してください。

– Steve

原文はこちらです。

Amazon Web Services ブログ

AWS Amplify Studio 一般提供開始のお知らせ

お役立ちリンク

フォローお願いいたします