はじめに

今回から数回に分けて、TinaCMSについて解説します。第1回目はTinaCMSの概要とその特徴、利点を説明します。

TinaCMSとは?

TinaCMSは、ヘッドレスCMSのひとつです。

CodeGridでは、過去にmicroCMS、HygraphやPrismicとそれぞれ特徴のあるCMSを紹介してきました。

今回紹介するTinaCMSはそれらとは大きく異なる点があります。バックエンドに外部のデータベースを持たず、GitHub上にあるソースコードを直接データベースとして使用するという点です。

microCMSのような外部にデータベースを持ち、APIを介して、そのデータを取得するCMSが「API駆動CMS」（「API driven CMS」、「API first CMS」とも）と呼ばれているのに対し、TinaCMSのような外部データベースを持たないヘッドレスCMSは「GitベースCMS」（「Git based CMS」、「Git backed CMS」とも）と呼ばれています。

TinaCMSの特徴

では、GitベースCMSであるTinaCMSの特徴とはどのようなものでしょうか？ 見ていきましょう。

Gitによるバージョン管理

GitベースCMSであるTinaCMSの利点は、Gitの利点そのものといえます。

コンテンツの変更は、コミットとしてGitに残るので、変更履歴の追跡も容易で、あとから戻すことも可能です。

同じコンテンツを、非開発者はGUI、開発者は開発時のワークフローそのままに編集できる

GitベースのCMSとは、言うなればソースコードを非開発者でも編集できるようにしたオンラインGUIエディタです。

たとえば、エンジニアしか編集しないWebサイトを作成する場合を想像してみてください。

基本的にコンテンツとなるデータはMarkdownファイルやJSONファイル、YAMLファイルなどで管理するのではないでしょうか？ なぜこれらの種類のファイルを使うのか、その理由を考えると、そのWebサイトで使うデータならば、同一リポジトリで管理するのが合理的でシンプルな選択だからです。

実際に、運用するのがエンジニアがほとんどである弊社のWebサイトでは、スタッフやイベントなどのデータは、MarkdownファイルやYAMLファイルなどで管理されていて、変更がある場合はGitHub上にプルリクエストを作るというような形でうまく回っています。

にも関わらず、世のサイトでよくAPI駆動CMSが使われているのは、「非開発者である編集者が編集できなければいけないから」というのが大きいと筆者は考えています。

TinaCMSは非開発者リポジトリ内部のコンテンツを編集できるUIを提供することで、エンジニアしか編集しないのであれば実現できるシンプルな構成を、非エンジニアがいる場合も維持できるツールなわけです。

Visual Editing

TinaCMSはVisual Editingという機能を提供しています。

これは、次の画像のように、実際のページを表示してプレビューしながら、そのページのコンテンツをリアルタイムに編集できる機能です。

TinaCMSの編集画面では、左サイドバーに表示されているTitleフォームにTinaCMS 1回目と入力すると、同時に右半分に表示されているサイトプレビューのタイトル文字がTinaCMS 1回目とリアルタイムに変わっています。

ただ、現状ではVisual Editingを使いたい場合は基本的にReact、Next.jsでTinaCMSを利用することになります。

2024年1月17日現在の状況では、AstroでのVisual Editingが議論されていたり、Vueにも提供できるよう開発中ではあるようですが、まだまだ時間がかかりそうです。

ローカルで少し試してみる

前置きが長くなりましたが、TinaCMSがどのように動作するか、ローカルで少し試してみましょう。

スターターからTinaCMSを使う

新規にプロジェクトを立ち上げる場合は以下のコマンドで、TinaCMSのスターターを利用できます。

$ npx create-tina-app@latest

上記のコマンドを実行すると、いくつか質問が表示されるのでそれぞれ答えていきます。

? Which package manager would you like to use? › - Use arrow-keys. Return to submit.
   Yarn
❯  NPM

パッケージマネージャとしてyarnを使うか、npmを使うか選択できます。今回はnpmにしました。

? What is your project named? › codegrid-tina-1

プロジェクト名を入力します。今回はcodegrid-tina-1としました。

? What starter code would you like to use? › - Use arrow-keys. Return to submit.
❯   Bare bones starter
    Tailwind Starter
    Hugo Starter
    Remix Starter
    Docusaurus Starter

複数あるスターターの中から、どのスターターを使うか選択できます。今回は最小構成という意味のBare bones starterを選択しました。

ここまで入力すると、TinaCMSのスターターがダウンロードされ、プロジェクトが作成されます。

今回試した時点でインストールされたnpmパッケージ、tinacmsはv1.5.24でした。

ディレクトリ構造

作成されたプロジェクトに移動しましょう。中を見てみると、一般的なNext.jsプロジェクトの中に、/tinaというディレクトリと、/contentというディレクトリが追加されたプロジェクトが作成されているのがわかります。

/tinaにはTinaCMSが動作するのに必要な設定ファイルが、/contentにはデモのコンテンツデータが入っています。中身については次回、詳しくみていきます。

開発環境の立ち上げ

$ npm run dev

コマンドで、開発環境が立ち上がります。

package.jsonをみると、scriptsには、次のようにNext.jsのコマンドとともに、TinaCMSのコマンドを実行するように設定されています。

"scripts": {
  "dev": "tinacms dev -c \"next dev\"",
  "build": "tinacms build && next build",
  "start": "tinacms build && next start",
  "lint": "next lint"
},

ブラウザでアクセス

開発環境を立ち上げたら、ブラウザでhttp://localhost:3000にアクセスすると、次のようなシンプルなサイトが表示されます。

TinaCMSは、デフォルトで/admin/index.html上にCMSページを差し込みます。http://localhost:3000/admin/index.htmlにアクセスしてみましょう。「Enter into edit mode」と書かれたダイアログが開くので、Enter Edit Modeボタンをクリックして進みます。

すると、次の画像のように、先ほどのトップページの左側にフォームがあるページが表示されます。これがVisual Editingが設定されたTinaCMSの管理画面です。

大きく2分割された画面で、左がコンテンツの編集画面、右がプレビュー画面となっています。左はPage ContentエリアにMain Contentのブロックが置かれ、ブロック内には「Welcome to the barebones starter for TinaCMS!」というテキストが入力されています。

Visual Editingで文章を変更してみましょう。左のサイドバーにあるMain Contentブロックのテキストを変更し、サイドバー下にあるSaveボタンから保存してみてください。リアルタイムで右側のページプレビュー内のタイトルが変わるのが確認できるはずです。

また、保存して、VS Codeなどのエディタでプロジェクトを開いてみると、次の画像のようにローカルにあるコンテンツデータ、/content/page/home.mdxが直接変更されているのがわかります。

このようにローカルで開発する場合、TinaCMSは「Local Mode（ローカルモード）」と呼ばれるモードで動作します。ローカルモード時には、編集結果はローカル環境にあるファイルに直接反映、保存されます。

今試したのがローカルモードの動作です。

これに対して、デプロイした本番環境では「Prod Mode（プロダクションモード）」で動作します。プロダクションモード時には、編集結果であるファイルの変更は、すべてGitHubのコミットとして記録されます。プロダクションモードでの動作については、シリーズ中でまた別途、詳しく解説します。

まとめ

今回はTinaCMSの1回目ということで、その特徴を説明し、ローカル環境で管理画面を少し触ってみました。

GitベースのCMSは、コンテンツという財産を外部に預けず、自分たちのGitリポジトリに持てることが、筆者はとても魅力的だと考えています。

また、AstroのContent Collectionsなど、リポジトリ内部に持つコンテンツを充実させていくような仕組みとも相性が良いはずなので、TinaCMSは今後もっと発展していくのではないかと筆者は思っています。

次回はディレクトリ構造を詳しくみて、TinaCMSの設定を解説していく予定です。