ダッシュボード

pitcms.jsonc

pitcms.jsoncは、pitcmsの設定を定義するファイルです。JSONC（JSON with Comments）形式で記述し、プロジェクトのルートディレクトリに配置します。

JSONCとは

JSONCは、JSON with Commentsの略で、通常のJSONにコメントを書けるようにした形式です。

{
	// これはコメントです
	"schemaVersion": 1,
	"media": {
		"storagePath": "public/images",
		"publicPath": "/images"
	},
	/* 複数行の
     コメントも書けます */
	"collections": []
}

設定ファイルにコメントを残せるため、設定の意図を説明したり、一時的に設定を無効化したりできます。

配置場所

pitcms.jsoncは、GitHubリポジトリのルートディレクトリに配置します。

your-project/
├── pitcms.jsonc    ← ここに配置
├── content/
│   ├── posts/
│   └── authors/
├── public/
└── ...

基本構造 

{
	"schemaVersion": 1,
	"media": {
		"storagePath": "public/images",
		"publicPath": "/images"
	},
	"collections": [
		// コレクション定義
	]
}
プロパティ型必須説明
schemaVersionnumberYesスキーマバージョン（現在は 1 のみサポート）
collectionsCollectionDefinition[]Noコレクション定義の配列
mediaobjectNo画像ファイルの保存設定

schemaVersion

設定ファイルのスキーマバージョンを指定します。現在は1のみサポートしています。

{
	"schemaVersion": 1
}

将来的にスキーマが変更された場合、このバージョン番号を使って後方互換性を維持します。

collections

コンテンツを管理するためのコレクションを定義します。ブログ記事、製品情報、著者など、同じ種類のコンテンツをまとめて管理できます。

{
	"collections": [
		{
			"name": "posts",
			"label": "ブログ記事",
			"path": "content/posts",
			"extension": "md",
			"fields": [
				// フィールド定義
			]
		}
	]
}

詳細はコレクションを参照してください。

media

pitcmsは外部画像プロバイダとしてCloudinary、Cloudflare R2に対応しており、それらを使用することを推奨しています。詳しくは、画像ページをご覧ください。この設定は外部画像プロバイダを使用する場合は不要です。

pitcmsで画像を扱う方法は次の2つがあります。

  1. 外部画像プロバイダを使用する（推奨）
  2. GitHubに画像をアップロードする（この設定）

この設定は２の、GitHubに画像をアップロードする場合に使用し、外部画像プロバイダを使用する場合は不要です。

画像のアップロード先の相対パスとコンテンツに埋め込むURLのパスを指定します。

{
	"media": {
		"storagePath": "public/images",
		"publicPath": "/images"
	}
}
プロパティ型必須説明
storagePathstringYesGitHubリポジトリ内の画像保存ディレクトリパス
publicPathstringYesコンテンツに埋め込むURLのパスプレフィックス

また、リッチテキストフィールド内で画像を使用する場合は外部画像プロバイダの仕様が必須で、この設定を行っても、リッチフィールド内で画像は使用できません。

したがって、この設定で使用できるようになるのは画像フィールド（type: "image"）のみです。

設定例

Next.jsやAstroなどの静的サイトジェネレーターでpublicディレクトリを使用する場合：

{
	"media": {
		"storagePath": "public/uploads",
		"publicPath": "/uploads"
	}
}

この設定では：

  • 画像はpublic/uploads/ディレクトリに保存されます
  • コンテンツには/uploads/image.pngの形式でURLが埋め込まれます

動作の仕組み

  1. CMSで画像をアップロードすると、storagePathで指定したディレクトリに保存されます
  2. コンテンツ（マークダウンやJSON）にはpublicPath形式のURLが埋め込まれます
  3. サイトをビルド・デプロイすると、publicPathのURLで画像にアクセスできます
アップロード時: public/uploads/abc123.png に保存
コンテンツ内:   /uploads/abc123.png として参照

完全な例 

{
	"schemaVersion": 1,
	"media": {
		"storagePath": "public/images",
		"publicPath": "/images"
	},
	"collections": [
		{
			"name": "posts",
			"label": "ブログ記事",
			"description": "ブログの投稿を管理します",
			"path": "content/posts",
			"extension": "md",
			"fields": [
				{ "name": "title", "type": "text", "label": "タイトル", "required": true },
				{ "name": "slug", "type": "text", "label": "スラッグ", "required": true },
				{ "name": "content", "type": "richtext", "label": "本文" },
				{ "name": "thumbnail", "type": "image", "label": "サムネイル" },
				{
					"name": "category",
					"type": "select",
					"label": "カテゴリ",
					"options": [
						{ "value": "tech", "label": "テクノロジー" },
						{ "value": "life", "label": "ライフスタイル" }
					]
				},
				{ "name": "publishedAt", "type": "date", "label": "公開日時", "includeTime": true },
				{ "name": "isDraft", "type": "boolean", "label": "下書き", "default": true }
			],
			"layout": [["title"], ["slug", "category"], ["thumbnail"], ["content"]],
			"pit": {
				"title": "title",
				"body": "content",
				"createdAt": "publishedAt",
				"draft": "isDraft"
			}
		},
		{
			"name": "settings",
			"label": "サイト設定",
			"path": "content/settings",
			"extension": "json",
			"singleton": true,
			"fields": [
				{ "name": "siteName", "type": "text", "label": "サイト名", "required": true },
				{ "name": "description", "type": "textarea", "label": "サイト説明" },
				{ "name": "logo", "type": "image", "label": "ロゴ" }
			]
		}
	]
}

$schema

pitcmsは公式のJSON Schemaを提供しています。$schemaを指定すると、エディタで入力補完やバリデーションが有効になります。

{
	"$schema": "https://pitcms.net/schema/pitcms.schema.json",
	"schemaVersion": 1,
	"collections": []
}

JSON Schema Storeへの登録PRがマージされると、VS CodeやJetBrains IDEなど主要なエディタでpitcms.json/pitcms.jsoncを開くだけで自動的にスキーマが適用されるようになります。その場合、上記の手動設定は不要です。

次のステップ

Docs