このページは 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。[Create OAuth client ID]ページが表示されます。
（省略可）同意画面を設定していない場合は、 同意画面を構成します。「OAuth 同意」画面が表示されます。
1. [内部] をクリックし、[作成] をクリックします。別の「OAuth 同意」スクリーン表示されます。
2. 必須項目に入力します。詳細については、お客様をご案内するの同意セクション OAuth 2.0 の設定
[アプリケーションの種類] プルダウンリストをクリックして、[ウェブアプリケーション] を選択します。
[名前] フィールドに「tutorial」と入力します。
[承認済みの JavaScript 生成元] フィールドで、[URI を追加] をクリックします。空の "URI"フィールドが表示されます。
[URI] フィールドに「http://localhost:8080」と入力します。
[作成] をクリックします。「OAuth クライアントの作成」画面が表示されます。
クライアント ID をメモします。この値は、アプリケーションを特定する際に OAuth2 でユーザー認証をリクエストします。クライアントシークレットは不要です使用します。
[OK] をクリックします。

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

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

Google 管理コンソールに戻ります。
アプリアイコンをクリックします。「Apps Administration」ページが表示されます。
[Google Workspace] をクリックします。「Apps Google Workspace Administration」ページが表示されます。
下にスクロールして [Cloud Search] をクリックします。[Google Workspace の設定]ページ表示されます。
[検索アプリケーション] をクリックします。「検索アプリケーション」ページが表示されます。
黄色の丸い [+] をクリックします。"新しい検索アプリケーションの作成"ダイアログが表示されます。
[表示名] フィールドに「tutorial」と入力します。
[作成] をクリックします。
新しく作成した検索アプリケーションの横にある鉛筆アイコンをクリックします。（「検索アプリケーションの編集」）。[検索アプリケーションの詳細]ページが表示されます。
アプリケーション 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 に移動します。
[sign in] をクリックして、アプリが 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();

これでチュートリアルは完了です。そのまま続行クリーンアップ手順を実行します

前へ次へ

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

依存関係のインストール

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

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

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

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

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

コードの確認

ウィジェットを読み込む

認可の処理

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

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

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