PowerApps アプリからカスタム コネクタを使用するUse a custom connector from a PowerApps app

注意

このトピックは、Azure Logic Apps、Microsoft Flow、および PowerApps でのカスタム コネクタの作成および使用に関するチュートリアル シリーズの一部です。This topic is part of a tutorial series on creating and using custom connectors in Azure Logic Apps, Microsoft Flow, and PowerApps. プロセスを理解するために、カスタム コネクタの概要を必ずご確認ください。Make sure you read the custom connector overview to understand the process.

このトピックでは、前のトピックで作成したカスタム コネクタを使用する基本的なアプリを作成します。In this topic, you build a basic app that uses the custom connector you created in a previous topic. アプリはテキスト入力を受け取り、カスタム コネクタを使用して、Cognitive Services Text Analytics API を呼び出します。The app takes text input, then uses the custom connector to call the Cognitive Services Text Analytics API. コネクタはテキストのセンチメント スコア (0 ~ 1) を返し、アプリはそのスコアをパーセンテージとして表示します。The connector returns the sentiment score (0 to 1) for the text, and the app displays it as a percentage. 次の図は、完成したアプリを示しています。The following image shows the finished app:

完成した感情分析アプリ

前提条件Prerequisites

アプリを作成してカスタム コネクタを追加するCreate the app and add the custom connector

まず、一からアプリを作成し、前のトピックで作成したカスタム コネクタに接続します。The first thing you do is create an app from blank, then connect to the custom connector that you created in a previous topic.

  1. web.powerapps.com で、[空白から開始] > 電話アプリ アイコン (電話) > [このアプリの作成] の順に選択します。In web.powerapps.com, choose Start from blank > Phone app icon (phone) > Make this app.

    空白から開始

  2. アプリ キャンバスで、[データに接続] を選択します。On the app canvas, choose connect to data.

  3. [データ] パネルで、前のトピックで作成した接続 ("SentimentDemo" など) を選択します。On the Data panel, choose the connection you created in a previous topic (such as "SentimentDemo").

  4. Sentiment Analysis という名前でアプリを保存します。Save the app with the name Sentiment Analysis.

アプリにコントロールを追加するAdd controls to the app

次に、アプリの UI を作成します。この UI にテキストを入力し、そのテキストを API に送信して、応答を取得できるようにします。You now build out the UI for the app, so that you can enter text, submit that text to the API, and get a response.

  1. 四角形のアイコンをタイトル バーとして追加し、"感情分析" というラベルを追加します。Add a rectangle icon as a title bar, then add the label "Sentiment Analysis".

    タイトル バーの追加

  2. "テキストを入力し、[スコアを取得] をクリックしてください" というラベルを追加し、テキスト入力コントロールを追加します。Add the label "Enter your text, then click Get score", then add a text input control.

    ラベルとテキスト入力の追加

  3. "スコアを取得" というボタンを追加します。Add a button with the text "Get score".

    ボタンの追加

  4. "センチメント スコアは" というラベルを追加します。Add the label "The sentiment score is". 次のセクションでは、このラベルを完成する数式を追加します。In the next section, you add a formula to complete this label.

    ラベルの追加

動作を駆動する数式を追加するAdd formulas to drive behavior

データ接続と UI を設定したら、アプリの動作を駆動する PowerApps の数式を追加します。With the data connection and UI in place, now you add PowerApps formulas that drive the behavior of the app. 数式は、カスタム コネクタを介して API を呼び出し、"コレクション" (表形式の変数) に結果を格納して、書式設定された結果をアプリに表示します。The formulas call the API through the custom connector, store the result in a collection (a tabular variable), then display the formatted result in the app.

  1. 作成したボタンを選択し、ボタンの OnSelect プロパティをコネクタの名前 (ピリオドを含む) に設定します。Choose the button you created, then set the OnSelect property of the button to the name of the connector (including the period).

    SentimentDemo.
    

    PowerApps によって DetectSentiment のオートコンプリート オプションが提供されます。カスタム コネクタによってこれが使用可能になるためです。PowerApps gives you an auto-complete option of DetectSentiment because the custom connector makes this available.

  2. ここで、ボタンの OnSelect プロパティを次の数式に設定します。Now set the OnSelect property of the button to the following formula.

    ClearCollect(sentimentCollection, SentimentDemo.DetectSentiment(
        {id:"1", language:"en", text:TextInput1.Text}).documents.score)
    

    この数式は、API からセンチメント スコアを取得し、コレクションに格納します。This formula gets the sentiment score from the API, and stores it in a collection:

    1. 数式は、カスタム コネクタによって公開されている 3 つのパラメーター idlanguage、および text を持つ DetectSentiment 関数を呼び出します。The formula calls the DetectSentiment function with the three parameters exposed by the custom connector: id, language, and text. 最初の 2 つの値は数式に正しく指定し、Text の値はテキスト入力コントロールから取得します (最初の 2 つの値は、アプリの他の場所からプルすることもできます)。We specify values for the first two right in the formula, and get the value for Text from the text input control (you could also pull the first two values from somewhere else in an app).

    2. 関数は、送信するドキュメントごとに score を返します。この例では、一度の 1 つのドキュメントを送信します。The function returns a score for each document that you send; in our examples, we send one document at a time. スコアの範囲は 0 (否定) ~ 1 (肯定) です。The score ranges from 0 (negative) to 1 (positive).

    3. 次に、数式は ClearCollect 関数を呼び出して、既存の値を sentimentCollection から削除し、score の値を追加します。The formula then calls the ClearCollect function to remove any existing values from the sentimentCollection and add the value from score.

  3. 作成したラベルを選択し、そのラベルの Text プロパティを次の数式に設定します。Choose the label that you created, then set the Text property of the label to the following formula.

    "The sentiment score is " & Round(First(sentimentCollection).score, 3) * 100 & "%"
    

    この数式は、コレクションからセンチメント スコアを取得し、書式を設定して、表示します。This formula gets the sentiment score from the collection, and formats and displays it:

    1. First() 関数は、最初の (このケースでは唯一の) レコードを sentimentCollect に返し、そのレコードに関連付けられている (唯一の) score フィールドを表示します。The First() function returns the first (and in this case only) record in sentimentCollect, and displays the score field (the only field) associated with that record.

    2. Round() 関数は、3 桁に四捨五入します。数式の残りの部分は、結果をパーセンテージとして書式設定し、コンテキスト情報を追加します。The Round() function rounds the score to 3 places; the rest of the formula formats the result as a percentage and adds some information for context.

アプリケーションをテストするTest the app

ここで完成したアプリを実行して、期待どおりに動作することを確認します。Now run the completed app to make sure it works as expected.

  1. 選択Choose 右上のアプリの実行アイコンを選択して、 アプリを実行します。in the top right to run the app.

  2. テキスト入力コントロールにフレーズを入力し、[スコアを取得] を選択します。Enter a phrase in the text input control, and choose Get score. 数秒以内にセンチメント スコアが表示されます。The sentiment score should be displayed within a few seconds.

完成したアプリは次の画像のようになります。The finished app looks like the following image:

完成した感情分析アプリ

簡単なアプリですが、カスタム コネクタを介して Cognitive Services を呼び出すことによって強力な機能が得られます。It's a simple app, but it gains powerful functionality by being able to call Cognitive Services through a custom connector.

次の手順Next steps

組織内でコネクタを共有します。また、組織外のユーザーが使用できるようにコネクタの認定を受けます。Share the connector within your organization and/or get the connector certified so that people outside your organization can use it: