IBM Cloud Docs
モバイルアプリケーションにウェブチャットを追加する

モバイルアプリケーションにウェブチャットを追加する

iOS,、Android、React Nativeなどのモバイルフレームワークで構築されたモバイルアプリケーションをお持ちの場合は、 JavaScriptて WebView を使用することで、アプリと watsonx Assistantとの間で通信を行うことができます。

JavaScript ブリッジで WebViews を使用することは、すべてのモバイル・フレームワークに対して同様の実装を行う一般的なパターンです。

WebView としての Web チャットの組み込み

モバイル・アプリケーションのページの一部として、またはアプリケーションが開く別のパネルとして、Web チャット・インターフェースを組み込むことができます。 いずれの場合も、Web チャット組み込みスクリプトを含む HTML ページをホストし、そのページを WebView としてアプリケーションに組み込む必要があります。

組み込みスクリプトで、 showLauncher オプションを使用して Web チャット・ランチャー・アイコンを非表示にし、 openChatByDefault オプションを使用してページのロード時に Web チャットを自動的に開くことができます。 ほとんどの場合、 hideCloseButton オプションを使用し、アプリケーションのネイティブ・コントロールを使用して、Web チャット・ページまたはパネルを閉じる方法を制御することもできます。 埋め込みスクリプトで指定できる構成オプションの詳細については、 Web チャット API リファレンスを参照してください。

以下の例は、これらの構成オプションを含む組み込みスクリプトを示しています。

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script>
      window.watsonAssistantChatOptions = {
        // A UUID like '1d7e34d5-3952-4b86-90eb-7c7232b9b540' included in the embed code.
        integrationID: "YOUR_INTEGRATION_ID",
        // Your assistant's region, for example, 'us-south', 'us-east', 'jp-tok' 'au-syd', 'eu-gb', 'eu-de', and so on.
        region: "YOUR_REGION",
        // A UUID like '6435434b-b3e1-4f70-8eff-7149d43d938b' included in the embed code.
        serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",
        // The callback function that is called after the widget instance has been created.
        onLoad: function(instance) {
          instance.render();
        },
        showLauncher: false, // Hide the web chat launcher, you will open the WebView from your mobile application
        openChatByDefault: true, // When the web chat WebView is opened, the web chat will already be open and ready to go.
        hideCloseButton: true // And the web chat will not show a close button, instead relying on the controls to close the WebView
      };
      setTimeout(function(){const t=document.createElement('script');t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";document.head.appendChild(t);});
    </script>
  </body>
</html>

アプリには、デバイスがオフラインのときに Web チャット起動メカニズムを非表示にするロジックを必ず含めてください。 会話の途中でデバイスがオフラインになると、該当するエラー・メッセージと再試行が発生します。

JavaScript ブリッジの使用

場合によっては、モバイル・アプリケーションが watsonx Assistant Web チャットと通信する必要が生じることがあります。 例えば、初期コンテキスト・データ (ユーザー ID やアカウント情報など) を設定したり、Web チャット・セキュリティー機能を使用したりする必要が生じることがあります。 これを行うには、 JavaScript ブリッジを使用できます。

JavaScript ブリッジは、すべてのモバイル・プラットフォームで使用できる一般的なパターンです。 実装の詳細は、モバイル・アプリケーション・フレームワークごとに異なります。使用しているフレームワークに対して JavaScript ブリッジを実装する方法に関する具体的な例を見つけることができます。 ただし、モバイル・アプリケーションと Web チャットの間でイベントをやり取りするという中核となる概念は、すべてのフレームワークに適用されます。

JavaScriptを使用すると、モバイルアプリと WebView, の間でイベントが送信され、ブリッジの両側でイベントリスナーが存在し、それらのイベントを処理します。 各イベントにはメッセージ・ペイロードが含まれます。このペイロードはテキストのみであるため、JSON オブジェクトを文字列化して解析し、データをやり取りする必要があります。

モバイル・アプリケーションが Web チャット・インスタンス・メソッドを呼び出す必要がある場合は、 JavaScript ブリッジを使用して、アプリケーションから WebView にイベントを送信することによってメソッドを呼び出す必要があります。 同様に、Web チャットでの動作に応じてモバイル・アプリケーションでコードを実行する必要がある場合は、 JavaScript ブリッジを介して Web チャットからモバイル・アプリケーションにイベントを送信できます。

user_defined 応答タイプと customResponse イベントを使用して、モバイル・アプリケーションでの動作を駆動できます。 ただし、 JavaScript ブリッジを介して渡す前に、イベントから event.data.element プロパティーを削除する必要があります。 このプロパティーは、文字列化できない HTML 要素が含まれているため、削除する必要があります。 user_defined 応答タイプを使用して Web チャットに新規ビューを書き込む場合は、HTML および JavaScript で記述し、 WebView内で処理する必要があります。 ( customResponse イベントについて詳しくは、 Web チャット API リファレンスを参照してください。)