次の方法で共有

ホステッド UI エクスペリエンスを構成する

  • [アーティクル]

警告

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

Bing Custom Search には、ご自身の Web ページと Web アプリに JavaScript コード スニペットとして簡単に統合できるホステッド UI が用意されています。 Bing Custom Search ポータルを使用して、この UI のレイアウト、色、および検索オプションを構成できます。

カスタム ホステッド UI を構成する

Web アプリ用にホステッド UI を構成するには、次の手順に従います。 変更を行うと、右側のウィンドウに UI のプレビューが表示されます。 表示される検索結果は、インスタンスの実際の結果ではありません。

  1. Bing Custom Search のポータルにサインインします。

  2. Bing Custom Search インスタンスを選択します。

  3. [Hosted UI] (ホステッド UI) タブをクリックします。

  4. レイアウトを選択します。

    • [Search bar and results](検索バーと結果) (既定値): 検索ボックスを表示し、その下に検索結果を表示します。
    • [Results only](結果のみ): 検索結果のみを表示します。検索ボックスは表示されません。 このレイアウトを使用する場合は、検索クエリを指定する必要があります (&q=<query string>)。 JavaScript スニペット内の要求 URL にクエリ パラメーターを追加するか、HTML エンドポイント リンクを指定します。
    • [Pop-over](ポップオーバー): 検索ボックスを表示し、検索結果をスライディング オーバーレイで表示します。

  5. 配色テーマを選択します。 [テーマのカスタマイズ] をクリックして、ご自身のアプリに合うように色をカスタマイズできます。 色を変更するには、色の RGB 16 進値 (例: #366eb8) を入力するか、色プレビューをクリックします。

    ポータルの右側で、変更の結果をプレビューできます。 [既定値にリセット] をクリックすることで、選択したテーマの既定の色に戻すことができます。

    注意

    色を選択するときは、アクセシビリティを考慮してください。

  6. [追加の構成] で、実際のアプリにとって適切な値を指定します。 これらの設定は省略可能です。 適用または削除の影響を確認するには、右側のプレビュー ウィンドウを参照します。 使用できる構成は次のとおりです。

  7. 検索サブスクリプション キーを入力するか、ドロップダウン リストから 1 つ選択します。 ドロップダウン リストには、使用している Azure アカウントのサブスクリプションからのキーが表示されます。 Azure AI サービス API アカウントに関するページを参照してください。

  8. 自動提案を有効にした場合は、自動提案のサブスクリプション キーを入力するか、ドロップダウン リストから 1 つ選択します。 ドロップダウン リストには、使用している Azure アカウントのサブスクリプションからのキーが表示されます。 カスタム自動提案を利用するには、特定のサブスクリプション レベルが必要です。価格に関するページをご覧ください。

発行または元に戻す

Custom Search インスタンスに加える変更は、変更内容を確認できるように [構成] タブで行います。 変更を行って発行する準備ができたら、[発行] をクリックします。 変更は、発行するまで実稼働エンドポイントに反映されません。

発行前に、行った変更を保持しないことにした場合は、[元に戻す] をクリックします。 変更を元に戻すと、ライブ状態の構成は変更されず、 [構成] タブはライブ状態に一致するように元に戻されます。

カスタム UI を使用する

ホステッド UI を使用するには、次のいずれかを実行します。

  • Web ページにスクリプトを含めます

    <html>
    <body>
        <script type="text/javascript" 
            id="bcs_js_snippet"
            src="https://ui.customsearch.ai /api/ux/rendering-js?customConfig=<YOUR-CUSTOM-CONFIG-ID>&market=en-US&safeSearch=Moderate&version=latest&q=">
        </script>
    </body>    
</html>

  • または、Web ブラウザーで次の URL を使用します。

    https://ui.customsearch.ai/hosted?customConfig=YOUR-CUSTOM-CONFIG-ID

    注意

    必要に応じて、次のクエリ パラメーターを URL に追加します。 これらのパラメーターについては、Custom Search API のリファレンスをご覧ください。

    • q
    • mkt
    • safesearch
    • setlang

    重要

    このページには、プライバシーに関する声明や、その他の通知および条項を表示できません。 使用状況に適合するかどうかはさまざまです。

カスタム構成 ID を含めて、詳細については、 [Production] (運用) タブの下にある [エンドポイント] に移動してください。

構成オプション

[追加の構成] をクリックし、値を指定することで、ホステッド UI の動作を構成できます。 これらの設定は省略可能です。 適用または削除の影響を確認するには、右側のプレビュー ウィンドウを参照します。

Web 検索の構成

  • [Web results enabled](Web の結果を有効にする): Web 検索を有効にするかどうかを決定します (ページの上部に [Web] タブが表示されます)。
  • [Enable autosuggest](自動提案を有効にする): カスタム自動提案を有効にするかどうかを指定します (追加コストについては、価格に関するページをご覧ください)。
  • [Web results per page](ページあたりの Web 結果数): 一度に表示する Web 検索結果の数です (上限は 1 ページあたり 50 件です)。
  • [Image caption](画像キャプション): 検索結果と共に画像を表示するかどうかを指定します。

[Show advanced configurations](構成の詳細を表示) をクリックすると、次の構成が表示されます。

  • [Highlight words](語句を強調表示する): 検索用語を太字にして結果を表示するかどうかを指定します。
  • [Link target](リンク ターゲット): ユーザーが検索結果をクリックしたときに、新しいブラウザー タブ (空白) または同じブラウザー タブ (セルフ) のどちらで Web ページを開くかを決定します。

画像検索の構成

  • [Image results enabled](画像の結果を有効にする): 画像検索を有効にするかどうかを決定します (ページの上部に [画像] タブが表示されます)。
  • [Image results per page](ページあたりの画像結果数): 一度に表示する画像検索結果の数です (上限は 1 ページあたり 150 件です)。

[Show advanced configurations](構成の詳細を表示) をクリックすると、次の構成が表示されます。

  • [Enable filters](フィルターを有効にする): Bing が返す画像をフィルター処理するために使用できるフィルターを追加します。 たとえば、ユーザーはアニメーション GIF のみに結果をフィルター処理できます。

動画検索の構成

  • [Video results enabled](動画の結果を有効にする): 動画検索を有効にするかどうかを決定します (ページの上部に [動画] タブが表示されます)。
  • [Video results per page](ページあたりの動画結果数): 一度に表示する動画検索結果の数です (上限は 1 ページあたり 150 件です)。

[Show advanced configurations](構成の詳細を表示) をクリックすると、次の構成が表示されます。

  • [Enable filters](フィルターを有効にする): Bing が返す動画をフィルター処理するために使用できるフィルターを追加します。 たとえば、ユーザーは、結果をフィルター処理して、特定の解像度の動画や、過去 24 時間以内に検出された動画を検索できます。

その他の構成

  • [Page title](ページ タイトル): 検索結果ページのタイトル領域に表示されるテキストです (ポップオーバー レイアウトの場合は表示されません)。
  • [Toolbar theme](ツール バーのテーマ): 検索結果ページのタイトル領域の背景色を指定します。

[Show advanced configurations](構成の詳細を表示) をクリックすると、次の構成が表示されます。

Column1 Column2
[Search box text placeholder](検索ボックスのテキスト プレース ホルダー) 入力されるまで検索ボックスに表示されるテキスト。
[Title link url](タイトル リンク URL) タイトル リンクのターゲット。
Logo URL (ロゴ URL) タイトルの横に表示される画像。
[お気に入りアイコン] ブラウザーのタイトル バーに表示されるアイコン。

次の構成は、HTML エンドポイントを通してホステッド UI を使用する場合にのみ適用されます (JavaScript のスニペットを使用する場合は適用されません)。

  • Page title (ページ タイトル)
  • Toolbar theme (ツール バーのテーマ)
  • Title link URL (タイトル リンク URL)
  • Logo URL (ロゴ URL)
  • Faviicon URL

次のステップ