実装例と拡張機能

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

これらのサンプルはインタラクティブです。ボタンをクリックしてモーダルを開き、検索クエリをお試しください。

基本キーワード検索

インデックス認証情報を使用したデフォルトの検索体験。標準的なドキュメント、ブログ、およびDocSearch互換インデックスを持つサイトに最適です。

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  insights={true}
  translations={{ button: { buttonText: 'keyword search (demo)' } }}
/>

---

Ask AI: AI支援型回答

Algolia AskAIを追加すると、インデックス済みコンテンツに基づいた統合回答を生成できます。facetFilters、filters、attributesToRetrieve、restrictSearchableAttributes、distinctなどのsearchParametersを使用してLLMコンテキストを制御可能。

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  askAi={{
    assistantId: 'askAIDemo',
    searchParameters: {
      facetFilters: ['language:en'],
    },
  }}
  insights={true}
  translations={{ button: { buttonText: 'search with askai (demo)' } }}
/>

---

カスタム検索結果表示 (hitComponent)

デフォルトの検索結果マークアップを置換し、ブランドやレイアウトに合わせてカスタマイズ。以下はカスタムコンポーネントの最小構成例です。

function CustomHit({ hit }) {
  // render a compact, branded hit card
  return (
    <a
      href={hit.url}
      style={{ display: 'block', padding: '12px 16px', textDecoration: 'none' }}
    >
      <div style={{ display: 'flex', gap: 12 }}>
        <div
          style={{
            width: 40,
            height: 40,
            backgroundColor: '#e3f2fd',
            borderRadius: 6,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontWeight: 600,
            color: '#1976d2',
          }}
        >
          {hit.type?.toUpperCase?.() || 'DOC'}
        </div>
        <div style={{ minWidth: 0 }}>
          <div
            style={{
              fontWeight: 600,
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            {hit.hierarchy?.lvl1 || 'untitled'}
          </div>
          {hit.hierarchy?.lvl2 && (
            <div
              style={{
                color: '#666',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {hit.hierarchy.lvl2}
            </div>
          )}
          {hit.content && (
            <div style={{ color: '#888', marginTop: 4 }}>{hit.content}</div>
          )}
        </div>
      </div>
    </a>
  );
}

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  hitComponent={CustomHit}
  insights={true}
  translations={{ button: { buttonText: 'custom hits (demo)' } }}
/>;

---

新規タブでリンクを開く

デフォルトでは検索結果リンクは現在のウィンドウで開きます。新規タブで開くには、カスタムhitComponentとnavigatorプロパティを併用し、クリックとキーボードナビゲーションを一貫して処理する必要があります。

// Custom hit component with target="_blank"
function HitWithNewTab({ hit, children }) {
  return (
    <a href={hit.url} target="_blank" rel="noopener noreferrer">
      {children}
    </a>
  );
}

// Navigator configuration to handle keyboard navigation
const newTabNavigator = {
  navigate: ({ itemUrl }) => window.open(itemUrl, '_blank'),
  navigateNewTab: ({ itemUrl }) => window.open(itemUrl, '_blank'),
  navigateNewWindow: ({ itemUrl }) => window.open(itemUrl, '_blank'),
};

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  hitComponent={HitWithNewTab}
  navigator={newTabNavigator}
  insights={true}
  translations={{ button: { buttonText: 'open in new tabs (demo)' } }}
/>;

警告

注意: hitComponent単体でtarget="_blank"を使用するとマウスクリックでは機能しますが、キーボード操作（矢印＋Enter）で新規タブを一貫して開くにはnavigatorプロパティが必須です。

---

任意データ構造の適用 (transformItems)

DocSearchは標準的なレコード形式に限定されません。transformItemsを使用して任意のデータ構造をDocSearchが期待する内部形式に変換可能。これによりアプリケーション、ヘルプセンター、変更履歴などあらゆるカスタムコンテンツの検索を構築できます。

以下のスニペットは非標準レコードを内部形式にマッピングします。実際にお試しください：

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="crawler_doc"
  askAi={{ assistantId: 'askAIDemo' }}
  searchParameters={{
    attributesToRetrieve: ['*'],
    attributesToSnippet: ['*'],
    hitsPerPage: 20,
  }}
  transformItems={(items) =>
    items.map((item) => ({
      objectID: item.objectID,
      content: item.content ?? '',
      url: item.domain + item.path,
      hierarchy: {
        lvl0: (item.breadcrumb || []).join(' > ') ?? '',
        lvl1: item.h1 ?? '',
        lvl2: item.h2 ?? '',
        lvl3: null,
        lvl4: null,
        lvl5: null,
        lvl6: null,
      },
      url_without_anchor: item.domain + item.path,
      type: 'content',
      anchor: null,
      _highlightResult: item._highlightResult,
      _snippetResult: item._snippetResult,
    }))
  }
  insights={true}
  translations={{ button: { buttonText: 'transform items (demo)' } }}
/>

---

活用のヒント

• 計測: insightsを有効化して利用分析データを送信し、関連性の改善を反復的に実施

• Ask AIのスコーピング: facetFilters、filters、attributesToRetrieve、restrictSearchableAttributes、distinctを使用してAIコンテキストを制御し、回答品質を向上させます。

• カスタマイズ: hitComponent、transformItems、translationsを活用し、あらゆる製品画面にDocSearchを自然に統合