Amplify JavaScript が新たに Vue 3 をサポート

この記事は、Amplify JavaScript releases support for Vue 3を翻訳したものです。

本日より、Amplify JavaScript は現在対応しているVue.jsバージョン2に加え、新たにVue.jsバージョン3へ対応します。オープンソースの Amplify Librariesは、あらゆるカテゴリのクラウドを使ったオペレーションに対し、ユースケース中心の、独自のスタイルを持った、宣言型で使いやすいインターフェイスを提供し、モバイル開発者やウェブ開発者がバックエンドと簡単にやり取りできるようにしています。これらのライブラリは AWS クラウド技術に支えられており、プラグイン可能なモデルのため、他のプロバイダを利用するよう拡張することもできます。ライブラリは、Amplify CLI を使用して作成された新規バックエンドおよび既存バックエンドリソースの両方で使用可能です。Amplify UI コンポーネントは、複数のフレームワーク向け UI コンポーネント内にクラウド接続部分のワークフローをカプセル化したオープンソースの UI ツールキットです。

このチュートリアルでは、以下を実行します。

このチュートリアルのベースとして新しい Vue 3 アプリを作成
Amplify の Interactions カテゴリの基本設定をセットアップ
チャットボットコンポーネントを作成して Vue 3 アプリケーションに追加

前提条件

このチュートリアルを開始する前に、 Amplify ドキュメントのウェブサイトにアクセスし、Prerequisites (前提条件) セクションに従ってください。前提条件を完了後、このチュートリアルを実行するための準備が整います。

AWS プロファイルを設定するときは、リージョンが Amazon Lex をサポートしていることを確認してください。サポートされているリージョンは、こちらで確認できます。

新しい Vue アプリの作成

まず、 @vue/cliを使用して新しい Vue アプリケーションを作成し、起動します。このCLIツールを使うことで、現在のベストプラクティスを適用して自動で Vue アプリケーションを作成します。次に、Amplify を追加し、新しいプロジェクトを初期化します。以下の手順で、このプロセスを説明します。

新しい Vue アプリを作成するには

プロジェクトディレクトリから、次のコマンドを実行します。

npm install -g @vue/cli
vue create my-amplify-project 

? Please pick a preset: (Use arrow keys) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) <--
Manually select features

cd my-amplify-project

アプリを実行するには以下のコマンドを実行します。

yarn serve

サーバーを停止するには、 Ctrl+C を押します。

新しいバックエンドを初期化する

これで Vue アプリが立ち上がりました。次に、アプリを支えるために必要なバックエンドサービスを作成するため、Amplify をセットアップします。プロジェクトのルートディレクトリから、以下を実行します。

amplify init

Amplify を初期化すると、アプリに関するいくつかの情報の入力を求められます：

? Enter a name for the project (myamplifyproject) 
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
? What JavaScript framework are you using Vue
? Source Directory Path: src
? Distribution Directory Path: dist
? Build Command: npm run-script build
? Start Command: npm run-script serve
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use [Your AWS Profile]

Amplify Librariesのインストール

クライアント側で Amplify を使用するための最初のステップとして、必要な依存関係をインストールします。

yarn add aws-amplify @aws-amplify/ui-components

フロントエンドの設定

次に、バックエンドサービスとやり取りできるように、クライアント側で Amplify を設定する必要があります。src/main.js を開き、最後の import の下に次のコードを追加します。

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import {
  applyPolyfills,
  defineCustomElements,
} from '@aws-amplify/ui-components/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});
Amplify.configure(awsconfig);

これで、Amplify および UI コンポーネントが正常に設定されました。Amplify CLI を使用してカテゴリを追加または削除し、バックエンド設定を更新すると、aws-exports.js の設定が自動的に更新されます。

Interactions カテゴリの追加

次に Vue アプリに追加する機能は、 Interactions (対話) カテゴリです。このカテゴリでは、 Amazon Lex を使用して AWS クラウドで会話ボットをホスティングします。

Vue アプリに Interactions を追加するには

プロジェクトディレクトリから、次のコマンドを実行し、表示される質問に回答します。

$ amplify add interactions

? Provide a friendly resource name that will be used to label this category in the project: mychatbot
? Would you like to start with a sample chatbot or start from scratch? Start with a sample
? Choose a sample chatbot: BookTrip
? Please indicate if your use of this bot is subject to the Children's Online Privacy Protection Act (COPPA).No amplify push コマンドを実行してサービスをデプロイします。

amplify push

Amplify Vue プロジェクトにチャットボットを追加する

アプリケーションに Interactions を追加したので、次にチャットボットコンポーネントを追加します。src/App.vue で、コードの templateを更新します。

<template>
  <amplify-chatbot
      bot-title="Chatbot Lex"
      bot-name="BookTrip_dev"
      welcome-message="Hello, how can I help you?"
      voice-enabled="true"
  />
</template>

利用可能な全てのプロパティ一覧は、ドキュメントで確認してください。

yarn serve でアプリケーションを実行します。以下のようなチャットボットが表示されるはずです。

テキストメッセージを送信するか、マイクボタンをクリックして話すことで、ボットとやり取りできます。

コンソールの警告について: 「failed to resolve component（コンポーネントの解決に失敗しました）」という警告が表示された場合は、アプリのディレクトリに vue.config.js ファイルを作成し、このGitHub Gist上のコードを使用することで警告を消すことができます。

チャットのフルフィルメント (応答) をリッスンする

次に、チャットがフルフィルメント（応答）後に起動するコールバック関数を登録しましょう。チャットセッションが終了するたびに、チャットボットは chatCompleted イベントを発生させます。Vue のライフサイクルフックを使用してイベントをリッスンできます。src/App.vue を開き、 script タグ内に次のコードを追加します。

<script>
const handleChatComplete = (event) => {
    const { data, err } = event.detail;
    if (data) alert('success!\n' + JSON.stringify(data));
    if (err) alert(err);
};
export default {
    name: 'App',
    components: {},
    mounted() {
        this.$el.addEventListener('chatCompleted', handleChatComplete);
    },
    beforeUnmount() {
        this.$el.removeEventListener('chatCompleted', handleChatComplete);
    },
};
</script>

チャットを終了するたびに、またはチャットの応答が失敗するたびにポップアップが表示されるようになりました。実際には、データを活用してもっと多くのことを行いたいはずです。以下にいくつかのアイデアを示します。

Amplify の API カテゴリを使用して DynamoDB テーブルに結果を追加
Amplify のAnalytics カテゴリを使用して注文の分析データを収集
ユーザーが旅行する予定の都市の画像を表示

カスタマイズ

Amplify には、アプリケーションに合わせてコンポーネントをカスタマイズするための 2 つの主要技術（CSS変数とスロット）が用意されています。

CSS変数を使用したコンポーネントのスタイル設定

CSS変数は、コンポーネント全体で再利用される特定のCSS値を含む変数です。これらの変数をコンポーネントのスタイルシートで割り当てて Amplify UI コンポーネントのスタイルを設定できます。例として、テキストの色やふきだしの背景色を変更してみましょう。

src/App.vue を開き、次のCSS変数を追加します。

<style>
:root {
  --amplify-primary-color: #fd8abd;
}

amplify-chatbot {
  --width: 450px;
  --height: 600px;
  --header-color: rgb(40, 40, 40);
  --bot-background-color: #eaebff;
  --bot-text-color: rgb(40, 40, 40);
  --user-background-color: #fd8abd;
}
</style>

アプリケーションを更新すると、コンポーネントに適用された新しい色が表示されます。

お好きな色をお使いください。amplify-chatbot で利用可能な全てのCSS変数一覧は、ドキュメントで確認してください。

スロットを使用したカスタムコンテンツの挿入

スロットは、任意のマークアップで埋めることができるコンポーネント内のプレースホルダーです。たとえば、チャットボットには、置き換えることができるヘッダースロットが用意されています。ロゴとカスタムヘッダーを追加してみましょう。ここでは amplify ロゴを使用しますが、代わりに任意のイメージを使用して src 属性に配置することもできます。src/App.vue でテンプレートを更新します。

<template>
    <amplify-chatbot
        bot-title="Chatbot Lex"
        bot-name="BookTrip_dev"
        welcome-message="Hello, how can I help you?"
        voice-enabled="{true}"
    >
        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
        <div slot="header" className="custom-header">
            <img
                src="https://raw.githubusercontent.com/aws-amplify/amplify-js/main/vscode/images/logo.png"
                height="40"
            />
            Amplify Chatbot
        </div>
    </amplify-chatbot>
</template>

eslint を無効にする行を追加していることに注意してください。これが有効だと、代わりに v-slot を使用するよう提案してくるからです。これは、Vue コンポーネントスロットの仕様には当てはまりますが、今回使用するウェブコンポーネントスロットには当てはまりません。

最後に、いくつかCSSスタイルを追加して、ヘッダーを改善しましょう。src/App.vue の style に以下を追加します。

.custom-header {
  padding: 1.25rem 0.375rem 1.25rem 0.375rem;
  text-align: center;
  font-size: 1.6rem;
}

以上でアプリを更新すると、カスタマイズされたチャットボットコンポーネントが表示されます。

まとめ

このブログ投稿では、Amplify を使用して Vue 3 のウェブアプリケーションを作成しました。その後、Interactions カテゴリを設定し、会話チャットボットを表示させ、CSS変数とスロットをカスタマイズしました。

– William Lee

翻訳はDeveloper Relations Engineer（Mobile/Web）のDaijiro Wachiが担当し、ISV/SaaS Solutions ArchitectのKoya KimuraとPrototyping Specialist Solutions ArchitectのTakuya Mizumaが監訳しました。

Cookie の設定を選択する

Amazon Web Services ブログ