<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マルチAIコード解説・4つから選べる</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;
color: #666;
background-color: #f0f0f0;
padding: 10px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>AIでコード解説（マルチ対応）</h1>
<div class="container">
<p class="note">
下のコードを入力し、聞きたいAIを選んでボタンを押してください。<br>
<strong>質問文は自動でコピーされます。AIの画面が開いたら「貼り付け」してください。</strong>
</p>
<textarea id="targetCode" placeholder="ここに解説してほしいコードを入力...">
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
</textarea>
<div class="controls">
<select id="aiSelector">
<option value="gemini">Google Gemini (高速・高機能)</option>
<option value="chatgpt">ChatGPT (定番)</option>
<option value="claude">Claude (自然な文章・コードに強い)</option>
<option value="perplexity">Perplexity (最新情報を検索)</option>
</select>
<button onclick="askAI()">🚀 AIに解説を聞く</button>
</div>
</div>
<script>
function askAI() {
const code = document.getElementById('targetCode').value;
if (!code.trim()) {
alert("コードが入力されていません。");
return;
}
// 1. プロンプト（質問文）を作成
const prompt = "以下のプログラムコードの動作と仕組みを、初心者にもわかりやすく日本語で解説してください。重要な部分は箇条書きにしてください。\n\n```\n" + code + "\n```";
// 2. 選択されたAIのURLを取得
const aiService = document.getElementById('aiSelector').value;
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;
case "perplexity":
url = "https://www.perplexity.ai/";
break;
}
// 3. クリップボードにコピーしてから別窓を開く
if (navigator.clipboard) {
navigator.clipboard.writeText(prompt).then(() => {
const confirmOpen = confirm("質問文をコピーしました！\n\nこれから開く" + aiService + "の画面で\n「貼り付け（Ctrl+V）」をして質問してください。\n\n移動しますか？");
if (confirmOpen) {
window.open(url, '_blank');
}
}).catch(err => {
alert("コピーに失敗しました。手動でコピーしてください。");
window.open(url, '_blank');
});
} else {
// 古いブラウザなどの対応
alert("このブラウザは自動コピーに対応していません。コードをコピーしてから移動してください。");
window.open(url, '_blank');
}
}
</script>
</body>
</html>
使用変数
| aiService | |
| askAI -------( Function ) | |
| charset | |
| class | |
| code | |
| confirmOpen | |
| err | |
| fibonacci -------( Function ) | |
| id | |
| lang | |
| onclick | |
| placeholder | |
| prompt | |
| url | |
| value |