ChatGPT　単語の置き換え

// ==UserScript==
// @name         ChatGPT 動的単語置換 (複数対応・UI版)
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  ChatGPTのインターフェース上の指定した複数の単語を指定した別の単語に置き換えます。設定はページ内のUIから変更可能。
// @author       You (Modified by Assistant)
// @match        https://chatgpt.com/*
// @match        https://chat.openai.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // --- 設定値の管理 ---
    const KEY_REPLACEMENTS = 'chatgptReplacements_v3'; // 保存キーを変更

    // 設定値を読み込む (デフォルト値を設定)
    // 形式: [{ from: '置換前1', to: '置換後1', enabled: true }, { from: '置換前2', to: '置換後2', enabled: false }]
    let replacements = [];
    try {
        replacements = JSON.parse(GM_getValue(KEY_REPLACEMENTS, JSON.stringify([
            { from: 'User', to: 'ママ', enabled: true },
            { from: 'ChatGPT', to: 'アシスタント', enabled: true }
        ])));
        // 互換性のため、enabledがない場合はtrueを追加
        replacements = replacements.map(r => ({ ...r, enabled: r.enabled !== undefined ? r.enabled : true }));
    } catch (e) {
        console.error("置換設定の読み込みに失敗しました:", e);
        replacements = [
            { from: 'User', to: 'ママ', enabled: true },
            { from: 'ChatGPT', to: 'アシスタント', enabled: true }
        ];
        GM_setValue(KEY_REPLACEMENTS, JSON.stringify(replacements)); // エラー時はデフォルトで上書き
    }

    // --- 正規表現の特殊文字をエスケープする関数 ---
    function escapeRegExp(string) {
        // $& は一致した部分文字列全体を意味します
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    // --- 置換処理 ---
    let currentRegexes = []; // 現在の置換用正規表現と置換後文字列のペアをキャッシュ

    const updateRegexes = () => {
        currentRegexes = replacements
            .filter(r => r.enabled && r.from) // 有効かつ置換元が空でないものだけ
            .map(r => {
                try {
                    const escapedFrom = escapeRegExp(r.from);
                    // 大文字小文字を区別せず、グローバルに置換する正規表現を作成
                    return { regex: new RegExp(escapedFrom, 'gi'), to: r.to };
                } catch (e) {
                    console.error(`正規表現の作成に失敗しました (from: ${r.from}):`, e);
                    return null; // エラーが発生した場合はnullを返す
                }
            })
            .filter(r => r !== null); // エラーが発生したものを除外
    };
    updateRegexes(); // 初期化

    const performReplace = (node) => {
        if (!currentRegexes.length) {
            return; // 置換ルールがなければ何もしない
        }

        // テキストノードのみを処理対象とする
        if (node.nodeType === Node.TEXT_NODE) {
            let replacedText = node.textContent;
            let textChanged = false;

            // 有効な各正規表現で順番に置換を試みる
            currentRegexes.forEach(({ regex, to }) => {
                // testメソッドでチェックしてからreplaceを実行
                if (regex.test(replacedText)) {
                    const beforeReplace = replacedText;
                    replacedText = replacedText.replace(regex, to);
                    if (beforeReplace !== replacedText) {
                        textChanged = true;
                    }
                    regex.lastIndex = 0; // グローバル検索の状態をリセット
                }
            });

            // テキストが実際に変更された場合のみDOMを更新
            if (textChanged && node.textContent !== replacedText) {
                 // 親が設定UIや特定の要素でないことを確認（オプション）
                if (!node.parentNode || !node.parentNode.closest('#gpt-replace-settings-panel')) {
                    node.textContent = replacedText;
                }
            }
        } else if (node.nodeType === Node.ELEMENT_NODE) {
            // 要素ノードの場合は、その子ノードに対して再帰的に処理
            // ただし、SCRIPT, STYLE, TEXTAREA, INPUT, 設定パネルの中は処理しない
            const tagName = node.nodeName.toUpperCase();
            const isEditable = node.isContentEditable; // contenteditable属性をチェック
            const isInSettingsPanel = node.closest('#gpt-replace-settings-panel'); // 設定パネル内かチェック

            if (tagName !== 'SCRIPT' && tagName !== 'STYLE' && tagName !== 'TEXTAREA' && tagName !== 'INPUT' && !isEditable && !isInSettingsPanel) {
                // NodeListではなくArrayに変換してからforEachを使う方が安全な場合がある
                Array.from(node.childNodes).forEach(child => performReplace(child));
            }
        }
    };


    // --- MutationObserver ---
    const targetNode = document.body;
    // characterData: true を含めると、テキスト編集中のカーソル移動でも発火することがあるため、
    // childList と subtree のみに絞り、追加されたノード全体をチェックする方が安定する場合がある
    const config = { childList: true, subtree: true };

    let observer = null; // オブザーバーのインスタンスを保持

    const callback = function(mutationsList, obs) {
        // 変更を一時的に無効化 (置換処理による無限ループを防ぐ)
        // disconnect/observe を繰り返すと重くなる可能性があるので注意
        // 代わりにフラグ管理なども検討できるが、まずはシンプルな方法で実装
        obs.disconnect();

        for(const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    performReplace(node);
                });
                // 削除されたノードは無視
            }
            // characterDataの監視をやめたので、以下のブロックは不要
            // else if (mutation.type === 'characterData') {
            //     performReplace(mutation.target);
            // }
        }

        // 監視を再開
        // disconnectした場合は再度observeする必要がある
        if (observer) { // observerがnullでないことを確認
             observer.observe(targetNode, config);
        }
    };

    // --- 初期実行と監視開始 ---
    const startObserver = () => {
        if (observer) {
            observer.disconnect(); // 既存のオブザーバーがあれば停止
        }
        // 監視開始前に一度ページ全体を置換
        performReplace(targetNode);
        // 新しいオブザーバーを作成して監視を開始
        observer = new MutationObserver(callback);
        observer.observe(targetNode, config);
    };

    // --- 設定UI ---
    let settingsPanel = null;
    let isPanelVisible = false;

    function createSettingsPanel() {
        if (settingsPanel) {
            settingsPanel.style.display = 'block';
            isPanelVisible = true;
            renderReplacementsList(); // 表示時にリストを再描画
            return;
        }

        settingsPanel = document.createElement('div');
        settingsPanel.id = 'gpt-replace-settings-panel';
        settingsPanel.innerHTML = `
            <div class="gpt-replace-settings-header">
                <h3>単語置換設定</h3>
                <button id="gpt-replace-close-btn" title="閉じる">&times;</button>
            </div>
            <div id="gpt-replace-list"></div>
            <div class="gpt-replace-add-form">
                <h4>新しい置換ルールを追加</h4>
                <input type="text" id="gpt-replace-from-input" placeholder="置換前の単語">
                <input type="text" id="gpt-replace-to-input" placeholder="置換後の単語">
                <button id="gpt-replace-add-btn">追加</button>
            </div>
            <div class="gpt-replace-footer">
                <button id="gpt-replace-save-btn">保存して再読込</button>
                 <button id="gpt-replace-cancel-btn">キャンセル</button>
            </div>
        `;
        document.body.appendChild(settingsPanel);
        isPanelVisible = true;

        // イベントリスナーを設定
        document.getElementById('gpt-replace-close-btn').addEventListener('click', hideSettingsPanel);
        document.getElementById('gpt-replace-cancel-btn').addEventListener('click', hideSettingsPanel);
        document.getElementById('gpt-replace-add-btn').addEventListener('click', addReplacement);
        document.getElementById('gpt-replace-save-btn').addEventListener('click', saveReplacements);

        // リスト部分のイベントリスナー（イベント委任）
        document.getElementById('gpt-replace-list').addEventListener('click', handleListClick);
        document.getElementById('gpt-replace-list').addEventListener('change', handleListChange); // チェックボックス用

        renderReplacementsList(); // 初期リスト表示
    }

     function handleListClick(event) {
        if (event.target.classList.contains('gpt-replace-remove-btn')) {
            const index = parseInt(event.target.dataset.index, 10);
            removeReplacement(index);
        }
    }

     function handleListChange(event) {
        if (event.target.classList.contains('gpt-replace-enabled-checkbox')) {
            const index = parseInt(event.target.dataset.index, 10);
            toggleReplacementEnabled(index, event.target.checked);
        }
    }


    function renderReplacementsList() {
        if (!settingsPanel) return;
        const listDiv = document.getElementById('gpt-replace-list');
        listDiv.innerHTML = ''; // リストをクリア

        if (replacements.length === 0) {
            listDiv.innerHTML = '<p>置換ルールがありません。</p>';
            return;
        }

        replacements.forEach((r, index) => {
            const itemDiv = document.createElement('div');
            itemDiv.className = 'gpt-replace-item';
            itemDiv.innerHTML = `
                <input type="checkbox" class="gpt-replace-enabled-checkbox" data-index="${index}" ${r.enabled ? 'checked' : ''} title="有効/無効">
                <span class="gpt-replace-from">${escapeHTML(r.from)}</span>
                <span>&rarr;</span>
                <span class="gpt-replace-to">${escapeHTML(r.to)}</span>
                <button class="gpt-replace-remove-btn" data-index="${index}" title="削除">&times;</button>
            `;
            listDiv.appendChild(itemDiv);
        });
    }

    // HTMLエスケープ関数
    function escapeHTML(str) {
        const p = document.createElement('p');
        p.textContent = str;
        return p.innerHTML;
    }


    function addReplacement() {
        const fromInput = document.getElementById('gpt-replace-from-input');
        const toInput = document.getElementById('gpt-replace-to-input');
        const from = fromInput.value.trim();
        const to = toInput.value.trim(); // toは空でも許可するかもしれないが、一旦trim

        if (from) { // fromが空でなければ追加
            replacements.push({ from, to, enabled: true });
            fromInput.value = '';
            toInput.value = '';
            renderReplacementsList(); // リストを更新
        } else {
            alert('「置換前の単語」を入力してください。');
        }
    }

    function removeReplacement(index) {
        if (index >= 0 && index < replacements.length) {
            replacements.splice(index, 1);
            renderReplacementsList(); // リストを更新
        }
    }

     function toggleReplacementEnabled(index, isEnabled) {
        if (index >= 0 && index < replacements.length) {
            replacements[index].enabled = isEnabled;
            // 保存は「保存ボタン」で行うので、ここではリスト再描画は不要（チェックボックスの状態は変わる）
            // renderReplacementsList();
        }
    }

    function saveReplacements() {
        try {
            GM_setValue(KEY_REPLACEMENTS, JSON.stringify(replacements));
            updateRegexes(); // 正規表現キャッシュを更新
            alert('設定を保存しました。ページ全体を再チェックします。');
            hideSettingsPanel();

            // 設定変更を即時反映させるためにページ全体を再チェック
            // disconnect/observe を行う
             if (observer) {
                observer.disconnect();
            }
            performReplace(document.body); // 全体置換を実行
             if (observer) { // 再度監視を開始
                 observer.observe(targetNode, config);
             }

        } catch (e) {
            console.error("設定の保存に失敗しました:", e);
            alert('設定の保存中にエラーが発生しました。');
        }
    }

    function hideSettingsPanel() {
        if (settingsPanel) {
            // 保存せずに閉じる場合、変更前の状態に戻す
            try {
                replacements = JSON.parse(GM_getValue(KEY_REPLACEMENTS, '[]'));
                 replacements = replacements.map(r => ({ ...r, enabled: r.enabled !== undefined ? r.enabled : true }));
            } catch (e) {
                 console.error("キャンセル時の設定再読み込みに失敗:", e);
                 // エラーが発生した場合のフォールバック（空にするか、デフォルトに戻すか）
                 replacements = [];
            }
            settingsPanel.style.display = 'none';
            isPanelVisible = false;
        }
    }

    // --- スタイル設定 ---
    GM_addStyle(`
        #gpt-replace-settings-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 350px;
            max-height: 80vh; /* 高さを制限 */
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 9999;
            font-family: sans-serif;
            font-size: 14px;
            color: #333;
            display: none; /* 初期状態は非表示 */
            flex-direction: column; /* 縦方向に要素を配置 */
        }
        #gpt-replace-settings-panel.visible {
             display: flex; /* 表示時はflexに */
        }
        .gpt-replace-settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background-color: #eee;
            border-bottom: 1px solid #ccc;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .gpt-replace-settings-header h3 {
            margin: 0;
            font-size: 16px;
        }
        #gpt-replace-close-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #666;
            padding: 0 5px;
        }
         #gpt-replace-close-btn:hover {
             color: #000;
         }
        #gpt-replace-list {
            padding: 10px 15px;
            overflow-y: auto; /* 内容が多い場合にスクロール */
            flex-grow: 1; /* 残りの高さを埋める */
            min-height: 100px; /* 最小高さを確保 */
        }
        .gpt-replace-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
         .gpt-replace-item:last-child {
             border-bottom: none;
         }
         .gpt-replace-item input[type="checkbox"] {
             margin-right: 8px;
             cursor: pointer;
         }
        .gpt-replace-item span {
            margin: 0 5px;
            word-break: break-all; /* 長い単語がはみ出ないように */
        }
         .gpt-replace-item .gpt-replace-from {
             font-weight: bold;
             color: #007bff; /* 置換前を青色に */
         }
         .gpt-replace-item .gpt-replace-to {
              font-weight: bold;
              color: #28a745; /* 置換後を緑色に */
         }
        .gpt-replace-remove-btn {
            background: none;
            border: 1px solid #ddd;
            color: #dc3545;
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
            padding: 2px 5px;
            border-radius: 4px;
            margin-left: auto; /* 右端に寄せる */
        }
        .gpt-replace-remove-btn:hover {
            background-color: #dc3545;
            color: white;
        }
        .gpt-replace-add-form {
            padding: 15px;
            border-top: 1px solid #ccc;
            background-color: #f0f0f0;
        }
         .gpt-replace-add-form h4 {
             margin-top: 0;
             margin-bottom: 10px;
             font-size: 14px;
         }
        .gpt-replace-add-form input[type="text"] {
            width: calc(50% - 30px); /* ボタン幅を考慮 */
            padding: 8px;
            margin-right: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 13px;
        }
        .gpt-replace-add-form button {
            padding: 8px 12px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
        }
        .gpt-replace-add-form button:hover {
            background-color: #0056b3;
        }
        .gpt-replace-footer {
            padding: 10px 15px;
            border-top: 1px solid #ccc;
            background-color: #eee;
            text-align: right;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
        .gpt-replace-footer button {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
            font-size: 14px;
        }
        #gpt-replace-save-btn {
            background-color: #28a745;
            color: white;
        }
        #gpt-replace-save-btn:hover {
            background-color: #218838;
        }
         #gpt-replace-cancel-btn {
             background-color: #6c757d;
             color: white;
         }
         #gpt-replace-cancel-btn:hover {
             background-color: #5a6268;
         }
    `);

    // --- Tampermonkey メニュー設定 ---
    GM_registerMenuCommand('置換設定を開く/閉じる', () => {
        if (isPanelVisible) {
            hideSettingsPanel();
        } else {
            // パネルが存在しないか非表示なら作成または表示
            if (!settingsPanel) {
                createSettingsPanel();
                 settingsPanel.classList.add('visible'); // 表示クラスを追加
            } else {
                settingsPanel.style.display = 'flex'; // 再表示
                 settingsPanel.classList.add('visible');
                 isPanelVisible = true;
                 renderReplacementsList(); // 再表示時にリストを更新
            }
        }
    });

    // --- 初期化処理 ---
    // ページ読み込み完了後に実行されることを保証（より安全）
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startObserver);
    } else {
        startObserver(); // すでに読み込み完了している場合
    }

    console.log("ChatGPT 動的単語置換スクリプト (v3.0) が読み込まれました。");

})();