blazor-blog-feature

Blazor WASM + Azure Functions 向けブログ機能スキル

このスキルでは、サーバーレスのバックエンド処理を備えた Azure Static Web Apps 上でホストされる Blazor WASM アプリケーション向けに、本番環境ですぐに使えるブログ機能を一式提供します。

クイックリファレンス：読み込むリソースの選び方

タスク	読み込むリソース	主な概念
アーキテクチャ、前提条件、共有モデルを理解する	resources/core-architecture.md	3 層アーキテクチャ、プロジェクト構造、データモデル
バックエンドサービス、Azure Functions、ファイル共有連携を実装する	resources/backend-services.md	BlogStorageService、YAML 解析、DI のセットアップ
Blazor コンポーネント、UI ページ、スタイルを構築する	resources/frontend-components.md	Razor コンポーネント、Markdown レンダリング、レスポンシブデザイン
Azure 環境、ローカル設定、デプロイを構成する	resources/azure-configuration.md	接続文字列、ファイル共有のセットアップ、環境変数
サンプルコンテンツの作成、テストワークフロー、問題のトラブルシューティングを行う	resources/sample-content-testing.md	サンプル Markdown、テストチェックリスト、よくある問題

オーケストレーションプロトコル

フェーズ 1：セットアップと理解

コードを書く前に、コンテキストを把握してください。

1. 現在の Blazor WASM プロジェクト構造を確認します
2. Azure Functions API プロジェクトの準備ができていることを確認します
3. Azure Storage アカウントと File Share にアクセスできることを確認します
4. 3 層設計を理解するために resources/core-architecture.md を読み込みます

クイック評価：

• 既存の Blazor WASM + Functions プロジェクトがありますか？ → はいの場合は続行します
• 構築する内容を理解する必要がありますか？ → まず core-architecture.md を読み込みます
• Azure リソースをセットアップしていますか？ → azure-configuration.md を参照します

フェーズ 2：実装方法の選択

実装する手順を選択してください。

状況	最初に読み込むもの	次に読み込むもの
ゼロから開始する	core-architecture.md	backend-services.md
バックエンドは完成しており、UI が必要	frontend-components.md	（backend-services.md はスキップ）
設定のサポートだけが必要	azure-configuration.md	（必要に応じて他のリソースを参照）
デバッグまたはテストを行う	sample-content-testing.md	（該当するトラブルシューティングのセクション）

フェーズ 3：実行と検証

実装の順序：

1. プロジェクト構造を作成する（core-architecture.md のステップ 1～2）
2. NuGet パッケージを追加する（backend-services.md）
3. BlogStorageService を実装する（backend-services.md）
4. Azure Functions を作成する（backend-services.md）
5. Blazor コンポーネントを構築する（frontend-components.md）
6. Azure 環境を構成する（azure-configuration.md）
7. ローカルでテストする（sample-content-testing.md のテストワークフロー）
8. Azure にデプロイする（azure-configuration.md のデプロイセクション）

検証チェックポイント：

• バックエンド：Functions がテスト呼び出しに正しく応答する
• フロントエンド：コンポーネントが読み込まれ、記事が表示される
• 統合：ブログをエンドツーエンドで閲覧できる
• Azure：構成がデプロイされ、アクセスできる

よくあるワークフローのシナリオ

シナリオ 1：新規実装（初回）

所要時間：2～3 時間

1. core-architecture.md を読む → 構築する内容を理解します
2. backend-services.md に従う → API レイヤーを実装します
3. frontend-components.md に従う → UI レイヤーを構築します
4. azure-configuration.md に従う → Azure リソースを構成します
5. sample-content-testing.md を使う → サンプル記事で検証します

シナリオ 2：既存のバックエンドにフロントエンドを追加

所要時間：1 時間

1. frontend-components.md に進みます
2. コンポーネントに関する疑問があれば core-architecture.md を参照します
3. sample-content-testing.md のサンプル記事を使います
4. azure-configuration.md に従ってデプロイします

シナリオ 3：既存のブログを更新

所要時間：30 分

1. 該当するリソースファイルを開きます
2. コンテキストを確認するために core-architecture.md を参照します
3. sample-content-testing.md のチェックリストで変更をテストします

シナリオ 4：問題のトラブルシューティング

タイムライン：必要に応じて

1. sample-content-testing.md に直接移動します
2. トラブルシューティングのセクションで問題を探します
3. 必要に応じて、ほかのリソースを参照して状況を確認します

アーキテクチャの概要

フロントエンド → バックエンド → ストレージ：

• Blazor WASM のページから HTTP エンドポイントを呼び出します
• Azure Functions が File Share からデータを取得します
• YAML フロントマター付きの Markdown ファイルに、すべてのコンテンツが含まれています
• データベースは不要です（ファイルがデータベースの役割を果たします）

主なコンポーネント：

• BlogStorageService：File Share とのやり取りを抽象化します
• BlogFunctions：投稿の一覧表示と取得を行う HTTP エンドポイントです
• Index/Post Razor Components：投稿を閲覧するためのクライアント UI です
• CSS Styling：あらゆる画面サイズに対応するレスポンシブデザインです

実装の複雑さ

コンポーネント	複雑さ	時間
バックエンドサービス	中	45 分
Azure Functions	簡単	30 分
フロントエンドコンポーネント	中	60 分
スタイリング	簡単	30 分
構成	簡単	20 分
合計	簡単～中程度	約 3 時間

前提条件チェックリスト

• ✅ 既存の Blazor WASM SWA プロジェクト
• ✅ Azure Functions API プロジェクト
• ✅ File Share を備えた Azure Storage アカウント
• ✅ .NET 10 SDK（またはそれ以降）
• ✅ Azure CLI（デプロイ用）
• ✅ Visual Studio Code または Visual Studio

リソースファイルの概要

resources/core-architecture.md（285 行）

ブログシステムのアーキテクチャ、プロジェクト構成、フロントエンドとバックエンドで必要となる共有データモデルに関する基礎知識です。

次の場合に読み込みます： 作業を始めるとき、設計を理解するとき、共有モデルを作成するとき

resources/backend-services.md（425 行）

Azure File Share サービスとの連携、BlogStorageService クラス、ブログ操作用 Azure Functions の完全な実装です。

次の場合に読み込みます： API 層を構築するとき、バックエンドサービスを実装するとき

resources/frontend-components.md（610 行）

ブログ一覧ページと詳細ページ用の Blazor Razor コンポーネント、レスポンシブデザイン用の CSS スタイリング、ナビゲーションとの連携を扱います。

次の場合に読み込みます： UI 層を構築するとき、コンポーネントをスタイリングするとき、Razor ページを作成するとき

resources/azure-configuration.md（445 行）

Azure 環境のセットアップ、ローカル開発の構成、File Share の構造、デプロイのガイドライン、セキュリティ上の考慮事項を扱います。

次の場合に読み込みます： Azure リソースをセットアップするとき、環境を構成するとき、本番環境にデプロイするとき

resources/sample-content-testing.md（395 行）

Markdown のサンプル形式、テストワークフローの完全なチェックリスト、よくある問題のトラブルシューティングガイド、機能強化のアイデアを掲載しています。

次の場合に読み込みます： テストデータを作成するとき、実装を検証するとき、問題をデバッグするとき

ベストプラクティス

1. core-architecture.md から始めます - 設計の理解を省略しないでください
2. 順番に実装します - まずバックエンド、次にフロントエンド、その後に構成を行います
3. ローカルでテストします - デプロイする前に Azure Storage Emulator を使用します
4. サンプルコンテンツを使用します - 提供されている Markdown の例でテストします
5. 命名規則に従います - 一貫したファイル命名により、エラーを防げます

目的別のクイックナビゲーション

目的	リソース	セクション
システムを理解する	core-architecture.md	アーキテクチャの概要
バックエンドを作成する	backend-services.md	BlogStorageService
UI を構築する	frontend-components.md	ブログ一覧ページ
Azure をセットアップする	azure-configuration.md	Azure File Share のセットアップ
すべてをテストする	sample-content-testing.md	テストワークフロー
問題を解決する	sample-content-testing.md	トラブルシューティングガイド
本番環境にデプロイする	azure-configuration.md	デプロイチェックリスト

サポートと今後のステップ

実装後：

• パフォーマンス向上のため、ページネーションを追加します（推奨）
• 検索機能を実装します
• 頻繁にアクセスされる投稿のキャッシュを検討します
• Azure Function のコールドスタートを監視します
• パフォーマンス向上のため、アイキャッチ画像のサイズを最適化します

機能拡張の機会：

• RSS フィードの生成
• コメントシステムの統合
• 投稿のカテゴリー分けとタグ付け
• 管理者向けコンテンツ管理インターフェース
• メールマガジンの購読

---

使用技術： Blazor WASM、Azure Functions、Azure File Share、Markdown、YAML frontmatter

スキルの種類： 機能実装（Blazor WASM + Azure）

難易度： 初級〜中級（合計3〜4時間）