次の方法で共有

クイック スタート:Bing Visual Search REST API と Node.js を使用して画像に関する分析情報を取得する

  • [アーティクル]

警告

2020 年 10 月 30 日に、Bing Search API は Azure AI サービスから Bing Search サービスに移行されました。 このドキュメントは、参考用としてのみ提供されています。 更新されたドキュメントについては、Bing search API のドキュメントを参照してください。 Bing 検索用の新しい Azure リソースを作成する手順については、「Azure Marketplace から Bing Search リソースを作成する」を参照してください。

このクイックスタートを使用して、Bing Visual Search API を呼び出してみましょう。 このシンプルな JavaScript アプリケーションは、API に画像をアップロードし、それについて返された情報を表示するというものです。 このアプリケーションは JavaScript で記述されていますが、この API はほとんどのプログラミング言語と互換性のある RESTful Web サービスです。

前提条件

  • Node.js
  • JavaScript 用の Request モジュール このモジュールは、npm install request コマンドを使用してインストールできます。
  • form-data モジュール。 このモジュールは、npm install form-data コマンドを使用してインストールできます。

Azure リソースを作成する

次のいずれかの Azure リソースを作成して、Bing Visual Search API の使用を開始します。

Bing Search v7 リソース

  • ご自身でリソースを削除するまでは Azure portal からご利用いただけます。
  • S9 価格レベルを選択します。

マルチサービス リソース

  • ご自身でリソースを削除するまでは Azure portal からご利用いただけます。
  • 複数の Azure AI サービス全体で同じキーとエンドポイントをアプリケーションに使用します。

アプリケーションを初期化する

  1. 好みの IDE またはエディターで JavaScript ファイルを作成し、次の要件を設定します。

    var request = require('request');
var FormData = require('form-data');
var fs = require('fs');

  2. API エンドポイント、サブスクリプション キー、および画像へのパスを格納する変数を作成します。 baseUri 値には、次のコードのグローバル エンドポイントを使用するか、Azure portal に表示される、お使いのリソースのカスタム サブドメイン エンドポイントを使用できます。

    var baseUri = 'https://api.cognitive.microsoft.com/bing/v7.0/images/visualsearch';
var subscriptionKey = 'your-api-key';
var imagePath = "path-to-your-image";

  3. API からの応答を出力するための、requestCallback() という関数を作成します。

    function requestCallback(err, res, body) {
    console.log(JSON.stringify(JSON.parse(body), null, '  '))
}

検索要求を構築して送信する

  1. ローカルの画像をアップロードする際には、フォーム データに Content-Disposition ヘッダーが含まれている必要があります。 その name パラメーターを "image" に設定して、filename パラメーターをお使いの画像のファイル名に設定します。 フォームの内容には、画像のバイナリ データが含まれます。 アップロードできる画像の最大サイズは、1 MB です。

    --boundary_1234-abcd
Content-Disposition: form-data; name="image"; filename="myimagefile.jpg"

ÿØÿà JFIF ÖÆ68g-¤CWŸþ29ÌÄøÖ‘º«™æ±èuZiÀ)"óÓß°Î= ØJ9á+*G¦...

--boundary_1234-abcd--

  2. FormData() を使って新しい FormData オブジェクトを作成し、fs.createReadStream() を使用して、そのオブジェクトに画像へのパスを追加します。

    var form = new FormData();
form.append("image", fs.createReadStream(imagePath));

  3. 要求ライブラリを使用して画像をアップロードし、requestCallback() を呼び出して応答を出力します。 要求ヘッダーには、必ずサブスクリプション キーを追加してください。

    form.getLength(function(err, length){
  if (err) {
    return requestCallback(err);
  }
  var r = request.post(baseUri, requestCallback);
  r._form = form; 
  r.setHeader('Ocp-Apim-Subscription-Key', subscriptionKey);
});

次のステップ

Visual Search のシングルページ Web アプリを作成する