<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>360度パノラマ画像プロンプト生成機</title>
<style>
body { font-family: sans-serif; padding: 1em; background-color: #f4f4f9; }
.container { display: flex; flex-direction: column; gap: 15px; max-width: 600px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #333; }
/* 固定指示のスタイル */
.fixed-instruction {
font-weight: bold;
color: #555;
padding: 10px;
background-color: #e9ecef;
border-radius: 6px;
border-left: 5px solid #007bff;
}
/* ランダムボタンのスタイル */
.random-btn {
width: 100%;
padding: 12px;
font-size: 1.1em;
font-weight: bold;
color: #fff;
background: linear-gradient(45deg, #ff6b6b, #f06595, #845ef7);
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.1s;
}
.random-btn:active { transform: scale(0.98); }
.random-btn:hover { opacity: 0.9; }
/* 詳細入力エリア */
textarea {
width: 100%;
height: 120px;
padding: 12px;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1em;
line-height: 1.6;
}
/* 送信エリア */
.controls { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
select, button.send-btn { padding: 10px 15px; cursor: pointer; font-size: 1em; border-radius: 6px;}
select { border: 1px solid #ccc; flex-grow: 1; }
button.send-btn { background-color: #007bff; color: white; border: none; font-weight: bold;}
button.send-btn:hover { background-color: #0056b3; }
</style>
</head>
<body>
<h1>360度パノラマ画像プロンプト生成機 📷</h1>
<div class="container">
<div class="fixed-instruction">
AIへの指示:「360度パノラマ画像を作って。」
</div>
<button class="random-btn" onclick="generateRandomPrompt()">
🎲 ランダムな情景を生成する
</button>
<label for="detailArea" style="font-weight:bold; margin-bottom:-10px;">情景の詳細（編集可能）:</label>
<textarea id="detailArea" placeholder="上のボタンを押すと、ここにランダムな情景が生成されます..."></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 class="send-btn" onclick="askAI()">🚀 AIに送信</button>
</div>
</div>
<script>
// ============================================================
// ▼▼▼ 自由に編集できる「ランダムワードリスト」 ▼▼▼
// ここに好きな言葉を追加・削除してください。
// ============================================================
const promptData = {
// 場所・シチュエーション
locations: [
"近未来都市の摩天楼の屋上",
"古代遺跡が眠る密林の中",
"ネオン輝くサイバーパンクなスラム街",
"静かな湖畔のキャンプ場",
"活気ある中世ヨーロッパの市場",
"巨大な宇宙ステーションのドック",
"サンゴ礁が広がる海底都市",
"荒廃した砂漠のオアシス",
"魔法使いの塔の内部",
"桜が満開の日本の庭園"
],
// 時間帯・天候
times: [
"夕暮れ時、空が茜色に染まっている",
"満天の星空が広がる深夜",
"霧が立ち込める早朝",
"太陽が照りつける真昼の快晴",
"激しい雷雨の夜",
"雪が静かに降り積もる冬の日"
],
// 雰囲気・スタイル
styles: [
"幻想的で魔法のような雰囲気",
"写実的で高精細なスタイル",
"水彩画のような柔らかいタッチ",
"映画のワンシーンのようなドラマチックな照明",
"退廃的で少し不気味な空気感"
],
// 追加のディテール（オプション）
details: [
"多くの人々が行き交っている",
"奇妙な形の飛行船が飛んでいる",
"巨大なロボットが佇んでいる",
"色とりどりの植物が発光している",
"誰もいない静寂な空間"
]
};
// ============================================================
// ランダム生成のロジック
// ============================================================
function generateRandomPrompt() {
const detailArea = document.getElementById('detailArea');
// 配列からランダムに1つ選ぶ便利な関数
const pickRandom = (array) => array[Math.floor(Math.random() * array.length)];
// 各カテゴリーから1つずつ選んで組み合わせる
const parts = [];
parts.push(pickRandom(promptData.locations));
parts.push(pickRandom(promptData.times));
parts.push(pickRandom(promptData.styles));
// 50%の確率でディテールを追加
if (Math.random() > 0.5) {
parts.push(pickRandom(promptData.details));
}
// 句読点でつなげてテキストエリアに入れる
detailArea.value = parts.join("。\n") + "。";
// 生成されたらテキストエリアにフォーカスする（すぐに編集できるように）
detailArea.focus();
}
// ============================================================
// AIへの送信ロジック（以前とほぼ同じ）
// ============================================================
function askAI() {
const detailText = document.getElementById('detailArea').value.trim();
if (!detailText) {
alert("情景の詳細が入力されていません。「ランダム生成」ボタンを押すか、自分で入力してください。");
return;
}
// ★固定の指示と、生成された詳細を合体させる
const finalPrompt = "360度パノラマ画像を作って。\n\n【情景の詳細】\n" + detailText;
const aiService = document.getElementById('aiSelector').value;
const encodedPrompt = encodeURIComponent(finalPrompt);
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/search?q=${encodedPrompt}`; break;
}
if (aiService === 'perplexity') {
window.open(url, '_blank');
} else {
if (navigator.clipboard) {
navigator.clipboard.writeText(finalPrompt).then(() => {
if(confirm("プロンプトをコピーしました！\n\n" + aiService + "の画面が開いたら「貼り付け」してください。\n移動しますか？")) {
window.open(url, '_blank');
}
});
} else {
alert("コピー不可");
window.open(url, '_blank');
}
}
}
</script>
</body>
</html>
使用変数
| aiService | |
| askAI -------( Function ) | |
| charset | |
| class | |
| detailArea | |
| detailText | |
| encodedPrompt | |
| finalPrompt | |
| for | |
| generateRandomPrompt -------( Function ) | |
| id | |
| lang | |
| onclick | |
| parts | |
| pickRandom | |
| placeholder | |
| promptData | |
| q | |
| style | |
| url | |
| value |