translation.js

/**
 * translation.js - 多言語対応機能を提供
 * 
 * 主な機能:
 * - i18nextを使用した多言語切り替え
 * - 8言語対応（日本語、英語、中国語、韓国語、フランス語、スペイン語、ドイツ語、イタリア語）
 * - UIテキストの動的更新
 * 
 * 重要な関数:
 * - updateContent(): UI要素の翻訳を更新
 * - changeLang(): 言語切り替えを実行
 */

const translations = {
    ja: {
        inputQueryTitle: "入力クエリ",
        generateButtonText: "プロンプト生成",
        splitStrings: "分割送信",
        outputPromptTitle: "生成されたプロンプト",
        settingsTitle: "設定",
        apiKeyLabel: "APIキー",
        characterCountLabel: "文字数",
        languageSelectLabel: "言語",
        promptEnPlaceholder: "英語のプロンプトがここに表示されます",
        promptMyLanguagePlaceholder: "日本訳がここに表示されます",
        apiKeyPlaceholder: "APIキーを入力してください",
        characterCountPlaceholder: "生成するプロンプトの文字数を入力してください",
        endpointSelectLabel: "エンドポイント",
        historyTitle: "履歴",
        noHistoryMessage: "履歴がありません。",
        replacementTitle: "置換設定",
        addReplacementButtonText: "置換セット追加",
        replacementSearchPlaceholder: "検索語",
        replacementReplacePlaceholder: "置換語"
    },
    en: {
        inputQueryTitle: "Input Query",
        generateButtonText: "Generate Prompt",
        splitStrings: "Split Strings",
        outputPromptTitle: "Generated Prompt",
        settingsTitle: "Settings",
        apiKeyLabel: "API Key",
        characterCountLabel: "Character Count",
        languageSelectLabel: "Language",
        promptEnPlaceholder: "English prompt will be displayed here",
        promptMyLanguagePlaceholder: "Translation will be displayed here",
        apiKeyPlaceholder: "Enter your API key",
        characterCountPlaceholder: "Enter the number of characters for the generated prompt",
        endpointSelectLabel: "Endpoint",
        historyTitle: "History",
        noHistoryMessage: "No history available.",
        replacementTitle: "Replacement Settings",
        addReplacementButtonText: "Add Replacement Set",
        replacementSearchPlaceholder: "Search term",
        replacementReplacePlaceholder: "Replace term"
    },
    zh: {
        inputQueryTitle: "输入查询",
        generateButtonText: "生成提示",
        splitStrings: "分割字符串",
        outputPromptTitle: "生成的提示",
        settingsTitle: "设置",
        apiKeyLabel: "API密钥",
        characterCountLabel: "字符数",
        languageSelectLabel: "语言",
        promptEnPlaceholder: "英文提示将显示在这里",
        promptMyLanguagePlaceholder: "翻译将显示在这里",
        apiKeyPlaceholder: "请输入您的API密钥",
        characterCountPlaceholder: "请输入生成提示的字符数",
        endpointSelectLabel: "端点",
        historyTitle: "历史记录",
        noHistoryMessage: "没有可用的历史记录。",
        replacementTitle: "替换设置",
        addReplacementButtonText: "添加替换集",
        replacementSearchPlaceholder: "搜索词",
        replacementReplacePlaceholder: "替换词"
    },
    ko: {
        inputQueryTitle: "입력 쿼리",
        generateButtonText: "프롬프트 생성",
        splitStrings: "문자열 분할",
        outputPromptTitle: "생성된 프롬프트",
        settingsTitle: "설정",
        apiKeyLabel: "API 키",
        characterCountLabel: "문자 수",
        languageSelectLabel: "언어",
        promptEnPlaceholder: "영어 프롬프트가 여기에 표시됩니다",
        promptMyLanguagePlaceholder: "번역이 여기에 표시됩니다",
        apiKeyPlaceholder: "API 키를 입력하세요",
        characterCountPlaceholder: "생성할 프롬프트의 문자 수를 입력하세요",
        endpointSelectLabel: "엔드포인트",
        historyTitle: "기록",
        noHistoryMessage: "사용 가능한 기록이 없습니다.",
        replacementTitle: "대체 설정",
        addReplacementButtonText: "대체 세트 추가",
        replacementSearchPlaceholder: "검색어",
        replacementReplacePlaceholder: "대체어"
    },
    fr: {
        inputQueryTitle: "Requête d'entrée",
        generateButtonText: "Générer le prompt",
        splitStrings: "Diviser les chaînes",
        outputPromptTitle: "Prompt généré",
        settingsTitle: "Paramètres",
        apiKeyLabel: "Clé API",
        characterCountLabel: "Nombre de caractères",
        languageSelectLabel: "Langue",
        promptEnPlaceholder: "Le prompt en anglais s'affichera ici",
        promptMyLanguagePlaceholder: "La traduction s'affichera ici",
        apiKeyPlaceholder: "Entrez votre clé API",
        characterCountPlaceholder: "Entrez le nombre de caractères pour le prompt généré",
        endpointSelectLabel: "Point de terminaison",
        historyTitle: "Historique",
        noHistoryMessage: "Aucun historique disponible.",
        replacementTitle: "Paramètres de remplacement",
        addReplacementButtonText: "Ajouter un ensemble de remplacement",
        replacementSearchPlaceholder: "Terme de recherche",
        replacementReplacePlaceholder: "Terme de remplacement"
    },
    es: {
        inputQueryTitle: "Consulta de entrada",
        generateButtonText: "Generar prompt",
        splitStrings: "Dividir cadenas",
        outputPromptTitle: "Prompt generado",
        settingsTitle: "Configuración",
        apiKeyLabel: "Clave API",
        characterCountLabel: "Recuento de caracteres",
        languageSelectLabel: "Idioma",
        promptEnPlaceholder: "El prompt en inglés se mostrará aquí",
        promptMyLanguagePlaceholder: "La traducción se mostrará aquí",
        apiKeyPlaceholder: "Ingrese su clave API",
        characterCountPlaceholder: "Ingrese el número de caracteres para el prompt generado",
        endpointSelectLabel: "Punto final",
        historyTitle: "Historial",
        noHistoryMessage: "No hay historial disponible.",
        replacementTitle: "Configuración de reemplazo",
        addReplacementButtonText: "Agregar conjunto de reemplazo",
        replacementSearchPlaceholder: "Término de búsqueda",
        replacementReplacePlaceholder: "Término de reemplazo"
    },
    de: {
        inputQueryTitle: "Eingabeabfrage",
        generateButtonText: "Prompt generieren",
        splitStrings: "Zeichenketten aufteilen",
        outputPromptTitle: "Generierter Prompt",
        settingsTitle: "Einstellungen",
        apiKeyLabel: "API-Schlüssel",
        characterCountLabel: "Zeichenanzahl",
        languageSelectLabel: "Sprache",
        promptEnPlaceholder: "Der englische Prompt wird hier angezeigt",
        promptMyLanguagePlaceholder: "Die Übersetzung wird hier angezeigt",
        apiKeyPlaceholder: "Geben Sie Ihren API-Schlüssel ein",
        characterCountPlaceholder: "Geben Sie die Anzahl der Zeichen für den generierten Prompt ein",
        endpointSelectLabel: "Endpunkt",
        historyTitle: "Verlauf",
        noHistoryMessage: "Kein Verlauf verfügbar.",
        replacementTitle: "Ersetzungseinstellungen",
        addReplacementButtonText: "Ersetzungsset hinzufügen",
        replacementSearchPlaceholder: "Suchbegriff",
        replacementReplacePlaceholder: "Ersetzungsbegriff"
    },
    it: {
        inputQueryTitle: "Query di input",
        generateButtonText: "Genera prompt",
        splitStrings: "Dividi stringhe",
        outputPromptTitle: "Prompt generato",
        settingsTitle: "Impostazioni",
        apiKeyLabel: "Chiave API",
        characterCountLabel: "Conteggio caratteri",
        languageSelectLabel: "Lingua",
        promptEnPlaceholder: "Il prompt in inglese verrà visualizzato qui",
        promptMyLanguagePlaceholder: "La traduzione verrà visualizzata qui",
        apiKeyPlaceholder: "Inserisci la tua chiave API",
        characterCountPlaceholder: "Inserisci il numero di caratteri per il prompt generato",
        endpointSelectLabel: "Endpoint",
        historyTitle: "Cronologia",
        noHistoryMessage: "Nessuna cronologia disponibile.",
        replacementTitle: "Impostazioni di sostituzione",
        addReplacementButtonText: "Aggiungi set di sostituzione",
        replacementSearchPlaceholder: "Termine di ricerca",
        replacementReplacePlaceholder: "Termine di sostituzione"
    }
}
const resources = {
    ja: {
        translation: translations.ja
    },
    en: {
        translation: translations.en
    },
    zh: {
        translation: translations.zh
    },
    ko: {
        translation: translations.ko
    },
    fr: {
        translation: translations.fr
    },
    es: {
        translation: translations.es
    },
    de: {
        translation: translations.de
    },
    it: {
        translation: translations.it
    }
}

// 既存のスクリプトの前に追加
document.addEventListener('DOMContentLoaded', function () {
    i18next
        .use(i18nextBrowserLanguageDetector)
        .init({
            fallbackLng: 'ja', // デフォルト言語
            resources: resources
        })
        .then(function (t) {
            document.getElementById('languageSelect').value = i18next.language;
            document.getElementById('languageSelect').dispatchEvent(new Event('change'));
        });
});

function updateContent() {
    // 各要素のテキストを更新
    document.getElementById('inputQueryTitle').textContent = i18next.t('inputQueryTitle');
    document.getElementById('generateButtonText').textContent = i18next.t('generateButtonText');
    document.getElementById('splitStrings').textContent = i18next.t('splitStrings');
    document.getElementById('outputPromptTitle').textContent = i18next.t('outputPromptTitle');
    document.getElementById('settingsTitle').textContent = i18next.t('settingsTitle');
    document.querySelector('#apiKeyLabel > a').textContent = i18next.t('apiKeyLabel');
    document.getElementById('characterCountLabel').textContent = i18next.t('characterCountLabel');
    document.getElementById('languageSelectLabel').textContent = i18next.t('languageSelectLabel');

    // プレースホルダーを更新
    document.getElementById('promptEn').placeholder = i18next.t('promptEnPlaceholder');
    document.getElementById('promptMyLanguage').placeholder = i18next.t('promptMyLanguagePlaceholder');
    document.getElementById('apiKey').placeholder = i18next.t('apiKeyPlaceholder');
    document.getElementById('characterCount').placeholder = i18next.t('characterCountPlaceholder');

    // エンドポイントと履歴のテキストを更新
    document.getElementById('endpointSelectLabel').textContent = i18next.t('endpointSelectLabel');
    document.getElementById('historyTitle').textContent = i18next.t('historyTitle');
    document.getElementById('noHistoryMessage').textContent = i18next.t('noHistoryMessage');

    // 置換設定の翻訳を更新
    document.getElementById('replacementTitle').textContent = i18next.t('replacementTitle');
    document.getElementById('addReplacementButtonText').textContent = i18next.t('addReplacementButtonText');
    
    // 既存の置換セットのプレースホルダーを更新
    document.querySelectorAll('.replacement-search').forEach(el => {
        el.placeholder = i18next.t('replacementSearchPlaceholder');
    });
    document.querySelectorAll('.replacement-replace').forEach(el => {
        el.placeholder = i18next.t('replacementReplacePlaceholder');
    });
}

// 言語切り替え関数
function changeLang(language) {
    i18next.changeLanguage(language, (err, t) => {
        if (err) return console.error('言語切り替えエラー', err);
        updateContent();
    });
}

document.getElementById('languageSelect').addEventListener('change', function () {
    changeLang(this.value);
});