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 同意画面が表示されます。
[内部] をクリックし、[作成] をクリックします。別の「OAuth 同意」画面が表示されます。
必須項目に入力します。詳しい手順については、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 つのフェーズで読み込まれます。まず、ブートストラップ スクリプトが読み込まれます。
次に、スクリプトの準備が完了すると、onLoad
コールバックが呼び出されます。次に、Google API クライアント、Google ログイン、Cloud Search ウィジェット ライブラリを読み込みます。
必要なライブラリがすべて読み込まれた後、アプリの残りの初期化は initializeApp
によって処理されます。
認可の処理
ユーザーは、アプリがユーザーに代わってクエリを行うことを承認する必要があります。ウィジェットはユーザーに承認を求めることができますが、自身で承認を処理することでユーザー エクスペリエンスを向上させることができます。
検索インターフェースの場合、アプリはユーザーのログイン状態に応じて 2 つの異なるビューを表示します。
初期化中に、適切なビューが有効になり、ログイン イベントとログアウト イベントのハンドラが構成されます。
検索インターフェースの作成
検索ウィジェットでは、検索入力と検索結果を保持するために、少量の HTML マークアップが必要です。
ウィジェットは初期化中に初期化され、入力要素とコンテナ要素にバインドされます。
これでチュートリアルは終了です。クリーンアップの手順に進みます。