<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>AIハイブリッド解説ボタン Perplexityは即回答するVer.</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; max-width: 600px; }
textarea { width: 100%; height: 150px; font-family: monospace; padding: 8px; }
.controls { display: flex; gap: 10px; align-items: center; }
select, button { padding: 8px 12px; font-size: 1em; cursor: pointer; }
button { background-color: #007bff; color: white; border: none; border-radius: 4px; }
button:hover { background-color: #0056b3; }
.note { font-size: 0.9em; background-color: #eef; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<h1>AIコード解説（ハイブリッド版）</h1>
<div class="container">
<p class="note">
<strong>Perplexity</strong>を選ぶと、自動で質問が送信されます。<br>
それ以外は質問文がコピーされるので、開いた画面で貼り付けてください。
</p>
<textarea id="targetCode" placeholder="ここにコードを入力...">
// テスト用のコード
console.log("Hello AI");
</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 code = document.getElementById('targetCode').value;
if (!code.trim()) {
alert("コードが入力されていません。");
return;
}
// プロンプト（質問文）の作成
const prompt = "以下のコードを初心者向けに日本語で解説してください:\n\n" + code;
// 選択されたAIを取得
const aiService = document.getElementById('aiSelector').value;
// URLで日本語などを扱えるようにエンコード（変換）する
const encodedPrompt = encodeURIComponent(prompt);
if (aiService === 'perplexity') {
// 【パターンA】PerplexityはURLで質問を渡せる！
// https://www.perplexity.ai/search?q=質問文
const url = `https://www.perplexity.ai/search?q=${encodedPrompt}`;
window.open(url, '_blank');
} else {
// 【パターンB】それ以外はクリップボード経由
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 confirmOpen = confirm("質問をコピーしました！\n\n" + aiService + "の画面が開いたら「貼り付け」してください。\n移動しますか？");
if (confirmOpen) {
window.open(url, '_blank');
}
}).catch(() => {
alert("コピーに失敗しました。");
window.open(url, '_blank');
});
} else {
alert("コピー機能が使えません。");
window.open(url, '_blank');
}
}
}
</script>
</body>
</html>
使用変数
| aiService | |
| askAI -------( Function ) | |
| charset | |
| class | |
| code | |
| confirmOpen | |
| encodedPrompt | |
| id | |
| lang | |
| onclick | |
| placeholder | |
| prompt | |
| q | |
| url | |
| value |