DatoCMSビジュアルエディティングの紹介

DatoCMSビジュアルエディティングとは？

DatoCMSビジュアルエディティングは、従来のヘッドレスCMSワークフローに内在するコンテンツ作成とコンテンツ表示の間の断絶を解消するために設計された革新的な機能です。コンテンツエディターに複雑なバックエンドフォームを操作させたり、どのフィールドがどのページ上の要素に対応するかを推測させたりする代わりに、ビジュアルエディティングではライブウェブサイトのプレビューと直接対話できます。この機能は、直感的な「WYSIWYG（見たままが得られる）」体験をヘッドレス環境に直接もたらし、コンテンツの変更が迅速、正確、かつコンテキストを認識した状態で行われることを保証します。これは、エディターの考え方をデータモデルの管理からページや投稿の管理へと根本的に変えます。

この強力な機能は、クリックして編集（コンテンツリンク）とサイドバイサイド編集（ビジュアルモード）という、2つの明確で補完的なワークフローによってサポートされています。重要な点として、この機能はすべてのDatoCMSプラン（無料プランを含む）で利用可能であり、Next.js、Astro、Svelte、Vueなどの最新のフロントエンドフレームワーク向けの専用SDKによってサポートされているため、既存および新規プロジェクトへの導入がシームレスになります。

主な機能

• クリックして編集（コンテンツリンク）: エディターはドラフトモードでライブサイトにアクセスし、編集可能なコンテンツの上にカーソルを合わせ、クリックするとDatoCMS内の対応するフィールドが新しいタブで即座に開きます。これは、ホスティング（Vercel、Netlify、Cloudflare）に関係なく、フロントエンド全体で機能します。
• サイドバイサイドビジュアルモード: Webプレビュープラグインを強化したバージョンで、片側にウェブサイトのプレビュー、もう片側に編集パネルを直接表示します。コンテンツをクリックすると、コンテキストを切り替えることなく、関連するエディターパネルが即座に開きます。
• ステガノグラフィーバックエンド: このシステムは、GraphQL APIレスポンスに追加された目に見えないUnicode文字を使用して、すべてのコンテンツのオリジンメタデータ（レコードID、フィールドパス、ロケール）をエンコードします。これにより、フロントエンドは手動での開発者による配線なしに、クリックを正しいデータソースに自動的にマッピングできます。
• 双方向コンテキスト同期: サイドバイサイドモードでは、プレビューパネルのスクロールが編集パネルと同期し、逆も同様に行われるため、複雑な編集中でも完璧なコンテキストが維持されます。
• ユニバーサル互換性: レコードへのリンク、モジュラーブロック、構造化テキスト、ローカライズされたフィールドを含む複雑なコンテンツ構造でも、すぐに機能します。
• フレームワークSDKサポート: 主要なフレームワーク（React/Next.js、Astro、Svelte/SvelteKit、Vue/Nuxt）向けの専用SDKが、フレームワークに依存しない@datocms/content-linkライブラリに基づいて実装を簡素化します。

DatoCMSビジュアルエディティングの使い方

ビジュアルエディティングの開始は最小限になるように設計されており、開発者がコンテンツチームのために体験を有効にするには、主に次の3つのステップが必要です。

1. Stegaエンコーディングの有効化: GraphQL経由でドラフトコンテンツを取得する際、リクエストに2つの特定のヘッダーを追加します: X-Visual-Editing: v1 および X-Base-Editing-Url: https://<YOUR-PROJECT-NAME>.admin.datocms.com。
2. ContentLinkコンポーネントの統合: フレームワーク固有の<ContentLink />コンポーネントをメインのレイアウトファイルに追加します。このコンポーネントは、埋め込まれたステガノグラフィーメタデータのためにレンダリングされたDOMを自動的にスキャンし、必要な編集オーバーレイを描画します。
3. サイドバイサイド編集のロック解除（オプションだが推奨）: DatoCMSプロジェクト設定内でWebプレビュープラグインをインストールして設定し、CMSサイドバー内で直接、非常に効率的なサイドバイサイド編集インターフェースを有効にします。

設定が完了すると、エディターは単にドラフトモードでサイトにアクセスする（またはCMSインターフェースを開く）だけで、変更したいコンテンツをクリックし始め、変更が即座に反映されるか、編集の準備が整います。

ユースケース

1. 高速なマーケティングチーム: 頻繁なキャンペーンやランディングページを公開するチームは、ページプレビュー上でコピーや画像を直接迅速に反復処理でき、デザイン、開発、コンテンツチーム間の調整にかかる時間を劇的に短縮できます。
2. 複雑なEコマース商品ページ: 深くネストされたモジュラーコンテンツ（例：商品説明、機能ブロック、仕様）を管理するエディターは、数十のコンテンツレコードを手動で検索することなく、更新が必要な特定のセクションを直接クリックできます。
3. 多言語コンテンツ管理: 複数のロケールをサポートするサイトでは、ビジュアルエディティングにより、エディターが正しいローカライズされたバージョンのコンテンツを編集していることが保証されます。メタデータにロケール情報が含まれているため、翻訳された文字列の誤った上書きを防ぎます。
4. 代理店開発とクライアントへの引き渡し: 代理店はビジュアルエディティングを有効にしてプロジェクトを展開し、クライアントに即座に直感的な編集体験を提供することで、トレーニング時間を最小限に抑え、コンテンツの場所に関するサポートリクエストを削減できます。
5. 反復的なデザインとコンテンツのペアリング: 開発者とデザイナーはコンテンツエディターとリアルタイムで連携できます。新しいコンポーネントが構築されると、エディターはビジュアルインターフェースを使用して、本番環境ですぐに使用できるコンテンツでそれらを即座に設定できます。

FAQ

Q: ビジュアルエディティングは有料プランでのみ利用可能ですか？ A: いいえ。DatoCMSは、すべてのプラン（無料プランを含む）でビジュアルエディティングを利用できるようにしており、すべてのユーザーがアップグレードなしでこの強化された編集体験の恩恵を受けられるようにしています。

Q: 明示的にリストされていないフレームワーク（例：Remix）を使用している場合はどうなりますか？ A: すべての公式SDKは、フレームワークに依存しないライブラリ@datocms/content-linkの上に構築されています。このコアライブラリを任意のフロントエンドセットアップに直接統合することで、同じ機能を実現できます。

Q: コンテンツのすべてのピースをフィールドに手動でマッピングする必要がありますか？ A: 全く必要ありません。核となるイノベーションはステガノグラフィー技術であり、GraphQLレスポンスにオリジンメタデータを自動的に追加します。<ContentLink />コンポーネントはこのメタデータをスキャンし、編集オーバーレイを自動的に接続するため、面倒な手動設定が不要になります。

Q: 既存のWebプレビュー設定でビジュアルエディティングを使用できますか？ A: はい。サイドバイサイドビジュアルモードは、既存のWebプレビュープラグインのアップグレード版です。すでにWebプレビューを使用している場合、新しい機能を有効にするには最小限の設定変更で済みます。

Q: どのような種類のコンテンツ構造がサポートされていますか？ A: 標準フィールド、他のレコードへのリンク、複雑な構造化テキストブロック、深くネストされたモジュラーコンテンツ構造を含む、DatoCMSコンテンツモデリングの全範囲をサポートしています。