設置コード

設置コードの種類

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

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

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

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

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

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

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

検索結果の設定

"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> 要素を使用して、おすすめコンテンツと検索結果の表示レイアウトをカスタマイズできます。

テンプレートの種類

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

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

利用可能な表示要素

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

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

検索結果テンプレート

カスタマイズの自由度

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

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

注意事項

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

検索結果のCSS変更

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

検索フォームのCSSクラス

音声入力のCSSクラス

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

検索結果の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)