{}FireSchema
オープンソースMIT ライセンスバックエンド不要

JSON Schema で Firestore データベースをドキュメント化

Interactive schema viewer for Firebase & Firestore · Like Swagger for NoSQL

Firestore コレクションを美しいインタラクティブなドキュメントに変換。JSON Schema 標準を使用。バックエンド不要、設定不要、即座に動作。

ビルド不要バックエンド不要2 分で完了
クイックスタート:CDN セットアップ

この 2 行を任意の HTML ページに追加

<link rel="stylesheet" href="unpkg.com/firestore-schema-viewer/dist/style.css">
<script src="unpkg.com/firestore-schema-viewer/dist/fsv.umd.js"></script>
完全ガイドを見る →

FireSchema の特徴

自動検出

.schema.json ファイルのフォルダを指定すると、FireSchema がコレクションツリー全体を自動的に構築します。

JSON Schema 標準

JSON Schema 2020-12 標準を使用しているため、独自フォーマットを学ぶ必要がありません。任意のバリデータやツールチェーンと連携します。

詳しく見る →

バックエンド不要

純粋な静的 SPA です。GitHub Pages、Vercel、または任意の CDN でホストできます。サーバー、データベース、API は不要です。

フォルダ = 階層

フォルダ構造が Firestore パスを反映します。ネストされたフォルダは自動的にサブコレクションになります。

AI対応

付属のプロンプトテンプレートを使用して、任意の LLM でスキーマファイルを生成できます。コレクションを説明するだけで、有効なスキーマが得られます。

CDN または npm

単一のスクリプトタグで CDN 経由で使用するか、npm からインストールしてビルドパイプラインで完全に制御できます。

実際に動作確認する

サンプル Firestore コレクションを備えたライブ FireSchema ビューアを探索してください。コレクションをクリックしてスキーマを参照できます。

index.html

セットアップを選択

プロジェクトに合った方法を選んでください。CDN が最も手軽です。

index.html
<!-- index.html -->
<link rel="stylesheet"
  href="https://unpkg.com/firestore-schema-viewer/dist/style.css">

<div id="app"></div>

<script src="https://unpkg.com/firestore-schema-viewer/dist/fsv.umd.js"></script>
<script>
  FirestoreSchemaViewer.render('#app', {
    schemasDir: './schemas/'
  })
</script>
メリット
  • インストール不要
  • HTML ファイル1つ
  • 常に最新版
デメリット
  • インターネット必要
  • バージョン固定不可
サイズ

0 KB — CDN から読み込み