350 HTML する プロンプト
文章の後に
このプロンプト
その後にリンク配置
【このプロンプトの目的とやっている内容】
提供された「対話テキスト（文章）」と「各種リンクデータ」を、専用のHTMLテンプレートに確実に組み込み、1つの独立したHTMLファイルに変換・生成するための指示文です。
このテンプレートには「文字サイズ変更」「数式スタイル切替（MathJax対応）」「ダークモード切替」「ファイル保存（ダウンロード）機能」がJavaScriptで実装されており、AIにはこの構造や機能を一切壊さずにデータを流し込むことを要求します。
---
【依頼内容】
あなたは優秀なフロントエンドエンジニアです。
以下の【厳守事項】に従い、末尾に提供された【入力データ】（対話文章とリンク）を【指定HTMLテンプレート】の該当箇所に組み込んで、完全なHTMLコードに変換して生成してください。
【厳守事項】
1. **提供された文章を必ずHTML形式に変換してください。** ログインページやリダイレクト等の不要な機能、悪意のあるCDNスクリプトは絶対に作らない・読み込まないでください。
2. **リンクの配置ルールを以下の順序で厳守してください。**
- **① 先頭リンク**：【提供したリンク】のうち、**最初の2つだけ**を、対話本文より上の `<div id="top-links">` 内に配置してください。
- **② 追加リンク**：【提供したリンク】の**3つ目以降（残りのすべてのリンク）**は、対話本文の直後の `<div id="additional-links">` 内に配置してください。
- **③ 本文内のリンク**：さらにもう一つ後ろの `<div id="inline-links">` 内に、対話本文中に登場したURLを抽出して配置してください（抽出対象がなければ「特になし」と記載）。
- **出力前に、入力されたリンクに貼り落とし・漏れが一切ないか必ずチェックしてください。**
3. ベースとなる【指定HTMLテンプレート】のCSS、JavaScript（文字サイズ変更、数式スタイル変更、ダークモード、ダウンロード機能）は絶対に改変・削除せず、そのまま使用してください。
4. MathJaxの読み込みは必ず `<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>` を使用してください。
5. 【対話データ】の文章は `<div id="chat-content">` 内に配置し、ユーザーの発言は `<div class="message user" style="background-color: var(--user-bg);">`、AIの発言は `<div class="message ai" style="background-color: var(--ai-bg);">` で囲んで見やすく構造化してください（適宜見出しやリスト、引用タグを使用してください）。
6. 出力はMarkdownのHTMLコードブロック（```html から ``` まで）のみとし、AIの挨拶や説明文は一切含めないでください。
【指定HTMLテンプレート】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>対話記録</title>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root { --bg-color: #f8f9fa ; --text-color: #000 ; --box-bg: #fff ; --box-border: #ddd ; --user-bg: #e6f7ff ; --ai-bg: #f6ffed ; --base-font-size: 22px; }
body.dark-mode { --bg-color: #121212 ; --text-color: #ffffff ; --box-bg: #1e1e1e ; --box-border: #333 ; --user-bg: #1a2a3a ; --ai-bg: #1e3a1e ; }
body { font-size: var(--base-font-size, 22px); background-color: var(--bg-color); color: var(--text-color); max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Yu Gothic", sans-serif; box-sizing: border-box; transition: background-color 0.3s, color 0.3s; }
* { box-sizing: border-box; }
.settings-ui, .link-section, .message { background-color: var(--box-bg); border: 1px solid var(--box-border); }
.settings-ui { border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.settings-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-row label { font-weight: bold; }
input[type="range"] { flex: 1; min-width: 160px; }
select, button { font-size: 0.8em; padding: 7px 10px; border: 1px solid var(--box-border); background-color: var(--box-bg); color: var(--text-color); border-radius: 5px; cursor: pointer; }
button:hover { opacity: 0.8; }
.link-section { padding: 15px; margin-bottom: 20px; border-radius: 8px; }
.link-section h3 { margin-top: 0; font-size: 1.1em; border-bottom: 1px solid var(--box-border); padding-bottom: 5px; }
.link-section ul { padding-left: 20px; margin-bottom: 0; }
.link-section li { margin-bottom: 8px; }
.link-section a { color: #007bff ; word-break: break-all; text-decoration: none; }
.link-section a:hover { text-decoration: underline; }
body.dark-mode .link-section a { color: #4da3ff ; }
.message { padding: 20px; margin-bottom: 20px; border-radius: 10px; }
.message h3 { margin-top: 0; border-bottom: 1px solid var(--box-border); padding-bottom: 8px; font-size: 1.1em; }
.message p { margin-bottom: 1em; }
.message blockquote { border-left: 5px solid var(--box-border); padding: 10px 15px; margin: 10px 0; background-color: rgba(0,0,0,0.03); }
body.dark-mode .message blockquote { background-color: rgba(255,255,255,0.05); }
.concept-box { padding: 15px; margin: 15px 0; border: 1px solid var(--box-border); background-color: var(--box-bg); border-radius: 8px; }
pre, .diagram-text { font-family: monospace; white-space: pre-wrap; border: 1px solid var(--box-border); background-color: var(--box-bg); padding: 15px; border-radius: 6px; overflow-x: auto; }
hr { border: 0; border-top: 1px solid var(--box-border); margin: 2em 0; }
body.force-inline mjx-container[display="true"] { display: inline-block !important; margin: 0 !important; }
body.force-display mjx-container { display: block !important; text-align: center !important; margin: 1em 0 !important; }
@media (max-width: 600px) { body { padding: 10px; } .settings-row { align-items: flex-start; flex-direction: column; } .settings-row input[type="range"] { width: 100%; } }
</style>
</head>
<body>
<div class="settings-ui">
<div class="settings-row">
<label for="font-size-slider">文字サイズ:</label>
<input type="range" id="font-size-slider" min="10" max="40" value="22" step="1">
<span id="font-size-display">22px</span>
</div>
<div class="settings-row">
<label for="math-style-selector">数式スタイル:</label>
<select id="math-style-selector">
<option value="default">標準（自動）</option>
<option value="force-inline">全てインライン（テキスト内埋め込み）</option>
<option value="force-display">全て独立行（ディスプレイ）</option>
</select>
</div>
<div class="settings-row">
<select id="ai-selector">
<option value="AI Studio">AI Studio</option>
<option value="Chat GPT">Chat GPT</option>
<option value="Claude">Claude</option>
</select>
<button id="download-btn">この対話を保存</button>
<button id="dark-mode-btn">背景・文字色を反転</button>
</div>
</div>
<!-- ① 先頭リンク（提供されたリンクの最初の2つ） -->
<div class="link-section" id="top-links">
<h3>【提供したリンク】</h3>
<ul>
<!-- ここにリンクを <li><a href="..." target="_blank" rel="noopener noreferrer">タイトル</a></li> 形式で2つ挿入 -->
</ul>
</div>
<!-- 対話本文 -->
<div id="chat-content">
<!-- ここに【対話データ】を挿入。 -->
</div>
<!-- ② 追加リンク（提供されたリンクの3つ目以降） -->
<div class="link-section" id="additional-links">
<h3>【追加リンク】</h3>
<ul>
<!-- ここに提供されたリンクの残りを <li><a href="..." target="_blank" rel="noopener noreferrer">タイトル</a></li> 形式で残さずすべて挿入 -->
</ul>
</div>
<!-- ③ 本文内のリンク -->
<div class="link-section" id="inline-links">
<h3>【本文内のリンク】</h3>
<ul>
<!-- ここに対話本文中に登場したリンクがあれば抽出して挿入 -->
</ul>
</div>
<script>
const fontSizeSlider = document.getElementById('font-size-slider');
const fontSizeDisplay = document.getElementById('font-size-display');
fontSizeSlider.addEventListener('input', function() {
const value = this.value;
document.documentElement.style.setProperty('--base-font-size', value + 'px');
fontSizeDisplay.textContent = value + 'px';
});
const mathStyleSelector = document.getElementById('math-style-selector');
mathStyleSelector.addEventListener('change', function() {
document.body.classList.remove('force-inline', 'force-display');
if (this.value === 'force-inline') { document.body.classList.add('force-inline'); }
else if (this.value === 'force-display') { document.body.classList.add('force-display'); }
if (window.MathJax && MathJax.typesetPromise) { MathJax.typesetPromise(); }
});
const darkModeBtn = document.getElementById('dark-mode-btn');
darkModeBtn.addEventListener('click', function() { document.body.classList.toggle('dark-mode'); });
const downloadBtn = document.getElementById('download-btn');
const aiSelector = document.getElementById('ai-selector');
downloadBtn.addEventListener('click', function() {
const now = new Date();
const pad = num => String(num).padStart(2, '0');
const timestamp = now.getFullYear() + pad(now.getMonth() + 1) + pad(now.getDate()) + pad(now.getHours()) + pad(now.getMinutes()) + pad(now.getSeconds());
const aiName = aiSelector.value.replace(/\s+/g, '_');
const fileName = '_' + aiName + '_' + timestamp + '.html';
const htmlContent = '<!DOCTYPE html>\n' + document.documentElement.outerHTML;
const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
</script>
</body>
</html>
---
【入力データ】
■ 提供したリンク：
（※ここに複数のリンクを貼り付け。最初の2つが「先頭リンク」、3つ目以降が「追加リンク」に配置されます）
■ 対話文章データ：
（※ここに対話テキストの文章を丸ごと貼り付け）