<!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; }
/* 指示入力欄のスタイル */
.prompt-input {
width: 100%;
padding: 8px;
font-size: 1em;
border: 2px solid #007bff; /* 青枠で目立たせる */
border-radius: 4px;
box-sizing: border-box; /* paddingを含めた幅にする */
}
.prompt-label {
font-size: 0.9em;
font-weight: bold;
color: #333;
margin-bottom: -5px; /* ラベルと入力欄を近づける */
}
/* コード入力エリア */
textarea { width: 100%; height: 120px; padding: 8px; box-sizing: border-box;}
.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>プロンプト編集 ＆ 選択範囲対応</h1>
<div class="container">
<label class="prompt-label">AIへの指示（変更可能）:</label>
<input type="text" id="customPrompt" class="prompt-input"
value="以下のコードを初心者向けに日本語で解説してください:">
<textarea id="myEditor" placeholder="ここにコードを入力...">
// バグがあるかもしれないコード
function calc(a, b) {
return a * b; // 足し算のつもりが掛け算になってる？
}
</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()">🚀 AIに送信</button>
</div>
</div>
<script>
function askAI() {
const editor = document.getElementById('myEditor');
const customPromptInput = document.getElementById('customPrompt');
// 1. ユーザーが設定した「指示」の言葉を取得
const instruction = customPromptInput.value;
// 2. コード部分（選択範囲 or 全文）を取得
let targetCode = "";
const selection = window.getSelection().toString();
if (selection.trim() !== "") {
targetCode = selection; // 選択範囲を使用
} else {
targetCode = editor.value; // 全文を使用
}
if (!targetCode.trim()) {
alert("コードが入力されていません。");
return;
}
// 3. 指示とコードを合体させて、最終的なプロンプトを作る
// 指示 + 改行2つ + コード
const finalPrompt = instruction + "\n\n" + targetCode;
// --- 以下、前回と同じAI送信ロジック ---
const aiService = document.getElementById('aiSelector').value;
const encodedPrompt = encodeURIComponent(finalPrompt);
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(finalPrompt).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 ) | |
| calc -------( Function ) | |
| charset | |
| class | |
| confirmOpen | |
| customPromptInput | |
| editor | |
| encodedPrompt | |
| finalPrompt | |
| id | |
| instruction | |
| lang | |
| msg | |
| onclick | |
| placeholder | |
| q | |
| selection | |
| targetCode | |
| type | |
| url | |
| value |