{"pageId":"25f008ee-bcf0-4ce9-acfb-1387c364cbc2","title":"開発記録 #2：ブロックベース JSON ","siteName":"GoldFeather","slug":"0c0x338n","theme":"note-style","aiTags":["開発記録","データ構造"],"breadcrumbs":[{"label":"ポータル","url":"/"},{"label":"HOME","url":"/@gf"},{"label":"開発記録 #2：ブロックベース JSON ","url":"#"}],"relatedArticles":[{"id":"2290c45a-81d9-4d3c-9a3b-b12ebc7a8b39","title":"開発記録 #3：AI のための標準","slug":"9hi0vosq","status":"published"},{"id":"cc1fd232-52a7-41f8-9cdb-1f51e576b167","title":"開発記録 #1：コア・コンセプト","slug":"nzxt7eil","status":"published"},{"id":"9f607b0e-0f6e-4593-aa27-ec6f2246df73","title":"開発記録 #4：パフォーマンス 100 点への道","slug":"1irme3fc","status":"published"}],"createdAt":"2026-03-23T11:18:19.418841+00:00","updatedAt":"2026-03-26T15:36:41.042898+00:00","analyticsId":null,"thumbnailUrl":null,"components":[{"type":"Header","props":{"title":"開発記録 #2：ブロックベース JSON ","showLogo":true}},{"type":"SEO","props":{"title":"# GoldFeather 開発記録 #2：ブロックベース JSON とエッジが支える「疎結合」の美学","description":"前回の「コンセプト編」では、GoldFeather（ゴールドフェザー）が目指す AI Native なビジョンについてお話ししました。第 2 回となる今回は、そのビジョンを実現するための技術的な骨格――アーキテクチャとデータ構造の工夫について深掘りします。"}},{"type":"MarkdownContent","props":{"body":"# GoldFeather 開発記録 #2：ブロックベース JSON とエッジが支える「疎結合」の美学\n\n前回の「コンセプト編」では、GoldFeather（ゴールドフェザー）が目指す AI Native なビジョンについてお話ししました。第 2 回となる今回は、そのビジョンを実現するための技術的な骨格――アーキテクチャとデータ構造の工夫について深掘りします。\n\n---\n\n## 1. 「ページ」を HTML ではなく「データの配列」として捉える\n\nGoldFeather の最大の特徴は、コンテンツを伝統的な HTML 文字列として保存するのではなく、**「コンポーネント・ブロックの配列 (JSON)」**として管理している点です。\n\n例えば、1 つの記事データは以下のような構造（イメージ）を持っています。\n\n```json\n{\n  \"theme\": \"default-style\",\n  \"components\": [\n    { \"type\": \"Header\", \"props\": { \"title\": \"アーキテクチャの解説\" } },\n    { \"type\": \"MarkdownContent\", \"props\": { \"body\": \"ここに本文...\" } },\n    { \"type\": \"Affiliate\", \"props\": { \"id\": \"item-001\" } }\n  ]\n}\n```\n\nこの「ブロック・ベース」のアプローチには、大きなメリットが 3 つあります。\n\n1. **AI への親和性**: AI は複雑な HTML タグを解析することなく、必要な情報（本文やメタデータ）だけを JSON から直接、正確に抽出できます。\n2. **デザインの自由度**: HTML 構造が固定されていないため、フロントエンド（SPA）側のレンダリング・ロジックを入れ替えるだけで、全く異なる UI/UX を提供可能です。\n3. **拡張性**: 「新しい機能を足したい」ときは、新しい `type` のブロックを定義して配列に足すだけ。既存のシステムを壊すことなく、プラグイン的に機能を追加できます。\n\n## 2. エッジ・デカップリング・アーキテクチャ\n\nGoldFeather は、システムの各機能を完全に独立（疎結合）させています。\n\n### 管理・生成層 (Supabase & Cloudflare Workers)\n管理画面での執筆や AI による生成は、Supabase (DB) と Cloudflare Workers (API) が担当します。ここでは PostgreSQL の Row Level Security (RLS) をフル活用し、マルチテナントとしての堅牢な隔離を実現しています。\n\n### 配信・描画層 (Cloudflare R2 & SPA)\nここが GoldFeather の一番の工夫です。配信層は DB に一切アクセスしません。\n記事が保存（ビルド）されると、必要なデータは全て静的な JSON ファイルとして Cloudflare R2 に書き出されます。\n\n読み取り専用のエッジ配信に特化することで、**「DB 負荷をゼロに抑えつつ、世界中からミリ秒単位でコンテンツを届ける」** ことが可能になりました。これは「静的サイトの爆速さ」と「動的アプリの柔軟さ」をいいとこ取りしたハイブリッド・アプローチです。\n\n## 3. 「セキュリティ」と「シンプルさ」の両立\n\nマルチテナント（複数のユーザーが利用する仕組み）を支える上で、セキュリティは最優先事項です。\n\n詳細な実装は伏せますが、GoldFeather では「ユーザーの認証情報」と「テナントのデータアクセス」を PostgreSQL のコアレベルで直結させています。これにより、バックエンド層で複雑な権限チェック・ロジックを書く必要がなくなり、コードのシンプルさと安全性を同時に高めることに成功しました。\n\n## 4. 結びに代えて\n\n「データの持ち方」ひとつを変えるだけで、システム全体の柔軟性は劇的に変わります。\nGoldFeather のアーキテクチャは、今後 AI が自律的にページレイアウトを組み替えたり、読者に合わせて最適なコンポーネントを配置したりするための「実験場」でもあります。\n\n---\n*エンジニアリングの粋を集めた、羽のような軽やかさを、ぜひ体感してください。*\n"}},{"type":"Footer","props":{"copyright":"© 2026 GoldFeather"}}]}