Update app.py

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.github/workflows/sync_to_hf.yml

@@ -1,23 +0,0 @@
-name: Sync to Hugging Face Space
-
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-jobs:
-  sync-to-hub:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          persist-credentials: false
-
-      - name: Push to Hugging Face Space
-        env:
-          HF_TOKEN: ${{ secrets.HF_TOKEN }}
-        run: |
-          git config user.email "action@github.com"
-          git config user.name "GitHub Action"
-          git push --force https://Nagomi-SugarHeart:$HF_TOKEN@huggingface.co/spaces/Wasemas/9thblogs main

.gitignore

@@ -1,9 +0,0 @@
-__pycache__/
-*.py[cod]
-*.pyc
-.env
-.env.*
-*.egg-info/
-dist/
-build/
-.DS_Store

CLAUDE.md

@@ -1,224 +0,0 @@
-# ブログシステム 機能仕様書
-
-## 1. システム概要
-**FastAPI + Jinja2** で構築された、ブログ記事の公開および管理システムです。バックエンドのデータストアとして「microCMS」を採用し、記事データや画像の管理を行っています。AI（Gemini API）を利用した記事装飾のアシスト機能、バックアップ・バージョン管理機能、ブロック型エディタを備えています。Hugging Face Docker Space（無料）でホスティングしています。
-
-### 技術スタック
-| 項目 | 内容 |
-| :--- | :--- |
-| バックエンド | FastAPI + Uvicorn |
-| テンプレート | Jinja2 |
-| フロントエンド | Tailwind CSS CDN・Font Awesome 6・Quill 1.3.6 |
-| ホスティング | Hugging Face Docker Space（port 7860） |
-| データストア | microCMS |
-| 画像処理 | Pillow（EXIF自動回転・リサイズ） |
-| AI | Google Gemini API |
-
-### ファイル構成
-```
-/
-├── main.py                  # FastAPI アプリ本体
-├── requirements.txt
-├── Dockerfile               # HF Docker Space 用
-└── templates/
-    ├── base.html            # 共通レイアウト（Tailwind・Font Awesome CDN）
-    ├── blog_list.html       # ブログ一覧（公開）
-    ├── blog_detail.html     # 記事詳細・コメント・シェア（公開）
-    ├── admin_login.html     # 管理者ログイン
-    ├── admin_list.html      # 記事管理一覧（管理者）
-    └── admin_editor.html    # ブロックエディタ（管理者・Tailwind/Quill/Font Awesome CDN）
-```
-
----
-
-## 2. ユーザーロール（権限）
-| ロール | 対象者 | 利用可能な機能 |
-| :--- | :--- | :--- |
-| **一般ユーザー** | ブログの読者 | 記事の閲覧、検索、コメントの投稿、シェア |
-| **管理者・投稿者** | ブログの運営メンバー | 「合言葉」によるログイン、記事の作成・編集・削除、画像の管理 |
-
-### 認証方式
-- `ADMIN_PASSWORD` 環境変数と `SECRET_KEY` を SHA-256 で署名した Cookie（有効期限30日）
-- 管理者ルートは FastAPI の `Depends` で認証チェック
-
----
-
-## 3. 非機能要件
-* ランニングに費用を一切発生させない（HF Docker Space 無料枠）。
-* 投稿者はプログラム言語に明るくないユーザーを含め4人以上。著者リスト: `["にき", "かん", "なごみ", "蜜柑餅"]`
-* スマートフォン・PCの両方で簡単に操作できること（モバイルファースト）。
-* HTMLに不慣れなユーザーにはリッチテキスト編集、HTML編集もしたいユーザーにはHTMLモードを提供。
-* APIキーや環境のリンクなどは環境変数としてコード外に記載。
-
----
-
-## 4. 機能要件
-
-### 4.1 閲覧側（フロントエンド）機能
-
-* **記事一覧・検索機能**
-  * 記事をカード形式（アイキャッチ画像・タイトル・著者・投稿日・タグ・本文の要約）で表示。
-  * ページネーション: 1ページあたり10件、前後ページへ遷移可能。
-  * 検索・絞り込み: テキスト検索（タイトル・本文）、著者、タグ（複数選択可）。
-  * 「公開」ステータスの記事のみ表示（下書きは非表示）。
-  * タグは `#タグ名` 形式で表示。
-
-* **記事詳細表示**
-  * HTML で作成された記事本文・タグ・アイキャッチ画像をレンダリング。
-  * `.blog-content` スタイルにてライトモード・ダークモード両対応。
-  * YouTube（レスポンシブ iframe）・X(Twitter)（`blockquote.twitter-tweet` + widget.js）埋め込みに対応。
-  * 画像にキャプション（`<p>` タグ、中央寄せ小文字）が付く場合は画像下に表示。
-
-* **シェア機能**
-  * OGP メタタグ（`og:title`・`og:image`・`og:url`）と Twitter Card（`summary_large_image`）でキャッチ画像をサムネイルとして表示。
-  * 「Xで共有」ボタン: `twitter.com/intent/tweet` で X アプリへ遷移。
-  * 「テキストをコピー」ボタン: `{title} | わせます9期ブログ\n{link}` をクリップボードにコピー。
-  * `SPACE_URL` 環境変数未設定時は `request.base_url` をフォールバックとして使用し、常にシェアボタンを表示。
-
-* **コメント機能**
-  * 記事ごとのコメント一覧表示。
-  * 任意の名前と本文による新規コメント投稿（fetch POST → `/api/comment`）、投稿後即時リロード。
-
-### 4.2 管理側（バックエンド）機能
-
-* **記事管理一覧**（`/admin/articles`）
-  * 全記事（下書き含む）のリスト表示。公開/下書バッジ（同サイズ・折り返し禁止）。
-  * タグは `#タグ名` 形式で表示。
-  * 「編集」ボタン → `/admin/edit/{id}` へ遷移。
-  * 「削除」ボタン → 確認ポップアップ付き（`data-id`・`data-title` 属性方式）。
-
-* **ブロックエディタ**（`/admin/edit/{id}` / `/admin/new`）
-
-  **基本情報入力**
-  * タイトル: `<textarea>` 自動高さ調整（折り返し・縦拡張可、iOS 自動ズーム防止）。
-  * 著者: `<select>`（font-size 16px で iOS 自動ズーム防止）。
-  * タグ: `<textarea>` 自動高さ調整・Enter 無効（カンマ区切り）。スマホでは縦1列レイアウト。
-  * アイキャッチ画像: アップロード→microCMS media API、EXIF自動回転・1200px リサイズ。
-
-  **ブロック本体**
-  * **テキストブロック**と**画像ブロック**の配列として本文を管理。
-  * ブロック間・先頭・末尾に常に「＋ テキスト / ＋ 画像」ボタンを表示。
-  * ↑↓ ボタンでブロック順序を変更。🗑 ボタンで削除。
-  * **画像ブロック**: アップロード→microCMS media API・最大幅指定・キャプション（画像下に小文字で表示）。
-
-  **テキストブロック編集モーダル**
-  * スマホ: フルスクリーン、PC: センターモーダル（最大幅 2xl）。
-  * iOS キーボード対応: `visualViewport` API でキーボード開閉時にモーダルの top/height をリアルタイム追従。
-  * **リッチテキストモード（Quill 1.3.6 Snow）**
-    * ツールバー: H1/H2/H3、文字サイズ（small/normal/large/huge）、太字・斜体・下線・打消し線、文字色、箇条書き・番号付きリスト、引用、リンク、YouTube動画埋め込み、Xボタン、クリア。
-    * ツールバー: `position: sticky; top: 0` で入力中も上部に固定。
-    * iOS ツールバータップ時: `mousedown` で blur 抑制 + `touchstart`/`touchend` でカーソル位置を保存・復元（キーボードを閉じずに装飾可能）。
-    * `scrollingContainer: '#quill-container'` 指定で改行時にカーソルが自動追従。
-  * **HTML 直接編集モード**: `<textarea>`（font-size 16px）＋ HTML ツールバー（太字/H2/H3/リスト/段落/リンク/YouTube/X埋め込み/AI装飾）。
-  * **埋め込み機能**: URL 入力ダイアログ → YouTube は `<div class="embed-yt"><iframe ...></iframe></div>`（16:9 レスポンシブ）、X は `<blockquote class="twitter-tweet"><a href="..."></a></blockquote>` で挿入。
-  * **AI 装飾（Gemini 連携）**: HTML モードのみ。指示テキスト入力 → `/api/ai-decorate` → HTML を自動修正。
-  * モーダル内プレビュー: トグルボタンで表示/非表示。
-
-  **バックアップ・バージョン管理**
-  * 保存時に `blog-backup` へ自動バックアップ（バージョン番号はインクリメント）。
-  * 選択リスト形式（`v{version} - {YYYY-MM-DD HH:MM}` JST 表示）でバックアップを選択。
-  * 「復元」ボタン押下 → 確認ポップアップ → 現在の編集内容をバックアップで上書き。
-  * `contentBlocks`（JSON）・`title`・`author`・`tags` を復元。
-
-  **保存**
-  * 「下書き保存」: `/api/save` POST → 成功後ページリロード（バックアップ一覧を更新）、上部に薄緑バナーで「✅ 下書き保存しました」を表示（sessionStorage 経由）。
-  * 「公開する」: `/api/save` POST → 下書きからの公開時は新 ID で再作成し、コメント・バックアップの `originalId` を一括書き換え（マイグレーション）。
-
-  **全体プレビュー**
-  * 右下フローティングボタン「👁 プレビュー」→ フルスクリーンモーダルで全ブロックを結合表示。
-  * タイトル・著者・タグ・本文を `.blog-preview` スタイルでレンダリング（ダークモード対応）。
-
----
-
-## 5. 外部API・連携サービス
-| サービス名 | 用途 |
-| :--- | :--- |
-| **microCMS** | ブログ記事データ・コメント・バックアップの保存、アップロード画像のホスティング |
-| **Google Gemini API** | HTML モードでの記事本文自動装飾（モデル: `gemini-2.5-flash`） |
-| **Twitter widget.js** | 閲覧ページで `twitter-tweet` クラスを検出した場合のみ読み込み |
-
----
-
-## 6. 環境変数
-| 変数名 | 用途 | デフォルト |
-| :--- | :--- | :--- |
-| `MICROCMS_SERVICE_ID` | microCMS サービス ID | （必須） |
-| `MICROCMS_API_KEY` | microCMS API キー | （必須） |
-| `ADMIN_PASSWORD` | 管理者ログイン用合言葉 | `1234` |
-| `SECRET_KEY` | Cookie 署名キー | `wasemas-secret-key` |
-| `GEMINI_API_KEY` | Gemini API キー | （任意） |
-| `SPACE_URL` | シェア用ベース URL | `request.base_url` でフォールバック |
-
----
-
-## 7. microCMS API 情報
-
-### 7.1 blog（リスト型・ブログコンテンツ）
-| フィールドID | 表示名 | データ型 | 用途 |
-| :--- | :--- | :--- | :--- |
-| **title** | タイトル | テキストフィールド | ブログタイトル |
-| **author** | 著者 | テキストフィールド | 著者名 |
-| **eyecatch** | キャッチ画像 | 画像 | サムネイル画像 |
-| **tags** | タグ | テキストフィールド | カンマ区切りタグ |
-| **content** | 本文 | テキストエリア | HTML タグ付き本文（表示・保存用） |
-| **contentRich** | 本文(リッチ) | リッチテキストエリア | microCMS 管理画面直接編集用 |
-| **contentBlocks** | ブロックデータ | テキストエリア | ブロック配列 JSON（編集用） |
-
-### 7.2 comments（リスト型・コメント）
-| フィールドID | 表示名 | データ型 | 用途 |
-| :--- | :--- | :--- | :--- |
-| **articleId** | 記事ID | テキストフィールド | 対象記事の ID |
-| **name** | 名前 | テキストフィールド | 投稿者名 |
-| **body** | コメント本文 | テキストエリア | コメント内容 |
-
-### 7.3 blog-backup（リスト型・バックアップ）
-| フィールドID | 表示名 | データ型 | 用途 |
-| :--- | :--- | :--- | :--- |
-| **originalId** | 記事ID | テキストフィールド | 元記事の ID |
-| **version** | バージョン | 数値 | バックアップバージョン（originalId + version でユニーク） |
-| **title** | タイトル | テキストフィールド | タイトル |
-| **author** | 著者 | テキストフィールド | 著者名 |
-| **tags** | タグ | テキストフィールド | カンマ区切りタグ |
-| **content** | 本文 | テキストエリア | HTML タグ付き本文 |
-| **contentBlocks** | ブロックデータ | テキストエリア | ブロック配列 JSON |
-
-### ブロックデータ構造（contentBlocks の JSON）
-```json
-[
-  { "type": "text", "id": "block-abc", "html": "<h2>見出し</h2><p>本文</p>" },
-  { "type": "image", "id": "block-def", "url": "https://...", "alt": "キャプション", "maxWidth": 900 }
-]
-```
-保存時は `contentBlocks`（JSON 文字列）・`content`（結合 HTML）・`contentRich`（同上）の3フィールドを同時更新。旧記事（`contentBlocks` なし）は単一テキストブロックとして後方互換ロード。
-
----
-
-## 8. APIルート一覧
-
-### ページルート（HTML 返却）
-| メソッド | パス | 役割 |
-| :--- | :--- | :--- |
-| GET | `/` | ブログ一覧（`?id=xxx` で記事詳細） |
-| GET | `/admin` | 管理者ログイン画面（認証済みなら `/admin/articles` へリダイレクト） |
-| POST | `/admin/login` | パスワード検証 → Cookie セット |
-| POST | `/admin/logout` | Cookie 削除 |
-| GET | `/admin/articles` | 記事管理一覧（要認証） |
-| GET | `/admin/new` | 新規記事エディタ（要認証） |
-| GET | `/admin/edit/{id}` | 既存記事エディタ（要認証） |
-
-### API ルート（JSON 返却）
-| メソッド | パス | 役割 |
-| :--- | :--- | :--- |
-| POST | `/api/save` | 記事保存（microCMS PATCH/POST）・バックアップ自動作成 |
-| DELETE | `/api/article/{id}` | 記事削除 |
-| POST | `/api/upload-image` | 画像アップロード → microCMS media API |
-| GET | `/api/backups/{article_id}` | バックアップ一覧取得 |
-| POST | `/api/ai-decorate` | Gemini で HTML 装飾 |
-| POST | `/api/comment` | コメント投稿 |
-
----
-
-## 9. 今後実装したい内容
-* **記事削除後もバックアップを保持**: 削除しても `blog-backup` は残し、後から復活できるようにする。
-* **microCMS リッチテキストエディタとの双方向同期**: `contentRich` のみ持つ旧記事をブロックエディタで編集可能にし、保存時に `contentRich` にも書き戻す。
-* **タグのオートコンプリート**: 既存タグを候補として表示し、入力を補助する。

Dockerfile

@@ -1,10 +1,20 @@
-FROM python:3.11-slim
+FROM python:3.13.5-slim
+
 WORKDIR /app
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    libssl-dev libffi-dev build-essential && \
-    rm -rf /var/lib/apt/lists/*
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-COPY . .
-EXPOSE 7860
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
+
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt ./
+COPY src/ ./src/
+
+RUN pip3 install -r requirements.txt
+
+EXPOSE 8501
+
+HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
+
+ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]

README.md

@@ -3,7 +3,9 @@ title: Wasemas9thblogs
 emoji: 🚀
 colorFrom: red
 colorTo: red
-sdk: docker
+sdk: streamlit
+app_file: app.py
 pinned: false
-short_description: わせます9期ブログ
----
+short_description: Streamlit blog space
+sdk_version: 1.57.0
+---

app.py

@@ -0,0 +1,729 @@
+import streamlit as st
+import google.generativeai as genai
+import requests
+import os
+import re
+import io
+import time
+from PIL import Image
+
+GEMINI_KEY = os.environ.get("GEMINI_API_KEY")
+CMS_SERVICE_ID = os.environ.get("MICROCMS_SERVICE_ID")
+CMS_API_KEY = os.environ.get("MICROCMS_API_KEY")
+ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "1234")
+AUTHOR_LIST = ["にき", "かん", "なごみ", "蜜柑餅"]
+SPACE_URL = "https://nagomi-sugarheart-wasemas9thblogs.hf.space"
+ARTICLES_PER_PAGE = 10
+
+TEMPLATES = {
+    "テンプレートなし": "",
+    "📅 イベントレポート": "<h2>イベント概要</h2><p>イベント名：<br>日時：<br>場所：</p><h2>内容</h2><p>ここに内容を書いてください。</p><h2>感想</h2><p>ここに感想を書いてください。</p>",
+    "📝 日常記事": "<h2>はじめに</h2><p>ここに導入を書いてください。</p><h2>本文</h2><p>ここに本文を書いてください。</p><h2>おわりに</h2><p>ここにまとめを書いてください。</p>",
+    "🎵 ライブ・コンサートレポート": "<h2>公演情報</h2><p>公演名：<br>日時：<br>会場：<br>出演：</p><h2>セットリスト</h2><p>1. <br>2. <br>3. </p><h2>見どころ・感想</h2><p>ここに感想を書いてください。</p>",
+    "📣 お知らせ": "<h2>お知らせ</h2><p>ここにお知らせ内容を書いてください。</p><h2>詳細</h2><p>日時：<br>場所：<br>参加方法：</p>",
+}
+
+if GEMINI_KEY:
+    genai.configure(api_key=GEMINI_KEY)
+
+st.markdown("""
+<style>
+.ql-toolbar {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 999 !important;
+    background: white !important;
+}
+input, textarea, select {
+    font-size: 16px !important;
+}
+/* 戻るボタンや続きを読むのリンク装飾 */
+.nav-link {
+    display: inline-block;
+    padding: 8px 16px;
+    background-color: #f0f2f6;
+    color: #31333F;
+    text-decoration: none;
+    border-radius: 8px;
+    font-size: 14px;
+    margin-bottom: 16px;
+    border: 1px solid #e0e0e0;
+}
+.nav-link:hover {
+    background-color: #e0e4eb;
+    color: #31333F;
+}
+.read-more {
+    display: inline-block;
+    margin-top: 8px;
+    font-size: 14px;
+    color: #0068c9;
+    text-decoration: none;
+    font-weight: bold;
+}
+.read-more:hover {
+    text-decoration: underline;
+}
+</style>
+""", unsafe_allow_html=True)
+
+
+def clean_ai_html(text):
+    text = re.sub(r'```html?', '', text, flags=re.IGNORECASE)
+    text = text.replace("```", "")
+    return text.strip()
+
+
+def clean_quill_html(html):
+    html = re.sub(r'<figure>', '<div style="margin:8px 0;">', html)
+    html = re.sub(r'</figure>', '</div>', html)
+    html = re.sub(r'(<p>\s*<br\s*/?>\s*</p>)(\s*<p>\s*<img)', r'\2', html)
+    html = re.sub(r'(<p>\s*<img[^>]*/?>\s*</p>)(\s*<p>\s*<br\s*/?>\s*</p>)', r'\1', html)
+    html = re.sub(r'(<p>\s*<br\s*/?>\s*</p>)(\s*<img)', r'\2', html)
+    html = re.sub(r'(<img[^>]*/?>)(\s*<p>\s*<br\s*/?>\s*</p>)', r'\1', html)
+    html = re.sub(r'(<p>\s*<br\s*/?>\s*</p>)(\s*<div)', r'\2', html)
+    html = re.sub(r'(</div>)(\s*<p>\s*<br\s*/?>\s*</p>)', r'\1', html)
+    return html.strip()
+
+
+def strip_html(html):
+    return re.sub(r'<[^>]*?>', '', html)
+
+
+def make_snippet(content_html):
+    paragraphs = re.split(r'</p>|</h[1-6]>|<br\s*/?>', content_html)
+    for p in paragraphs:
+        text = strip_html(p).strip()
+        if text:
+            return text[:60] + "..." if len(text) > 60 else text
+    return ""
+
+
+# スクロールバーのネストを解消し、自然なページ拡張を行うHTMLレンダリング関数
+def render_html_native(html):
+    wrapped = f"""
+    <div class="blog-content">
+        <style>
+            .blog-content {{ font-family: sans-serif; font-size: 16px; color: #111; word-break: break-word; line-height: 1.6; }}
+            .blog-content img {{ max-width: 100%; height: auto; display: block; border-radius: 8px; margin: 16px 0; }}
+            .blog-content p {{ margin: 0.8em 0; }}
+            .blog-content h1, .blog-content h2, .blog-content h3 {{ margin: 1.2em 0 0.6em; border-bottom: 1px solid #eee; padding-bottom: 4px; }}
+            .blog-content a {{ color: #0068c9; text-decoration: none; }}
+            .blog-content a:hover {{ text-decoration: underline; }}
+            .blog-content blockquote {{ border-left: 4px solid #ddd; margin: 0; padding-left: 16px; color: #555; }}
+        </style>
+        {html}
+    </div>
+    """
+    st.markdown(wrapped, unsafe_allow_html=True)
+
+
+def get_tags(article):
+    tags_str = article.get("tags", "")
+    return [t.strip() for t in tags_str.split(',') if t.strip()] if tags_str else []
+
+
+def render_tag_badges(tags):
+    if not tags:
+        return
+    badges = ' '.join([
+        f'<span style="background:#e8f4f8;border-radius:12px;padding:2px 10px;'
+        f'font-size:12px;margin:2px;display:inline-block;color:#2c7bb6;">#{t}</span>'
+        for t in tags
+    ])
+    st.markdown(badges, unsafe_allow_html=True)
+
+
+def upload_image_to_microcms(image_file, max_width=1200):
+    try:
+        img = Image.open(image_file)
+        try:
+            import PIL.ExifTags
+            exif = img._getexif()
+            if exif:
+                for tag, val in exif.items():
+                    if PIL.ExifTags.TAGS.get(tag) == 'Orientation':
+                        if val == 3: img = img.rotate(180, expand=True)
+                        elif val == 6: img = img.rotate(270, expand=True)
+                        elif val == 8: img = img.rotate(90, expand=True)
+        except:
+            pass
+
+        if img.width > max_width:
+            ratio = max_width / img.width
+            img = img.resize((max_width, int(img.height * ratio)), Image.LANCZOS)
+
+        buf = io.BytesIO()
+        if img.mode in ("RGBA", "P"):
+            img = img.convert("RGB")
+        img.save(buf, format="JPEG", quality=85)
+        buf.seek(0)
+
+        url = f"https://{CMS_SERVICE_ID}.microcms-management.io/api/v1/media"
+        headers = {"X-MICROCMS-API-KEY": CMS_API_KEY}
+        files = {"file": ("upload.jpg", buf, "image/jpeg")}
+        res = requests.post(url, headers=headers, files=files)
+
+        if res.status_code not in [200, 201]:
+            st.error(f"アップロードエラー詳細: {res.status_code} / {res.text}")
+            return None
+        return res.json().get("url")
+    except Exception as e:
+        st.error(f"画像アップロードエラー: {e}")
+        return None
+
+
+@st.cache_data(ttl=60)
+def get_articles(limit=ARTICLES_PER_PAGE, offset=0):
+    if not CMS_SERVICE_ID or not CMS_API_KEY:
+        return [], 0
+    url = f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/blog"
+    headers = {"X-MICROCMS-API-KEY": CMS_API_KEY}
+    try:
+        response = requests.get(url, headers=headers, params={"limit": limit, "offset": offset})
+        response.raise_for_status()
+        data = response.json()
+        return data.get("contents", []), data.get("totalCount", 0)
+    except:
+        return [], 0
+
+
+@st.cache_data(ttl=60)
+def get_all_articles():
+    if not CMS_SERVICE_ID or not CMS_API_KEY:
+        return []
+    url = f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/blog"
+    headers = {"X-MICROCMS-API-KEY": CMS_API_KEY}
+    try:
+        response = requests.get(url, headers=headers, params={"limit": 100})
+        response.raise_for_status()
+        return response.json().get("contents", [])
+    except:
+        return []
+
+
+def get_comments(article_id):
+    if not CMS_SERVICE_ID or not CMS_API_KEY:
+        return []
+    url = f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/comments"
+    headers = {"X-MICROCMS-API-KEY": CMS_API_KEY}
+    try:
+        response = requests.get(url, headers=headers, params={
+            "filters": f"articleId[equals]{article_id}",
+            "limit": 100,
+            "orders": "createdAt",
+        })
+        response.raise_for_status()
+        return response.json().get("contents", [])
+    except:
+        return []
+
+
+def post_comment(article_id, name, body):
+    if not CMS_SERVICE_ID or not CMS_API_KEY:
+        return False
+    url = f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/comments"
+    headers = {"X-MICROCMS-API-KEY": CMS_API_KEY, "Content-Type": "application/json"}
+    try:
+        res = requests.post(url, headers=headers, json={"articleId": article_id, "name": name, "body": body})
+        return res.status_code in [200, 201]
+    except:
+        return False
+
+
+params = st.query_params
+
+if "id" in params:
+    article_id = params["id"]
+    all_articles = get_all_articles()
+    article = next((a for a in all_articles if a["id"] == article_id), None)
+
+    if article:
+        # ブラウザの「戻る」が機能するリンク式の戻るボタン
+        st.markdown('<a href="?" target="_self" class="nav-link">← 一覧に戻る</a>', unsafe_allow_html=True)
+
+        eyecatch = article.get("eyecatch")
+        if eyecatch and isinstance(eyecatch, dict):
+            st.image(eyecatch.get("url", ""), use_container_width=True)
+
+        title_text = article.get("title", "無題")
+        st.title(title_text)
+        st.caption(f"👤 {article.get('author')} | 📅 {article.get('publishedAt')[:10]}")
+
+        article_tags = get_tags(article)
+        render_tag_badges(article_tags)
+
+        st.divider()
+        content = clean_quill_html(article.get("content", ""))
+        # スクロールバーなしでネイティブ描画
+        render_html_native(content)
+        st.divider()
+
+        # 共有リンクの改善 (コピーしやすい形式へ)
+        share_url = f"{SPACE_URL}?id={article_id}"
+        share_text = f"【記事】{title_text}\n{share_url}"
+        st.write("🔗 **この記事をシェアする** (右上のコピーボタンを押してください)")
+        st.code(share_text, language="")
+
+        st.divider()
+        st.subheader("💬 コメント")
+        comments = get_comments(article_id)
+        if comments:
+            for c in comments:
+                c_name = c.get("name", "名無し")
+                c_body = c.get("body", "")
+                c_date = c.get("createdAt", "")[:10]
+                st.markdown(f"**{c_name}** · {c_date}")
+                st.write(c_body)
+                st.divider()
+        else:
+            st.caption("まだコメントはありません。")
+
+        st.subheader("コメントを投稿")
+        with st.form("comment_form", clear_on_submit=True):
+            comment_name = st.text_input("お名前", max_chars=50)
+            comment_body = st.text_area("コメント", max_chars=500, height=120)
+            submitted = st.form_submit_button("投稿する", use_container_width=True)
+            if submitted:
+                if not comment_name.strip():
+                    st.error("お名前を入力してください")
+                elif not comment_body.strip():
+                    st.error("コメントを入力してください")
+                else:
+                    if post_comment(article_id, comment_name.strip(), comment_body.strip()):
+                        st.success("投稿しました！")
+                        st.rerun()
+                    else:
+                        st.error("投稿に失敗しました。時間をおいて再試行してください。")
+    else:
+        st.error("記事が見つかりませんでした。")
+        st.markdown('<a href="?" target="_self" class="nav-link">← 一覧に戻る</a>', unsafe_allow_html=True)
+
+else:
+    with st.sidebar:
+        st.title("⚙️ 設定")
+        model_choice = st.selectbox("使用するAIモデル", ["gemini-2.5-flash", "gemini-2.5-pro"], index=0)
+        show_drafts_in_view = st.checkbox("閲覧画面で下書きも表示する", value=False)
+
+    tab_view, tab_manage = st.tabs(["📖 ブログを読む", "🛠️ 記事の管理・投稿"])
+
+    with tab_view:
+        st.title("サークル活動ブログ")
+
+        all_articles = get_all_articles()
+        all_tags = sorted(set(tag for a in all_articles for tag in get_tags(a)))
+
+        search_col1, search_col2, search_col3 = st.columns(3)
+        with search_col1:
+            search_query = st.text_input("🔍 本文・タイトル検索", "", key="search_text")
+        with search_col2:
+            author_filter = st.selectbox("👤 著者で絞り込み", ["全員"] + AUTHOR_LIST, key="search_author")
+        with search_col3:
+            tag_filter = st.selectbox("🏷️ タグで絞り込み", ["全タグ"] + all_tags, key="tag_filter")
+
+        if "view_page" not in st.session_state: st.session_state.view_page = 0
+        if "last_search" not in st.session_state: st.session_state.last_search = ""
+        if search_query != st.session_state.last_search:
+            st.session_state.view_page = 0
+            st.session_state.last_search = search_query
+
+        filtered_articles = []
+        for a in all_articles:
+            title = a.get("title", "無題")
+            content_html = a.get("content", "")
+            author = a.get("author", "不明")
+
+            if title.startswith("【下書き】") and not show_drafts_in_view:
+                continue
+
+            article_tags = get_tags(a)
+            clean_text = strip_html(content_html)
+
+            author_match = (author_filter == "全員") or (author_filter == author)
+            text_match = (not search_query) or (
+                search_query.lower() in title.lower() or search_query.lower() in clean_text.lower()
+            )
+            tag_match = (tag_filter == "全タグ") or (tag_filter in article_tags)
+
+            if author_match and text_match and tag_match:
+                filtered_articles.append(a)
+
+        total_count = len(filtered_articles)
+        total_pages = max(1, -(-total_count // ARTICLES_PER_PAGE))
+        if st.session_state.view_page >= total_pages:
+            st.session_state.view_page = 0
+
+        offset = st.session_state.view_page * ARTICLES_PER_PAGE
+        page_articles = filtered_articles[offset:offset + ARTICLES_PER_PAGE]
+
+        for a in page_articles:
+            title = a.get("title", "無題")
+            content_html = a.get("content", "")
+            author = a.get("author", "不明")
+            pub_date = a.get("publishedAt", "-----")[:10]
+            eyecatch = a.get("eyecatch")
+            snippet = make_snippet(content_html)
+            article_tags = get_tags(a)
+            article_url_params = f"?id={a['id']}"
+
+            with st.container():
+                # サムネイル画像のレイアウト（1:3の比率で小さく表示）
+                if eyecatch and isinstance(eyecatch, dict):
+                    col_img, col_txt = st.columns([1, 3])
+                    with col_img:
+                        st.image(eyecatch.get("url", ""), use_container_width=True)
+                    with col_txt:
+                        st.subheader(title)
+                        st.caption(f"👤 {author} | 📅 {pub_date}")
+                        render_tag_badges(article_tags)
+                        st.write(f"<div style='color:#555; font-size:14px; margin: 8px 0;'>{snippet}</div>", unsafe_allow_html=True)
+                        st.markdown(f'<a href="{article_url_params}" target="_self" class="read-more">続きを読む →</a>', unsafe_allow_html=True)
+                else:
+                    st.subheader(title)
+                    st.caption(f"👤 {author} | 📅 {pub_date}")
+                    render_tag_badges(article_tags)
+                    st.write(f"<div style='color:#555; font-size:14px; margin: 8px 0;'>{snippet}</div>", unsafe_allow_html=True)
+                    st.markdown(f'<a href="{article_url_params}" target="_self" class="read-more">続きを読む →</a>', unsafe_allow_html=True)
+                
+                st.divider()
+
+        if total_count > ARTICLES_PER_PAGE:
+            st.caption(f"{total_count}件中 {offset+1}〜{min(offset+ARTICLES_PER_PAGE, total_count)}件を表示")
+            col_prev, col_page, col_next = st.columns([1, 2, 1])
+            with col_prev:
+                if st.session_state.view_page > 0:
+                    if st.button("← 前へ", use_container_width=True):
+                        st.session_state.view_page -= 1
+                        st.rerun()
+            with col_page:
+                st.markdown(
+                    f"<p style='text-align:center;'>{st.session_state.view_page + 1} / {total_pages} ページ</p>",
+                    unsafe_allow_html=True
+                )
+            with col_next:
+                if st.session_state.view_page < total_pages - 1:
+                    if st.button("次へ →", use_container_width=True):
+                        st.session_state.view_page += 1
+                        st.rerun()
+
+    with tab_manage:
+        st.title("管理画面")
+        password = st.text_input("合言葉", type="password")
+
+        if password == ADMIN_PASSWORD:
+            st.success("ログイン成功！")
+
+            if "edit_id" not in st.session_state: st.session_state.edit_id = None
+            if "edit_data" not in st.session_state: st.session_state.edit_data = {"title": "", "author": AUTHOR_LIST[0], "content": ""}
+            if "edit_tags" not in st.session_state: st.session_state.edit_tags = []
+            if "editor_mode" not in st.session_state: st.session_state.editor_mode = "rich"
+            if "working_html" not in st.session_state: st.session_state.working_html = ""
+            if "eyecatch_url" not in st.session_state: st.session_state.eyecatch_url = ""
+            if "inline_image_urls" not in st.session_state: st.session_state.inline_image_urls = []
+            if "delete_confirm_id" not in st.session_state: st.session_state.delete_confirm_id = None
+            if "quill_key" not in st.session_state: st.session_state.quill_key = 0
+            
+            # タグ入力欄のステート初期化
+            if "tags_input_field" not in st.session_state: st.session_state.tags_input_field = ""
+
+            st.divider()
+            mode_label = f"📝 記事の編集 (ID: {st.session_state.edit_id})" if st.session_state.edit_id else "✍️ 新規記事の投稿"
+            st.subheader(mode_label)
+
+            col_t, col_a = st.columns([2, 1])
+            with col_t:
+                title_input = st.text_input("記事タイトル", value=st.session_state.edit_data["title"])
+            with col_a:
+                try:
+                    def_auth_idx = AUTHOR_LIST.index(st.session_state.edit_data["author"])
+                except:
+                    def_auth_idx = 0
+                author_select = st.selectbox("著者", AUTHOR_LIST, index=def_auth_idx)
+
+            tags_input = st.text_input(
+                "🏷️ タグ（カンマ区切り）",
+                placeholder="例: イベント, 日常, ライブ",
+                key="tags_input_field"
+            )
+
+            st.divider()
+            st.subheader("📋 テンプレート")
+            template_choice = st.selectbox("テンプレートを選択", list(TEMPLATES.keys()), key="template_select")
+            if st.button("✅ このテンプレートを適用"):
+                selected_html = TEMPLATES[template_choice]
+                if selected_html:
+                    st.session_state.working_html = selected_html
+                    st.session_state.quill_key += 1
+                    st.rerun()
+                else:
+                    st.warning("テンプレートなしが選択されています")
+
+            st.divider()
+            st.subheader("🖼️ キャッチ画像（サムネイル）")
+            if st.session_state.eyecatch_url:
+                st.image(st.session_state.eyecatch_url, width=300)
+                if st.button("🗑️ キャッチ画像を削除"):
+                    st.session_state.eyecatch_url = ""
+                    st.rerun()
+            else:
+                eyecatch_file = st.file_uploader("キャッチ画像をアップロード（JPG/PNG）", type=["jpg", "jpeg", "png"], key="eyecatch_uploader")
+                if eyecatch_file:
+                    col_ec1, col_ec2 = st.columns(2)
+                    with col_ec1:
+                        ec_max_w = st.number_input("最大横幅(px)", min_value=200, max_value=2000, value=1200, step=100, key="ec_maxw")
+                    with col_ec2:
+                        st.write("")
+                        if st.button("☁️ アップロード", key="ec_upload_btn"):
+                            with st.spinner("アップロード中..."):
+                                url = upload_image_to_microcms(eyecatch_file, max_width=int(ec_max_w))
+                            if url:
+                                st.session_state.eyecatch_url = url
+                                st.success("アップロード成功！")
+                                st.rerun()
+
+            st.divider()
+            st.subheader("📷 本文内差し込み画像")
+            st.caption("アップロード後、ボタンでエディタに挿入またはHTMLタグをコピーしてください")
+
+            inline_files = st.file_uploader("差し込み画像（複数選択可）", type=["jpg", "jpeg", "png"], accept_multiple_files=True, key="inline_uploader")
+
+            col_in1, col_in2 = st.columns(2)
+            with col_in1:
+                inline_max_w = st.number_input("最大横幅(px)", min_value=200, max_value=2000, value=900, step=100, key="inline_maxw")
+            with col_in2:
+                st.write("")
+                if st.button("☁️ 選択画像を一括アップロード", key="inline_upload_btn"):
+                    if inline_files:
+                        new_urls = []
+                        for f in inline_files:
+                            with st.spinner(f"{f.name} をアップロード中..."):
+                                url = upload_image_to_microcms(f, max_width=int(inline_max_w))
+                            if url:
+                                new_urls.append({"name": f.name, "url": url, "max_w": int(inline_max_w)})
+                        st.session_state.inline_image_urls.extend(new_urls)
+                        if new_urls:
+                            st.success(f"{len(new_urls)}枚アップロード完了！")
+                            st.rerun()
+                    else:
+                        st.warning("画像を選択してください")
+
+            if st.session_state.inline_image_urls:
+                st.markdown("**アップロード済み差し込み画像**")
+                for i, img_info in enumerate(st.session_state.inline_image_urls):
+                    max_w = img_info.get("max_w", 900)
+                    img_tag = f'<img src="{img_info["url"]}" alt="{img_info["name"]}" style="width:{max_w}px;max-width:100%;height:auto;display:block;" />'
+                    with st.container():
+                        col_il1, col_il2 = st.columns([1, 2])
+                        with col_il1:
+                            st.caption(img_info["name"])
+                            st.image(img_info["url"], width=100)
+                        with col_il2:
+                            st.code(img_tag, language=None)
+                            col_btn1, col_btn2 = st.columns(2)
+                            with col_btn1:
+                                if st.session_state.editor_mode == "rich":
+                                    if st.button("📌 エディタに挿入", key=f"insert_btn_{i}", use_container_width=True):
+                                        st.session_state.working_html += img_tag
+                                        st.session_state.quill_key += 1
+                                        st.rerun()
+                            with col_btn2:
+                                if st.button("🗑️ 削除", key=f"del_inline_{i}", use_container_width=True):
+                                    st.session_state.inline_image_urls.pop(i)
+                                    st.rerun()
+                    st.divider()
+
+            st.divider()
+            st.subheader("📝 本文エディタ")
+            col_mode1, col_mode2 = st.columns(2)
+            with col_mode1:
+                if st.button("🖊️ リッチテキストモード", use_container_width=True,
+                             type="primary" if st.session_state.editor_mode == "rich" else "secondary"):
+                    st.session_state.editor_mode = "rich"
+                    st.rerun()
+            with col_mode2:
+                if st.button("💻 HTMLモード", use_container_width=True,
+                             type="primary" if st.session_state.editor_mode == "html" else "secondary"):
+                    st.session_state.editor_mode = "html"
+                    st.rerun()
+
+            if st.session_state.editor_mode == "rich":
+                try:
+                    from streamlit_quill import st_quill
+                    rich_html = st_quill(
+                        value=st.session_state.working_html,
+                        html=True,
+                        toolbar=[
+                            ["bold", "italic", "underline", "strike"],
+                            [{"header": [1, 2, 3, False]}],
+                            [{"color": []}, {"background": []}],
+                            [{"list": "ordered"}, {"list": "bullet"}],
+                            ["blockquote", "code-block"],
+                            ["link"],
+                            ["clean"]
+                        ],
+                        key=f"quill_editor_{st.session_state.quill_key}"
+                    )
+                    if rich_html is not None:
+                        st.session_state.working_html = rich_html
+                except ImportError:
+                    st.error("streamlit-quill が未インストールです。")
+            else:
+                edited_html = st.text_area("HTMLコード（直接編集）", value=st.session_state.working_html, height=300, key="html_editor")
+                st.session_state.working_html = edited_html
+
+                st.markdown("---")
+                raw_content = st.text_area("✨ AI装飾用メモ", height=120, key="ai_raw")
+                if st.button("✨ AIモードで装飾"):
+                    if raw_content:
+                        try:
+                            model = genai.GenerativeModel(model_name=model_choice)
+                            prompt = f"以下の文章をブログ記事用に装飾してください。本文の内容は全く変更をしないで装飾のみに務めること。装飾はモダンでオシャレに。HTMLのみ出力すること。本文: {raw_content}"
+                            with st.spinner("AIが執筆中..."):
+                                ai_response = model.generate_content(prompt)
+                                st.session_state.working_html = clean_ai_html(ai_response.text)
+                                st.rerun()
+                        except Exception as e:
+                            st.error(f"AIエラー: {e}")
+                    else:
+                        st.warning("AI装飾用メモを入力してください")
+
+                with st.expander("🪄 AIにデザインの修正を指示する"):
+                    feedback_input = st.text_input("修正内容", key="ai_feedback")
+                    if st.button("再修正を実行"):
+                        if feedback_input and st.session_state.working_html:
+                            try:
+                                model = genai.GenerativeModel(model_name=model_choice)
+                                feedback_prompt = f"""現在のHTMLコードを、以下の指示に基づいて修正してください。
+本文の内容は絶対に変更せず、HTMLタグやスタイルのみを変更すること。
+出力は純粋なHTMLコードのみを返してください。
+【現在のHTML】{st.session_state.working_html}
+【修正指示】{feedback_input}"""
+                                with st.spinner("再修正中..."):
+                                    ai_response = model.generate_content(feedback_prompt)
+                                    st.session_state.working_html = clean_ai_html(ai_response.text)
+                                    st.rerun()
+                            except Exception as e:
+                                st.error(f"AIエラー: {e}")
+
+            if st.session_state.working_html:
+                st.divider()
+                st.subheader("👀 プレビュー")
+                render_html_native(clean_quill_html(st.session_state.working_html))
+
+            st.divider()
+            col_save1, col_save2 = st.columns(2)
+            with col_save1:
+                default_is_draft = title_input.startswith("【下書き】")
+                status_save = st.radio("保存ステータス", ["公開", "下書き"], index=1 if default_is_draft else 0, horizontal=True)
+            with col_save2:
+                if st.session_state.edit_id:
+                    if st.button("✖ 編集をキャンセル"):
+                        st.session_state.edit_id = None
+                        st.session_state.edit_data = {"title": "", "author": AUTHOR_LIST[0], "content": ""}
+                        st.session_state.edit_tags = []
+                        st.session_state.tags_input_field = ""
+                        st.session_state.working_html = ""
+                        st.session_state.eyecatch_url = ""
+                        st.session_state.inline_image_urls = []
+                        st.session_state.editor_mode = "rich"
+                        st.session_state.quill_key += 1
+                        st.rerun()
+
+            if st.button("💾 この内容で保存する", use_container_width=True):
+                if not title_input:
+                    st.error("タイトルを入力してください")
+                elif not st.session_state.working_html:
+                    st.error("本文を入力してください")
+                else:
+                    url_base = f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/blog"
+                    headers = {"X-MICROCMS-API-KEY": CMS_API_KEY, "Content-Type": "application/json"}
+                    clean_title = title_input.replace("【下書き】", "").strip()
+                    save_title = f"【下書き】{clean_title}" if status_save == "下書き" else clean_title
+                    tag_list = [t.strip() for t in tags_input.split(',') if t.strip()]
+                    cleaned_content = clean_quill_html(st.session_state.working_html)
+                    post_data = {"title": save_title, "content": cleaned_content, "author": author_select, "tags": ','.join(tag_list)}
+                    if st.session_state.eyecatch_url:
+                        post_data["eyecatch"] = st.session_state.eyecatch_url
+
+                    try:
+                        if st.session_state.edit_id:
+                            res = requests.patch(f"{url_base}/{st.session_state.edit_id}", headers=headers, json=post_data)
+                        else:
+                            res = requests.post(url_base, headers=headers, json=post_data)
+
+                        if res.status_code in [200, 201]:
+                            st.success("保存完了！")
+                            st.cache_data.clear()
+                            st.session_state.edit_id = None
+                            st.session_state.edit_data = {"title": "", "author": AUTHOR_LIST[0], "content": ""}
+                            st.session_state.edit_tags = []
+                            st.session_state.tags_input_field = ""
+                            st.session_state.working_html = ""
+                            st.session_state.eyecatch_url = ""
+                            st.session_state.inline_image_urls = []
+                            st.session_state.editor_mode = "rich"
+                            st.session_state.quill_key += 1
+                            st.rerun()
+                        else:
+                            st.error(f"エラー: {res.text}")
+                    except Exception as e:
+                        st.error(f"通信エラー: {e}")
+
+            st.divider()
+            st.subheader("📋 既存記事の管理")
+            manage_articles = get_all_articles()
+            for ma in manage_articles:
+                ma_id = ma["id"]
+                ma_title = ma.get("title", "無題")
+                ma_tags = get_tags(ma)
+                col_m1, col_m2, col_m3 = st.columns([3, 1, 1])
+                with col_m1:
+                    st.write(f"**{ma_title}**")
+                    st.caption(f"ID: {ma_id} | {ma.get('author')}")
+                    render_tag_badges(ma_tags)
+                with col_m2:
+                    if st.button("📝 編集", key=f"edit_btn_{ma_id}"):
+                        st.session_state.edit_id = ma_id
+                        st.session_state.edit_data = {"title": ma.get("title"), "author": ma.get("author"), "content": ma.get("content", "")}
+                        
+                        # タグのセッションステートを確実に入力フィールドへ連携
+                        extracted_tags = get_tags(ma)
+                        st.session_state.edit_tags = extracted_tags
+                        st.session_state.tags_input_field = ', '.join(extracted_tags)
+                        
+                        st.session_state.working_html = ma.get("content", "")
+                        ec = ma.get("eyecatch")
+                        st.session_state.eyecatch_url = ec.get("url", "") if isinstance(ec, dict) else (ec or "")
+                        st.session_state.inline_image_urls = []
+                        st.session_state.editor_mode = "rich"
+                        st.session_state.quill_key += 1
+                        st.rerun()
+                with col_m3:
+                    if st.session_state.delete_confirm_id == ma_id:
+                        st.warning("本当に削除しますか？")
+                        col_yes, col_no = st.columns(2)
+                        with col_yes:
+                            if st.button("✅ はい", key=f"del_yes_{ma_id}"):
+                                res = requests.delete(
+                                    f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/blog/{ma_id}",
+                                    headers={"X-MICROCMS-API-KEY": CMS_API_KEY}
+                                )
+                                st.cache_data.clear()
+                                st.session_state.delete_confirm_id = None
+                                if res.status_code in [200, 202, 204]:
+                                    st.success("削除完了")
+                                else:
+                                    st.error(f"削除失敗: {res.status_code}")
+                                st.rerun()
+                        with col_no:
+                            if st.button("❌ いいえ", key=f"del_no_{ma_id}"):
+                                st.session_state.delete_confirm_id = None
+                                st.rerun()
+                    else:
+                        if st.button("🗑️ ��除", key=f"del_btn_{ma_id}"):
+                            st.session_state.delete_confirm_id = ma_id
+                            st.rerun()
+                st.divider()
+
+        elif password != "":
+            st.error("合言葉が違います。")

main.py

@@ -1,687 +0,0 @@
-from fastapi import FastAPI, Request, Response, UploadFile, File, Form, HTTPException
-from fastapi.responses import HTMLResponse, JSONResponse, RedirectResponse
-from fastapi.templating import Jinja2Templates
-import os, re, io, json, hashlib
-from datetime import datetime, timezone, timedelta
-JST = timezone(timedelta(hours=9))
-import requests as http_requests
-from PIL import Image
-try:
-    from pillow_heif import register_heif_opener
-    register_heif_opener()
-except ImportError:
-    pass
-try:
-    import google.generativeai as genai
-    GENAI_AVAILABLE = True
-except Exception:
-    genai = None
-    GENAI_AVAILABLE = False
-
-app = FastAPI()
-templates = Jinja2Templates(directory="templates")
-
-GEMINI_KEY    = os.environ.get("GEMINI_API_KEY")
-CMS_SERVICE_ID = os.environ.get("MICROCMS_SERVICE_ID")
-CMS_API_KEY   = os.environ.get("MICROCMS_API_KEY")
-ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "1234").strip()
-SECRET_KEY    = os.environ.get("SECRET_KEY", "wasemas-secret-key")
-AUTHOR_LIST   = ["にき", "かん", "なごみ", "蜜柑餅","メロン"]
-ARTICLES_PER_PAGE = 10
-SPACE_URL     = os.environ.get("SPACE_URL", "")
-GEMINI_MODEL  = "gemini-2.5-flash"
-
-TEMPLATES = {
-    "テンプレートなし": "",
-    "📅 イベントレポート": "<h2>イベント概要</h2><p>イベント名：<br>日時：<br>場所：</p><h2>内容</h2><p>ここに内容を書いてください。</p><h2>感想</h2><p>ここに感想を書いてください。</p>",
-    "📝 日常記事": "<h2>はじめに</h2><p>ここに導入を書いてください。</p><h2>本文</h2><p>ここに本文を書いてください。</p><h2>おわりに</h2><p>ここにまとめを書いてください。</p>",
-    "🎵 ライブ・コンサートレポート": "<h2>公演情報</h2><p>公演名：<br>日時：<br>会場：<br>出演：</p><h2>セットリスト</h2><p>1. <br>2. <br>3. </p><h2>見どころ・感想</h2><p>ここに感想を書いてください。</p>",
-    "📣 お知らせ": "<h2>お知らせ</h2><p>ここにお知らせ内容を書いてください。</p><h2>詳細</h2><p>日時：<br>場所：<br>参加方法：</p>",
-}
-
-if GEMINI_KEY and GENAI_AVAILABLE:
-    genai.configure(api_key=GEMINI_KEY)
-
-
-# ─── 認証 ───────────────────────────────────────────────
-
-def _auth_token() -> str:
-    return hashlib.sha256(f"{ADMIN_PASSWORD}:{SECRET_KEY}".encode()).hexdigest()
-
-def set_auth_cookie(response: Response):
-    response.set_cookie("auth", _auth_token(), httponly=True,
-                        max_age=86400 * 30, samesite="lax", path="/")
-
-def get_auth(request: Request) -> bool:
-    return request.cookies.get("auth") == _auth_token()
-
-
-# ─── ユーティリティ ──────────────────────────────────────
-
-def strip_html(html: str) -> str:
-    return re.sub(r"<[^>]*?>", "", html)
-
-def get_tags(article: dict) -> list:
-    s = article.get("tags", "")
-    return [t.strip() for t in s.split(",") if t.strip()] if s else []
-
-def make_snippet(html: str) -> str:
-    parts = re.split(r"</p>|</h[1-6]>|<br\s*/?>", html)
-    for p in parts:
-        t = strip_html(p).strip()
-        if t:
-            return t[:60] + "..." if len(t) > 60 else t
-    return ""
-
-def get_content(article: dict) -> str:
-    rich = article.get("contentRich", "")
-    return rich if rich else article.get("content", "")
-
-def clean_html(html: str) -> str:
-    if not html:
-        return ""
-    html = re.sub(r"<figure>", '<div style="margin:8px 0;">', html)
-    html = re.sub(r"</figure>", "</div>", html)
-    html = re.sub(r"(<p>\s*<br\s*/?>\s*</p>)(\s*<p>\s*<img)", r"\2", html)
-    html = re.sub(r"(<p>\s*<img[^>]*/?>\\s*</p>)(\s*<p>\s*<br\s*/?>\s*</p>)", r"\1", html)
-    return html.strip()
-
-def render_blocks_to_html(blocks: list) -> str:
-    parts = []
-    for b in blocks:
-        if b.get("type") == "text":
-            parts.append(b.get("html", ""))
-        elif b.get("type") == "image":
-            url = b.get("url", "")
-            alt = b.get("alt", "")
-            max_w = b.get("maxWidth", 900)
-            if url:
-                caption = (f'<p style="text-align:center;font-size:0.8em;color:#9ca3af;margin-top:4px;">{alt}</p>'
-                           if alt else "")
-                parts.append(
-                    f'<figure style="margin:8px 0;">'
-                    f'<img src="{url}" alt="{alt}" '
-                    f'style="width:{max_w}px;max-width:100%;height:auto;display:block;margin:0 auto;" />'
-                    f'{caption}</figure>'
-                )
-    return "\n".join(parts)
-
-def blocks_from_article(article: dict) -> list:
-    cb = article.get("contentBlocks", "")
-    if cb:
-        try:
-            return json.loads(cb)
-        except Exception:
-            pass
-    html = article.get("contentRich", "") or article.get("content", "")
-    if html:
-        return [{"type": "text", "id": "block-0", "html": html}]
-    return [{"type": "text", "id": "block-0", "html": ""}]
-
-def filter_articles(articles: list, q: str, author: str, tag: str) -> list:
-    result = []
-    for a in articles:
-        title = a.get("title", "")
-        if title.startswith("【下書き】"):
-            continue
-        if q and q.lower() not in title.lower() and q.lower() not in strip_html(get_content(a)).lower():
-            continue
-        if author and author != "全員" and a.get("author") != author:
-            continue
-        if tag and tag != "全タグ" and tag not in get_tags(a):
-            continue
-        result.append(a)
-    return result
-
-
-# ─── microCMS API ─────────────────────────────────────────
-
-CMS_HEADERS_GET  = lambda: {"X-MICROCMS-API-KEY": CMS_API_KEY}
-CMS_HEADERS_POST = lambda: {"X-MICROCMS-API-KEY": CMS_API_KEY, "Content-Type": "application/json"}
-
-def cms_url(path: str) -> str:
-    return f"https://{CMS_SERVICE_ID}.microcms.io/api/v1/{path}"
-
-def get_all_articles() -> list:
-    try:
-        r = http_requests.get(cms_url("blog"), headers=CMS_HEADERS_GET(), params={"limit": 100})
-        return r.json().get("contents", [])
-    except Exception:
-        return []
-
-def get_article(article_id: str) -> dict | None:
-    try:
-        r = http_requests.get(cms_url(f"blog/{article_id}"), headers=CMS_HEADERS_GET())
-        return r.json() if r.status_code == 200 else None
-    except Exception:
-        return None
-
-def get_comments(article_id: str) -> list:
-    all_comments = []
-    offset = 0
-    limit = 100
-    try:
-        while True:
-            r = http_requests.get(cms_url("comments"), headers=CMS_HEADERS_GET(), params={
-                "filters": f"articleId[equals]{article_id}",
-                "limit": limit, "offset": offset, "orders": "createdAt",
-            })
-            data = r.json()
-            all_comments.extend(data.get("contents", []))
-            if offset + limit >= data.get("totalCount", 0):
-                break
-            offset += limit
-        return all_comments
-    except Exception:
-        return []
-
-def post_comment_api(article_id: str, name: str, body: str, parent_id: str = "") -> bool:
-    try:
-        payload = {"articleId": article_id, "name": name, "body": body}
-        if parent_id:
-            payload["parentId"] = parent_id
-        r = http_requests.post(cms_url("comments"), headers=CMS_HEADERS_POST(), json=payload)
-        return r.status_code in [200, 201]
-    except Exception:
-        return False
-
-def build_comment_tree(comments: list) -> list:
-    by_id = {c["id"]: {**c, "replies": []} for c in comments}
-    roots = []
-    for c in comments:
-        node = by_id[c["id"]]
-        pid = c.get("parentId", "")
-        if pid and pid in by_id:
-            by_id[pid]["replies"].append(node)
-        else:
-            roots.append(node)
-    return roots
-
-def migrate_comments(old_id: str, new_id: str) -> int:
-    try:
-        r = http_requests.get(cms_url("comments"), headers=CMS_HEADERS_GET(),
-                              params={"filters": f"articleId[equals]{old_id}", "limit": 100})
-        comments = r.json().get("contents", [])
-        for c in comments:
-            http_requests.patch(cms_url(f"comments/{c['id']}"), headers=CMS_HEADERS_POST(),
-                                json={"articleId": new_id})
-        return len(comments)
-    except Exception:
-        return 0
-
-def _to_jst_str(iso: str) -> str:
-    try:
-        dt = datetime.fromisoformat(iso.replace("Z", "+00:00")).astimezone(JST)
-        return dt.strftime("%Y-%m-%d %H:%M")
-    except Exception:
-        return iso[:16].replace("T", " ")
-
-templates.env.filters["to_jst"] = _to_jst_str
-
-def get_all_comment_counts() -> dict:
-    try:
-        r = http_requests.get(cms_url("comments"), headers=CMS_HEADERS_GET(), params={
-            "limit": 100,
-            "fields": "articleId",
-        })
-        counts: dict = {}
-        for c in r.json().get("contents", []):
-            aid = c.get("articleId", "")
-            if aid:
-                counts[aid] = counts.get(aid, 0) + 1
-        return counts
-    except Exception:
-        return {}
-
-def get_backups(original_id: str) -> list:
-    try:
-        r = http_requests.get(cms_url("blog-backup"), headers=CMS_HEADERS_GET(), params={
-            "filters": f"originalId[equals]{original_id}",
-            "limit": 100, "orders": "-version",
-        })
-        items = r.json().get("contents", [])
-        for bk in items:
-            bk["createdAt_jst"] = _to_jst_str(bk.get("createdAt", ""))
-        return items
-    except Exception:
-        return []
-
-def create_backup(original_id: str, article_data: dict) -> tuple[bool, str]:
-    try:
-        r = http_requests.get(cms_url("blog-backup"), headers=CMS_HEADERS_GET(), params={
-            "filters": f"originalId[equals]{original_id}", "limit": 1, "orders": "-version",
-        })
-        if r.status_code not in [200, 201]:
-            return False, f"backup list fetch failed: {r.status_code}"
-        contents = r.json().get("contents", [])
-        next_ver = (contents[0].get("version", 0) if contents else 0) + 1
-        body = {
-            "originalId":    original_id,
-            "version":       next_ver,
-            "title":         article_data.get("title", ""),
-            "author":        article_data.get("author", ""),
-            "tags":          article_data.get("tags", ""),
-            "content":       article_data.get("content", ""),
-            "editorMode":    "blocks",
-        }
-        if article_data.get("contentBlocks"):
-            body["contentBlocks"] = article_data["contentBlocks"]
-        r2 = http_requests.post(cms_url("blog-backup"), headers=CMS_HEADERS_POST(), json=body)
-        if r2.status_code in [200, 201]:
-            return True, ""
-        return False, f"backup post failed: {r2.status_code} {r2.text[:200]}"
-    except Exception as e:
-        return False, str(e)
-
-def migrate_backup_ids(old_id: str, new_id: str):
-    try:
-        r = http_requests.get(cms_url("blog-backup"), headers=CMS_HEADERS_GET(),
-                              params={"filters": f"originalId[equals]{old_id}", "limit": 100})
-        for bk in r.json().get("contents", []):
-            http_requests.patch(cms_url(f"blog-backup/{bk['id']}"), headers=CMS_HEADERS_POST(),
-                                json={"originalId": new_id})
-    except Exception:
-        pass
-
-def upload_image_cms(image_bytes: bytes, filename: str = "upload.jpg") -> str | None:
-    try:
-        url = f"https://{CMS_SERVICE_ID}.microcms-management.io/api/v1/media"
-        r = http_requests.post(url, headers={"X-MICROCMS-API-KEY": CMS_API_KEY},
-                               files={"file": (filename, image_bytes, "image/jpeg")})
-        if r.status_code not in [200, 201]:
-            return None
-        return r.json().get("url")
-    except Exception:
-        return None
-
-def process_image(data: bytes, max_width: int = 1200) -> bytes:
-    img = Image.open(io.BytesIO(data))
-    try:
-        import PIL.ExifTags
-        exif = img._getexif()
-        if exif:
-            for tag, val in exif.items():
-                if PIL.ExifTags.TAGS.get(tag) == "Orientation":
-                    if val == 3: img = img.rotate(180, expand=True)
-                    elif val == 6: img = img.rotate(270, expand=True)
-                    elif val == 8: img = img.rotate(90, expand=True)
-    except Exception:
-        pass
-    if img.width > max_width:
-        ratio = max_width / img.width
-        img = img.resize((max_width, int(img.height * ratio)), Image.LANCZOS)
-    if img.mode in ("RGBA", "P"):
-        img = img.convert("RGB")
-    buf = io.BytesIO()
-    img.save(buf, format="JPEG", quality=85)
-    return buf.getvalue()
-
-
-# ─── 公開ページ ───────────────────────────────────────────
-
-@app.get("/", response_class=HTMLResponse)
-async def index(request: Request, id: str = None, page: int = 0,
-                q: str = "", author: str = "", tag: str = ""):
-    if id:
-        article = get_article(id)
-        if not article:
-            return templates.TemplateResponse(request, "blog_detail.html",
-                {"article": None, "comments": []})
-        flat_comments = get_comments(id)
-        comment_tree  = build_comment_tree(flat_comments)
-        base_url = SPACE_URL or str(request.base_url).rstrip("/")
-        if article.get("contentBlocks"):
-            rendered_content = render_blocks_to_html(blocks_from_article(article))
-        else:
-            rendered_content = clean_html(get_content(article))
-        return templates.TemplateResponse(request, "blog_detail.html", {
-            "article": article,
-            "comments": comment_tree,
-            "comment_count": len(flat_comments),
-            "content": rendered_content,
-            "tags": get_tags(article),
-            "space_url": base_url,
-        })
-
-    all_articles = get_all_articles()
-    all_tags = sorted(set(t for a in all_articles for t in get_tags(a)
-                          if not a.get("title", "").startswith("【下書き】")))
-    filtered = filter_articles(all_articles, q, author, tag)
-    total = len(filtered)
-    total_pages = max(1, -(-total // ARTICLES_PER_PAGE))
-    page = max(0, min(page, total_pages - 1))
-    page_articles = filtered[page * ARTICLES_PER_PAGE:(page + 1) * ARTICLES_PER_PAGE]
-    comment_counts = get_all_comment_counts()
-
-    return templates.TemplateResponse(request, "blog_list.html", {
-        "articles": page_articles,
-        "total": total,
-        "page": page,
-        "total_pages": total_pages,
-        "q": q,
-        "author": author,
-        "tag": tag,
-        "all_tags": all_tags,
-        "author_list": AUTHOR_LIST,
-        "articles_per_page": ARTICLES_PER_PAGE,
-        "get_tags": get_tags,
-        "make_snippet": make_snippet,
-        "get_content": get_content,
-        "comment_counts": comment_counts,
-    })
-
-
-# ─── 管理者ページ ─────────────────────────────────────────
-
-@app.get("/admin", response_class=HTMLResponse)
-async def admin_login_page(request: Request):
-    if get_auth(request):
-        return RedirectResponse("/admin/articles", status_code=302)
-    return templates.TemplateResponse(request, "admin_login.html", {"error": None})
-
-@app.post("/admin/login")
-async def admin_login(request: Request, password: str = Form(default="")):
-    if not password.strip():
-        return templates.TemplateResponse(request, "admin_login.html",
-            {"error": "合言葉を入力してください"})
-    if password.strip() == ADMIN_PASSWORD:
-        response = RedirectResponse("/admin/articles", status_code=302)
-        set_auth_cookie(response)
-        return response
-    return templates.TemplateResponse(request, "admin_login.html",
-        {"error": "合言葉が違います"})
-
-@app.post("/admin/logout")
-async def admin_logout():
-    response = RedirectResponse("/admin", status_code=302)
-    response.delete_cookie("auth")
-    return response
-
-@app.get("/admin/articles", response_class=HTMLResponse)
-async def admin_articles(request: Request):
-    if not get_auth(request):
-        return RedirectResponse("/admin", status_code=302)
-    articles = get_all_articles()
-    return templates.TemplateResponse(request, "admin_list.html",
-        {"articles": articles, "get_tags": get_tags})
-
-@app.get("/admin/new", response_class=HTMLResponse)
-async def admin_new(request: Request):
-    if not get_auth(request):
-        return RedirectResponse("/admin", status_code=302)
-    return templates.TemplateResponse(request, "admin_editor.html", {
-        "article": None,
-        "blocks_json": json.dumps([{"type": "text", "id": "block-0", "html": ""}]),
-        "author_list": AUTHOR_LIST,
-        "templates_map": TEMPLATES,
-        "backups": [],
-    })
-
-@app.get("/admin/edit/{article_id}", response_class=HTMLResponse)
-async def admin_edit(request: Request, article_id: str):
-    if not get_auth(request):
-        return RedirectResponse("/admin", status_code=302)
-    article = get_article(article_id)
-    if not article:
-        raise HTTPException(status_code=404, detail="記事が見つかりません")
-    blocks = blocks_from_article(article)
-    ec = article.get("eyecatch")
-    ec_url = ec.get("url", "") if isinstance(ec, dict) else (ec or "")
-    backups = get_backups(article_id)
-    return templates.TemplateResponse(request, "admin_editor.html", {
-        "article": article,
-        "blocks_json": json.dumps(blocks, ensure_ascii=False),
-        "eyecatch_url": ec_url,
-        "author_list": AUTHOR_LIST,
-        "templates_map": TEMPLATES,
-        "backups": backups,
-        "get_tags": get_tags,
-    })
-
-
-# ─── JSON API ─────────────────────────────────────────────
-
-@app.post("/api/save")
-async def api_save(request: Request):
-    if not get_auth(request):
-        raise HTTPException(status_code=401)
-    data = await request.json()
-
-    article_id  = data.get("article_id") or None
-    title_raw   = data.get("title", "").strip()
-    author      = data.get("author", AUTHOR_LIST[0])
-    tags        = data.get("tags", "")
-    eyecatch    = data.get("eyecatch", "")
-    blocks      = data.get("blocks", [])
-    status      = data.get("status", "draft")
-
-    clean_title  = title_raw.replace("【下書き】", "").strip()
-    save_title   = f"【下書き】{clean_title}" if status == "draft" else clean_title
-    tag_list     = [t.strip() for t in tags.split(",") if t.strip()]
-    rendered     = clean_html(render_blocks_to_html(blocks))
-    blocks_json  = json.dumps(blocks, ensure_ascii=False)
-
-    post_data = {
-        "title":         save_title,
-        "content":       rendered,
-        "contentRich":   rendered,
-        "contentBlocks": blocks_json,
-        "author":        author,
-        "tags":          ",".join(tag_list),
-        "editorMode":    "blocks",
-    }
-    if eyecatch:
-        post_data["eyecatch"] = eyecatch
-
-    base_url = cms_url("blog")
-    was_draft    = False
-    becomes_public = (status == "public")
-    new_id = None
-
-    try:
-        if article_id:
-            existing = get_article(article_id)
-            if existing:
-                was_draft = existing.get("title", "").startswith("【下書き】")
-
-            if was_draft and becomes_public:
-                likes_count = int(existing.get("likes", 0) or 0)
-                if likes_count:
-                    post_data["likes"] = likes_count
-                http_requests.delete(f"{base_url}/{article_id}", headers=CMS_HEADERS_GET())
-                r = http_requests.post(base_url, headers=CMS_HEADERS_POST(), json=post_data)
-                if r.status_code in [200, 201]:
-                    new_id = r.json().get("id")
-                    if new_id:
-                        migrate_comments(article_id, new_id)
-                        migrate_backup_ids(article_id, new_id)
-            else:
-                r = http_requests.patch(f"{base_url}/{article_id}", headers=CMS_HEADERS_POST(), json=post_data)
-        else:
-            r = http_requests.post(base_url, headers=CMS_HEADERS_POST(), json=post_data)
-
-        if r.status_code not in [200, 201]:
-            return JSONResponse({"success": False, "error": r.text})
-
-        saved_id = new_id or (r.json().get("id") if not article_id else article_id)
-        if was_draft and becomes_public and new_id:
-            saved_id = new_id
-
-        backup_data = {
-            "title":         save_title,
-            "author":        author,
-            "tags":          ",".join(tag_list),
-            "content":       rendered,
-            "contentBlocks": blocks_json,
-        }
-        backup_ok, backup_err = False, "saved_id missing"
-        if saved_id:
-            backup_ok, backup_err = create_backup(saved_id, backup_data)
-
-        return JSONResponse({"success": True, "id": saved_id,
-                             "backup_ok": backup_ok, "backup_err": backup_err})
-    except Exception as e:
-        return JSONResponse({"success": False, "error": str(e)})
-
-@app.delete("/api/article/{article_id}")
-async def api_delete_article(request: Request, article_id: str):
-    if not get_auth(request):
-        raise HTTPException(status_code=401)
-    try:
-        r = http_requests.delete(cms_url(f"blog/{article_id}"), headers=CMS_HEADERS_GET())
-        return JSONResponse({"success": r.status_code in [200, 202, 204]})
-    except Exception as e:
-        return JSONResponse({"success": False, "error": str(e)})
-
-@app.post("/api/upload-image")
-async def api_upload_image(request: Request, file: UploadFile = File(...),
-                           max_width: int = Form(default=1200)):
-    if not get_auth(request):
-        raise HTTPException(status_code=401)
-    try:
-        raw = await file.read()
-        processed = process_image(raw, max_width=max_width)
-        url = upload_image_cms(processed, filename=file.filename or "upload.jpg")
-        if url:
-            return JSONResponse({"success": True, "url": url})
-        return JSONResponse({"success": False, "error": "アップロード失敗"})
-    except Exception as e:
-        return JSONResponse({"success": False, "error": str(e)})
-
-@app.get("/api/backups/{article_id}")
-async def api_get_backups(request: Request, article_id: str):
-    if not get_auth(request):
-        raise HTTPException(status_code=401)
-    return JSONResponse({"backups": get_backups(article_id)})
-
-@app.post("/api/ai-decorate")
-async def api_ai_decorate(request: Request):
-    if not get_auth(request):
-        raise HTTPException(status_code=401)
-    if not GEMINI_KEY or not GENAI_AVAILABLE:
-        return JSONResponse({"success": False, "error": "AI機能が利用できません（APIキー未設定または初期化エラー）"})
-    data = await request.json()
-    html_content = data.get("html", "")
-    instruction  = data.get("instruction", "")
-    if not html_content or not instruction:
-        return JSONResponse({"success": False, "error": "htmlとinstructionが必要です"})
-    try:
-        model = genai.GenerativeModel(model_name=GEMINI_MODEL)
-        prompt = (
-            f"あなたはブログ記事のHTMLコーダーです。\n"
-            f"以下のルールを守りながら、与えられた指示に基づいてHTMLを修正してください。\n\n"
-            f"【文章の書き換え厳禁】\n"
-            f"本文の内容は絶対に変更しないこと。推敲・削除・要約等は全て不要。HTMLタグとスタイルのみ変更すること。\n\n"
-            f"【スコープルール】\n"
-            f"・記事全体を <div class=\"article-body\"> で囲む\n"
-            f"・CSSセレクタは必ず .article-body h2 {{}} のようにラッパークラスを先頭につけてスコープを閉じる\n"
-            f"・body や html への直接スタイル指定は禁止\n"
-            f"・CSS変数は :root ではなく .article-body に定義する（例: .article-body {{ --accent-color: #e07297; }}）\n\n"
-            f"【ダークモード対応】\n"
-            f"・テキストの文字色は black/white などの固定色を使わず color: inherit を使う\n"
-            f"・グレー系の背景は rgba(128,128,128,0.1) などの半透過色を使う\n"
-            f"・ダークモード切替は @media (prefers-color-scheme: dark) 内で .article-body の変数を上書きする\n\n"
-            f"【Twitter埋め込み（厳守）】\n"
-            f"・<blockquote class=\"twitter-tweet\"> タグおよびその内部は一切変更・装飾・スタイル追加しないこと\n"
-            f"・blockquote 要素や twitter-tweet クラスへの CSS 指定は全て禁止\n"
-            f"・widget.jsの読み込みは��要（ページ側で処理する）\n\n"
-            f"【出力形式】\n"
-            f"・HTMLコードのみを返すこと（説明文・コードブロック記号は不要）\n"
-            f"・CSSはできるだけ <style> タグにまとめる（インラインstyleは最小限に）\n"
-            f"・可読性のため、本文の改行に合わせて適切にコードも改行すること\n\n"
-            f"【現在のHTML】\n{html_content}\n\n"
-            f"【修正指示】\n{instruction}"
-        )
-        resp = model.generate_content(prompt)
-        cleaned = re.sub(r"```html?", "", resp.text, flags=re.IGNORECASE).replace("```", "").strip()
-        return JSONResponse({"success": True, "html": cleaned})
-    except Exception as e:
-        err = str(e)
-        if "429" in err:
-            m = re.search(r"retry in (\d+(?:\.\d+)?)s", err)
-            wait = int(float(m.group(1))) + 1 if m else 30
-            return JSONResponse({"success": False, "error": f"使用制限中。{wait}秒後に再試行してください"})
-        return JSONResponse({"success": False, "error": err})
-
-@app.post("/api/ai-decorate-all")
-async def api_ai_decorate_all(request: Request):
-    if not get_auth(request):
-        raise HTTPException(status_code=401)
-    if not GEMINI_KEY or not GENAI_AVAILABLE:
-        return JSONResponse({"success": False, "error": "AI機能が利用できません（APIキー未設定または初期化エラー）"})
-    data = await request.json()
-    blocks_input = data.get("blocks", [])  # [{id, html}, ...]
-    instruction  = data.get("instruction", "")
-    if not blocks_input or not instruction:
-        return JSONResponse({"success": False, "error": "blocksとinstructionが必要です"})
-    try:
-        blocks_json_str = json.dumps(blocks_input, ensure_ascii=False)
-        model = genai.GenerativeModel(model_name=GEMINI_MODEL)
-        prompt = (
-            f"あなたはブログ記事のHTMLコーダーです。\n"
-            f"以下は記事のテキストブロック（HTML）のJSON配列です。\n"
-            f"全ブロックを通じて統一されたデザイン・スタイルになるよう、以下のルールと指示に基づいてHTMLを修正してください。\n\n"
-            f"【文章の書き換え厳禁】\n"
-            f"本文の内容は絶対に変更しないこと。推敲・削除・要約等は全て不要。HTMLタグとスタイルのみ変更すること。\n\n"
-            f"【スコープルール】\n"
-            f"・各ブロックのコンテンツを <div class=\"article-body\"> で囲む\n"
-            f"・CSSセレクタは必ず .article-body h2 {{}} のようにラッパークラスを先頭につけてスコープを閉じる\n"
-            f"・<style> タグは最初のブロック（配列の先頭）の先頭にのみ記載し、全ブロック共通スタイルをまとめる\n"
-            f"・body や html への直接スタイル指定は禁止\n"
-            f"・CSS変数は :root ではなく .article-body に定義する（例: .article-body {{ --accent-color: #e07297; }}）\n\n"
-            f"【ダークモード対応】\n"
-            f"・テキストの文字色は black/white などの固定色を使わず color: inherit を使う\n"
-            f"・グレー系の背景は rgba(128,128,128,0.1) などの半透過色を使う\n"
-            f"・ダークモード切替は @media (prefers-color-scheme: dark) 内で .article-body の変数を上書きする\n\n"
-            f"【Twitter埋め込み（厳守）】\n"
-            f"・<blockquote class=\"twitter-tweet\"> タグおよびその内部は一切変更・装飾・スタイル追加しないこと\n"
-            f"・blockquote 要素や twitter-tweet クラスへの CSS 指定は全て禁止\n"
-            f"・widget.jsの読み込みは不要（ページ側で処理する）\n\n"
-            f"【出力形式】\n"
-            f"・同じJSON形式（idとhtmlのペアの配列）のみを返すこと。余分なテキストや説明は不要。\n"
-            f"・CSSはできるだけ <style> タグにまとめる（最初のブロックに集約、インラインstyleは最小限に）\n"
-            f"・可読性のため、本文の改行に合わせて適切にコードも改行すること\n\n"
-            f"【ブロックデータ（JSON）】\n{blocks_json_str}\n"
-            f"【装飾指示】{instruction}\n"
-            f"【出力形式】[{{\"id\": \"block-xxx\", \"html\": \"装飾されたHTML\"}},...] のJSON配列のみ"
-        )
-        resp = model.generate_content(prompt)
-        cleaned = re.sub(r"```json?", "", resp.text, flags=re.IGNORECASE).replace("```", "").strip()
-        decorated_list = json.loads(cleaned)
-        result = {item["id"]: item["html"] for item in decorated_list}
-        return JSONResponse({"success": True, "decorated": result})
-    except Exception as e:
-        err = str(e)
-        if "429" in err:
-            m = re.search(r"retry in (\d+(?:\.\d+)?)s", err)
-            wait = int(float(m.group(1))) + 1 if m else 30
-            return JSONResponse({"success": False, "error": f"使用制限中。{wait}秒後に再試行してください"})
-        return JSONResponse({"success": False, "error": err})
-
-@app.post("/api/comment")
-async def api_comment(request: Request):
-    data = await request.json()
-    article_id = data.get("article_id", "")
-    name       = data.get("name", "わせます太郎").strip() or "わせます太郎"
-    body       = data.get("body", "").strip()
-    parent_id  = data.get("parent_id", "")
-    if not body:
-        return JSONResponse({"success": False, "error": "コメントを入力してください"})
-    ok = post_comment_api(article_id, name, body, parent_id)
-    return JSONResponse({"success": ok})
-
-@app.post("/api/like/{article_id}")
-async def api_like(article_id: str, request: Request):
-    try:
-        body = await request.json()
-        action = body.get("action", "add")
-    except Exception:
-        action = "add"
-    article = get_article(article_id)
-    if not article:
-        return JSONResponse({"success": False, "likes": 0})
-    current = int(article.get("likes", 0) or 0)
-    new_count = max(0, current + (1 if action == "add" else -1))
-    r = http_requests.patch(cms_url(f"blog/{article_id}"), headers=CMS_HEADERS_POST(),
-                            json={"likes": new_count})
-    return JSONResponse({"success": r.status_code in [200, 201], "likes": new_count})

requirements.txt

@@ -1,9 +1,5 @@
-fastapi
-uvicorn[standard]
-jinja2
-python-multipart
+streamlit
+google-generativeai>=0.5.2
 requests
-pillow
-pillow-heif
-google-generativeai
-itsdangerous
+streamlit-quill
+Pillow

templates/admin_editor.html

@@ -1,894 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{% if article %}記事の編集{% else %}新規記事{% endif %} - わせます9期ブログ</title>
-  <script>tailwind.config = { darkMode: 'media' }</script>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
-  <style>
-    .block-card { transition: all 0.2s ease; border-left: 4px solid transparent; }
-    .block-card:hover { border-left-color: #bf283a; }
-    .editor-overlay { display: none; }
-    .editor-overlay.active { display: flex; }
-    .blog-preview { font-size: 16px; line-height: 1.8; word-break: break-word; }
-    .blog-preview h1,.blog-preview h2,.blog-preview h3 { font-weight: bold; margin: 0.8em 0 0.4em; }
-    .blog-preview h1 { font-size: 1.6rem; }
-    .blog-preview h2 { border-left: 4px solid #bf283a; padding-left: 10px; font-size: 1.25rem; }
-    .blog-preview h3 { font-size: 1.1rem; }
-    .blog-preview p { line-height: 1.8; margin-bottom: 0.5rem; }
-    .blog-preview strong { font-weight: bold; }
-    .blog-preview em { font-style: italic; }
-    .blog-preview ul { list-style: disc; padding-left: 1.5em; margin-bottom: 0.5rem; }
-    .blog-preview ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 0.5rem; }
-    .blog-preview img { max-width: 100%; border-radius: 6px; margin: 4px 0; display: block; }
-    #modal-textarea { font-size: 16px; }
-    .tag-badge { display:inline-block; background:#e0f2fe; color:#0369a1; border-radius:9999px; padding:2px 10px; font-size:12px; margin:2px; }
-    .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
-             background: #1f2937; color: white; padding: 10px 24px; border-radius: 9999px;
-             font-size: 14px; z-index: 100; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
-    .toast.show { opacity: 1; }
-    .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid #e5e7eb; padding: 6px 8px; flex-wrap: wrap;
-                          position: sticky; top: 0; z-index: 2; background: white; }
-    .ql-container.ql-snow { border: none; font-size: 16px; height: auto !important; overflow: visible !important; }
-    .ql-editor { min-height: 280px; padding: 12px 16px; line-height: 1.8; overflow-y: visible !important; }
-    .ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3 { margin-bottom: 0.5em; }
-    #quill-container { overflow-y: auto; }
-    .mode-btn { padding: 3px 12px; border-radius: 9999px; font-size: 12px; font-weight: bold;
-                cursor: pointer; transition: all 0.15s; border: 1px solid #d1d5db; color: #6b7280; }
-    .mode-btn.active { background: #bf283a; color: white; border-color: #bf283a; }
-    @media (prefers-color-scheme: dark) {
-      .block-card { background-color: #1f2937; border-color: #374151; }
-      .block-card:hover { border-left-color: #f08090; }
-      .block-card input, .block-card textarea, .block-card select {
-        background-color: #374151; color: #e5e7eb; border-color: #4b5563;
-      }
-      .blog-preview { color: #e5e7eb; }
-      .blog-preview h2 { border-left-color: #f08090; }
-      .block-card .text-gray-700 { color: #d1d5db; }
-      .block-card .text-gray-400 { color: #9ca3af; }
-      .block-card .hover\:bg-gray-50:hover { background-color: #374151; }
-      .ql-toolbar.ql-snow { border-bottom-color: #374151; background: #1f2937; }
-      .ql-toolbar.ql-snow .ql-stroke { stroke: #9ca3af; }
-      .ql-toolbar.ql-snow .ql-fill { fill: #9ca3af; }
-      .ql-toolbar.ql-snow .ql-picker { color: #9ca3af; }
-      .ql-toolbar.ql-snow .ql-picker-options { background: #1f2937; border-color: #374151; }
-      .ql-container.ql-snow { background: #1f2937; color: #e5e7eb; }
-      .mode-btn { border-color: #4b5563; color: #9ca3af; background: transparent; }
-      .mode-btn.active { background: #bf283a; color: white; border-color: #bf283a; }
-    }
-  </style>
-</head>
-<body class="bg-gray-50 dark:bg-gray-900 pb-24">
-
-<!-- 保存完了バナー（リロード後に表示） -->
-<div id="save-banner" class="hidden fixed top-0 inset-x-0 z-50 bg-green-100 text-green-800 border-b border-green-200 text-center py-3 text-sm font-bold shadow-sm">
-  ✅ 下書き保存しました
-</div>
-
-<!-- スティッキーヘッダー -->
-<header class="bg-white dark:bg-gray-800 border-b dark:border-gray-700 sticky top-0 z-30 px-4 py-3 flex justify-between items-center shadow-sm">
-  <a href="/admin/articles" class="text-gray-500 dark:text-gray-400 text-sm hover:text-[#bf283a] dark:hover:text-[#f08090] transition">
-    <i class="fas fa-chevron-left mr-1"></i>一覧に戻る
-  </a>
-  <h1 class="font-bold text-gray-800 dark:text-gray-100 text-sm">
-    {% if article %}📝 記事の編集{% else %}✍️ 新規記事{% endif %}
-  </h1>
-  <div class="flex gap-2">
-    <button onclick="save('draft')"
-            class="border dark:border-gray-600 text-gray-600 dark:text-gray-300 px-3 py-1.5 rounded-full text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-700 transition">
-      下書き保存
-    </button>
-    <button onclick="save('public')"
-            class="bg-[#bf283a] text-white px-4 py-1.5 rounded-full text-sm font-bold hover:bg-[#a01f2f] transition">
-      公開する
-    </button>
-  </div>
-</header>
-
-<main class="max-w-2xl mx-auto p-4 space-y-4">
-
-  <!-- タイトル -->
-  <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border dark:border-gray-700">
-    <label class="text-xs text-gray-400 dark:text-gray-500 font-bold uppercase block mb-1">記事タイトル</label>
-    <textarea id="title-input" rows="1"
-              oninput="this.style.height='auto';this.style.height=this.scrollHeight+'px'"
-              placeholder="タイトルを入力..."
-              style="font-size:18px"
-              class="w-full font-bold border-none focus:ring-0 focus:outline-none p-0 bg-transparent text-gray-800 dark:text-gray-100 placeholder-gray-300 dark:placeholder-gray-600 resize-none overflow-hidden leading-snug">{{ article.get('title','') | replace('【下書き】','') if article else '' }}</textarea>
-  </div>
-
-  <!-- 著者・タグ -->
-  <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border dark:border-gray-700 grid grid-cols-1 sm:grid-cols-2 gap-3">
-    <div>
-      <label class="text-xs text-gray-400 dark:text-gray-500 font-bold block mb-1">著者</label>
-      <select id="author-select" style="font-size:16px" class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#e09099]">
-        {% for a in author_list %}
-          <option value="{{ a }}" {% if article and article.get('author') == a %}selected{% endif %}>{{ a }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div>
-      <label class="text-xs text-gray-400 dark:text-gray-500 font-bold block mb-1">タグ（カンマ区切り）</label>
-      <textarea id="tags-input" rows="1"
-                oninput="this.style.height='auto';this.style.height=this.scrollHeight+'px'"
-                onkeydown="if(event.key==='Enter')event.preventDefault()"
-                placeholder="イベント, 日常"
-                style="font-size:16px"
-                class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099] resize-none overflow-hidden leading-snug">{{ get_tags(article)|join(', ') if article else '' }}</textarea>
-    </div>
-  </div>
-
-  <!-- バックアップから復元 -->
-  {% if backups %}
-  <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border dark:border-gray-700">
-    <label class="text-xs text-gray-400 dark:text-gray-500 font-bold block mb-2">📦 バックアップから復元</label>
-    <div class="flex gap-2">
-      <select id="backup-select" class="flex-1 border dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#e09099]">
-        {% for bk in backups %}
-          <option data-backup='{{ bk | tojson }}'>v{{ bk.get('version','?') }} - {{ bk.get('createdAt_jst', bk.get('createdAt','')[:16] | replace('T',' ')) }}</option>
-        {% endfor %}
-      </select>
-      <button onclick="applySelectedBackup()"
-              class="bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg text-sm font-bold transition">
-        復元
-      </button>
-    </div>
-  </div>
-  {% endif %}
-
-  <!-- アイキャッチ画像 -->
-  <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border dark:border-gray-700">
-    <label class="text-xs text-gray-400 dark:text-gray-500 font-bold block mb-2">🖼️ キャッチ画像</label>
-    <input type="hidden" id="eyecatch-url" value="{{ eyecatch_url if eyecatch_url else '' }}">
-    <div id="eyecatch-preview" class="{% if not eyecatch_url %}hidden{% endif %} mb-3">
-      <div class="relative inline-block">
-        <img id="eyecatch-img" src="{{ eyecatch_url if eyecatch_url else '' }}" alt="" class="h-32 rounded-lg object-cover">
-        <button onclick="removeEyecatch()"
-                class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 text-xs flex items-center justify-center hover:bg-red-600">✕</button>
-      </div>
-    </div>
-    <div id="eyecatch-upload" class="{% if eyecatch_url %}hidden{% endif %}">
-      <label class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-6 cursor-pointer hover:border-[#bf283a] dark:hover:border-[#f08090] transition">
-        <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 dark:text-gray-500 mb-2"></i>
-        <span class="text-sm text-gray-500 dark:text-gray-400">クリックして画像を選択</span>
-        <span class="text-xs text-gray-400 dark:text-gray-500 mt-1">JPG / PNG / HEIC</span>
-        <input type="file" accept="image/*" class="hidden" onchange="uploadEyecatch(this)">
-      </label>
-    </div>
-  </div>
-
-  <!-- ブロックリスト -->
-  <div>
-    <div class="flex justify-between items-center mb-2">
-      <span class="text-xs text-gray-400 dark:text-gray-500 font-bold uppercase">本文ブロック</span>
-      <span class="text-xs text-gray-400 dark:text-gray-500">↑↓ で順番を変更</span>
-    </div>
-    <div id="block-list" class="space-y-1"></div>
-  </div>
-
-  <!-- 全体AI装飾 -->
-  <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border dark:border-gray-700">
-    <label class="text-xs text-gray-400 dark:text-gray-500 font-bold block mb-2">✨ AIで全ブロックを一括装飾</label>
-    <div class="flex gap-2">
-      <input id="global-ai-instruction" type="text"
-             placeholder="例: 見出しをつけてスタイルを統一して"
-             style="font-size:16px"
-             class="flex-1 border dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-300">
-      <button id="global-ai-btn" onclick="runGlobalAI()"
-              class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-blue-600 transition whitespace-nowrap">
-        <i class="fas fa-magic mr-1"></i>実行
-      </button>
-    </div>
-    <p id="global-ai-msg" class="text-xs mt-2 hidden"></p>
-  </div>
-
-</main>
-
-<!-- テキスト編集モーダル（スマホ: フルスクリーン / PC: センター） -->
-<div id="editor-modal" class="editor-overlay fixed inset-x-0 top-0 z-50 flex-col bg-black/50 backdrop-blur-sm sm:items-center sm:justify-center sm:p-4" style="height:100%">
-  <div id="modal-inner" class="bg-white dark:bg-gray-800 w-full sm:max-w-2xl sm:rounded-2xl flex flex-col shadow-2xl overflow-hidden h-full sm:h-auto sm:max-h-[90vh]">
-    <!-- モーダルヘッダー -->
-    <div class="px-4 py-3 border-b dark:border-gray-700 flex justify-between items-center bg-gray-50 dark:bg-gray-700 flex-shrink-0">
-      <button onclick="closeEditor(false)" class="text-gray-500 dark:text-gray-400 font-bold text-sm">キャンセル</button>
-      <div class="flex gap-1">
-        <button id="btn-mode-rich" class="mode-btn active" onclick="setEditorMode('rich')">リッチ</button>
-        <button id="btn-mode-html" class="mode-btn" onclick="setEditorMode('html')">HTML</button>
-      </div>
-      <button onclick="closeEditor(true)" class="text-[#bf283a] dark:text-[#f08090] font-bold text-sm">完了</button>
-    </div>
-
-    <!-- HTMLモード用ツールバー -->
-    <div id="html-toolbar" class="hidden px-3 py-2 border-b dark:border-gray-700 flex gap-2 overflow-x-auto bg-white dark:bg-gray-800 flex-shrink-0">
-      <button onclick="tb('bold')" title="太字" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"><i class="fas fa-bold text-sm"></i></button>
-      <button onclick="tb('h2')" title="見出し2" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-xs font-bold text-gray-700 dark:text-gray-200">H2</button>
-      <button onclick="tb('h3')" title="見出し3" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-xs font-bold text-gray-700 dark:text-gray-200">H3</button>
-      <button onclick="tb('ul')" title="箇条書き" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"><i class="fas fa-list-ul text-sm"></i></button>
-      <button onclick="tb('p')" title="段落" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"><i class="fas fa-paragraph text-sm"></i></button>
-      <button onclick="tb('link')" title="リンク" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"><i class="fas fa-link text-sm"></i></button>
-      <button onclick="tb('blockquote')" title="引用" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"><i class="fas fa-quote-left text-sm"></i></button>
-      <button onclick="insertEmbed('youtube')" title="YouTube埋め込み" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"><i class="fab fa-youtube text-sm"></i></button>
-      <button onclick="insertEmbed('twitter')" title="X(Twitter)埋め込み" class="w-8 h-8 flex items-center justify-center border dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-xs font-bold text-gray-700 dark:text-gray-200">𝕏</button>
-      <div class="h-8 w-px bg-gray-200 dark:bg-gray-600 mx-1"></div>
-      <button onclick="toggleAiPanel()" class="bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-3 py-0.5 rounded-full text-xs font-bold whitespace-nowrap hover:bg-blue-100 dark:hover:bg-blue-900/50 transition">
-        <i class="fas fa-magic"></i> AIで装飾
-      </button>
-    </div>
-
-    <!-- AI パネル -->
-    <div id="ai-panel" class="hidden border-b dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20 px-3 py-2 flex-shrink-0">
-      <div class="flex gap-2">
-        <input id="ai-instruction" type="text" placeholder="指示を入力（例：見出しをつけて）"
-               style="font-size:16px"
-               class="flex-1 border dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-300">
-        <button id="ai-btn" onclick="runAI()"
-                class="bg-blue-500 text-white px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-blue-600 transition whitespace-nowrap">
-          実行
-        </button>
-      </div>
-    </div>
-
-    <!-- リッチテキストエディタ（Quill） -->
-    <div id="quill-container" class="flex-1 overflow-y-auto bg-white dark:bg-gray-800 min-h-0">
-      <div id="quill-editor"></div>
-    </div>
-
-    <!-- HTMLテキストエリア（HTMLモード） -->
-    <textarea id="modal-textarea"
-              class="hidden w-full p-4 focus:ring-0 border-none focus:outline-none leading-relaxed flex-1 resize-none bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100"
-              style="min-height:300px"
-              placeholder="ここにHTMLを入力...&#10;&#10;例：&#10;&lt;h2&gt;見出し&lt;/h2&gt;&#10;&lt;p&gt;本文テキスト&lt;/p&gt;"></textarea>
-
-    <div class="border-t dark:border-gray-700 flex-shrink-0">
-      <button onclick="togglePreview()" class="w-full py-2 text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition">
-        <i class="fas fa-eye mr-1"></i>プレビューを表示/非表示
-      </button>
-      <div id="modal-preview" class="hidden border-t dark:border-gray-700 p-4 blog-preview overflow-y-auto text-sm text-gray-700 dark:text-gray-300" style="max-height:200px"></div>
-    </div>
-  </div>
-</div>
-
-<!-- バックアップ復元確認モーダル -->
-<div id="restore-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-  <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 w-80 shadow-2xl border dark:border-gray-700">
-    <h2 class="font-bold text-gray-800 dark:text-gray-100 mb-2">バックアップを復元</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">現在の編集内容が失われます。続けますか？</p>
-    <div class="flex gap-3">
-      <button onclick="closeRestoreModal()" class="flex-1 border dark:border-gray-600 rounded-xl py-2 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">キャンセル</button>
-      <button onclick="executeRestore()" class="flex-1 bg-blue-500 text-white rounded-xl py-2 text-sm font-bold hover:bg-blue-600">復元する</button>
-    </div>
-  </div>
-</div>
-
-<!-- 全体プレビューモーダル -->
-<div id="preview-modal" class="hidden fixed inset-0 z-50 bg-white dark:bg-gray-900 overflow-y-auto">
-  <div class="sticky top-0 bg-white dark:bg-gray-800 border-b dark:border-gray-700 px-4 py-3 flex justify-between items-center shadow-sm z-10">
-    <span class="font-bold text-sm text-gray-700 dark:text-gray-200">📄 記事プレビュー</span>
-    <button onclick="closeFullPreview()" class="text-gray-500 dark:text-gray-400 font-bold text-sm hover:text-gray-700 dark:hover:text-gray-200">✕ 閉じる</button>
-  </div>
-  <div class="max-w-2xl mx-auto px-4 py-6 pb-20">
-    <h1 id="fp-title" class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-snug"></h1>
-    <p id="fp-meta" class="text-sm text-gray-400 dark:text-gray-500 mb-4"></p>
-    <div id="fp-tags" class="mb-6"></div>
-    <div id="fp-body" class="blog-preview"></div>
-  </div>
-</div>
-
-<!-- プレビューフローティングボタン -->
-<button onclick="openFullPreview()"
-        class="fixed bottom-6 right-4 z-30 bg-gray-700 dark:bg-gray-600 text-white px-5 py-3 rounded-full shadow-lg text-sm font-bold hover:bg-gray-600 dark:hover:bg-gray-500 transition flex items-center gap-2">
-  <i class="fas fa-eye"></i> プレビュー
-</button>
-
-<div id="toast" class="toast">保存しました</div>
-
-<script>
-let blocks = {{ blocks_json | safe }};
-let articleId = "{{ article.get('id','') if article else '' }}";
-let currentEditIdx = null;
-let tempContent = "";
-let restoreTarget = null;
-let editorMode = 'rich';
-let quill = null;
-
-function initQuill() {
-  if (quill) return;
-  quill = new Quill('#quill-editor', {
-    theme: 'snow',
-    scrollingContainer: '#quill-container',
-    modules: {
-      toolbar: [
-        [{ header: [1, 2, 3, false] }],
-        [{ size: ['small', false, 'large', 'huge'] }],
-        ['bold', 'italic', 'underline', 'strike'],
-        [{ color: [] }],
-        [{ list: 'bullet' }, { list: 'ordered' }],
-        ['blockquote', 'link', 'video'],
-        ['clean']
-      ]
-    }
-  });
-  quill.on('text-change', updatePreview);
-
-  // Quill ツールバーにカスタム X 埋め込みボタンを追加
-  const qlToolbar = document.querySelector('#quill-container .ql-toolbar');
-  if (qlToolbar) {
-    const xGroup = document.createElement('span');
-    xGroup.className = 'ql-formats';
-    const xBtn = document.createElement('button');
-    xBtn.innerHTML = '𝕏';
-    xBtn.title = 'X(Twitter)埋め込み';
-    xBtn.style.cssText = 'font-size:12px;font-weight:bold;width:auto;padding:0 6px;';
-    xBtn.addEventListener('click', () => insertEmbed('twitter'));
-    xGroup.appendChild(xBtn);
-    qlToolbar.appendChild(xGroup);
-  }
-
-  // キーボードを閉じずにツールバーボタンを使えるようにする
-  if (qlToolbar) {
-    // デスクトップ: mousedown で blur を抑制
-    qlToolbar.addEventListener('mousedown', e => e.preventDefault());
-    // iOS: タッチ開始時にカーソル位置を保存し、タッチ終了後に復元
-    let _savedRange = null;
-    let _toolbarTouched = false;
-    qlToolbar.addEventListener('touchstart', () => {
-      _savedRange = quill.getSelection();
-      _toolbarTouched = true;
-    }, { passive: true });
-    qlToolbar.addEventListener('touchend', () => {
-      if (_savedRange !== null) {
-        setTimeout(() => {
-          quill.root.focus({ preventScroll: true });
-          quill.setSelection(_savedRange.index, _savedRange.length, 'silent');
-          _savedRange = null;
-          _toolbarTouched = false;
-        }, 20);
-      }
-    });
-  }
-}
-
-function setEditorMode(mode) {
-  editorMode = mode;
-  const quillCont = document.getElementById('quill-container');
-  const ta        = document.getElementById('modal-textarea');
-  const htmlTb    = document.getElementById('html-toolbar');
-  const btnRich   = document.getElementById('btn-mode-rich');
-  const btnHtml   = document.getElementById('btn-mode-html');
-
-  if (mode === 'rich') {
-    initQuill();
-    quill.root.innerHTML = ta.value;
-    quillCont.classList.remove('hidden');
-    ta.classList.add('hidden');
-    htmlTb.classList.add('hidden');
-    btnRich.classList.add('active');
-    btnHtml.classList.remove('active');
-  } else {
-    if (quill) ta.value = quill.root.innerHTML;
-    quillCont.classList.add('hidden');
-    ta.classList.remove('hidden');
-    htmlTb.classList.remove('hidden');
-    btnHtml.classList.add('active');
-    btnRich.classList.remove('active');
-  }
-  updatePreview();
-}
-
-function getEditorContent() {
-  if (editorMode === 'rich' && quill) return quill.root.innerHTML;
-  return document.getElementById('modal-textarea').value;
-}
-
-function setEditorContent(html) {
-  document.getElementById('modal-textarea').value = html;
-  if (quill) quill.root.innerHTML = html;
-}
-
-function buildAddRow(insertIdx) {
-  const div = document.createElement('div');
-  div.className = 'flex justify-center gap-2 py-2';
-  div.innerHTML = `
-    <button onclick="addBlock(${insertIdx},'text')" class="bg-gray-100 dark:bg-gray-700 hover:bg-[#fdf0f2] dark:hover:bg-[#3d1a20] hover:text-[#bf283a] text-gray-500 dark:text-gray-400 text-xs py-1.5 px-4 rounded-full transition">＋ テキスト</button>
-    <button onclick="addBlock(${insertIdx},'image')" class="bg-gray-100 dark:bg-gray-700 hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:text-blue-500 dark:hover:text-blue-400 text-gray-500 dark:text-gray-400 text-xs py-1.5 px-4 rounded-full transition">＋ 画像</button>
-  `;
-  return div;
-}
-
-function renderBlocks() {
-  const list = document.getElementById('block-list');
-  list.innerHTML = '';
-
-  list.appendChild(buildAddRow(0));
-
-  if (blocks.length === 0) return;
-
-  blocks.forEach((block, i) => {
-    const card = document.createElement('div');
-    card.className = 'block-card bg-white dark:bg-gray-800 rounded-xl border dark:border-gray-700 shadow-sm';
-    card.id = `card-${block.id}`;
-    card.innerHTML = buildCardHTML(block, i);
-    list.appendChild(card);
-    list.appendChild(buildAddRow(i + 1));
-  });
-}
-
-function buildCardHTML(block, i) {
-  const isFirst = i === 0;
-  const isLast  = i === blocks.length - 1;
-  const badge   = block.type === 'text'
-    ? '<span class="text-xs font-bold text-[#bf283a] bg-[#fdf0f2] px-2 py-0.5 rounded">テキスト</span>'
-    : '<span class="text-xs font-bold text-blue-500 bg-blue-50 dark:bg-blue-900/30 dark:text-blue-400 px-2 py-0.5 rounded">画像</span>';
-
-  const controls = `
-    <div class="flex gap-1 text-gray-400">
-      <button onclick="moveBlock(${i},-1)" ${isFirst ? 'disabled' : ''} class="w-7 h-7 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-30 flex items-center justify-center">
-        <i class="fas fa-arrow-up text-xs"></i>
-      </button>
-      <button onclick="moveBlock(${i},1)" ${isLast ? 'disabled' : ''} class="w-7 h-7 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-30 flex items-center justify-center">
-        <i class="fas fa-arrow-down text-xs"></i>
-      </button>
-      <button onclick="deleteBlock(${i})" class="w-7 h-7 rounded hover:bg-red-100 dark:hover:bg-red-900/30 hover:text-red-500 flex items-center justify-center">
-        <i class="fas fa-trash text-xs"></i>
-      </button>
-    </div>`;
-
-  let content = '';
-  if (block.type === 'text') {
-    const preview = block.html
-      ? `<div class="blog-preview text-sm text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded p-2 transition" onclick="openEditor(${i})">${block.html}</div>`
-      : `<div class="text-gray-400 text-sm text-center py-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded transition" onclick="openEditor(${i})"><i class="fas fa-plus-circle mr-1"></i>ここをタップして文章を書く</div>`;
-    content = `<div class="mt-2">${preview}</div>`;
-  } else {
-    content = buildImageContent(block, i);
-  }
-
-  return `<div class="p-4"><div class="flex justify-between items-center mb-1">${badge}${controls}</div>${content}</div>`;
-}
-
-function buildImageContent(block, i) {
-  if (block.url) {
-    return `
-      <div class="mt-2">
-        <img src="${block.url}" alt="${escHtml(block.alt||'')}" class="w-full max-h-64 object-contain rounded-lg bg-gray-50 dark:bg-gray-700">
-        ${block.alt ? `<p class="text-xs text-center text-gray-400 dark:text-gray-500 mt-1 italic">${escHtml(block.alt)}</p>` : ''}
-        <div class="flex gap-2 mt-2">
-          <input type="text" value="${escHtml(block.alt||'')}" placeholder="キャプション"
-                 onchange="updateBlockField(${i},'alt',this.value)"
-                 class="flex-1 border dark:border-gray-600 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100">
-          <input type="number" value="${block.maxWidth||900}" min="200" max="2000" step="100"
-                 onchange="updateBlockField(${i},'maxWidth',parseInt(this.value))"
-                 class="w-24 border dark:border-gray-600 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100">
-          <button onclick="clearImage(${i})" class="text-red-400 hover:text-red-600 text-xs border border-red-200 dark:border-red-700 px-2 py-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 transition">削除</button>
-        </div>
-        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">最大幅: ${block.maxWidth||900}px</p>
-      </div>`;
-  }
-  return `
-    <div class="mt-2">
-      <label class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-6 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 transition">
-        <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 dark:text-gray-500 mb-2"></i>
-        <span class="text-sm text-gray-500 dark:text-gray-400">クリックして画像をアップロード</span>
-        <input type="file" accept="image/*" class="hidden" onchange="uploadBlockImage(${i},this)">
-      </label>
-    </div>`;
-}
-
-function moveBlock(idx, dir) {
-  const ni = idx + dir;
-  if (ni < 0 || ni >= blocks.length) return;
-  [blocks[idx], blocks[ni]] = [blocks[ni], blocks[idx]];
-  renderBlocks();
-}
-
-function deleteBlock(idx) {
-  blocks.splice(idx, 1);
-  renderBlocks();
-}
-
-function addBlock(idx, type) {
-  const id = 'block-' + Math.random().toString(36).substr(2, 8);
-  const nb = type === 'text'
-    ? {type:'text', id, html:'', editorMode:'rich'}
-    : {type:'image', id, url:'', alt:'', maxWidth:900};
-  blocks.splice(idx, 0, nb);
-  renderBlocks();
-  if (type === 'text') openEditor(idx);
-}
-
-function updateBlockField(idx, field, value) { blocks[idx][field] = value; }
-function clearImage(idx) { blocks[idx].url = ''; blocks[idx].alt = ''; renderBlocks(); }
-
-function syncModalToViewport() {
-  const modal = document.getElementById('editor-modal');
-  if (!modal.classList.contains('active')) return;
-  if (!window.visualViewport) return;
-  const vv = window.visualViewport;
-  modal.style.top    = vv.offsetTop + 'px';
-  modal.style.height = vv.height + 'px';
-}
-
-if (window.visualViewport) {
-  window.visualViewport.addEventListener('resize', syncModalToViewport);
-  window.visualViewport.addEventListener('scroll', syncModalToViewport);
-}
-
-function openEditor(idx) {
-  currentEditIdx = idx;
-  const block = blocks[idx];
-  const html = block.html || '';
-  const blockMode = block.editorMode || 'rich';
-  // 両エディタに内容をセットしてからモードを切り替���る
-  document.getElementById('modal-textarea').value = html;
-  if (quill) quill.root.innerHTML = html;
-  tempContent = html;
-  document.getElementById('editor-modal').classList.add('active');
-  document.body.style.overflow = 'hidden';
-  syncModalToViewport();
-  setEditorMode(blockMode);
-}
-
-function closeEditor(save) {
-  if (save && currentEditIdx !== null) {
-    blocks[currentEditIdx].html = getEditorContent();
-    blocks[currentEditIdx].editorMode = editorMode;
-  }
-  currentEditIdx = null;
-  const modal = document.getElementById('editor-modal');
-  modal.classList.remove('active');
-  modal.style.top    = '';
-  modal.style.height = '';
-  document.body.style.overflow = '';
-  document.getElementById('ai-panel').classList.add('hidden');
-  document.getElementById('modal-preview').classList.add('hidden');
-  renderBlocks();
-}
-
-function updatePreview() {
-  const prev = document.getElementById('modal-preview');
-  if (!prev.classList.contains('hidden')) prev.innerHTML = getEditorContent();
-}
-
-function togglePreview() {
-  const prev = document.getElementById('modal-preview');
-  prev.classList.toggle('hidden');
-  if (!prev.classList.contains('hidden')) prev.innerHTML = getEditorContent();
-}
-
-document.getElementById('modal-textarea').addEventListener('input', updatePreview);
-
-function tb(type) {
-  const ta = document.getElementById('modal-textarea');
-  const s = ta.selectionStart, e = ta.selectionEnd;
-  const sel = ta.value.substring(s, e);
-  let open = '', close = '', full = null;
-  if (type === 'bold')  { open = '<strong>'; close = '</strong>'; }
-  else if (type === 'h2') { full = `<h2>${sel || '見出し'}</h2>`; }
-  else if (type === 'h3') { full = `<h3>${sel || '見出し'}</h3>`; }
-  else if (type === 'p')  { full = `<p>${sel || 'テキスト'}</p>`; }
-  else if (type === 'ul') { full = `<ul>\n  <li>${sel || '項目'}</li>\n</ul>`; }
-  else if (type === 'blockquote') {
-    full = `<blockquote style="background-color:rgba(128,128,128,0.1);border-left:5px solid #e07297;padding:15px 20px;margin:25px 0;border-radius:5px;color:inherit;">${sel || '引用テキスト'}</blockquote>`;
-  }
-  else if (type === 'link') {
-    const href = prompt('URLを入力:');
-    if (href) full = `<a href="${href}">${sel || href}</a>`;
-  }
-  if (full !== null) {
-    ta.value = ta.value.substring(0, s) + full + ta.value.substring(e);
-    ta.setSelectionRange(s + full.length, s + full.length);
-  } else if (open) {
-    const replaced = open + sel + close;
-    ta.value = ta.value.substring(0, s) + replaced + ta.value.substring(e);
-    ta.setSelectionRange(s + open.length, s + open.length + sel.length);
-  }
-  updatePreview(); ta.focus();
-}
-
-function toggleAiPanel() { document.getElementById('ai-panel').classList.toggle('hidden'); }
-
-async function runAI() {
-  const ins = document.getElementById('ai-instruction').value.trim();
-  const currentHtml = getEditorContent();
-  if (!ins || !currentHtml) { alert('本文と指示を入力してください'); return; }
-  const btn = document.getElementById('ai-btn');
-  btn.disabled = true; btn.textContent = '処理中...';
-  try {
-    const res = await fetch('/api/ai-decorate', {
-      method: 'POST', headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({html: currentHtml, instruction: ins})
-    });
-    const data = await res.json();
-    if (data.success) { setEditorContent(data.html); setEditorMode('html'); }
-    else { alert('AIエラー: ' + data.error); }
-  } catch(err) { alert('通信エラー: ' + err.message); }
-  finally { btn.disabled = false; btn.textContent = '実行'; }
-}
-
-async function uploadBlockImage(idx, input) {
-  const file = input.files[0];
-  if (!file) return;
-  const fd = new FormData();
-  fd.append('file', file);
-  fd.append('max_width', blocks[idx].maxWidth || 900);
-  try {
-    const res = await fetch('/api/upload-image', {method:'POST', body: fd});
-    const data = await res.json();
-    if (data.success && data.url) { blocks[idx].url = data.url; renderBlocks(); }
-    else { alert('アップロード失敗: ' + (data.error||'')); }
-  } catch(err) { alert('通信エラー: ' + err.message); }
-}
-
-async function uploadEyecatch(input) {
-  const file = input.files[0];
-  if (!file) return;
-  const fd = new FormData();
-  fd.append('file', file);
-  fd.append('max_width', '1200');
-  try {
-    const res = await fetch('/api/upload-image', {method:'POST', body: fd});
-    const data = await res.json();
-    if (data.success && data.url) {
-      document.getElementById('eyecatch-url').value = data.url;
-      document.getElementById('eyecatch-img').src = data.url;
-      document.getElementById('eyecatch-preview').classList.remove('hidden');
-      document.getElementById('eyecatch-upload').classList.add('hidden');
-    } else { alert('アップロード失敗: ' + (data.error||'')); }
-  } catch(err) { alert('通信エラー: ' + err.message); }
-}
-
-function removeEyecatch() {
-  document.getElementById('eyecatch-url').value = '';
-  document.getElementById('eyecatch-preview').classList.add('hidden');
-  document.getElementById('eyecatch-upload').classList.remove('hidden');
-}
-
-function applySelectedBackup() {
-  const sel = document.getElementById('backup-select');
-  if (!sel) return;
-  const opt = sel.options[sel.selectedIndex];
-  if (!opt) return;
-  try {
-    restoreTarget = JSON.parse(opt.getAttribute('data-backup'));
-    document.getElementById('restore-modal').classList.remove('hidden');
-  } catch(e) { alert('バックアップデータの読み込みに失敗しました'); }
-}
-
-function closeRestoreModal() {
-  document.getElementById('restore-modal').classList.add('hidden');
-  restoreTarget = null;
-}
-
-function executeRestore() {
-  if (!restoreTarget) return;
-  const bk = restoreTarget;
-  if (bk.contentBlocks) {
-    try { blocks = JSON.parse(bk.contentBlocks); }
-    catch { blocks = [{type:'text', id:'block-0', html: bk.contentRich || bk.content || ''}]; }
-  } else {
-    blocks = [{type:'text', id:'block-0', html: bk.contentRich || bk.content || ''}];
-  }
-  if (bk.title) document.getElementById('title-input').value = bk.title.replace(/^【下書き】/, '');
-  if (bk.tags) {
-    const tagsEl = document.getElementById('tags-input');
-    tagsEl.value = bk.tags;
-    tagsEl.style.height = 'auto';
-    tagsEl.style.height = tagsEl.scrollHeight + 'px';
-  }
-  const ec = bk.eyecatch;
-  if (ec) {
-    const ecUrl = typeof ec === 'object' ? ec.url : ec;
-    if (ecUrl) {
-      document.getElementById('eyecatch-url').value = ecUrl;
-      document.getElementById('eyecatch-img').src = ecUrl;
-      document.getElementById('eyecatch-preview').classList.remove('hidden');
-      document.getElementById('eyecatch-upload').classList.add('hidden');
-    }
-  }
-  closeRestoreModal();
-  renderBlocks();
-  showToast('バックアップを復元しました');
-}
-
-async function save(status) {
-  const title = document.getElementById('title-input').value.trim();
-  if (!title) { alert('タイトルを入力してください'); return; }
-  const hasContent = blocks.some(b => (b.html && b.html.trim()) || b.url);
-  if (!hasContent) { alert('本文を入力してください'); return; }
-  const payload = {
-    article_id: articleId || null, title,
-    author: document.getElementById('author-select').value,
-    tags:   document.getElementById('tags-input').value,
-    eyecatch: document.getElementById('eyecatch-url').value,
-    blocks, status,
-  };
-  const headerBtns = document.querySelectorAll('header button');
-  headerBtns.forEach(b => b.disabled = true);
-  try {
-    const res = await fetch('/api/save', {
-      method:'POST', headers:{'Content-Type':'application/json'},
-      body: JSON.stringify(payload)
-    });
-    const data = await res.json();
-    if (data.success) {
-      const backupMsg = data.backup_ok ? '' : '（バックアップ失敗）';
-      if (!data.backup_ok && data.backup_err) console.warn('backup error:', data.backup_err);
-      if (status === 'draft') {
-        // 下書き保存 → リロードしてバックアップ一覧を更新
-        const newId = data.id || articleId;
-        sessionStorage.setItem('draft_saved_msg', '✅ 下書き保存しました' + backupMsg);
-        window.location.href = `/admin/edit/${newId}`;
-        return;
-      }
-      // 公開保存
-      if (!articleId && data.id) {
-        articleId = data.id;
-        history.replaceState({}, '', `/admin/edit/${data.id}`);
-        document.querySelector('header h1').textContent = '📝 記事の編集';
-      }
-      if (status === 'public' && data.id !== articleId) {
-        articleId = data.id;
-        history.replaceState({}, '', `/admin/edit/${data.id}`);
-      }
-      showToast('公開しました！' + backupMsg);
-    } else { alert('保存エラー: ' + (data.error || '不明なエラー')); }
-  } catch(err) { alert('通信エラー: ' + err.message); }
-  finally { headerBtns.forEach(b => b.disabled = false); }
-}
-
-function _pasteHtml(html) {
-  if (editorMode === 'rich' && quill) {
-    const range = quill.getSelection(true) || { index: quill.getLength() - 1 };
-    quill.clipboard.dangerouslyPasteHTML(range.index, html);
-  } else {
-    const ta = document.getElementById('modal-textarea');
-    const s = ta.selectionStart, e = ta.selectionEnd;
-    ta.value = ta.value.substring(0, s) + html + ta.value.substring(e);
-    ta.setSelectionRange(s + html.length, s + html.length);
-    updatePreview();
-  }
-}
-
-function insertEmbed(type) {
-  if (type === 'youtube') {
-    const url = prompt('YouTube URLを入力してください\n例: https://www.youtube.com/watch?v=XXXXX');
-    if (!url) return;
-    const m = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
-    if (!m) { alert('YouTube URLが認識できませんでした'); return; }
-    const html = `<div class="embed-yt"><iframe src="https://www.youtube.com/embed/${m[1]}" allowfullscreen></iframe></div>`;
-    _pasteHtml(html);
-  } else if (type === 'twitter') {
-    const url = prompt('X(Twitter) のポストURLを入力してください\n例: https://x.com/user/status/123...');
-    if (!url) return;
-    if (!/(?:twitter\.com|x\.com)\/\w+\/status\/\d+/.test(url)) {
-      alert('X(Twitter)のURLが認識できませんでした'); return;
-    }
-    const html = `<blockquote class="twitter-tweet"><a href="${url}"></a></blockquote>`;
-    _pasteHtml(html);
-  }
-}
-
-function blocksToHtml() {
-  return blocks.map(b => {
-    if (b.type === 'text') return b.html || '';
-    if (b.type === 'image' && b.url) {
-      const caption = b.alt
-        ? `<p style="text-align:center;font-size:0.8em;color:#9ca3af;margin-top:4px;">${escHtml(b.alt)}</p>`
-        : '';
-      return `<figure style="margin:8px 0;"><img src="${escHtml(b.url)}" alt="${escHtml(b.alt||'')}" style="width:${b.maxWidth||900}px;max-width:100%;height:auto;display:block;margin:0 auto;">${caption}</figure>`;
-    }
-    return '';
-  }).join('\n');
-}
-
-function openFullPreview() {
-  const title  = document.getElementById('title-input').value.trim() || '（タイトルなし）';
-  const author = document.getElementById('author-select').value;
-  const tags   = document.getElementById('tags-input').value
-    .split(',').map(t => t.trim()).filter(Boolean);
-
-  document.getElementById('fp-title').textContent = title;
-  document.getElementById('fp-meta').textContent  = '👤 ' + author;
-  document.getElementById('fp-tags').innerHTML    =
-    tags.map(t => `<span class="tag-badge">#${escHtml(t)}</span>`).join('');
-  document.getElementById('fp-body').innerHTML    = blocksToHtml();
-  document.getElementById('preview-modal').classList.remove('hidden');
-  document.body.style.overflow = 'hidden';
-}
-
-function closeFullPreview() {
-  document.getElementById('preview-modal').classList.add('hidden');
-  document.body.style.overflow = '';
-}
-
-function showToast(msg) {
-  const t = document.getElementById('toast');
-  t.textContent = msg; t.classList.add('show');
-  setTimeout(() => t.classList.remove('show'), 2500);
-}
-
-function escHtml(s) {
-  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-}
-
-async function runGlobalAI() {
-  const ins = document.getElementById('global-ai-instruction').value.trim();
-  if (!ins) { alert('装飾の指示を入力してください'); return; }
-  const textBlocks = blocks.filter(b => b.type === 'text' && b.html && b.html.trim());
-  if (textBlocks.length === 0) { alert('装飾するテキストブロックがありません'); return; }
-  const btn = document.getElementById('global-ai-btn');
-  const msg = document.getElementById('global-ai-msg');
-  btn.disabled = true;
-  btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>処理中...';
-  msg.textContent = ''; msg.classList.add('hidden');
-  try {
-    const payload = textBlocks.map(b => ({ id: b.id, html: b.html }));
-    const res = await fetch('/api/ai-decorate-all', {
-      method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ blocks: payload, instruction: ins })
-    });
-    const data = await res.json();
-    if (data.success && data.decorated) {
-      blocks.forEach(b => {
-        if (b.type === 'text' && data.decorated[b.id] !== undefined) {
-          b.html = data.decorated[b.id];
-          b.editorMode = 'html';
-        }
-      });
-      renderBlocks();
-      msg.textContent = '✅ 全ブロックを装飾しました';
-      msg.className = 'text-xs text-green-600 dark:text-green-400 mt-2';
-      msg.classList.remove('hidden');
-      setTimeout(() => msg.classList.add('hidden'), 3000);
-    } else {
-      msg.textContent = 'AIエラー: ' + (data.error || '不明なエラー');
-      msg.className = 'text-xs text-red-500 mt-2';
-      msg.classList.remove('hidden');
-    }
-  } catch(err) {
-    msg.textContent = '通信エラー: ' + err.message;
-    msg.className = 'text-xs text-red-500 mt-2';
-    msg.classList.remove('hidden');
-  } finally {
-    btn.disabled = false;
-    btn.innerHTML = '<i class="fas fa-magic mr-1"></i>実行';
-  }
-}
-
-renderBlocks();
-
-// リロード後の保存完了バナー表示
-(function() {
-  const msg = sessionStorage.getItem('draft_saved_msg');
-  if (msg) {
-    sessionStorage.removeItem('draft_saved_msg');
-    const banner = document.getElementById('save-banner');
-    banner.textContent = msg;
-    banner.classList.remove('hidden');
-    setTimeout(() => banner.classList.add('hidden'), 4000);
-  }
-})();
-
-document.addEventListener('keydown', e => {
-  if (e.key === 'Escape' && document.getElementById('editor-modal').classList.contains('active')) closeEditor(false);
-});
-</script>
-<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
-<script>
-window.addEventListener('load', () => {
-  initQuill();
-  document.getElementById('html-toolbar').classList.add('hidden');
-  document.getElementById('modal-textarea').classList.add('hidden');
-  document.getElementById('quill-container').classList.remove('hidden');
-  const titleEl = document.getElementById('title-input');
-  titleEl.style.height = 'auto';
-  titleEl.style.height = titleEl.scrollHeight + 'px';
-  const tagsEl = document.getElementById('tags-input');
-  tagsEl.style.height = 'auto';
-  tagsEl.style.height = tagsEl.scrollHeight + 'px';
-});
-</script>
-</body>
-</html>

templates/admin_list.html

@@ -1,92 +0,0 @@
-{% extends "base.html" %}
-{% block title %}記事管理 - わせます9期ブログ{% endblock %}
-{% block body %}
-<div class="max-w-2xl mx-auto px-4 py-6">
-  <div class="flex justify-between items-center mb-6">
-    <div>
-      <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">📋 記事管理</h1>
-      <a href="/" class="text-xs text-gray-400 dark:text-gray-500 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">← ブログに戻る</a>
-    </div>
-    <div class="flex gap-2">
-      <a href="/admin/new"
-         class="bg-[#bf283a] text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-[#a01f2f] transition">
-        ✏️ 新規記事
-      </a>
-      <form method="post" action="/admin/logout">
-        <button type="submit" class="border dark:border-gray-600 px-4 py-2 rounded-xl text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition">
-          ログアウト
-        </button>
-      </form>
-    </div>
-  </div>
-
-  <div class="space-y-3">
-    {% for a in articles %}
-      {% set tags = get_tags(a) %}
-      {% set is_draft = a.get("title","").startswith("【下書き】") %}
-      <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-4">
-        <div class="flex justify-between items-start gap-2">
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 mb-1">
-              {% if is_draft %}
-                <span class="text-[10px] whitespace-nowrap flex-shrink-0 bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-400 px-2 py-0.5 rounded-full font-bold">下書</span>
-              {% else %}
-                <span class="text-[10px] whitespace-nowrap flex-shrink-0 bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 px-2 py-0.5 rounded-full font-bold">公開</span>
-              {% endif %}
-              <span class="font-bold text-gray-800 dark:text-gray-100 text-sm truncate">{{ a.get("title","無題") }}</span>
-            </div>
-            <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">{{ a.get("author","") }} ｜ ID: {{ a.get("id","") }}</p>
-            <div>{% for t in tags %}<span class="tag-badge">#{{ t }}</span>{% endfor %}</div>
-          </div>
-          <div class="flex gap-2 flex-shrink-0">
-            <a href="/admin/edit/{{ a.get('id','') }}"
-               class="bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-blue-100 dark:hover:bg-blue-900/50 transition">
-              📝 編集
-            </a>
-            <button onclick="confirmDelete(this.dataset.id, this.dataset.title)"
-                    data-id="{{ a.get('id','') }}"
-                    data-title="{{ a.get('title','') | e }}"
-                    class="bg-red-50 dark:bg-red-900/30 text-red-500 dark:text-red-400 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-red-100 dark:hover:bg-red-900/50 transition">
-              🗑️
-            </button>
-          </div>
-        </div>
-      </div>
-    {% else %}
-      <div class="text-center text-gray-400 dark:text-gray-500 py-16">記事がありません</div>
-    {% endfor %}
-  </div>
-</div>
-
-<!-- 削除確認モーダル -->
-<div id="delete-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-  <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 w-80 shadow-2xl border dark:border-gray-700">
-    <h2 class="font-bold text-gray-800 dark:text-gray-100 mb-2">削除の確認</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">「<span id="delete-title" class="font-bold text-gray-700 dark:text-gray-200"></span>」を削除しますか？この操作は取り消せません。</p>
-    <div class="flex gap-3">
-      <button onclick="closeDeleteModal()" class="flex-1 border dark:border-gray-600 rounded-xl py-2 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition">キャンセル</button>
-      <button onclick="executeDelete()" class="flex-1 bg-red-500 text-white rounded-xl py-2 text-sm font-bold hover:bg-red-600 transition">削除する</button>
-    </div>
-  </div>
-</div>
-
-<script>
-let deleteTargetId = null;
-function confirmDelete(id, title) {
-  deleteTargetId = id;
-  document.getElementById('delete-title').textContent = title;
-  document.getElementById('delete-modal').classList.remove('hidden');
-}
-function closeDeleteModal() {
-  document.getElementById('delete-modal').classList.add('hidden');
-  deleteTargetId = null;
-}
-async function executeDelete() {
-  if (!deleteTargetId) return;
-  const res = await fetch(`/api/article/${deleteTargetId}`, {method: 'DELETE'});
-  const data = await res.json();
-  if (data.success) { location.reload(); }
-  else { alert('削除に失敗しました: ' + (data.error || '')); closeDeleteModal(); }
-}
-</script>
-{% endblock %}

templates/admin_login.html

@@ -1,30 +0,0 @@
-{% extends "base.html" %}
-{% block title %}管理者ログイン - わせます9期ブログ{% endblock %}
-{% block body %}
-<div class="min-h-screen flex items-center justify-center px-4">
-  <div class="w-full max-w-sm">
-    <div class="text-center mb-8">
-      <h1 class="text-2xl font-bold text-[#bf283a] dark:text-[#f08090] mb-1">わせます9期ブログ</h1>
-      <p class="text-sm text-gray-400 dark:text-gray-500">管理者ログイン</p>
-    </div>
-    <form method="post" action="/admin/login" class="bg-white dark:bg-gray-800 rounded-2xl shadow-md p-6 space-y-4 border dark:border-gray-700">
-      {% if error %}
-        <div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 text-red-600 dark:text-red-400 rounded-lg px-4 py-2 text-sm">{{ error }}</div>
-      {% endif %}
-      <div>
-        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">合言葉</label>
-        <input type="text" name="password" autofocus
-               class="w-full border dark:border-gray-600 rounded-xl px-4 py-3 text-base bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#e09099]"
-               placeholder="合言葉を入力">
-      </div>
-      <button type="submit"
-              class="w-full bg-[#bf283a] text-white py-3 rounded-xl font-bold text-base hover:bg-[#a01f2f] transition">
-        ログイン
-      </button>
-    </form>
-    <div class="text-center mt-4">
-      <a href="/" class="text-sm text-gray-400 dark:text-gray-500 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">← ブログに戻る</a>
-    </div>
-  </div>
-</div>
-{% endblock %}

templates/base.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{% block title %}わせます9期ブログ{% endblock %}</title>
-  <script>tailwind.config = { darkMode: 'media' }</script>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-  <style>
-    .blog-content { font-family: sans-serif; font-size: 16px; line-height: 1.8; word-break: break-word; }
-    .blog-content h1,.blog-content h2,.blog-content h3 { margin: 1.2em 0 0.6em; font-weight: bold; }
-    .blog-content h1 { font-size: 1.6rem; }
-    .blog-content h2 { border-left: 5px solid #bf283a; padding-left: 12px; font-size: 1.25rem; }
-    .blog-content h3 { font-size: 1.1rem; }
-    .blog-content p  { margin-bottom: 0.75em; }
-    .blog-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; display: block; }
-    .blog-content iframe { max-width: 100%; display: block; margin: 8px auto; border-radius: 8px; border: none; }
-    .blog-content .embed-yt { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 12px 0; border-radius: 8px; }
-    .blog-content .embed-yt iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; }
-    .blog-content blockquote.twitter-tweet { margin: 12px auto; }
-    .blog-content ul,.blog-content ol { padding-left: 1.5em; margin-bottom: 0.75em; }
-    .blog-content li { margin-bottom: 0.25em; }
-    .tag-badge { display: inline-block; background: #e0f2fe; color: #0369a1; border-radius: 9999px; padding: 2px 10px; font-size: 12px; margin: 2px; }
-    @media (prefers-color-scheme: dark) {
-      .blog-content { color: #e5e7eb; }
-      .blog-content h2 { border-left-color: #f08090; }
-      .blog-content a { color: #f08090; }
-      .tag-badge { background: #1e3a4a; color: #7dd3fc; }
-    }
-  </style>
-  {% block head %}{% endblock %}
-</head>
-<body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
-  {% block body %}{% endblock %}
-</body>
-</html>

templates/blog_detail.html

@@ -1,209 +0,0 @@
-{% extends "base.html" %}
-{% block title %}{{ article.get("title","記事") if article else "記事が見つかりません" }} - わせます9期ブログ{% endblock %}
-{% block head %}
-{% if article %}
-{% set ec = article.get("eyecatch") %}
-{% set ec_url = ec.get("url","") if ec is mapping else (ec or "") %}
-{% set share_url = space_url ~ "?id=" ~ article.get("id","") %}
-{% set og_title = article.get("title","") ~ " | わせます9期ブログ" %}
-<meta property="og:type"        content="article">
-<meta property="og:title"       content="{{ og_title }}">
-<meta property="og:url"         content="{{ share_url }}">
-<meta property="og:site_name"   content="わせます9期ブログ">
-{% if ec_url %}
-<meta property="og:image"       content="{{ ec_url }}">
-<meta name="twitter:card"       content="summary_large_image">
-<meta name="twitter:image"      content="{{ ec_url }}">
-{% else %}
-<meta name="twitter:card"       content="summary">
-{% endif %}
-<meta name="twitter:title"      content="{{ og_title }}">
-{% endif %}
-{% endblock %}
-
-{% macro render_comment(c, article_id, depth) %}
-<div class="{% if depth > 0 %}ml-5 pl-3 border-l-2 border-pink-100 dark:border-gray-600{% endif %} mb-3">
-  <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-4">
-    <div class="flex justify-between items-center mb-1">
-      <span class="font-bold text-sm text-gray-700 dark:text-gray-200">{{ c.get("name","名無し") }}</span>
-      <span class="text-xs text-gray-400 dark:text-gray-500">{{ c.get("createdAt","") | to_jst }}</span>
-    </div>
-    <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">{{ c.get("body","") }}</p>
-    <button onclick="toggleReplyForm('{{ c.id }}')"
-            class="text-xs text-gray-400 dark:text-gray-500 mt-2 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">
-      ↩ 返信する
-    </button>
-    <div id="reply-{{ c.id }}" class="hidden mt-3 space-y-2">
-      <input id="reply-name-{{ c.id }}" type="text" placeholder="名前（省略可）" maxlength="50"
-             class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099]">
-      <textarea id="reply-body-{{ c.id }}" placeholder="返信を入力..." maxlength="500" rows="2"
-                class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099] resize-none"></textarea>
-      <p id="reply-msg-{{ c.id }}" class="text-sm hidden"></p>
-      <div class="flex gap-2">
-        <button onclick="submitComment('{{ article_id }}', '{{ c.id }}')"
-                class="flex-1 bg-[#bf283a] text-white py-1.5 rounded-lg text-sm font-bold hover:bg-[#a01f2f] transition">
-          返信する
-        </button>
-        <button onclick="toggleReplyForm('{{ c.id }}')"
-                class="px-3 border dark:border-gray-600 text-gray-500 dark:text-gray-400 py-1.5 rounded-lg text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition">
-          キャンセル
-        </button>
-      </div>
-    </div>
-  </div>
-  {% for reply in c.replies %}
-    {{ render_comment(reply, article_id, depth + 1) }}
-  {% endfor %}
-</div>
-{% endmacro %}
-
-{% block body %}
-<div class="max-w-2xl mx-auto px-4 py-6">
-  <a href="/" class="inline-block mb-4 text-sm text-gray-500 dark:text-gray-400 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">← 一覧に戻る</a>
-
-  {% if not article %}
-    <div class="text-center text-gray-400 dark:text-gray-500 py-16">記事が見つかりませんでした</div>
-  {% else %}
-    {% set ec = article.get("eyecatch") %}
-    {% set ec_url = ec.get("url","") if ec is mapping else (ec or "") %}
-    {% set article_id = article.get("id","") %}
-    {% if ec_url %}
-      <img src="{{ ec_url }}" alt="" class="w-full h-64 object-cover rounded-xl mb-6">
-    {% endif %}
-
-    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">{{ article.get("title","無題") }}</h1>
-    <p class="text-sm text-gray-400 dark:text-gray-500 mb-3">👤 {{ article.get("author","") }} ｜ 📅 {{ article.get("publishedAt","")[:10] }} ｜ <a href="#comments" class="hover:text-[#bf283a] dark:hover:text-[#f08090] transition">💬 {{ comment_count }}件</a></p>
-    <div class="mb-4">
-      {% for t in tags %}<span class="tag-badge">#{{ t }}</span>{% endfor %}
-    </div>
-
-    <hr class="my-4 border-gray-200 dark:border-gray-700">
-    <div class="blog-content text-gray-800 dark:text-gray-200">{{ content | safe }}</div>
-    <hr class="my-6 border-gray-200 dark:border-gray-700">
-
-    <!-- いいね -->
-    <div class="flex justify-center mb-8">
-      <button id="like-btn" onclick="likeArticle('{{ article_id }}')"
-              class="w-20 h-20 rounded-full border-2 border-[#e09099] dark:border-[#c07080] flex flex-col items-center justify-center gap-0.5 hover:bg-[#fdf0f2] dark:hover:bg-[#3d1a20] transition group">
-        <span id="like-icon" class="text-2xl transition-transform group-hover:scale-110 leading-none text-[#bf283a] dark:text-[#f08090]">♡</span>
-        <span id="like-count" class="text-xs font-bold text-[#bf283a] dark:text-[#f08090] leading-none">{{ article.get("likes", 0) or 0 }}</span>
-      </button>
-    </div>
-
-    <!-- シェア -->
-    {% if space_url %}
-    {% set share_link = space_url ~ "?id=" ~ article_id %}
-    {% set share_text = article.get("title","") ~ " | わせます9期ブログ\n" ~ share_link %}
-    <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 mb-6 border dark:border-gray-700">
-      <p class="text-sm font-bold text-gray-600 dark:text-gray-300 mb-3">🔗 この記事をシェアする</p>
-      <div class="flex gap-2 mb-3">
-        <a href="https://twitter.com/intent/tweet?text={{ share_text | urlencode }}"
-           target="_blank" rel="noopener"
-           class="flex items-center gap-2 bg-black text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-gray-800 transition">
-          <svg viewBox="0 0 24 24" class="w-4 h-4 fill-current"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.259 5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
-          Xで共有
-        </a>
-        <button id="copy-btn"
-                onclick="navigator.clipboard.writeText(document.getElementById('share-text').value).then(()=>{this.textContent='✅ コピー済み';setTimeout(()=>{this.textContent='テキストをコピー'},2000)})"
-                class="flex-1 border dark:border-gray-600 text-gray-600 dark:text-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition">
-          テキストをコピー
-        </button>
-      </div>
-      <textarea id="share-text" readonly rows="2"
-                class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-xs bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 focus:outline-none resize-none leading-relaxed">{{ article.get('title','') }} | わせます9期ブログ
-{{ share_link }}</textarea>
-    </div>
-    {% endif %}
-
-    <!-- コメント -->
-    <section id="comments">
-      <h2 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4">💬 コメント</h2>
-      {% if comments %}
-        {% for c in comments %}
-          {{ render_comment(c, article_id, 0) }}
-        {% endfor %}
-      {% else %}
-        <p class="text-sm text-gray-400 dark:text-gray-500 mb-4">まだコメントはありません。</p>
-      {% endif %}
-
-      <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-4 mt-4">
-        <h3 class="font-bold text-sm text-gray-700 dark:text-gray-200 mb-3">コメントを投稿</h3>
-        <input id="comment-name" type="text" placeholder="名前（省略可）" maxlength="50"
-               class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-sm mb-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099]">
-        <textarea id="comment-body" placeholder="コメントを入力..." maxlength="500" rows="3"
-                  class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-sm mb-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099] resize-none"></textarea>
-        <button onclick="submitComment('{{ article_id }}')"
-                class="w-full bg-[#bf283a] text-white py-2 rounded-lg text-sm font-bold hover:bg-[#a01f2f] transition">投稿する</button>
-        <p id="comment-msg" class="text-sm text-center mt-2 hidden"></p>
-      </div>
-    </section>
-  {% endif %}
-</div>
-<script>
-async function submitComment(articleId, parentId = '') {
-  const nameEl = parentId ? document.getElementById(`reply-name-${parentId}`) : document.getElementById('comment-name');
-  const bodyEl = parentId ? document.getElementById(`reply-body-${parentId}`) : document.getElementById('comment-body');
-  const msgEl  = parentId ? document.getElementById(`reply-msg-${parentId}`) : document.getElementById('comment-msg');
-  const name = nameEl.value.trim();
-  const body = bodyEl.value.trim();
-  if (!body) { showMsg(msgEl, 'コメントを入力してください', 'text-red-500'); return; }
-  const res = await fetch('/api/comment', {
-    method: 'POST', headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({article_id: articleId, name, body, parent_id: parentId})
-  });
-  const data = await res.json();
-  if (data.success) { location.reload(); }
-  else { showMsg(msgEl, '投稿に失敗しました', 'text-red-500'); }
-}
-
-function toggleReplyForm(commentId) {
-  const el = document.getElementById(`reply-${commentId}`);
-  el.classList.toggle('hidden');
-  if (!el.classList.contains('hidden')) {
-    el.querySelector('textarea').focus();
-  }
-}
-
-async function likeArticle(articleId) {
-  const key = `liked_${articleId}`;
-  const isLiked = !!localStorage.getItem(key);
-  const btn = document.getElementById('like-btn');
-  btn.disabled = true;
-  const res = await fetch(`/api/like/${articleId}`, {
-    method: 'POST', headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({action: isLiked ? 'remove' : 'add'})
-  });
-  const data = await res.json();
-  if (data.success) {
-    if (isLiked) {
-      localStorage.removeItem(key);
-      document.getElementById('like-icon').textContent = '♡';
-      btn.classList.remove('bg-[#fdf0f2]', 'dark:bg-[#3d1a20]');
-    } else {
-      localStorage.setItem(key, '1');
-      document.getElementById('like-icon').textContent = '♥';
-      btn.classList.add('bg-[#fdf0f2]', 'dark:bg-[#3d1a20]');
-    }
-    document.getElementById('like-count').textContent = data.likes;
-  }
-  btn.disabled = false;
-}
-
-function showMsg(el, text, cls) {
-  el.textContent = text; el.className = `text-sm text-center mt-2 ${cls}`; el.classList.remove('hidden');
-}
-
-// ページ読み込み時：すでにいいね済みなら見た目を反映
-(function() {
-  const articleId = '{{ article.get("id","") if article else "" }}';
-  if (articleId && localStorage.getItem(`liked_${articleId}`)) {
-    document.getElementById('like-icon').textContent = '♥';
-    const btn = document.getElementById('like-btn');
-    if (btn) btn.classList.add('bg-[#fdf0f2]', 'dark:bg-[#3d1a20]');
-  }
-})();
-</script>
-{% if article and 'twitter-tweet' in content %}
-<script async src="https://platform.twitter.com/widgets.js"></script>
-{% endif %}
-{% endblock %}

templates/blog_list.html

@@ -1,82 +0,0 @@
-{% extends "base.html" %}
-{% block title %}わせます9期ブログ{% endblock %}
-{% block body %}
-<div class="max-w-2xl mx-auto px-4 py-6">
-  <div class="flex justify-between items-center mb-6">
-    <h1 class="text-2xl font-bold text-[#bf283a] dark:text-[#f08090]">わせます9期ブログ</h1>
-    <a href="/admin" class="text-sm text-gray-400 dark:text-gray-500 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">🛠️ 管理</a>
-  </div>
-
-  <!-- 検索・絞り込み -->
-  <form method="get" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border dark:border-gray-700 p-4 mb-6 space-y-2">
-    <div class="flex gap-2">
-      <input type="text" name="q" value="{{ q }}" placeholder="🔍 タイトル・本文を検索"
-             class="flex-1 border dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099]">
-      <button type="submit" class="bg-[#bf283a] text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-[#a01f2f] transition">検索</button>
-    </div>
-    <div class="flex gap-2 flex-wrap">
-      <select name="author" onchange="this.form.submit()"
-              class="border dark:border-gray-600 rounded-lg px-3 py-1.5 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none">
-        <option value="">👤 全員</option>
-        {% for a in author_list %}
-          <option value="{{ a }}" {% if author == a %}selected{% endif %}>{{ a }}</option>
-        {% endfor %}
-      </select>
-      <select name="tag" onchange="this.form.submit()"
-              class="border dark:border-gray-600 rounded-lg px-3 py-1.5 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none">
-        <option value="">🏷️ 全タグ</option>
-        {% for t in all_tags %}
-          <option value="{{ t }}" {% if tag == t %}selected{% endif %}>{{ t }}</option>
-        {% endfor %}
-      </select>
-      {% if q or author or tag %}
-        <a href="/" class="text-sm text-gray-400 dark:text-gray-500 hover:text-[#bf283a] dark:hover:text-[#f08090] transition self-center ml-2">✕ リセット</a>
-      {% endif %}
-    </div>
-  </form>
-
-  <!-- 記事一覧 -->
-  {% if articles %}
-    {% for a in articles %}
-      {% set ec = a.get("eyecatch") %}
-      {% set ec_url = ec.get("url","") if ec is mapping else (ec or "") %}
-      {% set tags = get_tags(a) %}
-      {% set snippet = make_snippet(get_content(a)) %}
-      <a href="/?id={{ a.id }}" class="block bg-white dark:bg-gray-800 rounded-xl border dark:border-gray-700 shadow-sm hover:shadow-md hover:border-[#bf283a] dark:hover:border-[#f08090] transition mb-4 overflow-hidden">
-        <div class="flex gap-4 p-4">
-          {% if ec_url %}
-            <img src="{{ ec_url }}" alt="" class="w-24 h-24 object-cover rounded-lg flex-shrink-0">
-          {% else %}
-            <div class="w-24 h-24 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center flex-shrink-0 text-gray-400 dark:text-gray-500 text-xs">No Image</div>
-          {% endif %}
-          <div class="flex-1 min-w-0">
-            <h2 class="font-bold text-gray-800 dark:text-gray-100 text-base leading-snug mb-1 truncate">{{ a.get("title","無題") }}</h2>
-            <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">👤 {{ a.get("author","") }} ｜ 📅 {{ a.get("publishedAt","")[:10] }} ｜ 💬 {{ comment_counts.get(a.id, 0) }}件</p>
-            <div class="mb-2">
-              {% for t in tags %}<span class="tag-badge">#{{ t }}</span>{% endfor %}
-            </div>
-            <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">{{ snippet }}</p>
-          </div>
-        </div>
-      </a>
-    {% endfor %}
-  {% else %}
-    <div class="text-center text-gray-400 dark:text-gray-500 py-16">記事が見つかりませんでした</div>
-  {% endif %}
-
-  <!-- ページネーション -->
-  {% if total_pages > 1 %}
-    <div class="flex justify-center items-center gap-4 mt-6">
-      {% if page > 0 %}
-        <a href="/?page={{ page-1 }}&q={{ q }}&author={{ author }}&tag={{ tag }}"
-           class="px-4 py-2 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg text-sm text-gray-600 dark:text-gray-300 hover:bg-[#fdf0f2] dark:hover:bg-gray-700 transition">← 前へ</a>
-      {% endif %}
-      <span class="text-sm text-gray-500 dark:text-gray-400">{{ page+1 }} / {{ total_pages }}</span>
-      {% if page < total_pages - 1 %}
-        <a href="/?page={{ page+1 }}&q={{ q }}&author={{ author }}&tag={{ tag }}"
-           class="px-4 py-2 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg text-sm text-gray-600 dark:text-gray-300 hover:bg-[#fdf0f2] dark:hover:bg-gray-700 transition">次へ →</a>
-      {% endif %}
-    </div>
-  {% endif %}
-</div>
-{% endblock %}

テキストブロックモック.html

@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ブロックエディタ・プロトタイプ</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        body { background-color: #f8f9fa; font-family: sans-serif; }
-        .block-card { transition: all 0.2s ease; border-left: 4px solid transparent; }
-        .block-card:hover { border-left-color: #ff69b4; background-color: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
-        .editor-overlay { display: none; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
-        .editor-overlay.active { display: flex; }
-        /* リッチテキストのプレビュー用 */
-        .rich-preview h2 { border-left: 4px solid #ff69b4; padding-left: 10px; font-weight: bold; font-size: 1.25rem; margin-top: 1rem; }
-        .rich-preview p { line-height: 1.8; margin-bottom: 0.5rem; }
-    </style>
-</head>
-<body class="pb-24">
-
-    <!-- ヘッダー -->
-    <header class="bg-white border-b sticky top-0 z-30 p-4 flex justify-between items-center">
-        <button class="text-gray-600"><i class="fas fa-chevron-left"></i> 戻る</button>
-        <h1 class="font-bold">記事の編集</h1>
-        <button class="bg-pink-500 text-white px-4 py-1 rounded-full text-sm font-bold">保存</button>
-    </header>
-
-    <main class="max-w-2xl mx-auto p-4 space-y-6">
-        
-        <!-- タイトルエリア -->
-        <div class="bg-white p-4 rounded-xl shadow-sm border">
-            <label class="text-xs text-gray-400 font-bold uppercase">記事タイトル</label>
-            <input type="text" value="週末のサークル活動記録" class="w-full text-xl font-bold border-none focus:ring-0 p-0" placeholder="タイトルを入力...">
-        </div>
-
-        <!-- ブロックリスト -->
-        <div id="block-list" class="space-y-4">
-            
-            <!-- テキストブロック -->
-            <div class="block-card bg-white p-4 rounded-xl border relative group">
-                <div class="flex justify-between mb-2">
-                    <span class="text-xs font-bold text-pink-500 bg-pink-50 px-2 py-0.5 rounded">テキスト</span>
-                    <div class="flex gap-2 text-gray-400">
-                        <button class="hover:text-gray-600"><i class="fas fa-arrow-up"></i></button>
-                        <button class="hover:text-gray-600"><i class="fas fa-arrow-down"></i></button>
-                        <button class="hover:text-red-500"><i class="fas fa-trash"></i></button>
-                    </div>
-                </div>
-                <div class="rich-preview cursor-pointer" onclick="openEditor('block-1')">
-                    <p>今日はみんなで公園に集まりました。天気が良くて最高でした！</p>
-                    <h2>ランチの様子</h2>
-                    <p>お昼は近くのカフェで美味しいカレーを食べました。ボリューム満点で大満足です。</p>
-                </div>
-                <div class="mt-4 flex justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs py-1 px-3 rounded-full">+ ブロックを追加</button>
-                </div>
-            </div>
-
-            <!-- 画像ブロック -->
-            <div class="block-card bg-white p-4 rounded-xl border relative">
-                <div class="flex justify-between mb-2">
-                    <span class="text-xs font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded">画像</span>
-                    <div class="flex gap-2 text-gray-400">
-                        <button><i class="fas fa-arrow-up"></i></button>
-                        <button><i class="fas fa-arrow-down"></i></button>
-                        <button><i class="fas fa-trash"></i></button>
-                    </div>
-                </div>
-                <img src="https://images.unsplash.com/photo-1517487881594-2787fef5ebf7?w=800&q=80" class="w-full h-48 object-cover rounded-lg">
-                <p class="text-center text-sm text-gray-500 mt-2 italic">みんなで集合写真！</p>
-            </div>
-
-            <!-- 空のテキストブロック -->
-            <div class="block-card bg-white p-4 rounded-xl border border-dashed text-center py-8 cursor-pointer hover:bg-gray-50" onclick="openEditor('new')">
-                <p class="text-gray-400"><i class="fas fa-plus-circle mb-2 text-2xl"></i><br>ここをタップして文章を書く</p>
-            </div>
-
-        </div>
-    </main>
-
-    <!-- アイデア②の心臓部：編集モーダル -->
-    <div id="editor-modal" class="editor-overlay fixed inset-0 z-50 flex-col items-center justify-end sm:justify-center p-0 sm:p-4">
-        <div class="bg-white w-full max-w-2xl sm:rounded-2xl h-[90vh] sm:h-auto flex flex-col shadow-2xl overflow-hidden">
-            <!-- モーダルヘッダー -->
-            <div class="p-4 border-b flex justify-between items-center bg-gray-50">
-                <button onclick="closeEditor()" class="text-gray-500 font-bold">キャンセル</button>
-                <span class="font-bold">テキストを編集</span>
-                <button onclick="closeEditor()" class="text-pink-500 font-bold">完了</button>
-            </div>
-            
-            <!-- 擬似ツールバー -->
-            <div class="p-2 border-b flex gap-4 overflow-x-auto bg-white">
-                <button class="w-8 h-8 flex items-center justify-center border rounded"><i class="fas fa-bold"></i></button>
-                <button class="w-8 h-8 flex items-center justify-center border rounded"><i class="fas fa-heading"></i></button>
-                <button class="w-8 h-8 flex items-center justify-center border rounded"><i class="fas fa-list-ul"></i></button>
-                <button class="w-8 h-8 flex items-center justify-center border rounded text-pink-500"><i class="fas fa-font"></i></button>
-                <div class="h-8 w-[1px] bg-gray-200"></div>
-                <button class="bg-blue-50 text-blue-600 px-3 py-0.5 rounded-full text-xs font-bold whitespace-nowrap"><i class="fas fa-magic"></i> AIで装飾</button>
-            </div>
-
-            <!-- エディタ本体 -->
-            <textarea id="modal-textarea" class="w-full h-96 p-4 focus:ring-0 border-none text-lg leading-relaxed" placeholder="ここに入力...">今日はみんなで公園に集まりました。天気が良くて最高でした！
-
-## ランチの様子
-お昼は近くのカフェで美味しいカレーを食べました。ボリューム満点で大満足です。</textarea>
-
-            <div class="p-4 bg-gray-50 text-xs text-gray-400 text-center">
-                ヒント：AI装飾ボタンを押すと、自動的に見出しや太字を適用します。
-            </div>
-        </div>
-    </div>
-
-    <script>
-        function openEditor(id) {
-            document.getElementById('editor-modal').classList.add('active');
-            document.body.style.overflow = 'hidden';
-        }
-        function closeEditor() {
-            document.getElementById('editor-modal').classList.remove('active');
-            document.body.style.overflow = 'auto';
-        }
-    </script>
-</body>
-</html>