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

注：このセクションの内容は、AIアシスタントに適用されます。

iOS,Android、React Nativeなどのモバイルフレームワークで構築されたモバイルアプリケーションをお持ちの場合、JavaScriptブリッジでWebViewを使用して、アプリとAIアシスタントビルダーのウェブチャット間で通信することができます。

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

WebViewとしてWebチャットを含める

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

埋め込みスクリプトでは、'showLauncherオプションを使用してウェブチャットランチャーアイコンを非表示にし、'openChatByDefaultオプションを使用してページが読み込まれたときに自動的にウェブチャットを開きます。ほとんどの場合、'hideCloseButtonオプションを使用し、アプリのネイティブコントロールを使用して、ウェブチャットページまたはパネルを閉じる方法を制御することもできます。埋め込みスクリプトで指定できる設定オプションの詳細については、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 assistants region e.g. 'us-south', 'us-east', 'jp-tok' 'au-syd', 'eu-gb', 'eu-de', etc.
        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>

アプリの中で、デバイスがオフラインの時にウェブチャットの起動メカニズムを非表示にするロジックを含めるようにしてください。会話の途中でデバイスがオフラインになった場合、適切なエラーメッセージと再試行が行われる。

JavaScriptブリッジの使用

状況によっては、モバイル・アプリケーションはAIアシスタント・ビルダーとウェブ・チャットで通信する必要があるかもしれない。例えば、初期コンテキストデータ（ユーザーIDやアカウント情報など）を設定したり、ウェブチャットのセキュリティ機能を使用する必要があるかもしれません。そのためには、JavaScriptブリッジを使うことができる。

JavaScriptブリッジは、すべてのモバイルプラットフォームで使用できる一般的なパターンである。実装の詳細は、モバイル・アプリケーションのフレームワークによって異なります。使用しているフレームワークのJavaScriptブリッジの実装方法について、具体的な例を見つけることができます。しかし、モバイル・アプリとウェブ・チャット間でイベントをやり取りするというコア・コンセプトは、すべてのフレームワークに当てはまる。

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

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

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