僕のサイト [saki♮ Lab](https://my-emdash-site.tokumeisaki.workers.dev/) がどういう構成で動いているか、自分用にまとめておく。Claude Codeと一緒に作った記録でもある。
全体構成
Astro（フロントエンド）
+ emdash CMS（記事管理）
+ Cloudflare Workers（ホスティング・実行環境）
+ Cloudflare D1（データベース）
+ PWA（スマホアプリとして使える）サーバーを自分で持たず、Cloudflareのエッジ上で全部動く構成。月額固定費ほぼゼロ（Cloudflare Freeプラン）。
各コンポーネントの役割
Astro
フロントエンドのフレームワーク。記事ページ・トップページ・お問い合わせフォームなどを生成する。テンプレートが書きやすく、静的ページとサーバーサイドの処理を混在させられる。
emdash CMS
記事を管理するCMS。管理画面から記事を書いて、下書き・公開・スケジュール投稿ができる。Cloudflare D1（SQLiteベース）に記事データを保存。自分のWorker上で動くのでサードパーティのCMSサービスを使わなくていい。
Cloudflare Workers
実行環境。リクエストのたびにエッジサーバーで処理が走る。無料枠でかなりの量をさばける。
Cloudflare D1
Cloudflare上のSQLiteデータベース。記事・メディア・設定などを保管。emdashが内部で使う。
PWA（Progressive Web App）
Webサイトをスマホのホーム画面にインストールできるようにする仕組み。以下の3点セットで成立する。
- manifest.webmanifest — アプリ名・アイコン・テーマカラーの定義
- sw.js（Service Worker） — オフラインキャッシュ・バックグラウンド処理
- HTTPSホスティング — Cloudflareがそのまま対応
Claude Code との連携パイプライン
Claude Codeで作業しながら、そのまま記事を書いて投稿できるようにした。
Claude Codeで作業・記事執筆
↓
articles/YYYY-MM-DD_タイトル.md に保存
↓
python publish.py articles/xxxx.md
↓
機密情報チェック（APIキー・個人情報をスキャン）
↓
下書きとして自動投稿
↓
管理画面で画像設定 → 公開PythonスクリプトがmarkdownをemdashのPortableText形式に変換して、APIトークンで認証してPOSTする仕組み。
アイコン・画像
PWAのアイコンはLeonardo.ai（GPT Image 1.5）で生成したキャラ素材をベースに作った。猫耳パーカーでAIキューブを抱えて眠ってる子。
Pythonの Pillow でサイズ調整・背景処理をしてアイコンセットを生成した。
| ファイル | サイズ | 用途 |
|---------|-------|------|
| icon-192.png | 192×192 | PWAアイコン |
| icon-512.png | 512×512 | PWAアイコン（高解像度） |
| icon-512-maskable.png | 512×512 | OS丸アイコン対応 |
| apple-touch-icon.png | 180×180 | iOS向け |
| favicon-32.png | 32×32 | ブラウザタブ |
コスト感
| サービス | プラン | 月額 |
|---------|--------|------|
| Cloudflare Workers | Free | ¥0 |
| Cloudflare D1 | Free | ¥0 |
| Leonardo.ai | PAYG | 使った分だけ（$0.02〜/枚） |
| ドメイン | — | workers.devサブドメインなので¥0 |
サーバー代ゼロで動いている。ただしCloudflareの無料枠（1日10万リクエストなど）を超えると課金が発生するので、アクセス増えたら見直す。
今後やりたいこと
- ヘッダー画像の自動アップロード（現状は管理画面で手動）
- X（Twitter）への要約自動投稿
- YouTube × Suno AI 音楽動画のパイプライン
*使用技術: Astro / Cloudflare Workers / D1 / emdash CMS / PWA / Leonardo.ai / Python（Pillow・Requests）/ Claude Code*
