Visual Editing by DatoCMS

DatoCMSによるビジュアル編集とは？

DatoCMSによるビジュアル編集は、コンテンツ編集者がライブWebサイト上の任意の要素を直接クリックしてCMS上で編集できる機能です。レコードフォームを探し回って適切なフィールドを見つける代わりに、編集者は変更したい見出し、画像、ブロックをクリックするだけで済みます。このシステムは、ステガノグラフィー（GraphQL APIレスポンス内のすべての文字列に付加される不可視のUnicode文字）を使用して各値の出所をエンコードするため、フロントエンドはすべてのコンテンツがどこから来ているかを自動的に正確に認識します。下書きモードとリアルタイム更新を組み合わせることで、変更はシームレスなWYSIWYG体験になります。

対象ユーザー

• コンテンツ編集者：レコードフォームで探偵ごっこをするのをやめ、ページ要素を直接クリックして編集したい方
• 開発者：既存のDatoCMSプロジェクトで動作し、すべてのコンテンツをソースフィールドに手動で紐付ける必要がない、非常にシンプルな実装を必要とする方
• Next.js、Astro、Svelte、Vueを使用するチーム：ホスティングプロバイダーを変更したりフロントエンドを再構築することなく、編集者にビジュアル編集体験を提供したい方

主な機能

コンテンツリンクによるクリック編集

編集者は下書きモードでWebサイトにアクセスし、編集可能なコンテンツにカーソルを合わせてクリックし、新しいタブでDatoCMSを開きます。これはVercel、Netlify、Cloudflareなど、あらゆるホスティング環境のフロントエンド上で完全に機能します。「あのフィールド、どこだっけ？」と尋ねる必要はもうありません。

サイドバイサイドのビジュアルモード

Webプレビュープラグインがアップグレードされます。左側にプレビュー、右側に編集パネルが表示されます。任意のコンテンツをクリックすると、編集パネルがその場で開きます。タブの切り替えも、コンテキストの喪失もなく、瞬時にライブ更新が行われます。このプラグインは、CMSサイドバーでのプレビューリンク、パネル間の双方向ナビゲーション、全画面ビジュアル編集モードも有効にします。

自動メタデータエンコーディング

ステガノグラフィーは、各値の出所（レコードID、フィールドパス、ロケール）をGraphQL APIレスポンスに直接埋め込みます。``コンポーネントは、このメタデータを自動的にページ上でスキャンし、適切なDOMノードに編集オーバーレイをレンダリングします。手動での配線は不要です。レコードへのリンク、ブロック、構造化テキスト、モジュラーコンテンツなど、コンテンツモデル全体でそのまま動作します。

特筆すべき点

「レコードフォームを探し回って適切なフィールドを見つける必要はもうありません。」

これは単なるプレビューツールではありません。これは、編集者がヘッドレスCMSコンテンツと対話する方法の根本的な変革です。ステガノグラフィーによるアプローチにより、開発者はすべてのコンテンツをソースフィールドに手動で紐付ける必要がなくなります。これは、せいぜい面倒な作業であり、最悪の場合、メンテナンスの悪夢です。代わりに、メタデータが自動的に付随するため、セットアップは最小限で済みます。既存のGraphQLリクエストに2つのヘッダーを追加し、レイアウトに1つのコンポーネントを追加するだけです。

こんな方におすすめ

編集者から「あのフィールド、どこだっけ？」と聞かれるのにうんざりしていて、既存のDatoCMSプロジェクト、任意のホスティングプロバイダー、そして最小限の開発者労力で動作するビジュアル編集体験を求めている方。Next.js、Astro、Svelte、Vue用のSDKを備え、すべてのプラン（Freeプランを含む）で利用可能です。