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

v4のスタートガイド

非公式ベータ版翻訳

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

はじめに​

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

インストール​

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

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

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はドキュメントから直接文脈に沿ったインテリジェントな回答を提供することで、ユーザー体験を大幅に向上させます。

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

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

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

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

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

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

キーワード検索​

ウェブサイトで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,
});

パフォーマンス最適化​

Preconnect​

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

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

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