非エンジニアに「Gitで編集して」とは言えない。TinaCMSという妥協点

はじめに

ブログ記事や会社サイトのコンテンツをMarkdownファイルでGit管理していると、エンジニアにとっては快適な一方で、こんな壁にぶつかったことはないでしょうか。

「原稿を直してほしいだけなのに、Markdownの書き方とPull Requestの出し方を説明するところから始めないといけない」

かといって、WordPressやContentfulのようなCMSを別に導入すると、今度はコンテンツがGitの外に出てしまい、バージョン管理やレビューの仕組みを手放すことになります。この「Gitで管理したいエンジニア」と「画面を見ながら直感的に編集したい非エンジニア」の間にある溝を埋めてくれるのが、TinaCMSです。

TinaCMSとは

TinaCMSは、MarkdownやJSON、MDXファイルをGitリポジトリのまま管理しながら、サイト上でビジュアル編集ができるオープンソースのヘッドレスCMSです。編集内容は裏側でGitコミットとして保存されるため、コンテンツもコードと同じようにバージョン管理・レビューの対象にできます。Next.jsをはじめ、Astro、Hugo、Gatsbyなど複数のフレームワークに対応しています。

主な特徴

• Gitバックエンド - コンテンツの実体はリポジトリ内のMarkdown/JSON/MDXファイルで、独自データベースを持ちません
• ビジュアル編集 - 公開ページ上でその場を直接クリックして文章や画像を編集できる「Visual Editing」に対応しています
• スキーマ駆動 - tina/config.ts にコレクション（記事、固定ページなど）とフィールドを定義するだけで、編集画面が自動生成されます
• GraphQL API - 定義したスキーマから型付きのGraphQL APIが生成され、フロントエンドから安全にコンテンツを取得できます

インストール

新規プロジェクトとして始める場合は、CLIで一気にセットアップできます。

npx create-tina-app@latest

既存のNext.jsプロジェクトに導入する場合は、パッケージを個別に追加します。

npm install tinacms @tinacms/cli

基本的な使い方

まず tina/config.ts にコンテンツのスキーマを定義します。ここでは「posts」というブログ記事コレクションを例にします。

// tina/config.ts
import { defineConfig } from "tinacms";

export default defineConfig({
  branch: "main",
  clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID,
  token: process.env.TINA_TOKEN,
  build: {
    outputFolder: "admin",
    publicFolder: "public",
  },
  schema: {
    collections: [
      {
        name: "post",
        label: "Blog Posts",
        path: "content/posts",
        format: "md",
        fields: [
          {
            type: "string",
            name: "title",
            label: "Title",
            isTitle: true,
            required: true,
          },
          {
            type: "rich-text",
            name: "body",
            label: "Body",
            isBody: true,
          },
        ],
      },
    ],
  },
});

開発サーバーは、Next.jsの起動コマンドをTinaのCLIでラップして立ち上げます。

npx tinacms dev -c "next dev"

これで /admin にアクセスすると編集用のUIが表示され、ページ上のコンテンツを直接クリックして書き換えられるようになります。編集した内容は、設定した branch に対してコミットとして反映されます。

ページ側では useTina フックを使うことで、編集モード時はリアルタイムプレビュー、通常時は静的に取得したデータをそのまま表示できます。

// app/posts/[slug]/page.tsx
import { client } from "../../../tina/__generated__/client";
import { useTina } from "tinacms/dist/react";

export default async function PostPage({ params }: { params: { slug: string } }) {
  const { data } = await client.queries.post({
    relativePath: `${params.slug}.md`,
  });

  return <PostBody query={data} />;
}

実践的なユースケース

社内で「エンジニアはコードエディタでMarkdownを書き、広報担当は公開後の画面を見ながら文言を修正したい」というケースを考えてみます。TinaCMSを導入すると、両者は同じMarkdownファイルを別々の入り口から編集できるようになります。

• エンジニアは普段通りエディタでMarkdownを書き、Pull Requestとしてレビューを回す
• 広報担当は /admin からビジュアル編集画面を開き、公開中のページを見ながらタイトルや本文を直接修正する
• どちらの変更もGitコミットとして記録されるため、変更履歴や差分は従来通りGitで追跡できる

社内向けお知らせページや、更新頻度の高いLPのコピー修正など、「軽微な文言変更のためだけにエンジニアの手を止めたくない」場面で特に効果を発揮します。

まとめ

TinaCMSは、コンテンツをGitで管理し続けたいエンジニアと、画面を見ながら直感的に編集したい非エンジニアの、両方の要望を満たすヘッドレスCMSです。tina/config.ts でスキーマを定義するだけでビジュアル編集画面が手に入り、既存のNext.jsプロジェクトにも段階的に導入できます。Markdownベースのコンテンツ運用に「編集のしやすさ」を足したいなら、まずは npx create-tina-app@latest で試してみるのがおすすめです。