OSSのヘッドレスCMS Tina を試す

t-yng

Tinaとは

GitHubをコンテンツデータベースとしたOSSのCMS
自分のブログにローカル環境で編集できるUIを追加できたり、ブログのデザインを見ながらリアルタイム編集ができるのが特徴

https://tina.io/docs/

t-yng

概要

Tinaを構築するcliツールを提供
コンテンツを取得可能なGraphQLAPIを提供
ブログの記事ページを見ながら編集できるビジュアル編集UIを提供
Tina Cloud でオンラインでの編集も可能
- GitHubリポジトリとsyncされる

https://tina.io/docs/product-tour/

t-yng

既存ブログにTinaを構築

Next.jsで構築した個人ブログにTinaを導入してみる。
https://tina.io/docs/frameworks/nextjs/

インストール

リポジトリのルートでnpx @tinacms/cli@latest initを実行する

$ npx @tinacms/cli@latest init
✔ What is your Tina Cloud Client ID? (Hit enter to skip and set up yourself later)
Don't have a Client ID? Create one here: https://app.tina.io/projects/new …
✔ Choose your package manager › Yarn
✔ What framework are you using? › Next.js
✔ Would you like to use Typescript for your Tina Configuration (Recommended)? … yes

動かしてみる

package.jsonのscriptsが自動書き換わり、すぐに試せる状態になっている。

{
  "scripts: {
    "dev": "tinacms dev -c \"next dev\"",
  }
}

$ yarn devを実行して http://localhost:3000/admin/index.html にアクセスする。
デフォルトのディレクトリ構造と偶然同じになってたので、記事一覧などが表示できた。（ある程度動的にプロジェクト構造を読み取って設定されているかは不明）

ただ、記事編集をしようとするとエラーが発生した。

t-yng

コンテンツモデルの設定

セットアップでコンテンツモデルを設定してね！とあるので、やってみる。👀

コンテンツモデルはTinaがコンテンツの形状を認識するためのもの？
https://tina.io/docs/schema/

collections

コンテンツのエントリーの一覧を管理するキー
次のJSONで定義の一覧を定義したコレクションを設定できる。

    collections: [
      {
        label: 'Blog Posts',
        name: 'post',
        path: 'content/posts',
        fields: [
          {
            type: 'string',
            label: 'Title',
            name: 'title',
          },
          {
            type: 'string',
            label: 'Post Body',
            name: 'body',
            isBody: true,
          },
        ],
      },
    ],

編集できる状態にする

uiの設定が自動生成されたデモ用のページにルーティングされており、ビルドエラーになるのでこの部分をコメントアウトする。

{
  ui: {
    // This is an DEMO router. You can remove this to fit your site
    router: ({ document }) => `/demo/blog/${document._sys.filename}`,
  },
}

とりあえず、編集できる状態になった。

t-yng

ビジュアル編集について

ドキュメントを読む限りではビジュアル編集を有効にするには、useTinaを利用して記事ページコンポーネントを書き換える必要がありそう。👀

ビルド時にmarkdown-itでMarkdownをHTMLに書き換えて、色々と割り込みで処理しているので、素直にTinaのclientを利用してコンテンツを取得するように書き換えることができない。。。

ただ、コンテンツ取得の実装を変更すれば、対応はできそうな予感

Next.jsへの組み込みを検討した結果

自分のブログはビルド時にmarkdown-itでHTML文字列に変換して、流し込みをしている。
ビジュアル編集を導入するためにuseTinaを利用するには、この変換の仕組みを根本的に作り直す必要がある。

修正コストが高いので、今回は導入を見送り

ローカルファイルに対して編集する仕組みは面白いので、自前で作ってたエディターをブログに組み込む方針が良いかも。