Oracle Cloud Infrastructureドキュメント

Webビュー

自然言語の会話は、その性質上、自由に流れるものです。 ただし、ユーザーから情報を収集するのにスキルの最良の方法であるとはかぎりません。 たとえば、クレジット・カードまたはパスポート詳細を入力する場合、ユーザーは特定の情報を入力する必要があります(正確に入力します)。 このような種類のタスクをサポートするために、スキルでweb表示アプリケーションを呼び出すことができます。

これらのアプリでは、フォーム、日付ピッカー、フィールドおよびLovなどのUI要素を介した構造化データ入力の有効化のみでなく、イメージのアップロード、ユーザー・シグネチャの取得、バーコードのスキャンなどの様々な方法で、ユーザー入力の検証および情報の収集を行うことができます。 アプリケーションでは、クレジット・カード番号のような機密ユーザー・データも保護されます。これは、アプリケーションへの入力時にチャット履歴が表示されないためです。
webview_webapp.pngの説明は以下のとおりです
図webview_webapp.pngの説明

Webビューをスキルに統合する方法

Webアプリケーションをスキルに統合するには、次のことが必要です:
  • スキルをwebアプリケーションに接続するWebビュー・サービス。外部Webサーバーでホストしたり、Digital Assistant内でホストできます。
  • ダイアログ・フロー内のSystem.Webviewコンポーネント定義。 このコンポーネントは、webビュー・サービスに名前を付けることでWebアプリケーションへのゲートウェイを操作し、(次のスニペットのservice:"oracletravelweb")、sourceVariableListプロパティでWebアプリケーションに基づいて取得するダイアログ・フロー変数をリストし、Webアプリケーションが値を返す場合、System.Webviewはそれらをvariableプロパティ(次のスニペットのwebviewresponse)に格納します。
      callWebview:
        component: "System.Webview"
        properties:
          sourceVariableList: "origin,destination"
          variable: "webviewresponse"
          prompt: "Press 'Open Oracle Travel'..."
          service: "oracletravelweb"
          linkLabel: "Open Oracle Travel"
          cancelLabel: "Cancel"
        transitions:
          next: "handleResponse"
          actions:
            textReceived: "onCancel"
            cancel: "onCancel"

    実行時に、コンポーネントによって、webアプリを起動するボタンがレンダリングされます。 System.Webviewコンポーネントは、スキル内でwebビューとして起動するか、Webチャネルでスキルが実行されるときに別のブラウザ・タブとして起動します。

  • Digital Assistantまたはリモートwebサーバー内でホストされているWebアプリケーション自体。

Digital Assistant-ホストWebview

Digital Assistant内でホストされるwebアプリケーションは、単一ページ・アプリケーション(SPAs)、単一HTMLページ(index.html)を持つクライアント側Webアプリケーションであり、Webアプリケーションを起動し、スキル・ユーザー入力に応じて更新される必要があります。 System.WebviewコンポーネントがSPAをコールする場合:
  1. index.htmlがロードされ、webアプリケーションがWebビューとして、または別のブラウザ・タブで起動されます。
  2. その後、System.WebviewコンポーネントはコールバックURLとともにダイアログ・フローで収集されたパラメータ値を渡します。 「SPAが入力パラメータおよびコールバックURLにアクセスできるようにします」では、これらの値を渡す様々な方法が説明されています。
  3. webアプリケーションは、System.Webviewコンポーネントによって生成されたコールバックURLに対してPOSTリクエストを作成します。 このリクエストは、アプリが処理を完了したことを示します。 アプリケーションがデータを返すと、variableプロパティに格納されるJSONオブジェクトとしてこのリクエストに含まれます。 ${variable_property_name.value.Param}を使用すると、ダイアログ・フローでこのデータを参照できます。

Oracle Visual Builder、Angular、Oracle JavaScript Extension Toolkit (JET)、React.jsなどの様々なフレームワークを使用してSPAを書き込むことができます。

ノート

Oracle Visual Builderのバックエンドでは、REST接続が管理され、ユーザーがOracle Identity Cloud Serviceを介して)ビジネス・オブジェクトが実行されるため、Digital Assistant内でホストされているOracle Visual Builderアプリケーションには次の制限があります。
  • ビジネス・オブジェクトを使用できません。
  • Oracle Identity Cloud Serviceとの統合はできません。
  • Oracle Visual Builder認証プロキシを使用してRESTサービスにアクセスすることはできません。
したがって、これらの機能のいずれかをサポートすることは、外部サーバー上でOracle Visual Builderアプリケーションをホストする必要があることを意味します。

Digital Assistant内でアプリケーションをホストするには、TARアーカイブ(TGZファイル)にバンドルする必要があります。 これはSPAであるため、index.htmlファイルはこのパッケージのルートに存在する必要があります。

SPAが入力パラメータおよびコールバックURLにアクセスできるようにします

Digital Assistant内でSPAをホストすると、System.Webviewコンポーネントによって、window.webViewParameters変数(次のスニペットに示す)が、実行時にindex.htmlファイルの<head>要素にインジェクトされます。 ペイロード内のキー値のペアは、スキルから渡された入力値のSPAを示します。
window.webviewParameters = {
    parameters: [
         {"key": "variableA", "value": "jsonObjA"},
         {"key": "variableB", "value": "jsonObjB"},
         ...
         {"key": "webview.onDone",
          "value": "https://host:port/patch"},
    ]
};
アプリがこれらのオブジェクトにアクセスできるようにするには、window.webviewParameters['parameters']変数を宣言します:
let webviewParameters = window.webviewParameters !=null?window.webviewParameters['parameters']:null;
戻されたオブジェクトは、コールバックによってSystem.Webview variableプロパティに格納されます。
Reactアプリケーションapp.jsファイルの次のスニペットでは、関数は指定されたキーの値を返します。 見つからない場合は、デフォルト値が設定されます。

ヒント:

独自のコードでこのスニペットを使用できます。 this.getParamのかわりにvar getParamを使用できます。
class App extends Component {
    constructor(props) {
        super(props);

        let wvParams = window.webviewParameters['parameters'];

        this.getParam = (arrParams, key, defaultValue) => {
            if (arrParams) {
                let param = arrParams.find(e => {
                    return e.key === key;
                });
                return param ? param.value : defaultValue;
            }
            return defaultValue;
        };
index.htmlファイルのプレースホルダーの定義

Digital Assistant内でSPAをホストする場合、index.htmlファイル内の変数値にプレースホルダーを定義する必要はありません。 index.htmlファイルに<head>要素があるかぎり、webアプリケーションは必要な値およびコールバックを認識します。

<head>要素に単一のプレースホルダーを追加

<head>要素内に、webview.sourceVariableListプレースホルダーを含む<script>ブロックを挿入します。 webアプリケーションは、入力パラメータ・データおよびコールバックURLを持つJSONでエンコードされた文字列を置き換えます。

次の例では、キーはwindow.wvParamsです。 window.に付加する場合には、このキーに任意の名前を使用できます。値は常に"webview.sourceVariableList"として定義する必要があります。
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
    <script>
        window.wvParams="webview.sourceVariableList";
    </script>
  </head>
アプリケーション・コードで、let文はwebview.sourceVariableListwvParamsに割り当てます。 ここでは、出力値はJSONオブジェクトとして解析されます:
class App extends Component {
    constructor(props) {
        super(props);

        let wvParams = (window.wvParams === "webview.sourceVariableList" ?
            [] : JSON.parse(window.wvParams)['parameters']);

        this.getParam = (arrParams, key, defaultValue) => {
            if (arrParams) {
                let param = arrParams.find(e => {
                    return e.key === key;
                });
                return param ? param.value : defaultValue;
            }
            return defaultValue;
        };

   
<head>要素への複数のメソッドの追加

SourceVariableコンポーネントに定義された各値のプレースホルダーを含む<script>ブロックおよびコールバックURLを追加します。 webアプリケーションは、コールバックURLと入力パラメータのデータをJSONでエンコードされた文字列として戻します。 プレースホルダーを追加したので、window.webviewParameters['parameters']変数を宣言する必要はありません。

次のスニペットに示すように、プレースホルダーはキーと値のペアによって定義されます。 各値は次のとおりです:
  • SourceVariableプロパティに定義されている入力値に一致します。
  • webview. (たとえば、webview.keyword)により追加されます。
また、コールバック値はwebview.onDoneである必要があります。 次のスニペット(webview.keywordwebview.assigneewebview.inventorはすべてsourceVariableList: "assignee, keyword, inventor"に一致など)。 コールバックURLは、webview.onDoneで定義されています。 コールバック・キーには任意の名前を付けることができますが、値は常にwebview.onDoneとして定義する必要があります。

オプションで、ウィンドウ付きキーを追加することによって、グローバル変数を設定することもできます(次のスニペット内のwindow.Keywordなど)。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>React App</title>
    <script>
        window.Keyword="webview.keyword";
        window.Assignee="webview.assignee";
        window.Inventor="webview.inventor";
        window.CALLBACK_URL="webview.onDone";
    </script>
</head>

コールバックURLをWebアプリケーションの完了ボタンに関連付け

System.Webviewコンポーネントによって生成されるコールバックURLは、基本的にはステート・トークン(https://...?state=<callback-state-token>)のため、単一使用コールバックです。 デフォルトの存続期間は1時間ですが、System.Webviewコンポーネントがwebアプリケーションからのコールバック・リクエストを処理した後、時間がクリアされます。 この時点以降、ユーザーはwebアプリケーションを問合せできないため、コールバックURLに接続された閉じるボタンを使用してEndページに移動する必要があります。

外部ホストWebビュー

セキュリティ要件を満たしている場合に外部サーバーにアプリケーションをホストするか、サーバー側のインフラストラクチャを利用するか、データ統合または中央管理が必要な場合に使用します。 リモートでホストされるwebアプリケーションはSPAsにはできますが、アクセスする必要はありません。 webビューとしてレンダリングするように既存のWebアプリを変更したり、スキル専用のWebアプリを作成できます。

外部でホストされるwebアプリケーションの場合、Webアプリケーション自体と中間サービスをホストする必要があります。 webアプリはスキルからのGETリクエストを想定していますが、仲介サービスはスキルPOSTリクエストを受信し、そのWebアプリへのリダイレクトURLを入力します。 この2つは、同じwebサーバー上に配置することも、別のWebサーバーでホストすることもできます。 実装に関係なく、リクエスト・フローは次のようになります:
  1. 実行時に、System.Webviewコンポーネントは、スキルのコールバックURLおよびユーザー入力パラメータをキーと値のペアの配列として含むPOSTリクエストを仲介サービスに送信します。 コンポーネントによって、コールバックURLキーとしてwebview.onDone変数が追加されます。
    {
     "parameters": [{
      "value": "CDG",
      "key": "origin"
    }, {
     "value": "MUC",
     "key": "destination"
    }, {
      "value": "https://<url>:443/connectors/v1/callback?state=cb5443. ..2c"
      "key": "webview.onDone" 
    }]
    
  2. 仲介サービスは、単一のプロパティwebview.urlを持つスキルにJSONオブジェクトを返します。 この文字列は、スキルから後続のGETリクエストで使用されるwebアプリへのリダイレクトURLを定義します。 例えば:
    {
    "webview.url":
            "https://<app url>?callbackURL=https://example.com:443/connectors/v1/callback?state=cb55435552c&origin=CDG&destination=MUC
    }
  3. スキルにより、webview.urlプロパティで定義したURLにGETリクエストが送信されて、webアプリが起動されます。
  4. webビューで入力が処理されると、完全なコールバックが送信されます。これは、System.Webviewコンポーネントによって生成され、仲介サービスに提供されたコールバックURLへのPOSTリクエストです。 このリクエストは、アプリが終了した(およびスキルがセッションの制御を再開する)シグナルだけでなく、System.Webviewvariableプロパティに格納されたデータのペイロードを返すことができるようになります。
    ホスティング戦略によって、いくつかの留意事項があります:
    • webアプリと中間サービスを同じWebサーバーでホストする場合、スキル・リクエスト・パラメータをセッションに保存できるため、長いURL文字列が必要になりません。
    • webアプリと中間サービスを異なるサーバーでホストする場合、スキルに送信されるリダイレクトURLのすべてのWebアプリ・リクエスト・パラメータを問合せパラメータとしてエンコードする必要があります。

Web表示サービスの作成

webビュー・サービスを構成すると、スキルが、Webビュー・アプリケーションをホストするサービスに接続されます。

Webviewサービスは、Webviewページから作成します。このページにアクセスするには、左側のナビゲーション・バーでコンポーネント (これはコンポーネント・アイコンのイメージです。)をクリックしてから、Webビューをクリックします。 このページには、System.Webviewserviceプロパティで参照できる様々なWebviewサービスがリストされます。

ノート

スキルのバージョニングまたはクローニング時にDigital Assistantがホストするサービスを再構成する必要はありません。
ただし、webアプリケーションを外部的にホストする場合、スキルのバージョニングまたはクローニングを行う際にサービスを再構成する必要があります。

Digital Assistant-ホストWebViewサービスの作成

外部ホストのWebviewサービスの構成の一環として認証資格証明を入力する必要がある場合でも、WebアプリケーションをTARアーカイブ(TGZファイル)にパッケージ化してからアップロードするだけで済みます。 index.htmlファイルは、このファイルのルート・レベルにある必要があります。

GNU tarコマンドを使用して、アプリをパッケージ化できます:
tar -zcvf   webapp.tgz *
この例では、-zcvfコマンドによってwebapp.tgzというファイルが作成されます。 「index.htmlファイルのプレースホルダーの定義」に記述されているように、index.htmlファイルがTGZファイルのルートにあるかぎり選択したフレームワークを使用してwebアプリケーションを作成できます。 実際、index.htmlは、ルート・レベルの唯一のファイルであってもかまいません。
サービスを作成する手順:
  1. 名前ファイルにサービスの名前および説明(オプション)を入力します。 ここに入力する名前は、System.Webviewコンポーネントのserviceプロパティの値に一致する必要があります。
  2. ホストされたサービスオプションを切り替えます。
  3. TGZを「パッケージ・ファイル」フィールドにドロップするか、参照してTGZファイルを選択します。
  4. 「作成」(コールバック)をクリックします。
Oracle Visual Builderアプリケーションのパッケージ化

vb-build Gruntタスクを使用して、Digital AssistantのOracle Visual Builderアプリケーションをビルドし、最適化します。 このタスクはローカルで実行することも、Oracle Developer Cloud Service (DevCS)でのビルドの一部として実行することもできます。

Oracle Visual Builderアプリケーションをビルドする前に:
  • Oracle Visual Builderでダイレクト(プロキシをバイパス)および匿名アクセスの許可を選択し、「Webビューをスキルに統合する方法」で説明されている制限に対応できるようにサービス接続が構成されていることを確認します。
  • Oracle Visual Builderを使用してバイナリを最適化する場合、Gitへのプッシュを選択します。 そのようなリポジトリがない場合は、このステップをスキップできます。

    Oracle Visual Builderアプリケーションの保護およびGitリポジトリへの統合の詳細は、「Oracle Visual Builderドキュメント」を参照してください。

Oracle Visual Builderアプリケーションをローカルにパッケージ化

Oracle Visual Builderアプリをローカルで最適化およびパッケージ化するには:

  1. Oracle Visual Builderホーム・ページで、アプリケーションを選択し、データなしでエクスポートをクリックします。
  2. アプリケーションを解凍します。
  3. ルート・フォルダでnpm installを実行します(package.jsonGruntfile.jsファイルの両方が格納されています)。

    npm installを実行すると、package.jsonファイルに定義されたgrunt-vb-build npmパッケージが取得されます。

  4. パラメータは次の要領で指定してください。
    ./node_modules/.bin/grunt vb-build \
    --url=${serviceURL} \
    --username=${username} \
    --password=${password} \
    --id=${id} --ver=${ver} \
    --ver=<your visual app ID>\
    --git-source=<local directory for sources>
    パラメータ 説明
    url Visual BuilderインスタンスのURL。
    username Visual Builderインスタンスのユーザー名。
    password Visual Builderインスタンスのパスワード。
    id アプリケーションのID。 アプリケーションIDはアプリケーション名と同じでもかまいませんが、アプリケーションIDはアイデンティティ・ドメイン内で一意である必要があります。
    ver アプリケーションのバージョン。
    git ソースのロケーションを指定します(ソースが現在のフォルダ内にない場合)。
  5. ビルドが完了したら、アプリケーション・ディレクトリ(WebAppsディレクトリにある)に移動します。 たとえば、 build/optimized/webApps/financialDisputeです。
  6. GNU tarコマンド(tar -zcvf webapp.tgz *など)を実行します。
    tar -zcvf   webapp.tgz *
Oracle Developer Cloud Serviceを使用してアプリケーションをパッケージ化
Oracle Developer Cloud Service (DevCS)でアプリケーションをビルドおよび最適化するには:
  1. webアプリケーション用の「ビルド・ジョブ」を構成します:
    • ソース・コントロールとしてGitを追加して、ジョブをGitと関連付けます(webアプリケーションもGitリポジトリと統合する必要があります)。
    • ビルド・テンプレートを選択します。
    • ビルドに渡される文字列パラメータを追加します。 パラメータには次のものが含まれます。
      • アプリケーション・サービスのURL、IDおよびバージョン(Oracle Visual Builderインスタンスから取得できます)
      • ユーザーおよびパスワード(パスワード・パラメータ)
      • 最適化。Uglify2など。
    • ビルド・ステップでは、npm installで始まるシェル・スクリプトを追加して、vb-buildなどのデフォルト・パラメータを「Visual Builder Gruntタスク」に渡します。
      npm install
      ./node_modules/.bin/grunt vb-build \
      --url=${URL} \
      --username=${username} \
      --password=${password} \
      --id=${id} --ver=${ver} \
      --optimize=${optimize} \
      --schema=dev \
      
    • ビルド後構成に対しては、アーティファクト・アーカイバ (ビルド後のアクションの追加メニューから選択)を選択し、アーカイブするファイル・フィールドにbuild*zipと入力して、アーカイブを構成します。
  2. ビルドの完了後、ZIPファイルをダウンロードして抽出します。 index.htmlファイルは、webappsディレクトリにあるwebappフォルダ内にあります。
  3. アプリケーションをTGZファイル(tar -zcvf webapp.tgz *など)にパッケージ化します。

外部ホストのWebビュー・サービスの作成

外部webアプリケーション・サーバーでホストされているWebビュー・アプリケーションの場合は、次の手順を実行します:
  • 名前-リモート・サービスの名前。
    ノート

    ここに入力する名前は、System.Webviewコンポーネントのserviceプロパティの値に一致する必要があります。
  • ホストされたサービストグルをオフにします。
  • WebアプリケーションURL-webサーバーによって提供されるベース・エンドポイント。HTTP POSTリクエストのペイロードとしてソース・パラメータを受け入れます。 たとえば、https://example.oracle.com:3001/webviewParamsです。 webアプリケーションと中間サービスが個別にホストされている場合、仲介サービスのURLを入力します。
  • 認証トークン-WebアプリケーションUrlプロパティによって指定されたURLへのリクエストとともに送信される認可トークン。 このプロパティは、Basic <token>またはBearer <token>のフォームです。 これはオプション・プロパティです
  • 問合せパラメータ-キーと値のペアが、POSTリクエストに追加される問合せパラメータとなる、文字列化されたJSONオブジェクト。 これはオプション・プロパティです。

ダイアログ・フローでの返されたデータの参照

ペイロードで返される値によって変数値は更新されないため、レスポンス・ペイロードのプロパティ名はsourceVariableListプロパティで定義される変数名と一致させる必要はありません。

返されるペイロードには、${variable_property_name.value.Param}を使用してアクセスできます。 次のスニペットでは、出力データは${outputfromweb.value.disputeReason}として参照されます。
  webview:
    component: "System.Webview"
    properties:
      sourceVariableList: "fullname, amount"
      variable: "outputfromweb"
      prompt: "Tap the link to file your dispute."
      service: "DisputeFormService"
    transitions:
      next: "output"

  output:
    component: "System.Output"
    properties:
      text:" Thank you, ${fullname.value}, we've noted your response: ${outputfromweb.value.disputeReason}"
webビューのサービスを作成してSystem.Webviewコンポーネントを構成した後、スキル・テスター(テスタのアイコン。)を使用してWebアプリケーションにより返されるデータについて確認できます。 会話がSystem.Webviewの状態を通過した後、会話ウィンドウでSystem.Webviewコンポーネントのvariable定義を展開し、戻された値を調べます。
tester_variables.pngの説明は以下のとおりです
「図tester_variables.pngの説明」

ヒント:

Webアプリケーション開発者は、返されたペイロードに記述的なプロパティ名が含まれていることを確認する必要があります。

シナリオ: Webアプリとスキルの統合

次のように、ユーザーがパターンを検索して、パターンのPDFを開くことができるスキルを開発します:

  1. Helloを入力してスキルを確立すると、パターン問合せパラメータを入力するように求められます: 割当先、キーワードおよびインベンタ。 OracleシステムおよびJamesをそれぞれ入力します。
    search_patents_1.pngの説明が続きます
    図search_patents_1.pngの説明

  2. webビューを開くには、タップして続行を選択します。

  3. リストからパターンを選択し、VIEW DOCをクリックします。
    search_patents_2.pngの説明が続きます
    図search_patents_2.pngの説明

  4. スキル会話に戻り、PDFファイルのオープンをタップします。
    search_patents_3.pngの説明が続きます
    図search_patents_3.pngの説明

index.htmlファイルの構成

スキル内から検索をレンダリングするWebビューをサポートするために、U.S. Patent Officeの公開REST APIを使用して、スキルから渡される特許割当て先、キーワードおよび在庫を問い合せて特許を特定するReactで書かれてたSPAがあります。 Digital Assistant内でこのwebアプリケーションをホストする予定であるため、<script>ブロック内でこれらのパラメータ(およびコールバックURL)にプレースホルダーを追加する必要があります:
window.parameter="webview.value":
<title>React App</title>
    <script>
        window.Keyword="webview.keyword";
        window.Assignee="webview.assignee";
        window.Inventor="webview.inventor";
        window.callback_url="webview.onDone";
    </script>
</head>
PARAMETER_PLACEHOLDERおよびKEYWORD_PLACEHOLDERなどの文字列は、実際の値に置換されます。 webアプリは、POSTコールを通じて、CALLBACK_URLプロパティで指定されたエンドポイントに出力値をスキルに戻します。
ノート

このファイルを外部webアプリケーション・サーバーでホストした場合、index.htmlファイルは次のようにプレースホルダーを記述します:
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
...
    <title>React App</title>
    <script>
        window.Keyword="__KEYWORD_PLACEHOLDER__";
        window.Assignee="__ASSIGNEE_PLACEHOLDER__";
        window.Inventor="__INVENTOR_PLACEHOLDER__";
        window.callback_url="__CALLBACK_URL_PLACEHOLDER__";
    </script>
  </head>

Webアプリケーションに値を渡すようにダイアログ・フローを構成

ダイアログ・フロー定義では、System.Webviewコンポーネントを使用してこれらの変数値を渡します。 ただし、このコンポーネントを定義する前に、次のようにこれらの変数を宣言し、値を設定します:
  1. assigneekeywordおよびinventorの変数の宣言:
      variables:
        assignee: "string"
        keyword: "string"
        inventor: "string"
        instantAppOutput: "string"
        patentData: "string"
        patentFileLink: "string"
        iResult: "nlpresult"
  2. System.TextおよびSystem.SetVariableの状態を追加し、これらの値を入力するように求められます:
      askAssignee:
        component: "System.Text"
        properties:
          prompt: "What assignee (company) is the patents for?"
          variable: "assignee"
        transitions: {}
      askKeyword:
        component: "System.Text"
        properties:
          prompt: "What keyword are you looking for?"
          variable: "keyword"
        transitions: {}
      askInventor:
        component: "System.Text"
        properties:
          prompt: "Who is the patent inventor?"
          variable: "inventor"
        transitions:
          next: "doSearch"
      startSearch:
        component: "System.Output"
        properties:
          text: "Searching patent..."
          keepTurn: true
        transitions: {}
      setAssignee:
        component: "System.SetVariable"
        properties:
          variable: "assignee"
          value: "${iResult.value.entityMatches['Assignee'][0]}"
        transitions: {}
      setKeyword:
        component: "System.SetVariable"
        properties:
          variable: "keyword"
          value: "${iResult.value.entityMatches['Keyword'][0]}"
        transitions: {}
      startInventor:
        component: "System.SetVariable"
        properties:
          variable: "inventor"
          value: "${iResult.value.entityMatches['Inventor'][0]}"
        transitions: {}
  3. これらの値を収集および設定するメカニズムを利用して、System.Webviewコンポーネント(次のスニペットのdoSearch)のフローを定義します:
      doSearch:
        component: "System.Webview"
        properties:
          sourceVariableList: "assignee, keyword, inventor"
          variable: "patentData"
          prompt: "Tap link to view patents"
          service: "HostedWebservice1"
        transitions: {}
    コンポーネント定義:
    • これらの値を入力パラメータ(sourceVariableList: "assignee, keyword, inventor")としてwebviewクライアント・アプリケーションに渡します。そのindex.htmlファイルには対応する値プレースホルダーが含まれています。 アプリでは、これらのファイルを使用して、US Patent Officeの公開REST APIを使用してパターン・データの問合せを実行します。

    • webビューから返されたPDFリンクを保持する変数(variable: "patentData")を設定します。

    • webアプリケーションをホストしているWeb表示サービス(HostedWebService1)に名前を付けます。 すべてのWebビュー・サービス名と同様に、この名前は、コンポーネント・ページ(これはコンポーネント・アイコンのイメージです。)のWebビュー・タブにリストされます。

  4. ユーザーがパターン・ファイルのPDFを表示できるようにするには、System.SetVariableコンポーネントとSystem.CommonResponseコンポーネントの状態を追加します:
    • System.setVariableの状態(次のスニペットのsavePatentFile)により、patentData変数(${patentData.value.url}からPDF値を抽出する値式を使用して、patentFileLinkの値が設定されます。
    • System.CommonResponseの状態(showFileLink)はpatentFileLinkを参照して、PDF URLをカード・レスポンス内のハイパーリンク(cardUrl: "${patentFileLink}")として表示します。
      savePatentFile:
        component: "System.SetVariable"
        properties:
          variable: "patentFileLink"
          value: "${patentData.value.url}"
        transitions: {}
      showFileLink:
        component: "System.CommonResponse"
        properties:
          processUserMessage: true
          metadata: 
            responseItems:         
            - type: "cards" 
              cardLayout: "vertical"
              cards:
              # must have title, cardUrl, and one additional property for card to work in FB Messenger
              - title: "View detail"
                description: "Open PDF file"
                cardUrl: "${patentFileLink}"