Amazon Web Services ブログ
Amazon Machine Learning API と PubNub ChatEngine でスマートなチャットアプリを開発する
これは PubNub のオープンソフトウェアエンジニアである Adam Bavosa によって投稿されたゲストブログです。彼ら自身の言葉を借りれば、「PubNub は、チャット、デバイスコントロールおよびリアルタイムのマッピングアプリのために、グローバルなスケールに拡大できるリアルタイム API を提供している、リーディングプロバイダー」です。
チャットアプリに対する要求は非常な勢いで拡大しています。ソーシャルアプリからビジネス上のコラボレーション、ゲームプレーヤー同士のチャットから顧客サポートに至るまで、あらゆる種類のアプリがチャットを必要としています。Telegram のようなチャットアプリは主要な報道機関の情報源となっており、広い範囲の関心を集めています。
しばらく前までは、スケーラブルで豊富な機能を持つチャットアプリを開発しようとすると、とてつもない困難に直面しました。今ではそのようなことはありません。PubNub ChatEngine には Amazon 機械学習 API が統合されています。これによって、モバイルとウェブ向けに、インテリジェントでスケーラブルなチャットアプリを開発することはきわめて容易になりました。
今回のブログでは、PubNub ChatEngine を基にして、Amazon Translate と Amazon Polly を加え、あらゆる場所に埋め込める、多言語対応、音声認識対応のアプリを作り上げる方法についてご紹介しましょう。\\
Amazon の新しい機械学習 (ML) API は、チャットアプリをさらに強力なものにします。そして、すでに組み込まれている PubNub との統合と組み合わせることにより、Amazon ML API は、ChatEngine を活用してきたチャットアプリに簡単に追加できます。このブログは、新しい Amazon ML API と PubNub ChatEngine を利用して、様々な種類のスマートなチャットアプリを短期間で構築してデプロイするためのクイックスタートとして用いることができます。これは、一対一のチャットであろうと、エンタープライズグレードのセキュリティと信頼性を備えた、それぞれ 100 万人以上の人々が利用できるチャットルームであろうと、変わりません。
PubNub の BLOCKS カタログには、次のような 3 種類の Amazon ML API のブロックが含まれています。
- Amazon Translate。自然で流暢な翻訳を行います。
- Amazon Polly。ディープラーニングを使用して文章をリアルな音声に変換します。
- Amazon Comprehend。テキスト内の深い情報や関連性を見つけ出します。
4 番目のブロックである Amazon Lex がまもなく加えられる予定です。これは、アプリケーションに会話的なインターフェイスを追加します
それでは、ChatEngine を動作させる方法と、チャットアプリ内で Amazon Translate と Amazon Polly を有効にする方法について説明しましょう。使用するパターンは、Amazon Comprehend や、(このブログの投稿時点で) まもなく登場するはずの Amazon Lex でも同様です。そしてこれらの統合 (つまりブロック) も、BLOCKS カタログで利用できます。
対象とするコンポーネント
ここでは、次のようなコンポーネントを使って、新しい Amazon ML API を利用するアプリを作ります。
- チャットの機能が組み込まれている CodePen を使用するブラウザのタブ
- PubNub の API キー
- Amazon Translate と Amazon Polly の API キー
PubNub ChatEngine の開始方法
PubNub ChatEngine は、エンタープライズ対応のチャットアプリの開発を容易にします。PubNub ChatEngine を使えば、どのような UI でも統合できます。そのようなわけで、このブログで示す UI の例は、ごく簡単なものにしました。
ステップ 1: 無料の PubNub アカウントの作成
まずしておきたいのは、 無料の PubNub アカウントを作成することです。それが終わると、自分用の PubNub ダッシュボードを表示できるようになります。ポータルはブラウザのタブで開いたままにしておいてください。すでに PubNub アカウントがあるなら、ログインしてタブを開いたままにしておきます。
ステップ 2: PubNub アカウントで ChatEngine のインスタンスを作成する
PubNub ChatEngine のクイックスタートチュートリアルのページに進んでください。「PubNub Keys」と題するチュートリアルのセクション 1 には、 ボタンがあります。これをクリックします。新しい PubNub のキーセットが作成され、ChatEngine で使えるように設定されます。少し待つと、下のように、成功したことを知らせるメッセージと、自分用のキーセットを含むコードが表示されます。
ステップ 3: CodePen で ChatEngine Client のコピーを作成する
ここをクリックして、ChatEngine がインストール済みの新しい CodePen ウィンドウを開きます。CodePen が起動したら、するべきことは 2 つです。
- CodePen で、JavaScript の 3~6 行を PubNub の発行キー (publishKey) とサブスクライブキー (subscribeKey) キーで置き換えます。(Setup ボタンをクリックしたときに表示されたコードのことです)。
- 忘れてしまわないように、 CodePen URL は保存しておいてください。
おめでとうございます! ここまではうまくいきました。次の段階では、Amazon API を CodePen に組み込みます。
もっともこのままでも、ChatEngine アプリはちゃんと動きます。これはさらに調整を加えるための素材です。新しいブラウザインスタンスをシークレットモードで開き、CodePen と同じ URL を指定してください。当然のことながら、自分自身とのチャットができるはずです。
後ほど (このチュートリアルを完了したら)、さらにクイックスタートガイドに進み、 ChatEngine のドキュメンテーションもチェックして、 ChatEngine で何ができるのかをもっと調べてみるとよいでしょう。
Amazon Translate を PubNub ChatEngine のインスタンスに追加する
Amazon API を PubNub ChatEngine に追加するのが実に簡単であることを示すため、Amazon Translate から始めましょう。 このコードチュートリアルを進めるために理解しておくのが必要な新しいコンセプトと詳細は、ごくわずかです。
- PubNub の関数を使えば、チャットのメッセージを経路の途中で取り込み、インラインの機能を追加することができます。PubNub の関数は、Amazon Translate API を呼び出して、翻訳元の言語を翻訳先の言語に置き換えるために使用します。
- 無料の PubNub キーでは、同時に 3 つまでの関数しか実行できないことに注意してください。 ChatEngine 自体が 2 つの関数をすでに使用しているので、無料のアカウントで一度に試せるのは 1 つの Amazon API だけです。もっと多く使用できるようアカウントの設定を変更したい場合には、 PubNub に問い合わせてください。
ステップ 1a: Amazon API のキー
今度は、Amazon のアクセスキーとシークレットキーも必要になります。まだしていなければ、AWS アカウントを作成して、Amazon Translate と Amazon Polly のアクセスキーとシークレットキーを取得してください (方法はここで説明されています)。キーを取得したら、それらを自分の関数の AWS セキュアボールトに追加できます。
ステップ 1b: Amazon Translate のブロックのクローンを PubNub アカウントに追加します。
- まず、PubNub にログインしたままであることを確認します。次に、新しいタブを開いて Amazon Translate のブロックに移動します。Scroll down the page, and click the “Try It Now” blue button.ページを下にスクロールして、[Try It Now] という青いボタンをクリックします。
重要: 次のページでは、アプリのドロップダウンで [ChatEngine App] を選択したことを確認してください。 - [Get Started] をクリックします。PubNub の関数ページに移動するので、自分の関数コードを編集してデプロイできます。
ステップ 2: Amazon Translate PubNub 関数を構成する
ここでは、自分の Amazon キーを PubNub の関数ボールトに追加して、PubNub 関数が Amazon API を正しく呼び出せるようにします。それから、関数で使用する、翻訳元の言語と翻訳先の言語も選択します。
- PubNub の関数ページの左側にある [My Secrets] ボタンをクリックします。ここでは、2 つの新しい情報を追加します。Amazon アクセスキーと Amazon シークレットキーです。キーの名前は [AWS_access_key] と [AWS_secret_key] でなければなりません。この作業が終わると、シークレット情報の画面は次のようになっているはずです。
重要: すでにボールトに設定されている [secretKey] は削除しないでください。これは ChatEngine に必要なもので、Amazon API とは関係ありません。
ステップ 3: PubNub 関数を起動して、思う存分翻訳させてください。
もう 1 つ、最後のステップが残っています。作成した関数は、すべての PubNub 「チャンネル」に束縛する必要があります。これは、どのチャンネルを通ってきたチャットメッセージであっても必ず翻訳されるようにするためです。関数ページの左側、[My Secrets] ボタンのすぐ上には、チャンネル設定の項目があるので、その値を「*」というワイルドカードに変えます。
赤い [Save] ボタンをクリックして PubNub 関数をデプロイし、[Start module] をクリックします。ほんの数秒間で、PubNub 関数はグローバルにデプロイされます。
では、CodePen 内の現在の ChatEngine アプリに戻って、翻訳元の言語で何か入力してください。即座に翻訳されるのがわかるはずです。
注記: Amazon Translate が扱う、翻訳元の言語と翻訳先の言語は、CodePen の JavaScript の 9 行目と 10 行目を変更すれば、変えることができます。
Amazon Polly で、チャットのメッセージを生き生きとしたスピーチに変える
Amazon Polly は、PubNub ChatEngine を経由して送られたチャットのメッセージを元にして、音声合成を行います。この 2 番目のセクションでは、Amazon Polly のブロックをデプロイする方法、そしてオーディオファイルと話し言葉をサポートするように ChatEngine クライアントコードを修正する方法について説明します。
注記: 無料の PubNub アカウントを使用している場合には、Amazon Polly をデプロイする前に、Amazon Translate の PubNub 関数を停止することが必要になるでしょう。それで、このセクションを始める前に、Amazon Translate 関数の [Stop Module] ボタンを忘れずにクリックしてください。
ステップ 1: Amazon Polly PubNub 関数を作成する
このチュートリアルでは、BLOCKS カタログの Amazon Polly 関数に、いくらかの調整を加えています。それで今回は、既存のブロックをそのままクローンする代わりに、自分自身の PubNub 関数を新規作成してみることにしましょう。先ほどの Amazon Translate 関数はではチャットのメッセージを取り込むために [Before Publish] イベントを使用しましたが、今回は PubNub の REST エンドポイント関数を使います。これは PubNub ポータルでは [On Request] と呼ばれています。
- PubNub の管理者ダッシュボードに移動し、自分の ChatEngine アプリをクリックして、左側の [FUNCTIONS] タブをクリックします。ChatEngine モジュールが表示されるはずなので、それをクリックしてから [create] をクリックして、新しいイベントハンドラのインスタンスを作成します。
- 次に、[Poly] という名前で新しいモジュールを作成し、モジュール内でも [Poly] という関数を作成します。(明確にしておくと、モジュールとは関数の集まりのことです)。
- [Create] をクリックして新しい関数を追加します。関数タイプは [On-Request] にしておいてください。URI パスとして [polly-endpoint] を指定します。
- 次に、Amazon Polly 用に編集したソースコードをコピーします。これは GitHub レポジトリの polly-pfunc.js にあります。コードをエディタにペーストします。今回関数エンドポイントを作成する理由は、チャットアプリがオリジナルのメッセージを基にして、帯域外の MP3 Render リクエストを送るようにセットアップするからです。On-Before や On-After イベントハンドラではなく関数エンドポイントを使用する大きな理由はここにあります。
ステップ 2: Amazon Polly PubNub 関数を構成する
AWS アクセスキーと AWS シークレットキーは、Amazon Translate のセクションのステップ 2 で、すでにボールトに追加されているはずです。まだしていなければ、ここでこれら 2 つのシークレットキーをボールトに追加しておいてください。
重要: 先ほど注意したように、すでにボールトに設定されている [secretKey] は削除しないでください。これは ChatEngine に必要なもので、Amazon API とは関係ありません。
ステップ 3: CodePen で ChatEngine クライアントを構成する
では、右上のボタンをクリックして、モジュールを開始してください。このボタンはほんの数秒間の内に新しいコードをグローバルにデプロイします。これで ChatEngine フロントエンドを実行する準備ができました。
関数エディタを閉じる前に、[COPY URL] ボタンをクリックしてください。このボタンはサービス用に REST エンドポイントの URL をコピーします。
CodePen ファイルで、JavaScript にこの URL をペーストとして pollyFunctionURI を設定します (7 行目)。
これで完了です。 CodePen で、チャットメッセージを入力してください。ボリュームを上げるには、チャットメッセージの隣の Amazon Polly のアイコンをクリックします。チャットメッセージが大きな声で読み上げられるのが聞こえるでしょう。
このチュートリアルを途中から始めたユーザーに注意しておきます。チュートリアルを最初から始めたのでなければ、まだ自分の API キーを CodePen に入力していないかもしれません。API キーを取得して CodePen JavaScript にペーストするには、自分の PubNub ChatEngine アプリの PubNub ポータルにある [Key Info] のページにアクセスしてください。Publish と Subscribe のキーをポータルからコピーして、自分の CodePen の上端近くにペーストしてください。
Amazon Polly UI audio
Amazon Polly のオーディオデータは、base64 でエンコードされた mp3 データ ULI と、HTML オーディオエレメントによって再生されます。オーディオデータは [Amazon Polly] ボタンをクリックしたときに一度だけ取得されます。データの URI は、チャットのログボタン要素の dataset 属性に保存されます。ボタンのクリックによってトリガーされる再生機能を持つ、1 つのオーディオ要素があります。JavaScript では、URI は AJAX によって取り込まれるか、または後でボタンのデータセットからオーディオソースのパラメーターに移されます。
ChatEngine の機能とプラグイン
CodePen アプリケーションのコードをさらに詳しく見たことがあるかもしれません。ChatEngine プラグインの広範な機能は、 CodePen が使用するためのものです。プラグインを使って、チャットログの履歴取得、タイピングインジケータ、メモ書きといった機能を実装することもできます。ChatEngine とそのすべてのプラグインは PubNub の GitHub でオープンソースとして公開されており、npm を通して利用することができます。
作成した ChatEngine のコードは PubNub の Publish および Subscribe キー、そして chat channel と結びつけられています。それで、この UI を起動する他のすべてのブラウザには、送信者であるあなたと同じチャットログが表示されることになります。
これで完了です。Amazon Machine Learning と PubNub ChatEngine のパワーを活用すれば、さらにスマートなチャットアプリを作成できるでしょう。AWS の ML サービスと PubNub との間の API 統合により、開発者は、強力な翻訳機能、読み上げ機能、感情分析、それにチャットボット (まもなく登場!) の機能によって、自分のチャットアプリを簡単に強化することができるようになりました。
そして、最大級のエンタープライズでも、PubNub のネットワークと ChatEngine を使用する GDPR および SOC 2 Type II 認証により、スケーリング、セキュリティ、または信頼性の要件を満たす、インテリジェントなチャットとコラボレーションの機能を短期間でデプロイできます。
今回のブログ投稿者について
Adam Bavosa は PubNub のオープンソースソフトウェアエンジニアで、JavaScript、ブロックチェーン、および API 開発に関心を抱いています。