Design & Implementation History

Change Log

基礎設計から現在に至るまでの実装・変更履歴

セキュリティ

投稿者申請フォームの Bot 対策

  • 申請はメールの確認リンクから確定する方式(ダブルオプトイン)に変更。確定前の申請は管理画面に表示されず、24 時間で自動削除
  • Turnstile を追加(検証できない場合は拒否)。action とホスト名も確認
  • ハニーポット欄と、表示から送信までの最短時間(署名付きトークン)をチェック
  • 使い捨てメールのドメインと、メールを受信できないドメイン(MX なし)を拒否
  • 重複申請は確認メールを送らずに受け付け画面を表示(登録済みかどうかを判別させない)
  • IP ごと・サイト全体の 1 時間あたりの申請数に上限。pages.dev ホスト名からの申請を拒否
  • 申請時の Email Routing 宛先登録(確認メール送信)を廃止。WAF にレート制限と Bot スコアのルールを追加
改善

管理画面のメニューをパネル式に

  • ヘッダーに並んでいた管理メニューを「メニュー」ボタンから開くパネルに集約
  • コンテンツ / ユーザー / ツールの 3 グループに分け、各項目に説明とアイコンを表示
  • ヘッダーには現在の画面をパンくず形式で表示。ロールに応じて表示する項目を切り替え
  • 全管理画面で共通のヘッダーを使用し、画面ごとに異なっていたメニュー項目を統一
新機能

プレビュー共有(期限付きリンク + One-time PIN)

  • 公開前の記事・事例を、指定したメールアドレスだけに期限付き(1 / 3 / 7 / 14 日)で共有
  • /preview/* を別の Access アプリで保護し、One-time PIN で本人確認(通常ログインと AUD を分離)
  • アプリ側で JWT と宛先・期限・取り消しを毎回確認。下書きも共有可能
  • Access ポリシーの許可リストを有効なリンクの宛先と API で同期
  • 案内メールを Email Sending で送信、閲覧回数・最終閲覧を表示、操作を監査ログに記録
  • Email Worker の呼び出しに共有シークレットによる認証を追加
新機能

事例を「設計ガイド」と「導入アーキテクチャ」の 2 種類に

  • タイトル先頭の【設計ガイド】【導入アーキテクチャ】で種別を判定し、一覧にバッジと絞り込みを追加
  • 導入アーキテクチャ用テンプレート(導入前の構成と課題・接続図・設定の意図)を追加
  • OpenCode 用の /case コマンドを追加
  • 接続図(SVG)の検査を追加 — 文字サイズ・幅・スクリプト・外部 URL・IP・メールアドレス
  • mask.py を通していないスクリーンショットを ZIP にできないように変更
  • HTML が存在しないアセットを参照している ZIP を拒否
新機能

事例(/cases)と Zero Trust 事例ビルダー

  • OpenCode で作成した HTML の設計ガイドを ZIP でアップロード・公開する「事例」を追加
  • CSP sandbox(不透明オリジン)と HMAC 署名付きトークンでアップロード HTML を隔離
  • Zero Trust の設定を収集し、Queues + 専用 Worker + Workers AI で事例の下書きを生成
改善

スピーカーノートのアップロードを改善

  • スライドのアップロード画面と編集画面に「スピーカーノート(任意)」のファイル欄を追加し、あとからでもノートを差し替え可能に
  • スライド ZIP 内の speaker-notes.md / notes.json などをノートとして取り込み、公開ファイルとしては配信しないように変更
  • ノート編集画面の「ファイルから取り込む」で、枚数の確認と「すべて置き換える / 空欄だけに入れる」を選択可能に
新機能

スライドのプレゼンターモード

  • QR を読み取るとスマートフォンがリモコン兼発表者ビュー(ノート・次スライド・タイマー)に
  • Durable Objects(WebSocket Hibernation)で発表画面とリモコンを同期
  • スピーカーノートを Markdown / JSON / スライド ZIP から取り込み、編集画面で修正
  • スライドのカテゴリ(イベント / お客様 / その他)を追加
セキュリティ

認証の強化

  • セッション偽造につながる問題を修正、本番環境でモックログインを無効化
  • Access のチームドメインの表記揺れに対応し、複数 AUD を許可
  • JWT 検証エラーのメッセージを分かりやすく
改善

公式ブログへのリンク

  • Cloudflare 公式ブログへのリンクを追加し、本サイトが公式ブログではないことを明記
新機能

スライド公開(/slides)

  • HTML スライドを公開する /slides を追加(アップロード権限はユーザーごとに付与)
  • 任意の HTML スライドを ZIP でアップロードし R2 に展開
  • スライドの管理・編集画面を追加
改善

Cloudflare Field Notes へリブランド

  • サイト名を Cloudflare Field Notes に変更
  • 「このブログについて」に「このブログの使い方」を追加
  • ヒーローとヘッダー・フッターのデザインを刷新
セキュリティ

Access ユーザー切り替え時のセッション修正

  • Access のユーザーを切り替えた際にセッションの本人が食い違う問題を修正
  • ログアウト後の古い Access JWT を検出
  • CF_Authorization Cookie が重複した場合に対応
改善

AI モデルを Gemma 4 26B A4B に移行

  • ドラフト生成・チャット Q&A などのテキストモデルを @cf/google/gemma-4-26b-a4b-it に変更
  • Vibe Coding ページ(/vibe-coding)を追加
  • 日本語入力の確定 Enter でチャットが送信される問題を修正
新機能

Access JWT からの自動ログイン

  • Access で認証済みの場合、アプリのセッションを自動で作成
  • マイ記事一覧に編集ボタンを追加
  • ファビコンを追加
新機能

記事の公開範囲設定(公開 / 限定公開)

  • 記事ごとに「公開」または「限定公開」を選択可能に — D1 に visibility カラムを追加
  • エディタ UI にラジオボタン式の公開範囲セレクターを追加
  • 未ログインユーザーには限定記事を非表示(ホーム・一覧・検索・著者ページ)
  • 限定記事の詳細ページにゲート画面(ロックアイコン + ログイン誘導)を実装
  • RSS フィード・Sitemap から限定記事を除外
  • 管理画面・ポータルのマイ記事一覧に「限定」バッジを表示
新機能

Markdown インポート & 免責事項

  • Markdown インポート機能を追加 — YAML Frontmatter からタイトル・タグ・カテゴリを自動抽出
  • 公開時に外部画像を自動で R2 に取り込み、URL を置換する仕組みを実装
  • デフォルト Frontmatter テンプレートをインポートモーダルに設定
  • ホームページに免責事項(概要版)を追加
  • 各記事ページ末尾に免責事項ボックスを追加
  • 「このブログについて」ページに Markdown インポート・免責事項ポリシーのセクションを追加
  • プレゼンテーションに Markdown インポート & 免責事項スライドを追加
  • Change Log ページを新規作成
改善

AI チャット ユーザー分離 & Access セッション改善

  • AI チャットをログインユーザー限定に変更、ユーザー別スレッド分離
  • Access セッション切れ検知を Safari/Firefox にも対応(SyntaxError 等)
  • グローバル fetch インターセプターで React 外の Access 失効を捕捉
  • MutationObserver による白画面検知フォールバックを追加
改善

プレゼンテーション強化 & Hono 詳細スライド

  • モチベーション/背景スライドを page 1 に追加
  • Hono API レイヤーの詳細スライド — 16 エンドポイント・Remix 統合
  • ProblemCard にアコーディオン TIPS を追加
改善

エディタ改善 & テーブル挿入

  • テーブル・コードブロック挿入ツールバーを追加
  • 下書きエディタにキャンセルボタン(確認ダイアログ付き)を追加
修正

プロフィール表示改善

  • プロフィール表示・更新の不具合を修正
  • 記事著者欄に所属・得意分野ラベルを追加
修正

ログアウトフロー改善 & FK 修復

  • ログアウト時に hidden iframe で Access Cookie をクリア → 公開トップへリダイレクト
  • スクロールリビールアニメーション(About)・スライドトランジション(Presentation)を追加
  • D1 の壊れた FK 参照 (users_old → users) を修復
新機能

AI アシスト修正 & Access JWT 再認証レジリエンス

  • 追加エッセンス入力 → AI が本文に自然に組み込む機能を実装
  • HTML プレビュー + Markdown ソースのタブ切替
  • Mermaid 図の動的レンダリング & 構文エラー時のフォールバック
  • max_tokens: 8192 で長文記事の途中切れを防止
  • Access JWT 期限切れ時にアプリセッションを破棄して再認証へ
新機能

AE ロール追加 & SE 権限分離

  • AE(アカウントエンジニア)ロールを追加 — 投稿 + プレゼン閲覧権限
  • SE ロールを Admin と分離 — 削除・ユーザー管理・申請管理は Admin 専用
  • D1 CHECK 制約に 'ae' を追加(PRAGMA writable_schema パッチ)
新機能

AI チャットボット Deep Dive & AI Gateway

  • About ページに AI チャットボット実装詳細セクションを追加
  • AI Gateway 統合 — ガードレール・ログ・レート制限・キャッシュを一元管理
  • プレゼンテーションをスライド式に改修(フルスクリーン・キーボードナビ・トラックパッド対応)
新機能

投稿者申請 & Email 通知 & ユーザー管理

  • 公開申請フォーム (/apply) を実装
  • Email Routing API で宛先アドレス自動登録・検証
  • 専用 Email Worker (send_email binding) で承認通知メールを送信
  • 管理者承認時に Cloudflare Access ポリシーへメール自動追加
  • ユーザー管理(一覧・編集・削除)、削除時に Access + Email Routing 自動クリーンアップ
  • ユーザープロフィール(nickname, company, expertise 等)& Canvas アバタークロップ
  • Markdown/Mermaid ガイド追加、抜粋の Markdown ストリップ
新機能

機能拡充 & Hono API 移行

  • ホーム記事一覧・Markdown レンダリング・画像アップロード
  • AI チャット Q&A — Hono streamSSE・RAG・Llama Guard モデレーション・KV レート制限
  • API レイヤーを Hono に移行 — 型安全バインディング・共通ミドルウェア統一
  • 管理画面の投稿管理(削除)・プレゼンテーションページ追加
  • WAF + Bot Management セクションを About/Presentation に追加
  • Access JWT 再認証時のリダイレクトループ修正
基礎設計

基礎設計 — MVP

  • Remix v2 + Cloudflare Pages による SSR アプリケーション構築
  • D1 (SQLite) + Drizzle ORM でデータモデル設計(users, posts, categories, templates 等)
  • R2 による画像ストレージ
  • KV によるセッション管理・ページキャッシュ
  • RSS フィード・Sitemap 自動生成
  • SEO 最適化(OGP / Twitter Card)
  • Tailwind CSS + Typography プラグインによるスタイリング
  • Cloudflare Access による Zero Trust 認証(Google SSO)+ admin/se/user ロール
  • GitHub Actions CI/CD デプロイ
  • 監査ログ (Audit Log) の基盤実装