このページは 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. [内部] をクリックし、[作成] をクリックします。もう 1 つの [OAuth 同意] 画面が表示されます。
2. 必須項目に入力します。詳細な手順については、OAuth 2.0 の設定のユーザーの同意に関するセクションをご覧ください。
[アプリケーションの種類] プルダウンリストをクリックし、[ウェブアプリケーション] を選択します。
[名前] フィールドに「tutorial」と入力します。
[承認済みの JavaScript 生成元] フィールドで [URI を追加] をクリックします。空の [URI] フィールドが表示されます。
[URI] フィールドに「http://localhost:8080」と入力します。
[作成] をクリックします。[OAuth クライアントを作成しました] 画面が表示されます。
クライアント ID をメモします。この値は、OAuth2 でユーザーの承認をリクエストする際に、アプリケーションを識別するために使用されます。この実装ではクライアントシークレットは必要ありません。
[OK] をクリックします。

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

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

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

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

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

コマンドラインから、ディレクトリを 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 をクエリするアプリを承認します。
検索ボックスに「テスト」などのクエリを入力し、Enter キーを押します。このページには、クエリ結果と、結果を移動するためのファセットとページネーションコントロールが表示されます。

コードの確認

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

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

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

index.html

GitHub で表示

<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

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();

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

前へ次へ

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

依存関係のインストール

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

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

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

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

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

コードの確認

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

認可の処理

検索インターフェースを作成する

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

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