jpskill.com
🛠️ 開発・MCP コミュニティ

firebase-platform

Firebaseの各種サービスやプラットフォームの活用法、Angularプロジェクトとの連携に関するヒントを提供するSkill。

📜 元の英語説明(参考)

Firebase services, platform guides, and tips for integration with Angular projects.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Firebaseの各種サービスやプラットフォームの活用法、Angularプロジェクトとの連携に関するヒントを提供するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o firebase-platform.zip https://jpskill.com/download/6855.zip && unzip -o firebase-platform.zip && rm firebase-platform.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/6855.zip -OutFile "$d\firebase-platform.zip"; Expand-Archive "$d\firebase-platform.zip" -DestinationPath $d -Force; ri "$d\firebase-platform.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して firebase-platform.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → firebase-platform フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

スキル: Firebase Platform マスターガイド

AngularFire SDK と Firebase Data Connect (GQL + PostgreSQL) の統合リファレンスです。


🔥 1. AngularFire コア (SDK)

Real-time Database & Firestore

  • リアクティブパターン: collectionDatadocData を使用し、toSignal() でシグナルに変換します。
  • 依存性注入: inject(Firestore)inject(Auth) などを利用します。
  • セキュリティ: セキュリティルールが主要な防御策です。クライアントを信用してはいけません。

認証

  • 状態管理: AuthStoreuser ステータスを追跡します。
  • ガード: Auth サービスと機能的な canActivate ガードを使用します。

⚡ 2. Firebase Data Connect (GQL + PostgreSQL)

スキーマワークフロー

  • スキーマファースト: schema.gql@table を定義します。
  • 生成: スキーマ変更後、firebase dataconnect:sdk:generate を実行します。
  • 厳密な型付け: 生成された SDK を使用し、dataconnect-generated/ を編集してはいけません。

ディレクティブルール

  • @table: すべてのデータベースエンティティに必須です。
  • @auth: すべての型に必須です (公開アクセスは許可されません)。
  • @default: UUID (uuidV4()) やタイムスタンプ (request.time) に使用します。
  • @col(name: "..."): JSON キーと DB カラムが異なる場合にマッピングします。

🏗️ 3. NgRx Signals との統合

  • クエリのラッピング:
    export const MyStore = signalStore(
      withMethods((store, dc = inject(DataConnectService)) => ({
        loadData: rxMethod<void>(
          pipe(
            switchMap(() => dc.myDataQuery()),
            tapResponse({
              next: (res) => patchState(store, { data: res.data }),
              error: console.error,
            }),
          ),
        ),
      })),
    );

🔒 4. セキュリティとパフォーマンス

  • シークレット: Firebase API キーと設定は environment.ts に保存します。
  • クエリ設計: GraphQL では必要なフィールドのみをフェッチします。
  • 認証パターン: @auth(rules: [{ allow: OWNER, ownerField: "userId" }])
  • シークレットのハードコーディング禁止: シークレットは環境変数または GCP Secret Manager に保持する必要があります。

原則: スキーマ変更後は、アプリケーションロジックを編集する前に SDK を再生成しなければなりません。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

SKILL: Firebase Platform Master Guide

Consolidated reference for AngularFire SDK and Firebase Data Connect (GQL + PostgreSQL).


🔥 1. AngularFire Core (SDK)

Real-time Database & Firestore

  • Reactive Pattern: Use collectionData, docData and convert to signals using toSignal().
  • Dependency Injection: Use inject(Firestore), inject(Auth), etc.
  • Security: Security rules are the primary defense. Never trust the client.

Authentication

  • State management: Track user status in an AuthStore.
  • Guards: Use functional canActivate guards with Auth service.

⚡ 2. Firebase Data Connect (GQL + PostgreSQL)

Schema Workflow

  • Schema First: Define @table in schema.gql.
  • Generation: Run firebase dataconnect:sdk:generate after schema changes.
  • Strict Types: Use the generated SDK; never edit dataconnect-generated/.

Directive Rules

  • @table: Required for all database entities.
  • @auth: Required for all types (No public access allowed).
  • @default: Use for UUIDs (uuidV4()) and timestamps (request.time).
  • @col(name: "..."): Map JSON keys to DB columns if different.

🏗️ 3. Integration with NgRx Signals

  • Query Wrapping:
    export const MyStore = signalStore(
      withMethods((store, dc = inject(DataConnectService)) => ({
        loadData: rxMethod<void>(
          pipe(
            switchMap(() => dc.myDataQuery()),
            tapResponse({
              next: (res) => patchState(store, { data: res.data }),
              error: console.error,
            }),
          ),
        ),
      })),
    );

🔒 4. Security & Performance

  • Secrets: Store Firebase API keys and config in environment.ts.
  • Query Design: Fetch only required fields in GraphQL.
  • Auth Pattern: @auth(rules: [{ allow: OWNER, ownerField: "userId" }]).
  • No Hardcoded Secrets: Secrets must stay in environment variables or GCP Secret Manager.

Law: After any schema change, the SDK MUST be regenerated before editing application logic.