設置コード

設置コードの種類

検索機能をサイトに設置するには、検索結果ページと検索フォームの2つのコードを設置する必要があります。設置方法については、ダッシュボードの手順をご確認ください。

• 検索結果ページ: 実際の検索結果を表示するページです。search.htmlなどの名前で単体のHTMLファイルとして設置します。
• 検索フォーム: 検索フォームは、シンプルな入力フォームとサジェスト機能から構成されています。Webサイトの共通ヘッダーなどに、全ページに組み込む形で設置してください。

検索結果の設定オプション

検索結果ページのコード内に、neodig-search-config というクラスを持つ <script> タグがあります。この中のJSON設定を変更することで、検索結果の表示内容をカスタマイズできます。

おすすめコンテンツの設定

"recommend": {
  "maxSize": 3,
  "messages": {
    "header": "おすすめコンテンツ"
  }
}

• maxSize: 表示する最大件数（デフォルト: 3）
• messages: 各種メッセージのカスタマイズ

FAQの設定

"faq": {
  "messages": {
    "header": "よくある質問",
    "badge": "FAQ",
    "detailLink": "続きを読む"
  }
}

• messages: 各種メッセージのカスタマイズ
  • header: FAQセクションのヘッダーテキスト
  • badge: FAQセクションのヘッダーに表示されるバッジのテキスト（デフォルト: "FAQ"）
  • detailLink: FAQ詳細ページへの導線リンクのテキスト（デフォルト: "続きを読む"）

AI検索の設定（AI Overview / 0件代替提案）

検索結果の上部にAIが生成した要約と引用元（参考にした情報）を表示する機能です。ダッシュボードの「AI検索設定」で動作モードを切り替えます。

• AI Overview（mode=overview）: 検索のたびに発動し、検索結果の上部にAI要約を表示します。
• 0件代替提案（mode=fallback）: 検索ヒット数が0件のときのみ発動し、サイト内の近いページをAIが提案します。

検索結果ページのHTMLには、AI検索の表示先となる <div class="neodig-ai-search-section"> を .neodig-result-contents の中（推奨: 最上部）に配置します。

<div class="neodig-result-contents">
    <div class="neodig-ai-search-section"></div>
    <div class="neodig-faq-section"></div>
    <div class="neodig-recommendations-section"></div>
    <div class="neodig-results-section"></div>
</div>

メッセージ等のカスタマイズはJSON設定で行います。

"aiSearch": {
  "enableMarkdown": true,
  "messages": {
    "badge": "AI",
    "header": "AIによる回答",
    "loading": "AIが回答を生成中…",
    "citationsHeader": "参考にした情報"
  }
}

• enableMarkdown: 回答本文のMarkdownレンダリングを有効にするか（デフォルト: true）
• messages: 各種メッセージのカスタマイズ
  • badge: ヘッダーに表示されるバッジのテキスト（デフォルト: "AI"）
  • header: AI回答セクションのヘッダーテキスト（デフォルト: "AIによる回答"）
  • loading: 回答生成中に表示されるテキスト（デフォルト: "AIが回答を生成中…"）
  • citationsHeader: 引用元一覧の見出しテキスト（デフォルト: "参考にした情報"）

検索結果の設定

"result": {
  "size": 10,
  "scoreThreshold": 0.7,
  "enableMarkdown": true,
  "lastModifiedDateFormat": "yyyy/MM/dd",
  "messages": {
    "header": "検索結果",
    "notFound": "検索結果が見つかりませんでした",
    "showNext": "さらに表示",
    "limitReached": "検索結果の表示上限に達しました。検索キーワードを変えて検索して下さい",
    "expandDetails": "続きを表示",
    "collapse": "折りたたむ",
    "scrollTop": "",
    "error": "エラーが発生しました。時間を空けて再度お試しください。",
    "rateLimitError": "リクエストが多すぎます。しばらく待ってから再度お試しください"
  }
}

• size: 1ページあたりの表示件数（デフォルト: 10）
• scoreThreshold: 検索結果初期表示のスコア閾値（デフォルト: 0.7）。
• enableMarkdown: Markdown形式のサマリーを有効にするか（デフォルト: true）
• lastModifiedDateFormat: 最終更新日時の表示フォーマット（デフォルト: "yyyy/MM/dd"）
• messages: 各種メッセージのカスタマイズ
  • expandDetails: サマリー展開ボタンのテキスト（デフォルト: "続きを表示"）
  • collapse: サマリー折りたたみボタンのテキスト（デフォルト: "折りたたむ"）
  • scrollTop: トップへスクロールボタンのテキスト（空文字列の場合はボタンを非表示）
  • error: エラー発生時のメッセージ（デフォルト: "エラーが発生しました。時間を空けて再度お試しください。"）
  • rateLimitError: レート制限時のメッセージ（デフォルト: "リクエストが多すぎます。しばらく待ってから再度お試しください"）

結果ページのデザインカスタマイズ

検索結果の表示内容・表示順序の変更

検索結果ページでは、<template> 要素を使用して、おすすめコンテンツと検索結果の表示レイアウトをカスタマイズできます。

テンプレートの種類

検索結果ページには3種類のテンプレートが用意されています。

• おすすめコンテンツテンプレート (.neodig-recommendation-template): おすすめコンテンツの表示形式
• FAQテンプレート (.neodig-faq-template): FAQの表示形式
• 検索結果テンプレート (.neodig-result-template): 検索結果の表示形式

利用可能な表示要素

各テンプレート内で使用できる要素を以下のクラス名で指定します。これらのクラスを持つ要素に、自動的にデータが挿入されます。

おすすめコンテンツテンプレート

FAQテンプレート

FAQはアコーディオン形式で表示されます。デフォルトでは <details> / <summary> を使った折り畳み構造でレンダリングされ、回答エリアには detailUrl がある場合に「続きを読む」リンクが表示されます。

検索結果テンプレート

カスタマイズの自由度

テンプレートを編集することで、以下のようなカスタマイズが可能です。

• 表示要素の選択: 不要な要素のクラスを削除することで、その情報を非表示にできます
• 表示順序の変更: タイトル、画像、要約などの表示順序を自由に変更できます
• HTML構造の調整: 独自のラッパー要素やグリッドレイアウトを追加して、サイトのデザインに合わせた構造を構築できます

注意事項

• 表示したい情報のクラス名を持つ要素を必ずテンプレート内に含めてください
• クラス名は正確に指定する必要があります（スペルミスがあるとデータが挿入されません）
• テンプレート全体のHTML構造は自由ですが、データ挿入用のクラス名を持つ要素は必須です

検索結果のCSS変更

サンプルCSSは参考として提供されています。実際のデザインは、お客様のサイト側のCSSで自由にカスタマイズしてください。

検索フォームのCSSクラス

音声入力のCSSクラス

対応ブラウザ（Chrome、Edge）では、検索入力フィールド内に音声入力ボタンが自動的に表示されます。Firefox等の非対応ブラウザやiOS端末ではボタンは表示されません。音声入力ボタンが表示されない場合は、トラブルシューティングをご確認ください。

検索結果のCSSクラス

AI検索のCSSクラス

トラブルシューティング

音声入力ボタンが表示されない

音声入力ボタンが表示されない場合、以下の点を確認してください。

1. ブラウザの対応状況

音声入力は Web Speech API に対応したブラウザ（Chrome、Edge）でのみ利用可能です。Firefox等の非対応ブラウザではボタンは表示されません。また、iOSでは全てのブラウザがWebKitエンジンを使用しており、Web Speech APIが正常に動作しないためボタンは表示されません。

2. HTTPS の使用

音声入力にはHTTPS接続が必要です（localhost を除く）。HTTP環境では音声入力は利用できません。

3. Permissions-Policy ヘッダーの確認

サーバーの Permissions-Policy HTTPレスポンスヘッダーで microphone がブロックされていると、音声入力ボタンは自動的に非表示になります。ブラウザのDevToolsコンソールに以下のメッセージが表示されている場合、この設定が原因です。

Voice input button is hidden because microphone access is blocked. Please check that the Permissions-Policy header allows microphone.

対処方法: サーバーの Permissions-Policy ヘッダーで microphone を許可してください。

Permissions-Policy: microphone=(self)