fix: 図解ライブラリ機能を撤去

Made-with: Cursor
This commit is contained in:
MaikaKimura 2026-03-06 17:35:04 +09:00
parent a14134318f
commit 9b3c36db48
2 changed files with 1 additions and 86 deletions

View File

@ -77,24 +77,6 @@ Step 3 で収集した情報をもとに、図解HTMLを生成する。検索結
- `<!-- CONTENT_START -->``<!-- CONTENT_END -->` → Step 4で生成したコンテンツ - `<!-- CONTENT_START -->``<!-- CONTENT_END -->` → Step 4で生成したコンテンツ
5. ファイルを保存する(ブラウザで開くのは Step 6 のデプロイ後に行う。ローカルでは開かない) 5. ファイルを保存する(ブラウザで開くのは Step 6 のデプロイ後に行う。ローカルでは開かない)
### Step 5.5: 図解ライブラリの更新
`output/` 内の全HTMLファイル`index.html` 以外)をスキャンし、一覧ページ `output/index.html` を生成・更新する。
1. `output/` 内の `.html` ファイル一覧を取得する(`index.html` は除外)
2. 各ファイルの `<title>` タグからタイトルを、`<meta property="og:description">` から説明文を読み取る
3. `references/library-template.html` を読み込む
4. テンプレート内の `<!-- LIBRARY_ITEMS -->` を、以下の形式のカードリストで置換する:
```html
<a href="{ファイル名}" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
<h2 class="font-bold text-slate-900 mb-1">{タイトル}</h2>
<p class="text-sm text-ads-muted">{説明文}</p>
</a>
```
5. 結果を `output/index.html` として保存する
### Step 6: 公開 ### Step 6: 公開
ファイル保存後、公開する前にまず Node.js の有無を確認する。 ファイル保存後、公開する前にまず Node.js の有無を確認する。
@ -111,7 +93,7 @@ node --version
以下のスクリプトを**実行する**(中身を読む必要はない)。 以下のスクリプトを**実行する**(中身を読む必要はない)。
**重要: 第1引数には図解本体のファイル`output/{スラッグ}.html`)を指定する。`output/index.html`ライブラリ一覧)ではない。** **重要: 第1引数には図解本体のファイル`output/{スラッグ}.html`)を指定する。`output/index.html`サンプル一覧)ではない。**
**macOS / Git BashWindowsの場合:** **macOS / Git BashWindowsの場合:**
@ -184,7 +166,6 @@ https://diagram-スラッグ.surge.sh
ファイルの保存先: ファイルの保存先:
output/{スラッグ}.htmlブラウザにドラッグドロップすると表示できます output/{スラッグ}.htmlブラウザにドラッグドロップすると表示できます
図解ライブラリ: output/index.html
図解の主なポイント: 図解の主なポイント:
- 主要トピックを3〜5個 - 主要トピックを3〜5個

View File

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<meta name="googlebot" content="noindex, nofollow">
<title>図解ライブラリ</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ads: {
bg: '#FFFFFF',
surface: '#F8FAFC',
hover: '#F1F5F9',
border: '#E2E8F0',
accent: '#3B82F6',
'accent-light': '#2563EB',
text: '#1E293B',
muted: '#64748B',
dim: '#94A3B8',
}
},
fontFamily: {
sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
}
}
}
}
</script>
</head>
<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
<main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
<div class="text-center mb-12">
<h1 class="text-2xl md:text-3xl font-black text-slate-900 tracking-tight mb-3">図解ライブラリ</h1>
<p class="text-ads-muted">チャット欄で「○○を図解して」と依頼すると、ここに追加されます</p>
</div>
<div class="space-y-3">
<!-- LIBRARY_ITEMS -->
</div>
<div class="mt-16 pt-8 border-t border-ads-border/30">
<p class="text-sm font-bold text-slate-900 mb-4">こんなことを聞いてみよう</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-ads-muted">
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「API とは何か、図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「Git の rebase と merge の違いを図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「クラウドとは何か、図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「KPI と KGI の違いを図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「HTML と CSS の関係を図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「UI と UX の違いを図解して」</div>
</div>
</div>
</main>
<footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
<p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
</footer>
</body>
</html>