refactor: サンプル図解をsampleフォルダに移動
Made-with: Cursor
This commit is contained in:
parent
9b3c36db48
commit
60a282b7ee
@ -93,8 +93,6 @@ node --version
|
||||
|
||||
以下のスクリプトを**実行する**（中身を読む必要はない）。
|
||||
|
||||
**重要: 第1引数には図解本体のファイル（`output/{スラッグ}.html`）を指定する。`output/index.html`（サンプル一覧）ではない。**
|
||||
|
||||
**macOS / Git Bash（Windows）の場合:**
|
||||
|
||||
```bash
|
||||
|
||||
@ -6,7 +6,7 @@ SKILL.md の Step 5 で Node.js が未インストールだった場合に参照
|
||||
|
||||
以下をユーザーに伝え、インストールの許可を求める:
|
||||
|
||||
> 図解の作成は完了しました。`output/index.html` をブラウザにドラッグ＆ドロップすれば、今すぐ確認できます。
|
||||
> 図解の作成は完了しました。`output/` フォルダ内の HTML ファイルをブラウザにドラッグ＆ドロップすれば、今すぐ確認できます。
|
||||
>
|
||||
> URLで公開するには「Node.js」のインストールが必要です。
|
||||
> Node.js は、パソコン上でプログラムを動かすための土台で、世界中で使われている安全な道具です。
|
||||
@ -14,7 +14,7 @@ SKILL.md の Step 5 で Node.js が未インストールだった場合に参照
|
||||
>
|
||||
> 今からインストールしてもよいですか？
|
||||
|
||||
ユーザーが許可しなかった場合 → ファイルの確認方法（`output/index.html` をブラウザで開く）を伝えて終了。
|
||||
ユーザーが許可しなかった場合 → ファイルの確認方法（生成された HTML ファイルをブラウザで開く）を伝えて終了。
|
||||
|
||||
## macOS の場合
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
HTML_FILE="${1:-output/index.html}"
|
||||
HTML_FILE="${1:?使い方: deploy-diagram.sh <HTMLファイル> [スラッグ]}"
|
||||
SLUG="${2:-}"
|
||||
|
||||
GREEN='\033[0;32m'
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,6 +1,2 @@
|
||||
output/*.html
|
||||
!output/index.html
|
||||
!output/git.html
|
||||
!output/llm.html
|
||||
!output/cursor.html
|
||||
deploy-history.log
|
||||
|
||||
21
README.md
21
README.md
@ -12,9 +12,9 @@
|
||||
|
||||
## まず見てみる
|
||||
|
||||
`output/index.html` が図解ライブラリ（一覧ページ）です。
|
||||
ブラウザ（Chrome、Safari など）にドラッグ＆ドロップして開いてみてください。
|
||||
サンプルの図解が 3 つ入っているので、完成品のイメージがわかります。
|
||||
`output/sample/` フォルダにお手本の図解が 3 つ入っています。
|
||||
どれかひとつをブラウザ（Chrome、Safari など）にドラッグ＆ドロップして開いてみてください。
|
||||
完成品のイメージがわかります。
|
||||
|
||||
- **Gitの仕組み** — 開発の土台になるバージョン管理ツール
|
||||
- **LLM（大規模言語モデル）の仕組み** — AI 時代の中核技術
|
||||
@ -56,8 +56,7 @@ APIについて図解して
|
||||
AI が図解を作り、`output/` フォルダに保存します。
|
||||
完成すると自動でブラウザが開きます。
|
||||
|
||||
作った図解は上書きされず、どんどん溜まっていきます。
|
||||
`output/index.html`（図解ライブラリ）を開けば、過去の図解を一覧で確認できます。
|
||||
作った図解は上書きされず、`output/` フォルダにどんどん溜まっていきます。
|
||||
|
||||
## 使い方の例
|
||||
|
||||
@ -99,7 +98,7 @@ URL を発行して他の人にも共有したい場合は、以下の 2 つが
|
||||
|
||||
```
|
||||
手元で見るだけ → 準備不要
|
||||
output/index.html をブラウザで開くだけ
|
||||
output/ 内の HTML をブラウザで開くだけ
|
||||
|
||||
URL で共有する → Node.js + Surge が必要
|
||||
初回だけセットアップが必要（AI が案内します）
|
||||
@ -152,8 +151,11 @@ AI-Driven School 運営が動作確認済みですので、安心してくださ
|
||||
├── .claude/skills/creating-visual-explainers/ ← AI への指示書（通常は非表示）
|
||||
├── README.md ← この説明書
|
||||
└── output/ ← 図解の保存先
|
||||
├── index.html ← 一覧ページ（自動生成）
|
||||
└── ○○.html ← 個別の図解（どんどん増える）
|
||||
├── sample/ ← お手本の図解（3つ）
|
||||
│ ├── cursor.html
|
||||
│ ├── git.html
|
||||
│ └── llm.html
|
||||
└── ○○.html ← 自分で作った図解（どんどん増える）
|
||||
```
|
||||
|
||||
「.claude」で始まるフォルダは通常は非表示です。表示されなくても問題ありません。
|
||||
@ -162,7 +164,8 @@ AI がすべて自動で処理します。
|
||||
|
||||
| ファイル / フォルダ | 説明 | 触る必要 |
|
||||
|---|---|---|
|
||||
| `output/` | 図解ライブラリ。`index.html` で一覧、各図解は個別ファイル | 見るだけ |
|
||||
| `output/` | 図解の保存先。`sample/` にお手本、自分で作った図解は直下に保存される | 見るだけ |
|
||||
| `output/sample/` | お手本の図解3つ（Git・LLM・Cursor） | 見るだけ |
|
||||
| `README.md` | この説明書 | 読むだけ |
|
||||
| `.claude/skills/` | AI への指示書とテンプレート。AI が自動で読み込みます（通常は非表示） | なし |
|
||||
|
||||
|
||||
@ -1,77 +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">
|
||||
<a href="git.html" 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">Gitの仕組み</h2>
|
||||
<p class="text-sm text-ads-muted">Gitの仕組みを、身近なたとえとビジュアルでわかりやすく図解します。</p>
|
||||
</a>
|
||||
<a href="llm.html" 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">LLM（大規模言語モデル）の仕組み</h2>
|
||||
<p class="text-sm text-ads-muted">LLMの仕組みを、身近な例とビジュアルでわかりやすく図解します。</p>
|
||||
</a>
|
||||
<a href="cursor.html" 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">Cursorの仕組み</h2>
|
||||
<p class="text-sm text-ads-muted">AIが組み込まれたコードエディタ「Cursor」の仕組みを、身近な例とビジュアルでわかりやすく図解します。</p>
|
||||
</a>
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user