<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>選択範囲対応 AI解説 選択されない時は全文となる</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; max-width: 600px; }
/* 動作確認用にテキストエリアとcontenteditable両方置いておきます */
textarea { width: 100%; height: 100px; padding: 8px; }
.editable-area {
width: 100%; height: 100px; border: 1px solid #767676; padding: 8px; overflow: auto; background: #fff;
}
.controls { display: flex; gap: 10px; align-items: center; background: #f0f0f0; padding: 10px; border-radius: 8px; }
select, button { padding: 8px 12px; cursor: pointer; }
button { background-color: #007bff; color: white; border: none; border-radius: 4px; }
button:hover { background-color: #0056b3; }
</style>
</head>
<body>
<h1>AI解説（選択範囲対応）</h1>
<p>文字を選択してボタンを押すと「その部分」だけ、選択しないと「全文」を解説します。</p>
<div class="container">
<textarea id="myEditor" placeholder="ここにコードを入力...">
function test() {
console.log("一部分だけ選択して試してみて！");
return true;
}
</textarea>
<div class="controls">
<select id="aiSelector">
<option value="perplexity">Perplexity (自動送信)</option>
<option value="gemini">Google Gemini</option>
<option value="chatgpt">ChatGPT</option>
<option value="claude">Claude</option>
</select>
<button onclick="askAI()">🚀 解説を聞く</button>
</div>
</div>
<script>
function askAI() {
const editor = document.getElementById('myEditor');
// --- ★ここが今回のキモとなる部分です★ ---
let targetText = "";
// 1. まず、画面上で選択されている文字（青くなっている部分）を取得
const selection = window.getSelection().toString();
if (selection.trim() !== "") {
// A. 選択範囲がある場合 → それを使う
targetText = selection;
} else {
// B. 選択範囲がない場合 → エディタの全文を使う
// (textareaなら .value, div(contenteditable)なら .innerText を取得)
targetText = editor.value || editor.innerText;
}
// ------------------------------------------
if (!targetText.trim()) {
alert("コードが入力されていません。");
return;
}
// プロンプト作成
const prompt = "以下のコードを初心者向けに日本語で解説してください:\n\n" + targetText;
// 以下、前回のAI呼び出しロジックと同じ
const aiService = document.getElementById('aiSelector').value;
const encodedPrompt = encodeURIComponent(prompt);
if (aiService === 'perplexity') {
const url = `https://www.perplexity.ai/search?q=${encodedPrompt}`;
window.open(url, '_blank');
} else {
let url = "";
switch (aiService) {
case "gemini": url = "https://gemini.google.com/app"; break;
case "chatgpt": url = "https://chatgpt.com/"; break;
case "claude": url = "https://claude.ai/new"; break;
}
if (navigator.clipboard) {
navigator.clipboard.writeText(prompt).then(() => {
const msg = (selection.trim() !== "")
? "【選択部分】をコピーしました！"
: "【全文】をコピーしました！";
const confirmOpen = confirm(msg + "\n\n" + aiService + "の画面が開いたら「貼り付け」してください。\n移動しますか？");
if (confirmOpen) {
window.open(url, '_blank');
}
});
} else {
alert("コピー機能が使えません。");
window.open(url, '_blank');
}
}
}
</script>
</body>
</html>
使用変数
| aiService | |
| askAI -------( Function ) | |
| charset | |
| class | |
| confirmOpen | |
| editor | |
| encodedPrompt | |
| id | |
| lang | |
| msg | |
| onclick | |
| placeholder | |
| prompt | |
| q | |
| selection | |
| targetText | |
| test -------( Function ) | |
| url | |
| value |