Prosefly
ウェブサイトのリポジトリにあるコンテンツを、ホスティングされたコンテンツスペースで編集。
- 01
GitHub を接続し、コンテンツスペースを開く。
- 02
一緒に書き、Git にコミットせず共有の下書きとして保存。
- 03
ファイルの差分を確認し、コミットまたはプルリクエストで公開。
Prosefly
TinaCMSProsefly と TinaCMS の比較
コンテンツスペースか、ウェブサイト内での編集か。
どちらも公開済みコンテンツを Git に保存します。独立した執筆用コンテンツスペースと、Git ベースのコンテンツ API・サイト内編集を組み合わせる CMS の選択です。
詳しく比較する必要な編集体験から考える。
Prosefly は執筆、リアルタイム共同編集、ファイル差分のレビューに重点を置きます。TinaCMS はプロジェクト内でコンテンツを定義し、React サイトのプレビューと編集を連動できます。編集者がサイトのどこまで扱う必要があるかを考えてみましょう。
コンテンツと向き合う、2つの方法。
TinaCMS
Git ベースのコンテンツ API と、サイトに組み込むビジュアル編集を備えた CMS。
- 01
tina/config.ts でコレクションと項目を定義。
- 02
Tina の管理画面から Git ベースのコンテンツを編集。
- 03
ファイルまたは Tina のコンテンツ API をサイトで利用。
それぞれの基本的な流れをまとめています。設定や追加サービスによって詳細は変わります。
ドキュメントの構造が分かるビジュアルエディター。
Markdown・MDX のビジュアル編集に加えて、Starlight、Fumadocs、Prosefly コンポーネントに個別対応。同じエディターで、対応するドキュメント用ブロックを扱えます。
Starlight注意書き、タブ、カード、ファイルツリーを編集。Starlight のコンポーネント構文と Expressive Code のメタデータに対応します。
FumadocsFumadocs のコンポーネント構文と対応するプロパティで、コールアウト、タブ、ステップ、アコーディオンを編集。
- Prosefly コンポーネント
Lotus と Dahlia で使われる @prosefly/astro-components のコールアウト、タブ、カード、アコーディオンを編集。
対応範囲はコレクションのエディタープロファイルと、認識できる構文によって異なります。独自のコンポーネントや未対応の式はソースで編集でき、リポジトリのコードは実行しません。
ビジュアル編集を見る日々の作業は、どう変わるか。
- 公開済みコンテンツ
- Prosefly
公開済みの文書、JSON・YAML リソース、Public ファイルは自分の Git リポジトリに保存。
- TinaCMS
Git に保存する Markdown、MDX、JSON。
- 導入
- Prosefly
GitHub を接続し、対応するコンテンツをスキャンしてコンテンツスペースを設定。
- TinaCMS
tina/config.ts でコンテンツモデルを定義し、Tina バックエンドを設定。
- 編集体験
- Prosefly
ビジュアル編集とソース編集、frontmatter の属性、リアルタイム共同編集。Starlight、Fumadocs、@prosefly/astro-components 向けのビジュアル編集に対応。
- TinaCMS
管理画面で編集。React サイトにはサイトと連動するビジュアル編集を組み込める。
- 下書きと保存
- Prosefly
保存しても Git は変わりません。公開するまで、下書きはコンテンツスペースに残ります。
- TinaCMS
公式ドキュメントの保存フローでは、変更を Git にコミット。
- 公開
- Prosefly
ファイルの差分を確認し、コミットまたはプルリクエストで公開。
- TinaCMS
Tina バックエンドを経由して Git のコンテンツに変更を反映。
- メディア
- Prosefly
Public の画像は Git に公開。組織のメディアは別途ホスティングされた URL を利用。
- TinaCMS
Tina のプロジェクトとバックエンドの設定としてメディアを管理。
- ホスティングと保守
- Prosefly
編集サービスは Prosefly が運用。ウェブサイトとビルドパイプラインは自分で管理。
- TinaCMS
TinaCloud または自前のバックエンドを利用し、サイトとの連携を管理。
Git への公開自体はサイトをデプロイしません。Prosefly は既存のビルドパイプラインを利用し、リポジトリの再取得は明示的なスキャンで行います。
Tina のビジュアル編集はウェブサイトに、Prosefly のビジュアル編集は文書に重点を置きます。どちらも、あらゆる MDX の式やコンポーネントを設定なしでビジュアル編集できるわけではありません。
必要な作業を軸に選びましょう。
Prosefly が向いている場合
- 主な作業が Markdown・MDX の執筆で、対応するコンポーネントを画面から操作したい。
- コミットやプルリクエストの前に、共有の下書きを保存・修正したい。
- サイトは既存のビルドでリポジトリのファイルを使い続けられる。
TinaCMS を検討したい場合
- React サイトのプレビューと編集を連動させたい。
- Git ファイルを元にした、クエリ可能なコンテンツ API が欲しい。
- 開発者が Tina のコンテンツモデルを定義・管理したい。
さらに詳しく
出典と比較の範囲
確認日
製品の事実関係は、以下の公式ドキュメントで確認しています。選び方は私たちの見解です。追加の連携や有料版には別の機能が含まれる場合があります。選定時は最新のドキュメントと利用条件をご確認ください。
ほかの比較
今のウェブサイトに、書く場所を。
リポジトリを接続して、ご自身のコンテンツで一連の操作を試せます。