# 検索連携フロントエンドインストールガイド
フロントエンドでgenser検索エンジンを連携する全体の手順を案内します。複雑な開発なしに、 **スクリプトの導入**と **関数呼び出し**だけでAI検索を実装できます。 {% stepper %} {% step %} ### 連携キーを準備する (Setup) **サービスキーおよびインスタンスキーの確認** スクリプト連携に必要な2つの必須キー(Key)値をgenser管理画面で事前に取得しておく必要があります。
キー名説明用途
サービスキー(Service Key)サービス連携のための固有認証キー初期化スクリプト(head 領域) 設定用
インスタンスキー(Instance Key)作成された検索インスタンスの固有識別子検索API(searchProducts)およびログ収集呼び出し用
{% hint style="info" %} **サービスキー確認経路** genser管理画面の設定メニューで「サービスキー」を確認できます。 {% endhint %}

管理画面の設定画面でのサービスキーの位置

{% hint style="info" %} **インスタンスキー確認経路** genser管理画面のインスタンス設定メニューで、テーブルのインスタンス管理ツール「コードコピー」からインスタンスキーをコピーできます。 {% endhint %}

管理画面インスタンス設定でのインスタンスキーコピー位置

**機能有効化の確認** APIレスポンスに特定のデータを含めたい場合、管理画面のインスタンス設定で該当機能を事前に「有効(ON)」に変更する必要があります。 {% endstep %} {% step %} ### スクリプトを設置する (Install) genserサービスを利用するには、全てのページの共通レイアウトに基本スクリプトを挿入する必要があります。 {% hint style="warning" %} 共通レイアウトが適用されないページがある場合は、そのページにも個別にスクリプトを挿入する必要があります。 {% endhint %} * **場所：** HTMLドキュメントの `` タグ終了直前。 * **注意事項：** * 共通レイアウトが適用されないページがある場合は、そのページにも個別に挿入する必要があります。 * `発行されたサービスキー` の部分に実際に割り当てられたキー値を入力する必要があります。 ```js ``` {% endstep %} {% step %} ### 検索結果を呼び出す (Search) 基本スクリプトが全ページに挿入されていることを前提に、該当ページ内で以下のようなJavaScript関数を使用できます。 下記の関数に型に合ったデータを入れて呼び出すと、商品検索結果データを受け取れます。 #### 検索呼び出し(searchProducts) ```js genser.call('searchProducts', { instanceKey: 'instanceKey', // 必須: 管理画面で作成したインスタンスキー queryText: '商品検索語', // 必須: ユーザーが入力した検索語 }) .success((res) => { console.log(res); // 検索結果データを返却 (下記レスポンス構造参照) }) .error((err) => { console.error(err); // エラー発生時 }); ```
項目タイプ必須説明
instanceKeystring必須genser管理画面で作成したインスタンスキー（固有識別子）
queryTextstring必須ユーザーが入力した商品検索語
...任意その他拡張フィールド（用途に応じて追加可能）
#### 応答データ構造(Response) `success` コールバックで返されるデータは `type`に従って4つの形態に分類されます。 **1. 商品情報(SEARCH)** 検索された商品の一覧です。 ```js { "requestId": "検索語に対するID", "type": "SEARCH", "products": [ { "code": "商品コード", "name": "商品名", ... }, { "code": "商品コード", "name": "商品名", ... }, ], "facet": {}, "nextPageToken": '' } ```
項目タイプ必須説明
requestIdstring必須検索語に対する固有のリクエストID
typestring必須応答タイプ（例: "SEARCH"）
productsarray必須商品リストの配列
products[].codestring必須商品コード
products[].namestring必須商品名
facetobject任意-
nextPageTokenstring任意-
**2. 検索結果の説明(SUMMARY)** `検索結果説明の設定`この管理画面で有効化されている場合、検索結果に対する要約テキストを返します。 ```js { "requestId": "検索語に対するID", "type": "SUMMARY", "summary": "要約内容のテキスト" } ```
項目タイプ必須説明
requestIdstring必須検索語に対する固有のリクエストID
typestring必須応答タイプ（例: "SUMMARY"）
summarystring必須検索語または結果に対する要約内容のテキスト
**3. 関連キーワード(KEYWORDS)** `関連キーワードの設定`この管理画面で有効化されている場合、関連する推奨キーワードのリストを返します。 ```js { "requestId": "検索語に対するID", "type": "KEYWORDS", "keywords": ["キーワード1", "キーワード2"] } ```
項目タイプ必須説明
requestIdstring必須検索語に対する固有のリクエストID
typestring必須応答タイプ（例: "KEYWORDS"）
keywordsstring[]必須推奨または関連キーワードの配列（文字列リスト）
**4. 提案質問(QUESTIONS)** `提案質問の設定`この管理画面で有効化されている場合、ユーザーが追加で気にする可能性のある質問リストを返します。 ```js { "requestId": "検索語に対するID", "type": "QUESTIONS", "questions": [ "質問内容 1", "質問内容 2" ] } ```
項目タイプ必須説明
requestIdstring必須検索語に対する固有のリクエストID
typestring必須応答タイプ（例: "QUESTIONS"）
questionsstring[]必須提案質問の配列（文字列リスト）
{% endstep %} {% step %} ### ログデータを収集する (Analytics) 検索品質向上と統計のためにユーザー行動データを収集します。 * **検索(SE):** `searchProducts` 関数呼び出し時に自動的に収集されます。 * **表示(DI) & クリック(CL):** 以下の関数を使用して直接呼び出す必要があります。 #### 表示 (DI) 検索結果の商品の画面表示時に呼び出します。 ```js genser.call('DI', { instance: { key: 'instanceKey' }, // インスタンスキー goods: [ { code: '商品コード', // searchProducts の結果の code name: '商品名', // searchProducts の結果の name }, ... ], // 商品情報 requestId: '検索語に対するID', // searchProducts の結果で受け取った requestId }) .success((res) => { console.log(res); // 正常コールバック }) .error((err) => { console.error(err); // エラーコールバック }); ```
項目タイプ必須説明
instanceobject必須genser管理画面で作成したインスタンス情報
instance.keystring必須genser管理画面で作成したインスタンスキー（固有識別子）
goodsarray必須ユーザーに推奨/選択された商品一覧
goods[].codestring必須商品コード（searchProducts レスポンスの商品のコードを使用）
goods[].namestring必須商品名（searchProducts レスポンスの商品の名前を使用）
requestIdstring必須商品検索結果で受け取ったリクエストID（searchProducts レスポンスのrequestIdを使用）
#### クリック (CL) ユーザーが商品をクリックしたときに呼び出します。 ```js genser.call('CL', { instance: { key: 'instanceKey' }, // インスタンスキー goods: [ { code: '商品コード', // searchProducts の結果の code name: '商品名', // searchProducts の結果の name }, ... ], // 商品情報 requestId: '検索語に対するID', // searchProducts の結果で受け取った requestId }) .success((res) => { console.log(res); // 正常コールバック }) .error((err) => { console.error(err); // エラーコールバック }); ```
項目タイプ必須説明
instanceobject必須genser管理画面で作成したインスタンス情報
instance.keystring必須genser管理画面で作成したインスタンスキー（固有識別子）
goodsarray必須ユーザーに推奨/選択された商品一覧
goods[].codestring必須商品コード（searchProducts レスポンスの商品のコードを使用）
goods[].namestring必須商品名（searchProducts レスポンスの商品の名前を使用）
requestIdstring必須商品検索結果で受け取ったリクエストID（searchProducts レスポンスのrequestIdを使用）
{% endstep %} {% endstepper %}
Reactコード例 ```js import React, { useState, useEffect } from 'react'; /** * Genser Search React Component * 前提条件: public/index.htmlのにGenser SDKスクリプトがロードされている必要があります。 */ const GenserSearch = () => { const [query, setQuery] = useState(''); const [products, setProducts] = useState([]); const [requestId, setRequestId] = useState(null); // インスタンスキー（環境変数や定数で管理することを推奨） const INSTANCE_KEY = 'YOUR_INSTANCE_KEY'; // 1. 検索ハンドラー const handleSearch = (e) => { e.preventDefault(); if (!query.trim()) return; if (!window.genser) { console.error("Genser SDKがロードされていません。"); return; } // searchProducts 呼び出し window.genser.call('searchProducts', { instanceKey: INSTANCE_KEY, queryText: query }) .success((res) => { if (res.type === 'SEARCH') { // ステート更新 -> 再レンダリングを引き起こす setProducts(res.products); setRequestId(res.requestId); } }) .error((err) => { console.error('検索エラー:', err); }); }; // 2. 表示(DI)ログ送信 // productsやrequestIdが変更されたとき（つまり検索結果がレンダリングされたとき）に実行 useEffect(() => { if (products.length > 0 && requestId) { window.genser.call('DI', { instance: { key: INSTANCE_KEY }, goods: products.map(p => ({ code: p.code, name: p.name })), requestId: requestId }); // console.log('DI(表示)ログ送信完了'); } }, [products, requestId]); // 3. クリック(CL)ログ送信ハンドラー const handleProductClick = (product) => { if (!requestId) return; window.genser.call('CL', { instance: { key: INSTANCE_KEY }, goods: [{ code: product.code, name: product.name }], requestId: requestId }); // console.log('CL(クリック)ログ送信完了:', product.name); // 実際の商品ページへ遷移するロジック // window.location.href = `/product/${product.code}`; }; return (
{/* 検索フォーム */}
setQuery(e.target.value)} placeholder="検索語を入力してください" />
{/* 検索結果リスト */}
{products.map((product) => (
handleProductClick(product)} style={{ cursor: 'pointer', margin: '10px 0', border: '1px solid #ddd', padding: '10px' }} > {/* 画像処理 (APIレスポンスに応じてフィールド名を調整する必要あり) */} {product.imageUrl && {product.name}}

{product.name}

{product.code}

))}
); }; export default GenserSearch; ```
Vueコード例 ```js ```
HTML/JS コード例 ```js Genser Search Example
```
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.genser.ai/ja/integration/frontend-installation/installation-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.