クイック スタート:Ink Recognizer REST API および JavaScript を使用したデジタル インクの認識

  • [アーティクル]

注意

Ink Recognizer API は、2020 年 8 月 26 日にプレビューを終了しました。 既存の Ink Recognizer リソースがある場合は、2021 年 1 月 31 日にサービスが完全に廃止されるまで、引き続き使用できます。

このクイックスタートは、デジタル インク ストロークで Ink Recognizer API の使用を始めるときに使用します。 この JavaScript アプリケーションは、JSON 形式のインク ストローク データを含む API 要求を送信し、応答を表示します。

このアプリケーションは JavaScript で記述され、Web ブラウザーで実行されますが、API はほとんどのプログラミング言語と互換性のある RESTful Web サービスです。

通常、この API はデジタル インキング アプリから呼び出します。 このクイックスタートでは、JSON ファイルから次の手書きサンプルのインク ストローク データを送信します。

手書きテキストのイメージ

このクイック スタートのソース コードは、GitHub にあります。

前提条件

  • Web ブラウザー
  • このクイックスタートのインク ストローク データのサンプルは、GitHub にあります。

Ink Recognizer リソースを作成する

注意

2019 年 7 月 1 日より後に作成されたリソースのエンドポイントでは、次に示すカスタム サブドメイン形式を使用します。 リージョンのエンドポイントの詳細および全一覧については、「Cognitive Services のカスタム サブドメイン名」を参照してください。

Azure Cognitive Services は、ユーザーがサブスクライブする Azure リソースによって表されます。 Azure portal を使用して、Ink Recognizer 用のリソースを作成します。

リソースの作成後、Azure portal でリソースを開き、 [クイック スタート] をクリックして、エンドポイントとキーを取得します。

以下の 2 つの環境変数を作成します。

  • INK_RECOGNITION_SUBSCRIPTION_KEY - 要求を認証するためのサブスクリプション キー。

  • INK_RECOGNITION_ENDPOINT - リソースのエンドポイント。 以下のようになります。
    https://<your-custom-subdomain>.api.cognitive.microsoft.com

新しいアプリケーションを作成する

  1. 好みの IDE またはエディターで、新しい .html ファイルを作成します。 次に、後で追加するコードのための基本的な HTML を追加します。

    <!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
        </script>
    </head>

    <body>
    </body>

</html>

  2. <body> タグ内に、次の html を追加します。

    1. JSON の要求と応答を表示するための 2 つのテキスト領域。
    2. 後で作成する recognizeInk() 関数を呼び出すためのボタン。
    <!-- <body>-->
    <h2>Send a request to the Ink Recognition API</h2>
    <p>Request:</p>
    <textarea id="request" style="width:800px;height:300px"></textarea>
    <p>Response:</p>
    <textarea id="response" style="width:800px;height:300px"></textarea>
    <br>
    <button type="button" onclick="recognizeInk()">Recognize Ink</button>
<!--</body>-->

JSON データの例を読み込む

  1. <script> タグ内に、sampleJson 用の変数を作成します。 次に、エクスプローラーを開いて JSON ファイルを選択できるようにする、openFile() という名前の JavaScript 関数を作成します。 Recognize ink ボタンをクリックすると、この関数が呼び出されて、ファイルの読み取りが開始されます。

  2. FileReader オブジェクトの onload() 関数を使用して、ファイルを非同期的に処理します。

    1. ファイル内の \n または \r 文字は、空の文字列に置き換えます。
    2. JSON.parse() を使用して、テキストを有効な JSON に変換します
    3. アプリケーションで request テキスト ボックスを更新します。 JSON.stringify() を使用して、JSON 文字列の書式を設定します。
    var sampleJson = "";
function openFile(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
        sampleJson = reader.result.replace(/(\\r\\n|\\n|\\r)/gm, "");
        sampleJson = JSON.parse(sampleJson);
        document.getElementById('request').innerHTML = JSON.stringify(sampleJson, null, 2);
    };
    reader.readAsText(input.files[0]);
};

Ink Recognizer API に要求を送信する

  1. <script> タグ内に、recognizeInk() という関数を作成します。 この関数は後で API を呼び出し、応答でページを更新します。 この関数内の次の手順のコードを追加します。

    function recognizeInk() {
// add the code from the below steps here 
}

    1. エンドポイント URL、サブスクリプション キー、サンプル JSON 用の変数を作成します。 次に、API 要求を送信するための XMLHttpRequest オブジェクトを作成します。

      // Replace the below URL with the correct one for your subscription. 
// Your endpoint can be found in the Azure portal. For example: "https://<your-custom-subdomain>.cognitiveservices.azure.com";
var SERVER_ADDRESS = process.env["INK_RECOGNITION_ENDPOINT"];
var ENDPOINT_URL = SERVER_ADDRESS + "/inkrecognizer/v1.0-preview/recognize";
var SUBSCRIPTION_KEY = process.env["INK_RECOGNITION_SUBSCRIPTION_KEY"];
var xhttp = new XMLHttpRequest();

    2. XMLHttpRequest オブジェクトの戻り関数を作成します。 この関数では、成功した要求からの API 応答を解析し、アプリケーションでそれを表示します。

      function returnFunction(xhttp) {
    var response = JSON.parse(xhttp.responseText);
    console.log("Response: %s ", response);
    document.getElementById('response').innerHTML = JSON.stringify(response, null, 2);
}

    3. 要求オブジェクトのエラー関数を作成します。 この関数では、コンソールにエラーを出力します。

      function errorFunction() {
    console.log("Error: %s, Detail: %s", xhttp.status, xhttp.responseText);
}

    4. 要求オブジェクトの onreadystatechange プロパティ用の関数を作成します。 要求オブジェクトの準備状態が変化すると、上記の戻り関数とエラー関数が適用されます。

      xhttp.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            returnFunction(xhttp);
        } else {
            errorFunction(xhttp);
        }
    }
};

    5. API 要求を送信すします。 サブスクリプション キーを Ocp-Apim-Subscription-Key ヘッダーに追加し、content-type を application/json に設定します

      xhttp.open("PUT", ENDPOINT_URL, true);
xhttp.setRequestHeader("Ocp-Apim-Subscription-Key", SUBSCRIPTION_KEY);
xhttp.setRequestHeader("content-type", "application/json");
xhttp.send(JSON.stringify(sampleJson));
};

アプリケーションを実行し、応答を表示する

このアプリケーションは Web ブラウザー内で実行できます。 成功応答が JSON 形式で返されます。 JSON 応答は GitHub でも確認できます。

次のステップ

REST API リファレンス

デジタル インキング アプリで Ink Recognition API がどのように動作するかを確認するには、GitHub 上の次のサンプル アプリケーションを参照してください。