メインコンテンツへスキップ
バージョン: レガシー (v3.x)

はじめに

非公式ベータ版翻訳

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

情報

以下の内容は DocSearch v3 に関するものです。 DocSearch v2 をご利用の場合は、レガシードキュメント をご覧ください。

DocSearch v4 をお探しの場合は、ドキュメントを こちら でご確認いただけます。

はじめに​

DocSearch v3 は最新版の Algolia Autocomplete を基盤として構築されており、アクセシビリティの向上、レスポンシブ性の強化、テーマ設定機能、洗練されたビルトインデザイン、低ネットワーク環境下でのカスタマイズ性を提供します。

このバージョンは React で書き直されており、React コンポーネントを公開しています。Vanilla JavaScript 版は React 版を基に、Preact へのエイリアスを使用しています。

安定版​

Algolia Autocomplete の安定版リリースと、DocSearch v3 の大幅な採用を受け、安定版リリースの作業を開始します！

すべてのアルファテスターの皆様、および既にサポートを提供しているすべての統合機能に感謝いたします！

インストール​

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

yarn add @docsearch/js@3
# or
npm install @docsearch/js@3

Without package manager​

If you don't want to use a package manager, you can add the CSS to the <head> of your website:

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

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

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

初回クエリの速度改善​

preconnect を追加することで、ブラウザに初回クエリの速度改善を促すことができます。詳細は #preconnect をご覧ください。

実装方法​

To get started, you need a container for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:

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

Then, insert DocSearch into it by calling the docsearch function and providing the container. It can be a CSS selector or an Element.

Make sure to provide a container (for example, a div), not an input. DocSearch generates a fully accessible search box for you.

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 v3 をすぐにテストしたいが、資格情報の到着を待てない場合、当社の資格情報を使用できます！

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

検索のフィルタリング​

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

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

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

イベント送信​

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

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

パフォーマンス最適化​

Preconnect​

このスニペットをウェブサイトの head に追加することで、ブラウザに Algolia からデータがロードされることを示し、DocSearch クラスタへのプリコネクトを許可できます。これにより、特にモバイル環境での初回クエリが高速化されます。

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