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

警告

Bing Search API は、Cognitive Services から Bing Search Services に移行されます。Bing Search APIs are moving from Cognitive Services to Bing Search Services. 2020 年 10 月 30 日 以降、Bing Search の新しいインスタンスは、 こちらに記載されているプロセスに従ってプロビジョニングする必要があります。Starting October 30, 2020 , any new instances of Bing Search need to be provisioned following the process documented here. Cognitive Services を使用してプロビジョニングされた Bing Search API は、次の 3 年間、または Enterprise Agreement の終わり (どちらか先に発生した方) までサポートされます。Bing Search APIs provisioned using Cognitive Services will be supported for the next three years or until the end of your Enterprise Agreement, whichever happens first. 移行手順については、Bing Search Services に関する記事を参照してください。For migration instructions, see Bing Search Services.

Bing Custom Search には、ご自身の Web ページと Web アプリに JavaScript コード スニペットとして簡単に統合できるホステッド UI が用意されています。Bing Custom Search provides a hosted UI that you can easily integrate into your webpages and web applications as a JavaScript code snippet. Bing Custom Search ポータルを使用して、この UI のレイアウト、色、および検索オプションを構成できます。Using the Bing Custom Search portal, you can configure the layout, color, and search options of the UI.

カスタム ホステッド UI を構成するConfigure the custom hosted UI

Web アプリ用にホステッド UI を構成するには、次の手順に従います。To configure a hosted UI for your web applications, follow these steps. 変更を行うと、右側のウィンドウに UI のプレビューが表示されます。As you make changes, the pane on the right will give you a preview of your UI. 表示される検索結果は、インスタンスの実際の結果ではありません。The displayed search results are not actual results for your instance.

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

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

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

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

    • [Search bar and results](検索バーと結果) (既定値): 検索ボックスを表示し、その下に検索結果を表示します。Search bar and results (default): Displays a search box with search results below it.
    • [Results only](結果のみ): 検索結果のみを表示します。検索ボックスは表示されません。Results only: Displays search results only, without a search box. このレイアウトを使用する場合は、検索クエリを指定する必要があります (&q=<query string>)。When using this layout, you must provide the search query (&q=<query string>). JavaScript スニペット内の要求 URL にクエリ パラメーターを追加するか、HTML エンドポイント リンクを指定します。Add the query parameter to the request URL in the JavaScript snippet, or the HTML endpoint link.
    • [Pop-over](ポップオーバー): 検索ボックスを表示し、検索結果をスライディング オーバーレイで表示します。Pop-over: Provides a search box and displays the search results in a sliding overlay.
  5. 配色テーマを選択します。Select a color theme. [テーマのカスタマイズ] をクリックして、ご自身のアプリに合うように色をカスタマイズできます。You can customize the colors to fit your application by clicking Customize theme. 色を変更するには、色の RGB 16 進値 (例: #366eb8) を入力するか、色プレビューをクリックします。To change a color, either enter the color's RGB HEX value (for example, #366eb8), or click on the color preview.

    ポータルの右側で、変更の結果をプレビューできます。You can preview your changes on the right side of the portal. [既定値にリセット] をクリックすることで、選択したテーマの既定の色に戻すことができます。Clicking Reset to default will revert your changes to the default colors for the selected theme.

    注意

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

  6. [追加の構成] で、実際のアプリにとって適切な値を指定します。Under Additional Configurations , provide values as appropriate for your app. これらの設定は省略可能です。These settings are optional. 適用または削除の影響を確認するには、右側のプレビュー ウィンドウを参照します。To see the effect of applying or removing them, see the preview pane on the right. 使用できる構成は次のとおりです。Available configuration options are:

  7. 検索サブスクリプション キーを入力するか、ドロップダウン リストから 1 つ選択します。Enter the search subscription key or choose one from the dropdown list. ドロップダウン リストには、使用している Azure アカウントのサブスクリプションからのキーが表示されます。The dropdown list is populated with keys from your Azure account's subscriptions. Cognitive Services API アカウントについてのページを参照してください。See Cognitive Services API account.

  8. 自動提案を有効にした場合は、自動提案のサブスクリプション キーを入力するか、ドロップダウン リストから 1 つ選択します。If you enabled autosuggest, enter the autosuggest subscription key or choose one from the dropdown list. ドロップダウン リストには、使用している Azure アカウントのサブスクリプションからのキーが表示されます。The dropdown list is populated with keys from your Azure account's subscriptions. カスタム自動提案を利用するには、特定のサブスクリプション レベルが必要です。価格に関するページをご覧ください。Custom Autosuggest requires a specific subscription tier, see the pricing.

発行または元に戻すPublish or revert

Custom Search インスタンスに加える変更は、変更内容を確認できるように [構成] タブで行います。Changes you make to a Custom Search instance are made in the Configuration tab so you can validate your changes. 変更を行って発行する準備ができたら、 [発行] をクリックします。When you're done making changes and are ready to publish, click Publish. 変更は、発行するまで実稼働エンドポイントに反映されません。Changes are not reflected against your production endpoints until you publish.

発行前に、行った変更を保持しないことにした場合は、 [元に戻す] をクリックします。Before publishing, if you decide that you don't want to keep the changes you've made, click Revert. 変更を元に戻すと、ライブ状態の構成は変更されず、 [構成] タブはライブ状態に一致するように元に戻されます。When you revert your changes, the live state configuration is unchanged and the Configuration tab is reverted to match the live state.

カスタム UI を使用するConsume custom UI

ホステッド UI を使用するには、次のいずれかを実行します。To consume the hosted UI, either:

  • Web ページにスクリプトを含めますInclude the script in your web page

    <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 を使用します。Or, use the following URL in a Web browser.

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

    注意

    必要に応じて、次のクエリ パラメーターを URL に追加します。Add the following query parameters to the URL as needed. これらのパラメーターについては、Custom Search API のリファレンスをご覧ください。For information about these parameters, see Custom Search API reference.

    • qq
    • mktmkt
    • safesearchsafesearch
    • setlangsetlang

    重要

    このページには、プライバシーに関する声明や、その他の通知および条項を表示できません。The page cannot display your privacy statement or other notices and terms. 使用状況に適合するかどうかはさまざまです。Suitability for your use may vary.

カスタム構成 ID を含めて、詳細については、 [Production] (運用) タブの下にある [エンドポイント] に移動してください。For additional information, including your Custom Configuration ID, go to Endpoints under the Production tab.

構成オプションConfiguration options

[追加の構成] をクリックし、値を指定することで、ホステッド UI の動作を構成できます。You can configure the behavior of your hosted UI by clicking Additional Configurations , and providing values. これらの設定は省略可能です。These settings are optional. 適用または削除の影響を確認するには、右側のプレビュー ウィンドウを参照します。To see the effect of applying or removing them, see the preview pane on the right.

Web 検索の構成Web search configurations

  • [Web results enabled](Web の結果を有効にする): Web 検索を有効にするかどうかを決定します (ページの上部に [Web] タブが表示されます)。Web results enabled: Determines if web search is enabled (you will see a Web tab at the top of the page)
  • [Enable autosuggest](自動提案を有効にする): カスタム自動提案を有効にするかどうかを指定します (追加コストについては、価格に関するページをご覧ください)。Enable autosuggest: Determines if custom autosuggest is enabled (see pricing for additional cost).
  • [Web results per page](ページあたりの Web 結果数): 一度に表示する Web 検索結果の数です (上限は 1 ページあたり 50 件です)。Web results per page: Number of web search results to display at a time (the maximum is 50 results per page).
  • [Image caption](画像キャプション): 検索結果と共に画像を表示するかどうかを指定します。Image caption: Determines if images are displayed with search results.

[Show advanced configurations](構成の詳細を表示) をクリックすると、次の構成が表示されます。The following configurations are shown if you click Show advanced configurations :

  • [Highlight words](語句を強調表示する): 検索用語を太字にして結果を表示するかどうかを指定します。Highlight words: Determines if results are displayed with search terms in bold.
  • [Link target](リンク ターゲット): ユーザーが検索結果をクリックしたときに、新しいブラウザー タブ (空白) または同じブラウザー タブ (セルフ) のどちらで Web ページを開くかを決定します。Link target: Determines if the webpage opens in a new browser tab (Blank) or the same browser tab (self) when the user clicks a search result.

画像検索の構成Image search configurations

  • [Image results enabled](画像の結果を有効にする): 画像検索を有効にするかどうかを決定します (ページの上部に [画像] タブが表示されます)。Image results enabled: Determines if image search is enabled (you will see an Images tab at the top of the page).
  • [Image results per page](ページあたりの画像結果数): 一度に表示する画像検索結果の数です (上限は 1 ページあたり 150 件です)。Image results per page: Number of image search results to display at a time (the maximum is 150 results per page).

[Show advanced configurations](構成の詳細を表示) をクリックすると、次の構成が表示されます。The following configuration is shown if you click Show advanced configurations.

  • [Enable filters](フィルターを有効にする): Bing が返す画像をフィルター処理するために使用できるフィルターを追加します。Enable filters: Adds filters that the user can use to filter the images that Bing returns. たとえば、ユーザーはアニメーション GIF のみに結果をフィルター処理できます。For example, the user can filter the results for only animated GIFs.

動画検索の構成Video search configurations

  • [Video results enabled](動画の結果を有効にする): 動画検索を有効にするかどうかを決定します (ページの上部に [動画] タブが表示されます)。Video results enabled: Determines if video search is enabled (you will see a Videos tab at the top of the page).
  • [Video results per page](ページあたりの動画結果数): 一度に表示する動画検索結果の数です (上限は 1 ページあたり 150 件です)。Video results per page: Number of video search results to display at a time (the maximum is 150 results per page).

[Show advanced configurations](構成の詳細を表示) をクリックすると、次の構成が表示されます。The following configuration is shown if you click Show advanced configurations.

  • [Enable filters](フィルターを有効にする): Bing が返す動画をフィルター処理するために使用できるフィルターを追加します。Enable filters: Adds filters that the user can use to filter the videos that Bing returns. たとえば、ユーザーは、結果をフィルター処理して、特定の解像度の動画や、過去 24 時間以内に検出された動画を検索できます。For example, the user can filter the results for videos with a specific resolution or videos discovered in the last 24 hours.

その他の構成Miscellaneous configurations

  • [Page title](ページ タイトル): 検索結果ページのタイトル領域に表示されるテキストです (ポップオーバー レイアウトの場合は表示されません)。Page title: Text displayed in the title area of the search results page (not for pop-over layout).
  • [Toolbar theme](ツール バーのテーマ): 検索結果ページのタイトル領域の背景色を指定します。Toolbar theme: Determines the background color of the title area of the search results page.

[Show advanced configurations](構成の詳細を表示) をクリックすると、次の構成が表示されます。The following configurations are shown if you click Show advanced configurations.

Column1Column1 Column2Column2
[Search box text placeholder](検索ボックスのテキスト プレース ホルダー)Search box text placeholder 入力されるまで検索ボックスに表示されるテキスト。Text displayed in the search box prior to input.
[Title link url](タイトル リンク URL)Title link url タイトル リンクのターゲット。Target for the title link.
Logo URL (ロゴ URL)Logo URL タイトルの横に表示される画像。Image displayed next to the title.
[お気に入りアイコン]Favicon ブラウザーのタイトル バーに表示されるアイコン。Icon displayed in the browser's title bar.

次の構成は、HTML エンドポイントを通してホステッド UI を使用する場合にのみ適用されます (JavaScript のスニペットを使用する場合は適用されません)。The following configurations apply only if you consume the Hosted UI through the HTML endpoint (they don't apply if you use the JavaScript snippet).

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

次のステップNext steps