メインコンテンツへスキップ
バージョン: 安定版 (v4.x)

v4のスタートガイド

非公式ベータ版翻訳

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

はじめに​

DocSearch v4は以前のバージョンから大幅に進化し、アクセシビリティの向上、レスポンシブ対応の強化、ドキュメント検索体験の改善を実現しています。Algolia Autocompleteを基盤とするDocSearch v4は、世界中の主要ドキュメントサイトから信頼されるシームレスな統合を提供します。

インストール​

Composable APIのドキュメントをお探しですか？こちらでご覧いただけます。

DocSearchパッケージはnpmレジストリで入手可能です。

Docusaurus ユーザー向け​

Docusaurusで構築されたドキュメントサイトの場合、最新のDocSearch機能（サイドパネルサポートなどの新たなAsk AI機能を含む）を利用するには、@docusaurus/preset-classicを維持したまま@docsearch/docusaurus-adapterを使用してください。

yarn add @docsearch/js@4
# or with npm
npm install @docsearch/js@4

Without package manager​

Include CSS in your website's <head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@4" />

And the JavaScript at the end of your <body>:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@4"></script>

初回クエリのパフォーマンス最適化​

preconnectを使用してユーザーの初回検索体験を向上させましょう（詳細は後述のパフォーマンス最適化を参照）

実装方法​

DocSearch requires a dedicated container in your HTML

<div id="docsearch"></div>

Initialize DocSearch by passing your container:

import docsearch from '@docsearch/js';

import '@docsearch/css';

docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  indexName: 'YOUR_INDEX_NAME',
  apiKey: 'YOUR_SEARCH_API_KEY',
});

DocSearch generates an accessible, fully-functional search input for you automatically.

クイックテスト（認証情報なし）​

自身の認証情報なしでDocSearchをすぐにテストしたい場合は、デモ設定をご利用ください：

docsearch({
  appId: 'PMZUYBQDAK',
  apiKey: '24b09689d5b4223813d9b8e48563c8f6',
  indexName: 'docsearch',
  askAi: 'askAIDemo',
});

または新しく公開されたDocSearch Playgroundをご利用ください

DocSearchとAsk AIの連携​

DocSearch v4は、Algoliaの高度なAI検索機能であるAsk AIのサポートを導入しました。Ask AIは、ドキュメントから直接コンテキストに沿ったインテリジェントな回答を提供することで、ユーザー体験を向上させます。また、同じaskAi設定オブジェクトを使用して、Agent Studio経由でチャットをルーティングすることも可能です。

Ask AIを有効にするには、Algolia Assistant IDを文字列として追加するか、より高度な設定（異なるインデックスの指定、認証情報、検索パラメータの設定、Agent Studioの有効化など）のためにオブジェクトを使用します：

docsearch({
  appId: 'YOUR_APP_ID',
  indexName: 'YOUR_INDEX_NAME',
  apiKey: 'YOUR_SEARCH_API_KEY',
  askAi: 'YOUR_ALGOLIA_ASSISTANT_ID',
});

  • シンプルな設定には文字列形式を使用

  • オブジェクト形式を使用すると、Ask AIが利用するインデックス・認証情報・フィルタをカスタマイズ可能

  • 提案される質問機能は、ダッシュボードのAsk AIセクションで制御できます。

DocSearchでのAgent Studioの使用方法​

Algolia Agent Studioをチャットのバックエンドとして使用するには、askAiオブジェクト内でagentStudio: trueを設定します。

docsearch({
  appId: 'YOUR_APP_ID',
  indexName: 'YOUR_INDEX_NAME',
  apiKey: 'YOUR_SEARCH_API_KEY',
  askAi: {
    assistantId: 'YOUR_ALGOLIA_ASSISTANT_ID',
    agentStudio: true,
    searchParameters: {
      YOUR_INDEX_NAME: {
        filters: 'type:content AND language:en',
        attributesToRetrieve: ['title', 'content', 'url'],
        restrictSearchableAttributes: ['title', 'content'],
        distinct: 'url',
      },
    },
  },
});

  • agentStudioはaskAi内で設定します。DocSearchのトップレベルのプロパティではありません。

  • agentStudio: trueを設定する場合、searchParametersはインデックス名をキーとして設定する必要があります。

  • Agent Studioの検索パラメータでは、filters、attributesToRetrieve、restrictSearchableAttributes、distinctがサポートされています。

検索結果のフィルタリング​

キーワード検索​

ウェブサイトでDocSearchメタタグを使用している場合、または設定にカスタム変数を追加している場合、facetFiltersオプションを使用して検索結果をfacetにスコープできます

これは検索範囲を特定の言語やバージョンに限定する際に有用です。

docsearch({
  searchParameters: {
    facetFilters: ['language:en', 'version:1.0.0'],
  },
});

Ask AI​

フィルタリング機能はAsk AI使用時にも適用され、LLMの検索範囲を関連性の高い結果のみに限定するのに有用です。

情報

複数言語対応のインデックスやファセットが豊富なインデックスでAsk AIを使用する際は、facetFiltersオプションの利用を推奨します。

docsearch({
  askAi: {
    assistantId: 'YOUR_ALGOLIA_ASSISTANT_ID',
    searchParameters: {
      facetFilters: ['language:en', 'version:1.0.0'],
    },
  },
});
ヒント

facetFilters: ['type:content']を使用すれば、Ask AIがtype属性がcontentのレコード（実際にコンテンツを含むレコード）のみを利用するようにできます。これはインデックスにナビゲーション、メタデータ、その他の非コンテンツタイプのレコードが含まれる場合に特に有用です。

イベント送信​

DocSearchインスタンス作成時にinsightsパラメータを渡すことで、検索イベントをDocSearchインデックスに送信できます。

docsearch({
   // other options
+  insights: true,
});

パフォーマンス最適化​

プリコネクト​

以下のスニペットをウェブサイトの<head>セクションに追加して、初期検索リクエストの読み込み速度を改善できます：

<link rel="preconnect" href="https://YOUR_APP_ID-dsn.algolia.net" crossorigin />

これによりブラウザがAlgoliaとの接続を迅速に確立し、特にモバイルデバイスでのユーザー体験が向上します。