【完全攻略】ぷに語翻訳機を作ってみた！ChatGPTと一緒に100％ぷに化への冒険

<!-------------------------------------- HTML ------------------------------------ <div style="margin-bottom:1em;"> <textarea id="textInput" rows="5" cols="50" placeholder="ここに文章を入力してぷに〜"></textarea> </div> <div style="margin-bottom:1em;"> <button onclick="toPuni()">ぷに語に変換する</button> <button onclick="toJapanese()">日本語に戻す</button> <button onclick="clearText()">クリア</button> </div> <div> <p>変換結果：</p> <div id="result" style="white-space: pre-wrap; background:#f8f8ff; padding:10px; border:1px solid #ddd; border-radius:8px;"> </div> </div> ------------------------------------ JS ------------------------------------ <script> // 入力したテキストをぷに語に変換 function toPuni() { const text = document.getElementById("textInput").value; if (!text.trim()) { alert("テキストを入力してぷに〜"); return; } // 単語の2〜3割をランダムに「ぷに」に置換 const words = text.split(/(\s+)/); const converted = words.map(word => { if (Math.random() < 0.3 && word.trim() !== "") { return "ぷに"; } else { return word; } }).join(""); document.getElementById("result").textContent = converted; } --></script>

<!-------------------------------------- HTML ------------------------------------ <div style="margin-bottom:1em;"> <textarea id="textInput" rows="5" cols="60" placeholder="ここに日本語を入力してぷに〜"></textarea> </div> <div style="margin-bottom:1em;"> <label for="puniRate">ぷに率: </label> <input type="range" id="puniRate" min="0" max="100" value="50" oninput="updateLabel(this.value)"> <span id="puniLabel">50%</span> </div> <div style="margin-bottom:1em;"> <button onclick="toPuni()">ぷに語に変換する</button> <button onclick="toJapanese()">日本語に戻す</button> <button onclick="clearText()">クリア</button> </div> <div> <p>変換結果：</p> <div id="result" style="white-space: pre-wrap; background:#f8f8ff; padding:10px; border:1px solid #ddd; border-radius:8px;"></div> </div> ------------------------------------ JS ------------------------------------ <script> let originalText = ""; // スライダー表示更新 function updateLabel(val) { document.getElementById("puniLabel").textContent = val + "%"; } // 日本語→ぷに語変換 function toPuni() { const text = document.getElementById("textInput").value; if (!text.trim()) { alert("テキストを入力してぷに〜"); return; } originalText = text; const puniRate = document.getElementById("puniRate").value; // 語尾とランダム単語をぷに化 const converted = text .split(/([。！？\n])/) .map(sentence => { if (!sentence.trim()) return sentence; // ランダムにぷに置換する確率 if (Math.random() * 100 < puniRate) { return sentence.replace(/(。|！|？|です|ます|だよ|だ|ね|よ)/g, "ぷに") + "ぷに"; } else { return sentence; } }) .join(""); document.getElementById("result").textContent = converted; } // オリジナルに戻す function toJapanese() { document.getElementById("result").textContent = originalText; } // 入力と結果クリア function clearText() { document.getElementById("textInput").value = ""; document.getElementById("result").textContent = ""; originalText = ""; } --></script>

<!-------------------------------------- HTML ------------------------------------ <div class="puni-box" style="margin:1em 0;"> <textarea class="puni-input" rows="6" style="width:100%;max-width:720px;" placeholder="ここに日本語を入れてぷに〜"></textarea> <div style="margin:.5em 0;display:flex;gap:.5em;align-items:center;flex-wrap:wrap;"> <label>ぷに率: <input class="puni-rate" type="range" min="0" max="100" value="50"> </label> <span class="puni-rate-label">50%</span> <button type="button" class="puni-to">ぷに語に変換</button> <button type="button" class="puni-back">日本語に戻す</button> <button type="button" class="puni-clear">クリア</button> </div> <div>変換結果：</div> <div class="puni-result"style="white-space:pre-wrap;background:#f8f8ff;padding:10px;border:1px solid #ddd;border-radius:8px;min-height:4em;max-width: 700px;"></div> </div> ------------------------------------ JS ------------------------------------ <script> (function(){ // ES5で書く（古ブラウザでも安全）＆インラインハンドラ非依存 function setup(root){ var ta = root.querySelector('.puni-input'); var rate = root.querySelector('.puni-rate'); var lab = root.querySelector('.puni-rate-label'); var out = root.querySelector('.puni-result'); var bTo = root.querySelector('.puni-to'); var bBk = root.querySelector('.puni-back'); var bCl = root.querySelector('.puni-clear'); var original = ""; // ラベル更新 rate.addEventListener('input', function(){ lab.textContent = rate.value + '%'; }); // 変換 bTo.addEventListener('click', function(){ var text = ta.value || ""; if (!text.replace(/\s/g,"").length) { out.textContent = ""; return; } original = text; // 数値を厳重に読む（文字列"100"問題回避） var r = parseFloat(rate.value); if (!isFinite(r)) r = 0; // ★100%は"必ず"全部ぷに：非空白をすべて「ぷに」に if (r >= 99.9 || String(rate.value).trim() === "100") { // 改行やスペースは維持し、文字だけ「ぷに」に out.textContent = text.replace(/\S/g, "ぷに"); return; } // 1〜99%：文字単位でランダムにぷに化（空白は保持） var res = ""; for (var i=0; i<text.length; i++){ var ch = text.charAt(i); if (/\s/.test(ch)) { res += ch; continue; } res += (Math.random()*100 < r) ? "ぷに" : ch; } // 語尾っぽい箇所を軽くぷに化して“らしさ”追加 res = res.replace(/(。|！|？|です|ます|だよ|だ|ね|よ)(?=\s|$)/g, "ぷに"); out.textContent = res; }); // 戻す bBk.addEventListener('click', function(){ out.textContent = original; ta.value = original; }); // クリア bCl.addEventListener('click', function(){ ta.value = ""; out.textContent = ""; original = ""; rate.value = "50"; lab.textContent = "50%"; }); } // ページ内に複数置いてもOK function init(){ var nodes = document.querySelectorAll('.puni-box'); for (var i=0; i<nodes.length; i++) setup(nodes[i]); // 動作確認用（コンソールで見える）：console.log('puni online'); } if (document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); } else { init(); } })(); --></script>

<!-------------------------------------- HTML ------------------------------------ <div class="puni-box" style="margin:1em 0;"> <textarea class="puni-input" rows="6" style="width:100%;max-width:720px;" placeholder="ここに日本語を入れてぷに〜"></textarea> <div style="margin:.5em 0;display:flex;gap:.5em;align-items:center;flex-wrap:wrap;"> <label>ぷに率: <input class="puni-rate" type="range" min="0" max="100" value="50"> </label> <span class="puni-rate-label">50%</span> <button type="button" class="puni-to">ぷに語に変換</button> <button type="button" class="puni-back">日本語に戻す</button> <button type="button" class="puni-clear">クリア</button> </div> <div>変換結果：</div> <div class="puni-result"style="white-space:pre-wrap;background:#f8f8ff;padding:10px;border:1px solid #ddd;border-radius:8px;min-height:4em;max-width: 700px;"></div> </div> ------------------------------------ JS ------------------------------------ <script> (function(){ function setup(root){ if (root.getAttribute('data-puni-bound') === '1') return; root.setAttribute('data-puni-bound', '1'); var ta = root.querySelector('.puni-input'); var rate = root.querySelector('.puni-rate'); var lab = root.querySelector('.puni-rate-label'); var out = root.querySelector('.puni-result'); var bTo = root.querySelector('.puni-to'); var bBk = root.querySelector('.puni-back'); var bCl = root.querySelector('.puni-clear'); var original = ""; // ぷに候補（重み付き） var puniChoices = [ {t:"ぷに", w:73}, // 2 {t:"ぷにに", w:11}, // 3 {t:"ぷにっ", w:9}, // 3 {t:"ぷに～", w:4}, // 3 {t:"ぷに～ん", w:2}, // 4 {t:"ぷにぷに", w:1} // 4 ]; // 残り長に合わせるための1文字フィラー（必要時のみ使用） var fillers = ["に","っ","～"]; function weightedPick(list){ var sum = 0; for (var i=0;i<list.length;i++) sum += list[i].w || 1; var r = Math.random()*sum, acc=0; for (var i=0;i<list.length;i++){ acc += list[i].w || 1; if (r < acc) return list[i]; } return list[0]; } function pickToken(maxLen){ // 長さが収まる候補だけに絞る var pool = []; for (var i=0;i<puniChoices.length;i++){ if (puniChoices[i].t.length <= maxLen) pool.push(puniChoices[i]); } if (pool.length) return weightedPick(pool).t; // どうしても無ければ1文字フィラー return fillers[(Math.random()*fillers.length)|0]; } function transformRun(run, rate){ // run長を超えないようにトークンを積む。原文も一部残す（rate%） var i=0, outStr=""; while(i<run.length){ var remain = run.length - i; if (Math.random()*100 < rate){ var t = pickToken(remain); if (t.length > remain) t = t.slice(0, remain); outStr += t; i += t.length; } else { outStr += run.charAt(i); i += 1; } } return outStr; } function transformRunFull(run){ // 100%：原文を一切残さず、長さぴったりで埋める var i=0, outStr=""; while(i<run.length){ var remain = run.length - i; var t = pickToken(remain); if (t.length > remain) t = t.slice(0, remain); outStr += t; i += t.length; } return outStr; } // 初期ラベル同期 function updateLabel(){ lab.textContent = rate.value + '%'; } updateLabel(); rate.addEventListener('input', updateLabel); // 変換（長さ厳守版） bTo.addEventListener('click', function(e){ if (e && e.stopImmediatePropagation) e.stopImmediatePropagation(); var text = ta.value || ""; if (!text.replace(/\s/g,"").length) { out.textContent = ""; return; } original = text; var r = parseFloat(rate.value); if (!isFinite(r)) r = 0; var keepMarks = /[。、！？♡♪☆★（）「」]/; // 句読点などは必ず保持 var i=0, res=[]; while(i<text.length){ var ch = text.charAt(i); // 空白 or 句読点はそのまま if (/\s/.test(ch) || keepMarks.test(ch)){ res.push(ch); i++; continue; } // 置換対象の連続runを抽出 var j=i; while(j<text.length){ var c2 = text.charAt(j); if (/\s/.test(c2) || keepMarks.test(c2)) break; j++; } var run = text.slice(i,j); // 100%は完全置換、それ以外は割合置換（いずれも run 長と一致） var chunk = (r >= 99.9 || String(rate.value).trim()==="100") ? transformRunFull(run) : transformRun(run, r); res.push(chunk); i = j; } // ★長さは text.length と常に一致 out.textContent = res.join(""); }, true); // 戻す bBk.addEventListener('click', function(e){ if (e && e.stopImmediatePropagation) e.stopImmediatePropagation(); out.textContent = original; ta.value = original; }, true); // クリア bCl.addEventListener('click', function(e){ if (e && e.stopImmediatePropagation) e.stopImmediatePropagation(); ta.value = ""; out.textContent = ""; original = ""; rate.value = "50"; updateLabel(); }, true); } function init(){ var nodes = document.querySelectorAll('.puni-box'); for (var i=0;i<nodes.length;i++) setup(nodes[i]); } if (document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init, {once:true}); } else { init(); } })(); --></script>