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

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. [内部] をクリックし、[作成] をクリックします。もう 1 つの [OAuth 同意] 画面が表示されます。

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

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

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

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

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

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

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

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

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

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

  1. Google 管理コンソールに戻ります。
  2. アプリアイコンをクリックします。[アプリの管理] ページが表示されます。
  3. [Google Workspace] をクリックします。[Apps Google Workspace administration] ページが表示されます。
  4. 下にスクロールして [Cloud Search] をクリックします。[Google Workspace の設定] ページが表示されます。
  5. [検索アプリケーション] をクリックします。[検索アプリケーション] ページが表示されます。
  6. 黄色の丸い + をクリックします。[Create a new search application] ダイアログが表示されます。
  7. [表示名] フィールドに「tutorial」と入力します。
  8. [作成] をクリックします。
  9. 新しく作成した検索アプリケーションの横にある鉛筆アイコン（[検索アプリケーションを編集]）をクリックします。[Search application details]（申請の詳細を検索）ページが表示されます。
  10. アプリケーション ID をメモします。
  11. [データソース] の右側にある鉛筆アイコンをクリックします。
  12. [チュートリアル] の横にある [有効にする] 切り替えボタンをクリックします。この切り替えボタンをオンにすると、新しく作成された検索アプリケーションのチュートリアル データソースが有効になります。
  13. [チュートリアル] データソースの右側にある [表示オプション] をクリックします。
  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. 検索ボックスに「test」などのクエリを入力し、Enter キーを押します。ページには、クエリ結果と、結果を移動するためのファセットとページネーション コントロールが表示されます。

コードの確認

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

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

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

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

2 つ目は、スクリプトが準備完了すると 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();

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

前へ 次へ