【第4回】ひらがな入力で漢字候補を表示する検索サジェストの作り方｜応用テクニックと本番運用編

外部API・サーバー・セキュリティ【応用編】 本番運用に必須の技術を網羅！堅牢なシステムへ。 Program
この記事は約18分で読めます。

Part 1〜3で、日本語サジェスト機能の基礎から実装まで一通り学びました。Part 4となるこの記事では、応用テクニックと本番運用について解説します。

Part 3で作成したサジェスト機能は、小〜中規模のサイトであれば十分に使えます。しかし、大規模サイトや、より高度な機能が必要な場合には、追加の工夫が必要です。

この記事では、以下のトピックを扱います。

  • 外部サジェストAPI（Google Suggest等）との連携
  • サーバーサイドでの候補生成
  • 大規模データの効率的な検索
  • キャッシュ戦略とパフォーマンス最適化
  • セキュリティの強化
  • アクセス解析との連携

このシリーズの全体像

📚 シリーズ記事一覧

Part 1：なぜ難しい？仕組みを徹底理解

Part 2：IME対応とJavaScript実装の基本

Part 3：実践コード完全版と動作デモ

▶ Part 4：応用テクニックと本番運用（この記事）

【第3回】ひらがな入力で漢字候補を表示する検索サジェストの作り方｜実践コード完全版と動作デモ編
コピペで動く日本語サジェスト機能の完全なソースコードを公開。キーボード操作、マウスクリック、XSS対策を含む本格的な実装を、80以上の辞書データ付きで詳しく解説します。
raplsworks.com

第1章：外部サジェストAPIとの連携

Part 3では、ローカルの辞書データを使って候補を検索しました。しかし、辞書を自前で用意・管理するのは大変です。外部のサジェストAPIを活用すれば、豊富な候補を手軽に取得できます。

1-1. Google Suggest APIについて

Googleは、検索窓のサジェスト機能で使われているAPIを、非公式ながら公開しています。以下のようなエンドポイントでアクセスできます。

1
2
https://suggestqueries.google.com/complete/search?client=firefox&q=検索クエリ
 

このAPIは、JSONフォーマットでサジェスト候補を返します。例えば、「天気」で検索すると、以下のようなレスポンスが返ってきます。

1
2
["天気",["天気予報","天気 東京","天気 大阪","天気 週間","天気図"]]
 

配列の最初の要素が検索クエリ、2番目の要素が候補の配列です。

⚠️ 重要な注意点

Google Suggest APIは非公式のAPIです。Googleは利用規約を明示していないため、商用利用には注意が必要です。突然仕様が変更されたり、アクセスがブロックされたりする可能性があります。本番運用では、自前のAPIを用意することを強くお勧めします。

1-2. CORS問題とプロキシサーバー

ブラウザから直接Google Suggest APIにアクセスしようとすると、CORS（Cross-Origin Resource Sharing）エラーが発生します。これは、異なるドメイン間でのAjaxリクエストを制限するブラウザのセキュリティ機能です。

この問題を解決するには、プロキシサーバーを用意する必要があります。自前のサーバーでGoogle Suggest APIにアクセスし、その結果をフロントエンドに返す仕組みです。

1
2
3
4
5
6
7
8
// フロントエンド（ブラウザ）
fetch('/api/suggest?q=天気')
  ↓
// 自前のサーバー（プロキシ）
fetch('https://suggestqueries.google.com/complete/search?client=firefox&q=天気')
  ↓
// Googleからの応答を受け取り、フロントエンドに返す
 

Node.jsでの簡単なプロキシサーバーの例を示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// server.js（Node.js + Express）
const express = require('express');
const fetch = require('node-fetch');
const app = express();
 
app.get('/api/suggest', async (req, res) => {
  const query = req.query.q;
  
  if (!query) {
    return res.json([]);
  }
  
  try {
    const response = await fetch(
      `https://suggestqueries.google.com/complete/search?client=firefox&q=${encodeURIComponent(query)}`
    );
    const data = await response.json();
    
    // 候補の配列だけを返す
    res.json(data[1] || []);
  } catch (error) {
    console.error('Suggest API error:', error);
    res.status(500).json([]);
  }
});
 
app.listen(3000);
 

1-3. AbortControllerで前回のリクエストをキャンセルする

外部APIを呼び出す場合、ネットワーク遅延の問題が顕著になります。ユーザーが素早く入力すると、古いリクエストの応答が新しいリクエストより後に返ってくることがあります。

この問題を解決するために、AbortControllerを使って前回のリクエストをキャンセルします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let abortController = null;
 
async function fetchSuggestions(query) {
  // 前回のリクエストをキャンセル
  if (abortController) {
    abortController.abort();
  }
  
  // 新しいAbortControllerを作成
  abortController = new AbortController();
  
  try {
    const response = await fetch(`/api/suggest?q=${encodeURIComponent(query)}`, {
      signal: abortController.signal
    });
    
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    // AbortErrorは正常なキャンセルなので無視
    if (error.name === 'AbortError') {
      return null;
    }
    console.error('Fetch error:', error);
    return [];
  }
}
 

fetchの第2引数にsignal: abortController.signalを渡すことで、そのリクエストをキャンセル可能にしています。次のリクエストが開始されるときにabort()を呼び出すと、前回のリクエストがキャンセルされ、その応答は無視されます。

第2章：サーバーサイドでの候補生成

本格的なサジェスト機能を構築するには、サーバーサイドで候補を生成する仕組みが必要です。

2-1. データベースでの読み検索

候補データをデータベースに格納し、SQLで検索する方法です。MySQLを例に、テーブル設計とクエリを示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
-- テーブル作成
CREATE TABLE suggestions (
  id INT AUTO_INCREMENT PRIMARY KEY,
  text VARCHAR(255) NOT NULL,
  reading VARCHAR(255) NOT NULL,
  popularity INT DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  INDEX idx_reading (reading),
  INDEX idx_text (text),
  INDEX idx_popularity (popularity)
);
 
-- データ挿入
INSERT INTO suggestions (text, reading, popularity) VALUES
('雨', 'あめ', 100),
('赤', 'あか', 80),
('青', 'あお', 90),
('天気予報', 'てんきよほう', 200);
 
-- プレフィックス検索
SELECT text, reading, popularity
FROM suggestions
WHERE reading LIKE 'あ%' OR text LIKE 'あ%'
ORDER BY popularity DESC, LENGTH(reading) ASC
LIMIT 10;
 

LIKE 'あ%'で前方一致検索を行います。インデックスが効くので、大量のデータでも高速に検索できます。popularityカラムを使って、よく検索される候補を上位に表示しています。

2-2. 読み（ふりがな）の自動生成

辞書データを手動で用意するのは大変です。漢字から読みを自動生成するライブラリを活用しましょう。

PHPの場合：MeCab（形態素解析エンジン）を使って読みを取得できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// PHP + MeCab
$mecab = new MeCab_Tagger();
$text = '天気予報';
$node = $mecab->parseToNode($text);
 
$reading = '';
while ($node) {
  $feature = explode(',', $node->getFeature());
  if (isset($feature[7])) {
    // カタカナをひらがなに変換
    $reading .= mb_convert_kana($feature[7], 'c');
  }
  $node = $node->getNext();
}
// $reading = 'てんきよほう'
 

Pythonの場合：pykakasiライブラリが便利です。

1
2
3
4
5
6
7
8
9
10
# Python + pykakasi
import pykakasi
 
kks = pykakasi.kakasi()
text = '天気予報'
result = kks.convert(text)
 
reading = ''.join([item['hira'] for item in result])
# reading = 'てんきよほう'
 

2-3. 候補データの更新戦略

候補データは、以下のタイミングで更新するのが一般的です。

  • コンテンツ追加時：新しい記事や商品が追加されたとき、タイトルと読みをsuggestionsテーブルに登録
  • 定期バッチ：夜間バッチで、人気度（検索回数）を集計して更新
  • 手動追加：管理画面から、特に表示したい候補を手動で登録

第3章：大規模データの効率的な検索

候補データが数十万〜数百万件になると、単純なLIKE検索では遅くなります。大規模データに対応するためのテクニックを紹介します。

3-1. 全文検索エンジンの活用

Elasticsearch、Apache Solr、Algoliaなどの全文検索エンジンを使うと、大量のデータでも高速に検索できます。

Elasticsearchでのプレフィックス検索の例を示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// Elasticsearchインデックス設定
{
  "settings": {
    "analysis": {
      "analyzer": {
        "autocomplete": {
          "tokenizer": "autocomplete_tokenizer"
        }
      },
      "tokenizer": {
        "autocomplete_tokenizer": {
          "type": "edge_ngram",
          "min_gram": 1,
          "max_gram": 20,
          "token_chars": ["letter", "digit"]
        }
      }
    }
  },
  "mappings": {
    "properties": {
      "text": { "type": "text" },
      "reading": {
        "type": "text",
        "analyzer": "autocomplete"
      },
      "popularity": { "type": "integer" }
    }
  }
}
 
// 検索クエリ
{
  "query": {
    "bool": {
      "should": [
        { "prefix": { "reading": "あ" } },
        { "prefix": { "text": "あ" } }
      ]
    }
  },
  "sort": [
    { "popularity": "desc" },
    { "_score": "desc" }
  ],
  "size": 10
}
 

3-2. キャッシュ戦略

よく検索されるクエリの結果をキャッシュすることで、データベースへの負荷を軽減できます。

Redisを使ったキャッシュの例（Node.js）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const Redis = require('ioredis');
const redis = new Redis();
 
async function getSuggestions(query) {
  const cacheKey = `suggest:${query}`;
  
  // キャッシュを確認
  const cached = await redis.get(cacheKey);
  if (cached) {
    return JSON.parse(cached);
  }
  
  // データベースから取得
  const results = await searchFromDatabase(query);
  
  // キャッシュに保存（1時間有効）
  await redis.setex(cacheKey, 3600, JSON.stringify(results));
  
  return results;
}
 

キャッシュの有効期限（TTL）は、データの更新頻度に応じて調整してください。更新頻度が高いデータは短く（数分〜数時間）、安定したデータは長く（数時間〜1日）設定します。

3-3. 結果の事前計算

よく検索されるプレフィックス（「あ」「か」「さ」など）の結果を事前に計算し、静的なJSONファイルとして保存する方法もあります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 事前計算バッチ
const prefixes = ['あ', 'い', 'う', 'え', 'お', ...];
 
for (const prefix of prefixes) {
  const results = await searchFromDatabase(prefix);
  await fs.writeFile(`/cache/suggest_${prefix}.json`, JSON.stringify(results));
}
 
// 検索時
async function getSuggestions(query) {
  const prefix = query.charAt(0);
  const filePath = `/cache/suggest_${prefix}.json`;
  
  if (await fs.exists(filePath)) {
    const allResults = JSON.parse(await fs.readFile(filePath));
    // クライアントサイドでさらに絞り込み
    return allResults.filter(item => item.reading.startsWith(query));
  }
  
  // キャッシュがない場合はデータベースから検索
  return await searchFromDatabase(query);
}
 

この方法は、CDNとの相性が良く、サーバー負荷を大幅に削減できます。

第4章：セキュリティの強化

本番運用では、セキュリティに十分な注意を払う必要があります。

4-1. 入力値のバリデーション

ユーザーからの入力は、常に検証してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// サーバーサイド（Node.js）
app.get('/api/suggest', (req, res) => {
  const query = req.query.q;
  
  // 入力値の検証
  if (!query || typeof query !== 'string') {
    return res.json([]);
  }
  
  // 長さ制限（DoS対策）
  if (query.length > 100) {
    return res.json([]);
  }
  
  // 危険な文字の除去（SQLインジェクション対策）
  const sanitizedQuery = query.replace(/[;'"\\]/g, '');
  
  // 検索実行
  const results = searchByReading(sanitizedQuery);
  res.json(results);
});
 

4-2. レート制限

APIへの過剰なリクエストを防ぐため、レート制限を設けましょう。

1
2
3
4
5
6
7
8
9
10
11
// express-rate-limit を使用
const rateLimit = require('express-rate-limit');
 
const limiter = rateLimit({
  windowMs: 1 * 60 * 1000, // 1分
  max: 60, // 1分あたり60リクエストまで
  message: { error: 'Too many requests' }
});
 
app.use('/api/suggest', limiter);
 

4-3. ログ記録

検索クエリをログに記録することで、不正なアクセスの検知や、サービス改善に活用できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 検索ログの記録
app.get('/api/suggest', (req, res) => {
  const query = req.query.q;
  const ip = req.ip;
  const userAgent = req.headers['user-agent'];
  
  // ログ記録（機密情報は含めない）
  console.log(JSON.stringify({
    timestamp: new Date().toISOString(),
    type: 'suggest_search',
    query: query,
    ip: hashIP(ip), // IPはハッシュ化
    ua: userAgent
  }));
  
  // 検索実行
  // ...
});
 

第5章：アクセス解析との連携

サジェスト機能を活用して、ユーザーの行動を分析しましょう。

5-1. 検索クエリの分析

どんなキーワードがよく検索されているかを分析することで、コンテンツ改善のヒントが得られます。

1
2
3
4
5
6
7
8
-- よく検索されるクエリのランキング
SELECT query, COUNT(*) as count
FROM search_logs
WHERE created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)
GROUP BY query
ORDER BY count DESC
LIMIT 100;
 

5-2. サジェスト候補のクリック率

候補が表示された回数と、実際にクリックされた回数を追跡することで、候補の品質を評価できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 候補表示時にイベントを送信
function showSuggestions(results) {
  // ... 候補表示処理
  
  // 表示イベントを記録
  analytics.track('suggest_shown', {
    query: currentQuery,
    results_count: results.length
  });
}
 
// 候補選択時にイベントを送信
function selectItem(index) {
  const selectedItem = currentResults[index];
  
  // 選択イベントを記録
  analytics.track('suggest_selected', {
    query: currentQuery,
    selected: selectedItem.text,
    position: index
  });
  
  // ... 選択処理
}
 

5-3. ゼロ結果の追跡

検索結果が0件だったクエリを追跡することで、辞書に不足している候補を発見できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ゼロ結果の記録
function updateSuggestions(query) {
  const results = searchByReading(query);
  
  if (results.length === 0 && query.length >= 2) {
    // ゼロ結果を記録
    analytics.track('suggest_zero_results', {
      query: query
    });
  }
  
  // ... 表示処理
}
 

第6章：パフォーマンス最適化のチェックリスト

本番運用前に確認すべきパフォーマンス最適化のポイントをまとめます。

6-1. フロントエンド

  • ✅ debounceを適用している（100〜200ms）
  • ✅ IME合成中は検索をスキップしている
  • ✅ AbortControllerで前回のリクエストをキャンセルしている
  • ✅ 候補の表示件数を制限している（10件程度）
  • ✅ CSSアニメーションはtransformとopacityを使用している

6-2. バックエンド

  • ✅ データベースに適切なインデックスを設定している
  • ✅ クエリ結果をキャッシュしている
  • ✅ レート制限を設けている
  • ✅ 入力値を検証・サニタイズしている
  • ✅ ログを記録している

6-3. インフラ

  • ✅ CDNを活用している（静的キャッシュ）
  • ✅ 十分なサーバーリソースを確保している
  • ✅ 監視とアラートを設定している

第7章：シリーズのまとめ

全4回にわたる「HTMLサジェストで『あ→雨』を実現する」シリーズを、最後まで読んでいただきありがとうございました。

7-1. シリーズ全体の振り返り

📌 シリーズ全体のまとめ

Part 1：なぜ難しい？仕組みを徹底理解

  • IMEの変換候補はブラウザから取得できない
  • 「あ→雨」はIME変換ではなく「読み検索」で実現する
  • IMEとサジェストの共存が課題

Part 2：IME対応とJavaScript実装の基本

  • compositionイベントでIME合成状態を追跡
  • debounceで無駄なリクエストを削減
  • プレフィックス検索のロジック

Part 3：実践コード完全版と動作デモ

  • HTMLとCSSでUIを構築
  • キーボード操作の実装
  • XSS対策
  • コピペで動く完全なサンプルコード

Part 4：応用テクニックと本番運用

  • 外部APIとの連携とプロキシサーバー
  • サーバーサイドでの候補生成
  • キャッシュ戦略とパフォーマンス最適化
  • セキュリティとアクセス解析

7-2. 次のステップ

このシリーズで学んだ知識を活かして、ぜひあなたのサイトにサジェスト機能を導入してみてください。

さらに発展させたい場合は、以下のトピックを調べてみることをお勧めします。

  • 機械学習による候補ランキング：ユーザーの行動データを学習して、より適切な候補を上位に表示
  • パーソナライズ：ユーザーごとの検索履歴に基づいた候補表示
  • タイプミス補正：「てにき」→「天気」のような、入力ミスの自動修正
  • 関連語提案：「天気」で検索したユーザーに「週間天気」「明日の天気」を提案

最後まで読んでいただき、本当にありがとうございました。

【第3回】ひらがな入力で漢字候補を表示する検索サジェストの作り方｜実践コード完全版と動作デモ編
コピペで動く日本語サジェスト機能の完全なソースコードを公開。キーボード操作、マウスクリック、XSS対策を含む本格的な実装を、80以上の辞書データ付きで詳しく解説します。
raplsworks.com

コメント

タイトルとURLをコピーしました