sugudasu/tools/diff.html at main · Kaoru-Stats-Lab/sugudasu · GitHub

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="AI書き換え文のDiff（差分比較）。数字・日付・URLなど見逃すとまずい変更から確認。データ非送信・ブラウザ完結。">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="SUGUDASU">
    <meta property="og:title" content="SUGUDASU 差分チェック（Diff）">
    <meta property="og:description" content="AI書き換えの危険な変更を優先表示するDiff。登録不要・データ非送信。">
    <meta property="og:url" content="https://sugudasu.com/diff">
    <meta property="og:image" content="https://sugudasu.com/assets/og-card.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://sugudasu.com/assets/og-card.png">
    <meta name="twitter:title" content="SUGUDASU 差分チェック（Diff）">
    <meta name="twitter:description" content="AI書き換えの危険な変更を優先表示。Diff・非送信・保存なし。">
    <title>AI書き換えの危険変更を先に確認 | SUGUDASU 差分チェック Diff</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="../assets/sugudasu.css">
    <style>
        .diff-pre { white-space: pre-wrap; word-break: break-word; border-radius: 0.5rem; padding: 0.6rem 0.7rem; font-size: 12px; line-height: 1.5; border: 1px solid #e2e8f0; }
        .diff-pre--before { background: #f8fafc; color: #334155; }
        .diff-pre--after { background: #f0fdf4; color: #14532d; border-color: #bbf7d0; }
        .diff-map-dot { position: absolute; left: 0; width: 100%; height: 8px; border-radius: 999px; border: 0; cursor: pointer; }
        .diff-map-dot--5, .diff-map-dot--4 { background: #ef4444; }
        .diff-map-dot--3 { background: #f59e0b; }
        .diff-map-dot--2, .diff-map-dot--1 { background: #94a3b8; }
    </style>
</head>
<body class="sg-body min-h-screen flex flex-col antialiased">
<div id="sg-chrome-top" data-sg-title="SUGUDASU 差分チェック" data-sg-tool-id="diff"></div>

<main class="sg-main-shell flex-1 space-y-5">
    <section class="sg-card p-4 space-y-3">
        <h1 class="text-base font-bold text-slate-900">AIに書き直させた文の、危険な変更から確認</h1>
        <p class="text-xs text-slate-600 leading-relaxed">
            すべての違いを並べるのではなく、数字・日付・URL・「必須／推奨」など<strong>見逃すとまずい変更</strong>から確認します。登録不要・保存なし・データはサーバーに送りません。
        </p>
        <p data-sg-privacy-badge data-subject="入力内容" data-extra="タブを閉じると内容は消えます" class="text-[11px] text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2"></p>
        <p id="diff-warning" class="text-[11px] text-red-700"></p>
    </section>

    <section class="grid gap-3 md:grid-cols-2">
        <label class="sg-card p-3 space-y-2">
            <span class="text-xs font-semibold text-slate-700">元の文</span>
            <textarea id="diff-before" class="sg-input min-h-52 text-xs font-mono" placeholder="元の文書を貼り付け"></textarea>
        </label>
        <label class="sg-card p-3 space-y-2">
            <span class="text-xs font-semibold text-slate-700">書き換え後（AIなど）</span>
            <textarea id="diff-after" class="sg-input min-h-52 text-xs font-mono" placeholder="書き換え後の文書を貼り付け"></textarea>
        </label>
    </section>

    <section class="sg-card p-3 flex flex-wrap items-center gap-2">
        <!-- DECISION: コピーはSlack/メールでの共有運用、印刷は紙での回覧・押印運用を想定して用意。
             社内Wikiへの転記や監査ログ保存は現状スコープ外。 -->
        <button id="diff-run" type="button" class="sg-btn-primary text-sm">危険な変更を確認</button>
        <label class="inline-flex items-center gap-1.5 text-xs text-slate-700 cursor-pointer select-none">
            <input type="checkbox" id="diff-cleanse-ws" class="rounded border-slate-300">
            <span>全角・行末スペースを無視して比較</span>
        </label>
        <span class="text-[11px] text-slate-500">入力欄は変わらない · <a href="#faq-diff-cleanse" class="text-blue-600 hover:underline">詳細</a></span>
        <button id="diff-copy" type="button" class="text-xs font-semibold px-3 py-2 rounded-lg border border-slate-200 hover:bg-slate-50">結果をコピー</button>
        <button id="diff-print" type="button" class="text-xs font-semibold px-3 py-2 rounded-lg border border-slate-200 hover:bg-slate-50">印刷 / PDF</button>
        <button id="diff-layout-side" type="button" class="text-xs font-semibold px-3 py-2 rounded-lg border border-slate-200 hover:bg-slate-50">左右</button>
        <button id="diff-layout-inline" type="button" class="text-xs font-semibold px-3 py-2 rounded-lg border border-slate-200 hover:bg-slate-50">縦並び</button>
        <span id="diff-copy-status" class="text-[11px] text-slate-500"></span>
    </section>

    <section class="grid gap-3 md:grid-cols-[1fr_60px]">
        <div class="space-y-3">
            <div class="sg-card p-3 grid grid-cols-2 sm:grid-cols-4 gap-2 text-center">
                <div><p class="text-[11px] text-slate-500">変更の件数</p><p id="diff-total" class="text-lg font-bold text-slate-900">0</p></div>
                <div><p class="text-[11px] text-slate-500">要確認（高）</p><p id="diff-high" class="text-lg font-bold text-red-600">0</p></div>
                <div><p class="text-[11px] text-slate-500">注意（中）</p><p id="diff-medium" class="text-lg font-bold text-amber-600">0</p></div>
                <div><p class="text-[11px] text-slate-500">軽微（低）</p><p id="diff-low" class="text-lg font-bold text-slate-600">0</p></div>
            </div>
            <p id="diff-status" class="text-xs text-slate-600">「危険な変更を確認」を押してください。</p>
            <div id="diff-change-list" class="space-y-3"></div>
        </div>
        <aside class="no-print">
            <p class="text-[10px] text-slate-500 mb-1">位置の目安</p>
            <div id="diff-mini-map" class="relative h-72 rounded-lg border border-slate-200 bg-slate-50"></div>
        </aside>
    </section>
</main>

<section class="no-print sg-faq-section border-t border-slate-200">
    <div class="sg-faq-inner">
        <h2 class="sg-faq-title">差分チェックのよくある質問</h2>
        <p class="text-xs text-slate-600 leading-relaxed mb-4 max-w-3xl">
            AIに書き直させた文をブラウザだけで見比べ、数字や日付など見逃すとまずい変更から確認するためのツールです。
        </p>
        <div class="sg-faq-list">
            <details class="sg-faq">
                <summary>Diff（差分比較）ツールと同じですか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>用途は同じ「書き換え前後の差分確認」です。一般的な Diff がすべての差分を並べるのに対し、本ツール（差分チェック）は数字・日付・URL・必須/推奨の入れ替わりなど、<strong>見逃すとまずい変更</strong>を優先表示します。</p>
                </div>
            </details>
            <details class="sg-faq">
                <summary>すべての違いが表示されないのはなぜですか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>「すべての違いを一覧」よりも、見落とすと危険な変更（数値・日付・URL・メールアドレス、否定の反転、「必須」⇄「推奨」など）を優先する設計です。軽微な表記ゆれは優先度を下げています。</p>
                </div>
            </details>
            <details class="sg-faq">
                <summary>入力した文章はサーバーに送信されますか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>いいえ。差分チェックはブラウザ内で完結し、入力内容は外部へ送信・保存しません。</p>
                </div>
            </details>
            <details class="sg-faq" id="faq-diff-cleanse" open>
                <summary>「全角・行末スペースを無視」すると何が消えますか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>比較のときだけ、全角スペース・一部の特殊空白・タブ・行末の余分な半角スペースの違いを揃えます。<strong>入力欄の文字は変わりません。</strong> 数字・日付・文言の違いは残ります。名簿の全角半角整形とは別機能です。貼り戻す前に本文自体を整えたい場合は <a href="normalize.html" class="text-blue-600 hover:underline">全角半角整え</a> を使ってください。</p>
                </div>
            </details>
            <details class="sg-faq">
                <summary>長い文章を貼り付けると重くなりますか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>長い文章で画面が固まらないよう、ある程度の長さを超えると「行ごとのざっくり比較」に切り替えます。そのため長文では変更の切り方が粗くなることがあります。</p>
                </div>
            </details>
            <details class="sg-faq">
                <summary>「固有名詞の欠落」は何を検知していますか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>現状は SUGUDASU / Sync 系の製品名に限定して欠落判定します。汎用的な固有名詞検知への拡張は今後の検討項目です。</p>
                </div>
            </details>
            <details class="sg-faq">
                <summary>レイアウトを縦にするか左右にするかはどう選べばいいですか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>左右は「元の文」と「書き換え後」を横に並べて見たいとき向き。縦は変更を1件ずつ上から読むとき向きです。中身は同じなので、読みやすい方を選んでください。</p>
                </div>
            </details>
            <details class="sg-faq">
                <summary>結果のコピーと印刷は何のためにありますか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>コピーはSlackやメールにそのまま貼り付けて共有する運用、印刷は紙で回覧・押印する運用を想定しています。</p>
                </div>
            </details>
            <details class="sg-faq">
                <summary>入力中に自動で解析されないのはなぜですか？</summary>
                <div class="mt-3 text-xs leading-relaxed text-slate-600 pt-2 border-t border-slate-200/60">
                    <p>長い文章で負荷が高くなるため、入力のたびに動かさず「危険な変更を確認」ボタンで明示実行する設計です。</p>
                </div>
            </details>
        </div>
    </div>
</section>

<div id="sg-chrome-bottom"></div>
<script src="../assets/sugudasu-shell.js"></script>
<script type="module" src="../assets/diff-app.js"></script>
</body>
</html>