# Prosefly で Astro Content Collections を管理する

Aster テンプレートを使い、Astro Content Collections の接続、MDX 記事の編集、差分確認、Git への公開とサイト更新まで進めます。

import AsterDemo from '@/components/aster/AsterDemo.astro';

既存の Astro サイトを、コンテンツの定義を書き直さずに Prosefly へ接続します。このガイドでは、制作実績と文章のために私たちが作ったオープンソースのテンプレート [Aster](https://github.com/prosefly/astro-template-aster) を使います。**Defaults With an Exit** を編集し、確認した MDX ファイルをご自身の GitHub リポジトリに公開して、サイト上の同じ記事を確認します。

Content Collections、ファイルパス、コンポーネント、ビルドの仕組みはそのままです。オーナーまたは管理者がリポジトリの接続と公開方法を設定した後、執筆者は Git コマンドを使わずに編集し、下書きを保存できます。

## 始める前に

- GitHub に [Aster のコピー](https://github.com/prosefly/astro-template-aster)を用意するか、既存の対応する Astro プロジェクトを使います。そのリポジトリへの公開権限が必要です。
- Prosefly のアカウントと組織を作成します。Personal は1か月無料で試用でき、クレジットカードは不要です。[料金](/ja/pricing/)をご覧ください。
- 公開後のサイトを確認する場合は、通常のビルドとホスティングを用意します。新しい Aster のコピーでは `src/data/config.ts` のサイト URL を変更し、README に沿って起動・デプロイしてください。

編集前に [Aster のデモ](https://astro-template-aster.prosefly.dev/)と[元の記事](https://astro-template-aster.prosefly.dev/blog/defaults-with-an-exit/)を開いてみてください。記事、ソース、画面を対応させやすいように、サンプルの本文は英語のまま使います。記事を翻訳する必要はありません。

## 1. Aster の既存のコレクション定義を使う

Aster の **Blog** は `src/content/blog/`、**Projects** は `src/content/projects/` にあります。`src/content.config.ts` は、すでに次のように項目を定義しています。

```ts title="src/content.config.ts"
import { defineCollection, reference } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
  loader: glob({
    base: './src/content/blog',
    pattern: '**/*.{md,mdx}',
  }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedAt: z.coerce.date(),
    updatedAt: z.coerce.date().optional(),
    category: z.string(),
    tags: z.array(z.string()).default([]),
    project: reference('projects').optional(),
    draft: z.boolean().default(false),
  }),
});

const projects = defineCollection({
  loader: glob({
    base: './src/content/projects',
    pattern: '**/*.{md,mdx}',
  }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    year: z.number().int(),
    status: z.enum(['Open source', 'Private package']),
    tags: z.array(z.string()).default([]),
    website: z.url().optional(),
    repository: z.url().optional(),
    featured: z.boolean().default(false),
    order: z.number().int().default(0),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog, projects };
```

このファイルは変更せずに使います。Blog には `title`、`description`、`publishedAt`、`category`、`tags` と、任意の `project` 参照があります。Astro はこのスキーマでファイルを検証し、Prosefly は対応する項目を読み取って属性フォームを作ります。

これらのコレクションの接続に、別の CMS スキーマ、Prosefly ランタイム、コンテンツ API は必要ありません。Aster 自体は MDX の表示に `@prosefly/astro-components` を使いますが、このテンプレートの依存関係は Prosefly への接続とは別です。

## 2. 自分のリポジトリを接続し、スキャンを確認する

**組織設定 → リポジトリ**を開きます。GitHub アカウントを連携し、Prosefly GitHub App に Aster リポジトリへのアクセスを許可します。リポジトリを接続し、**Scan repository** を選びます。認証画面の詳細は [GitHub の接続](/docs/ja/connect-github/)をご覧ください。

設定した対象ブランチとアプリケーションのルートを確認します。Blog と Projects が既存のパスで検出されたことを確かめ、項目とエディタープロファイルを確認してからコンテンツスペースを確定します。インデックス作成の完了を待ってください。Aster の MDX は Prosefly コンポーネントをインポートするため、そのコンテンツで検出されたプロファイルも確認します。

<p id="aster-scan-demo">
  <a href="#try-editor">全体の流れ</a>でこの操作を試せます。
</p>

スキャンはリポジトリを読み取るだけで、コードを実行せず、Git のファイルも変更しません。コレクションが見つからない場合は、ブランチ、アプリケーションのルート、ローダーのパスを確認してください。

## 3. 同じ記事を編集し、下書きを保存する

**Blog** コレクションから **Defaults With an Exit** を開きます。対象ファイルは次のとおりです。

```text
src/content/blog/defaults-with-an-exit.mdx
```

説明（Description）を下の新しい文章に変更し、ビジュアルモードで冒頭の段落を置き換えます。タイトル、日付、カテゴリー、タグ、`project: aster` は維持し、記事の識別子と関連付けを保ちます。

```diff
-description: Good theme defaults shorten the first week without limiting what the site can become.
+description: Good defaults help a site grow without rewriting its content.
```

```md
A useful theme handles page structure, navigation, search, and readable prose so the team can focus on its content.
```

これはご自身の Aster のコピーに加える編集例です。ソースを開き、frontmatter とコンポーネントのインポートを含む MDX 全体を確認します。既存のインポートは維持してください。対応する Prosefly MDX コンポーネントはビジュアル編集でき、独自の構文はソースで扱えます。

<p>
  <a href="#try-editor">全体の流れ</a>でこの操作を試せます。
</p>

下書きの保存完了を待ちます。下書きは Prosefly のワークスペースに保存され、Git コミットや公開サイトの更新は発生しません。操作は[ビジュアルエディター](/docs/ja/editor/visual-editor/)で説明しています。

## 4. MDX ファイルの差分を確認して公開する

オーナーまたは管理者が**コンテンツスペース設定 → 公開**で Commit または Pull request を選びます。公開前レビューで次を確認してください。

1. リポジトリと対象ブランチが意図した公開先である。
2. 変更したファイルが `src/content/blog/defaults-with-an-exit.mdx` である。
3. frontmatter に説明の変更があり、本文に冒頭の段落の変更がある。
4. コンポーネントのインポートとほかの属性が維持されている。

<p id="aster-review-demo">
  <a href="#try-editor">全体の流れ</a>でこの操作を試せます。
</p>

確認後に公開します。Commit は確認した変更を設定済みの対象ブランチへ書き込みます。Pull request は変更の提案を作り、マージ後に対象ブランチが更新されます。詳しくは [Git への公開](/docs/ja/publishing/)をご覧ください。

## 5. Astro のビルド後に記事を確認する

既存のホスティングの処理が更新されたリポジトリをビルドします。完了後、**ご自身のデプロイ先**で `/blog/defaults-with-an-exit/` を開いてください。リンク先の Aster デモは比較用です。自分のコピーへの公開で公式デモは変わりません。

説明と冒頭の段落が編集内容と一致すること、既存のレイアウトとコンポーネントが表示されること、Aster プロジェクトとの関連付けが維持されていることを確認します。Prosefly はコンテンツファイルを公開し、Astro プロジェクトとホスティングがサイトを更新します。

<p id="aster-published-demo">
  <a href="#try-editor">全体の流れ</a>でこの操作を試せます。
</p>

## 全体の流れを体験

サンプルは記事編集から始まります。ステージ操作で接続、コンテンツの確認、編集、レビュー、Web サイトのプレビューを切り替えられます。

<span id="aster-workflow-demo"></span>

<figure>
  <AsterDemo language="ja" stage="edit" id="try-editor" />
  <figcaption>
    Aster の操作デモ：接続 → スキャン → 編集 → 差分確認 → サイトのプレビュー。
  </figcaption>
</figure>

## 既存の Astro サイトで使う

Aster は手順を示す例であり、必須ではありません。ご自身のフィールド名、コンテンツのディレクトリ、表示用のコードを維持してください。

| コンテンツの構成                                                                             | 使い方                                                                                                        |
| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| 静的な Content Collections と、ディレクトリ全体を対象にする Markdown・MDX の `glob` ローダー | リポジトリをスキャンし、検出されたパスと対応する項目を確認します。                                            |
| 対応する静的なスキーマの項目                                                                 | 文書の横で属性を編集します。公開したファイルは引き続き Astro が検証します。                                   |
| 対応する MDX コンポーネントのプロファイル                                                    | ビジュアル操作を使い、独自の構文はソースで編集します。                                                        |
| リモートや独自のローダー、動的なスキーマ、一部のファイルだけを選ぶパターン                   | スキャン結果を確認し、必要に応じて対象範囲を明示的に設定します。Prosefly はリポジトリのコードを実行しません。 |

一般的な Astro コレクションは標準のドキュメントナビゲーションを定義しません。Starlight のサイドバーとコンポーネント編集は [Starlight 向け CMS 導入ガイド](/docs/ja/frameworks/starlight/)をご覧ください。

## 想定と違う場合の確認点

| 状況                                     | 確認すること                                                                                               |
| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| Blog、Projects、フィールドが見つからない | 対象ブランチ、アプリケーションのルート、コンテンツのパス、対応するスキーマ定義を確認して再スキャンします。 |
| MDX コンポーネントがソースで開く         | 検出されたエディタープロファイルを確認します。独自の構文はソースで編集できます。                           |
| サイトに古い文章が表示される             | 下書きと公開の違い、PR のマージ、ホスティングのビルド、ご自身のデプロイ先 URL を確認します。               |
| Prosefly の外で Git のファイルを変更した | 再スキャンしてインデックスを更新してから続けます。                                                         |

次は [Astro 向け CMS の紹介](/ja/frameworks/astro/)、[コンテンツの所有権](/docs/ja/content-ownership/)、[Astro Content Collections の公式ドキュメント](https://docs.astro.build/en/guides/content-collections/)をご覧ください。