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 を追加] をクリックします。空の [URIs] フィールドが表示されます。
[URI] フィールドに「
http://localhost:8080
」と入力します。[作成] をクリックします。[OAuth クライアントを作成しました] 画面が表示されます。
クライアント ID をメモします。この値は、OAuth2 でユーザー承認をリクエストするときにアプリケーションの識別に使用されます。この実装にクライアント シークレットは必要ありません。
[OK] をクリックします。
検索アプリケーションを作成する
次に、管理コンソールで検索アプリケーションを作成します。検索アプリケーションは、検索インターフェースとそのデフォルト構成を仮想的に表現したものです。
- Google 管理コンソールに戻ります。
- アプリアイコンをクリックします。[Apps management] ページが表示されます。
- [Google Workspace] をクリックします。[Apps Google Workspace Administration] ページが表示されます。
- 下にスクロールして [Cloud Search] をクリックします。[Google Workspace の設定] ページが表示されます。
- [検索アプリケーション] をクリックします。[検索アプリケーション] ページが表示されます。
- 丸い黄色の [+] をクリックします。[新しい検索アプリケーションの作成] ダイアログが表示されます。
- [表示名] フィールドに「tutorial」と入力します。
- [作成] をクリックします。
- 新しく作成した検索アプリケーション([Edit search application])の横にある鉛筆アイコンをクリックします。[検索アプリケーションの詳細] ページが表示されます。
- アプリケーション ID をメモします。
- [データソース] の右側にある鉛筆アイコンをクリックします。
- [チュートリアル] の横にある [有効にする] トグルをクリックします。この切り替えにより、新しく作成した検索アプリケーションのチュートリアル データソースが有効になります。
- 「tutorial」データソースの右側にある [表示オプション] をクリックします。
- すべてのファセットを確認します。
- [保存] をクリックします。
- [完了] をクリックします。
ウェブ アプリケーションを構成する
認証情報と検索アプリを作成したら、次のようにアプリケーション構成を更新してこれらの値を含めます。
- コマンドラインから 「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 マークアップが必要です。
ウィジェットは初期化され、初期化中に入力要素とコンテナ要素にバインドされます。
これでチュートリアルは完了です。クリーンアップ手順に進みます。