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

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

依存関係のインストール

  1. コネクタがリポジトリのインデックス登録をまだ行っている場合は、新しいシェルを開いて続行します。

  2. コマンドラインから cloud-search-samples/end-to-end/search-interface ディレクトリに移動します。

  3. ウェブサーバーの実行に必要な依存関係をダウンロードするには、次のコマンドを実行します。

npm install

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

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

  1. Google Cloud コンソールに戻ります。

  2. 左側のナビゲーションで [認証情報] をクリックします。

  3. [認証情報を作成] プルダウンで [OAuth クライアント ID] を選択します。[OAuth クライアント ID の作成] ページが表示されます。

  4. （省略可）同意画面を構成していない場合は、[同意画面を構成] をクリックします。[OAuth 同意] 画面が表示されます。

    1. [内部] をクリックし、[作成] をクリックします。別の [OAuth 同意] 画面が表示されます。

    2. 必須項目を入力します。手順については、OAuth 2.0 の設定のユーザーの同意に関するセクションをご覧ください。

  5. [アプリケーションの種類] プルダウン リストをクリックし、[ウェブ アプリケーション] を選択します。

  6. [名前] フィールドに「tutorial」と入力します。

  7. [承認済みの JavaScript 生成元] フィールドで [URI を追加] をクリックします。空の [URIs] フィールドが表示されます。

  8. [URI] フィールドに「http://localhost:8080」と入力します。

  9. [作成] をクリックします。[OAuth クライアントを作成しました] 画面が表示されます。

  10. クライアント ID をメモします。この値は、OAuth2 でユーザー認証をリクエストする際にアプリケーションを識別するために使用されます。この実装ではクライアント シークレットは必要ありません。

  11. [OK] をクリックします。

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

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

  1. Google 管理コンソールに戻ります。
  2. アプリ アイコンをクリックします。[アプリの管理] ページが表示されます。
  3. [Google Workspace] をクリックします。[アプリ Google Workspace 管理] ページが表示されます。
  4. 下にスクロールして [Cloud Search] をクリックします。[Google Workspace の設定] ページが表示されます。
  5. [検索アプリケーション] をクリックします。[Search Appplications] ページが表示されます。
  6. 黄色の丸い + をクリックします。[新しい検索アプリを作成] ダイアログが表示されます。
  7. [表示名] フィールドに「チュートリアル」と入力します。
  8. [作成] をクリックします。
  9. 新しく作成した検索アプリケーションの横にある鉛筆アイコン（[検索アプリケーションを編集]）をクリックします。[Search application details] ページが表示されます。
  10. アプリケーション ID をメモします。
  11. [データソース] の右にある鉛筆アイコンをクリックします。
  12. [チュートリアル] の横にある [有効にする] 切り替えボタンをクリックします。この切り替えにより、新しく作成された検索アプリケーションのチュートリアル データソースが有効になります。
  13. [tutorial] データソースの右側にある [表示オプション] をクリックします。
  14. すべてのファセットを確認します。
  15. [保存] をクリックします。
  16. [完了] をクリックします。

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

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

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

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

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

npm run start

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

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

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

コードの確認

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

ウィジェットを読み込んでいます

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

index.html
<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
/**
 * 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
<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
/**
 * 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
<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
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();

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

前へ 次へ