このページは Cloud Translation API によって翻訳されました。

ユーザーインターフェースを設定する

Google Cloud Search チュートリアルのこのページでは、埋め込み可能な検索ウィジェットを使用してカスタム検索アプリケーションを設定する方法について説明します。このチュートリアルの最初から開始するには、Cloud Search スタートガイドチュートリアルをご覧ください。

依存関係をインストールする

コネクタがまだリポジトリをインデックス登録している場合は、新しいシェルを開いて続行します。
コマンドラインで cloud-search-samples/end-to-end/search-interface ディレクトリに移動します。
ウェブサーバーの実行に必要な依存関係をダウンロードするには、次のコマンドを実行します。

npm install

検索アプリケーションの認証情報を作成する

コネクタには、Cloud Search API を呼び出すためのサービスアカウントの認証情報が必要です。認証情報を作成するには:

Google Cloud コンソールに戻ります。
左側のナビゲーションで、[認証情報] をクリックします。
[認証情報を作成] プルダウンリストから [OAuth クライアント ID] を選択します。[OAuth クライアント ID の作成] ページが表示されます。
（省略可）同意画面を構成していない場合は、[同意画面を構成] をクリックします。OAuth 同意画面が表示されます。
1. [内部] をクリックし、[作成] をクリックします。別の「OAuth 同意」画面が表示されます。
2. 必須項目に入力します。詳しい手順については、OAuth 2.0 の設定のユーザーの同意に関するセクションをご覧ください。
[アプリケーションの種類] プルダウンリストをクリックし、[ウェブアプリケーション] を選択します。
[名前] フィールドに「tutorial」と入力します。
[承認済みの JavaScript 生成元] で、[URI を追加] をクリックします。空の URI フィールドが表示されます。
[URI] フィールドに「http://localhost:8080」と入力します。
[作成] をクリックします。[OAuth クライアントを作成しました] 画面が表示されます。
クライアント ID をメモします。この値は、OAuth2 でユーザー認証をリクエストするときに、アプリケーションを識別するために使用されます。この実装では、クライアントシークレットは必要ありません。
[OK] をクリックします。

検索アプリケーションを作成する

次に、管理コンソールで検索アプリケーションを作成します。検索アプリケーションは、検索インターフェースとそのデフォルト構成を仮想的に表したものです。

Google 管理コンソールに戻ります。
アプリアイコンをクリックします。[アプリの管理] ページが表示されます。
[Google Workspace] をクリックします。[Apps Google Workspace 管理] ページが表示されます。
下にスクロールして [Cloud Search] をクリックします。[Google Workspace の設定] ページが表示されます。
[検索アプリケーション] をクリックします。[Search Appplications] ページが表示されます。
黄色の丸い + をクリックします。[新しい検索アプリケーションの作成] ダイアログが表示されます。
[表示名] フィールドに「tutorial」と入力します。
[作成] をクリックします。
新しく作成した検索アプリケーション（「検索アプリケーションを編集」）の横にある鉛筆アイコンをクリックします。[検索アプリケーションの詳細] ページが表示されます。
アプリケーション ID をメモします。
[データソース] の右側にある鉛筆アイコンをクリックします。
[チュートリアル] の横にある [有効にする] をクリックします。この切り替えにより、新しく作成された検索アプリケーション用にチュートリアルのデータソースが有効になります。
「tutorial」データソースの右側にある [Display options] をクリックします。
すべてのファセットを確認します。
[保存] をクリックします。
[完了] をクリックします。

ウェブアプリケーションを構成する

認証情報と検索アプリを作成したら、次のようにアプリケーション構成を更新します。

コマンドラインから、ディレクトリを「cloud-search-samples/end-to-end/search-interface/public」に変更します。
テキストエディタで app.js ファイルを開きます。
ファイルの先頭で searchConfig 変数を見つけます。
[client-id] は、以前に作成した OAuth クライアント ID に置き換えます。
[application-id] は、前のセクションでメモした検索アプリケーション ID に置き換えます。
ファイルを保存します。

アプリケーションを実行する

次のコマンドを実行してアプリケーションを開始します。

npm run start

インデックスをクエリする

検索ウィジェットを使用してインデックスをクエリするには:

ブラウザを開き、http://localhost:8080 に移動します。
[ログイン] をクリックして、アプリが Cloud Search に対してクエリを実行することを承認します。
検索ボックスに「test」などのクエリを入力し、Enter キーを押します。このページには、クエリ結果、ファセットやページネーションコントロールなどが表示され、結果を移動できます。

コードの確認

残りのセクションでは、ユーザーインターフェースの構成について説明します。

ウィジェットを読み込む

ウィジェットと関連ライブラリは 2 つのフェーズで読み込まれます。まず、ブートストラップスクリプトが読み込まれます。

index.html

GitHub で表示

<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

次に、スクリプトの準備が完了すると、onLoad コールバックが呼び出されます。次に、Google API クライアント、Google ログイン、Cloud Search ウィジェットライブラリを読み込みます。

app.js

GitHub で表示

/**
 * Load the cloud search widget & auth libraries. Runs after
 * the initial gapi bootstrap library is ready.
 */
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

必要なライブラリがすべて読み込まれた後、アプリの残りの初期化は initializeApp によって処理されます。

認可の処理

ユーザーは、アプリがユーザーに代わってクエリを行うことを承認する必要があります。ウィジェットはユーザーに承認を求めることができますが、自身で承認を処理することでユーザーエクスペリエンスを向上させることができます。

検索インターフェースの場合、アプリはユーザーのログイン状態に応じて 2 つの異なるビューを表示します。

index.html

GitHub で表示

<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

初期化中に、適切なビューが有効になり、ログインイベントとログアウトイベントのハンドラが構成されます。

app.js

GitHub で表示

/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

  // Connect sign-in/sign-out buttons
  document.getElementById("sign-in").onclick = (e) =>  auth.signIn();
  document.getElementById("sign-out").onclick = (e) => auth.signOut();

  // ...

}

検索インターフェースの作成

検索ウィジェットでは、検索入力と検索結果を保持するために、少量の HTML マークアップが必要です。

index.html

GitHub で表示

<div id="search_bar">
  <div>
    <div id="suggestions_anchor">
      <input type="text" id="search_input" placeholder="Search for...">
    </div>
  </div>
</div>
<div id="facet_results" ></div>
<div id="search_results" ></div>

ウィジェットは初期化中に初期化され、入力要素とコンテナ要素にバインドされます。

app.js

GitHub で表示

gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

これでチュートリアルは終了です。クリーンアップの手順に進みます。

前へ次へ

ユーザー インターフェースを設定する

依存関係をインストールする

検索アプリケーションの認証情報を作成する

検索アプリケーションを作成する

ウェブ アプリケーションを構成する

アプリケーションを実行する

インデックスをクエリする

コードの確認

ウィジェットを読み込む

認可の処理

検索インターフェースの作成

ユーザーインターフェースを設定する

ウェブアプリケーションを構成する