辞書を追加する

このガイドでは、ClueLens に新しい辞書または翻訳モジュールを追加する方法を説明します。すべてのソースモジュールは components/dicts/ 配下に置かれます。

基本概念

各辞書モジュールは、必要に応じて次のファイルで構成されます。

ファイル	役割	必須
search.ts	検索を実行し結果データを返す	必須
view.tsx	結果表示用の React コンポーネント	必須
types.ts	構造化結果の型定義	構造化辞書では必須
configView.tsx	設定 UI	設定がある場合に必須
settingBackup.ts	バックアップと復元処理	バックアップ対象なら必須
icon.png	ソースのアイコン	必須

2 つの実装パターン

シンプルな翻訳モジュール

Google 翻訳、彩云小译、DeepLx のように翻訳テキストを返すサービス向けです。

• search.ts は string[] を返す
• view.tsx では共有コンポーネント CommonView を再利用できる
• 参考実装: google/、caiyun/、deeplx/

構造化辞書モジュール

Bing Dictionary、Jisho、Urban Dictionary のように構造化データを返すソース向けです。

• search.ts は独自型の配列を返す
• types.ts で型を定義する
• view.tsx は専用レンダラーを実装する
• 参考実装: bing/、jisho/、urban/、wiktionary/

5 ステップ

1. DictID を登録する

components/dicts/types.ts に新しい列挙値を追加します。

export enum DictID {
  // existing values
  YourDict = 'yourDict',
}

2. モジュールフォルダーを作成する

components/dicts/yourDict/
├── icon.png
├── search.ts
├── view.tsx
├── types.ts
├── configView.tsx
└── settingBackup.ts

3. search.ts を実装する

モジュールは配列を返す search 関数を export する必要があります。

シンプルな翻訳モジュールの例:

import { SearchOptions } from '../types';

export async function search(
  text: string,
  options?: SearchOptions
): Promise<string[]> {
  const query = text.trim();
  if (!query) return [];

  const translatedText = await callYourAPI(query, options?.targetLang);
  return translatedText ? [translatedText] : [];
}

構造化辞書の例:

import { YourDictResult } from './types';

export async function search(text: string): Promise<YourDictResult[]> {
  const query = text.trim();
  if (!query) return [];

  const results = await fetchResults(query);
  return results;
}

ポイント

• 入力には必ず trim() を使う
• 空入力では [] を返す
• 翻訳モジュールでは options?.targetLang が使える
• ネットワーク処理は search.ts に閉じ込める

4. レンダラーを実装する

シンプルな翻訳モジュール で CommonView を再利用する例:

import TranslateView from '../shared/CommonView';

export function ResultsView({ data }: { data: unknown[] }) {
  return <TranslateView result={data as string[]} />;
}

構造化辞書モジュール の例:

import { YourDictResult } from './types';

export function ResultsView({ data }: { data: unknown[] }) {
  const results = data as YourDictResult[];
  return (
    <div>
      {results.map((item, i) => (
        <div key={i}>
          <h3>{item.title}</h3>
          <p>{item.definition}</p>
        </div>
      ))}
    </div>
  );
}

重要

view.tsx は ResultsView という名前付きコンポーネントを export してください。default export は使わないでください。

5. メタデータを登録する

components/dicts/index.tsx で次を行います。

1. アイコンを import する

import yourDictIcon from './yourDict/icon.png';

2. dictMetaMap に項目を追加する

[DictID.YourDict]: {
  id: DictID.YourDict,
  displayName: 'Your Dictionary',
  displayNameKey: 'dict.yourDict',
  icon: yourDictIcon,
  language: { type: 'all' },
  type: ModuleType.Dict,
},

language の意味:

型	意味	例
{ type: 'all' }	すべての言語をサポート	Google 翻訳
{ type: 'monolingual', languages: ['en'] }	特定言語のみ	DictionaryAPI
{ type: 'pairs', pairs: [['en', 'zh'], ['zh', 'en']] }	言語ペア対応	Bing Dictionary

type の意味:

型	意味	挙動
ModuleType.Dict	辞書	targetLang を受け取らない
ModuleType.Translator	翻訳	targetLang を自動で受け取る
ModuleType.Other	AI などその他	targetLang を受け取らない

import.meta.glob により、検索モジュールと表示コンポーネントはファイル名から自動検出されるため、追加のローダー登録は不要です。

設定項目を追加する

API キーや独自設定が必要な場合は次を行います。

1. yourDict/types.ts に設定型と既定値を定義する
2. utils/storage.ts にストレージ定義を追加する
3. yourDict/configView.tsx を作成する
4. バックアップ対象なら yourDict/settingBackup.ts を作成し、settingsBackupHandler を export する

ローカライズを追加する

モジュール名や設定文言を翻訳したい場合は、i18n/locales/ 配下の各言語ファイルに項目を追加してください。

{
  "dict.yourDict": "Your Dictionary"
}

参考実装

用途	参考モジュール
シンプルな翻訳	google/
設定付き翻訳	caiyun/、deeplx/
構造化辞書	urban/、jisho/
HTML をそのまま表示	bing/
設定 UI を持つ辞書	wiktionary/
AI 出力	openai/