Webサイトを構築する際、見た目と作成環境がかけ離れていると、修正して結果を確認するという作業を何度も繰り返さないといけません。WYSIWYGなエディタもありますが、CMSのように決まった形ではないので複雑なデザインは作業量が増えてしまいます。 今回紹介するTinaCMSはWebサイト上で使える編集機能を実現します。項目は自分で決められるのが特徴です。

TinaCMSの使い方

デモです。左下に編集に入るボタンがあります。

編集機能を出しました。

このページではブログ記事を追加するだけです。

ブログ記事画面ではタイトルや概要などを細かく編集できます。

編集はリアルタイムに反映されます。

TinaCMSはReactコンポーネントとして提供されます。そして編集項目を自由に設定でき、写真のドラッグ&ドロップによるアップロードや項目の並び替えもできます。Webサイト上でより利便性の高い編集が実現できるでしょう。

TinaCMSはTypeScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

TinaCMS tinacms/tinacms: Tina is a site editing toolkit for modern React-based sites (Gatsby and Next.js)