--- title: "ビジュアル編集" slug: "visual-editing" abstract: "SitecoreAIページビルダーでコンテンツ作成者のWYSIWYG編集を有効にする方法の概要。" --- # ビジュアル編集 > !注**このドキュメントの改善にご協力ください**フレームワークに依存しないドキュメントは現在開発中です。コンテンツ改善の提案があれば、このページの下部で **フィードバック** を共有してください。 フロントエンドアプリでSitecoreコンテンツをレンダリングした後、次の重要な開発タスクは、[SitecoreAIページビルダー](https://doc.sitecore.com/sai/en/users/sitecoreai/build-pages.html)で作業するコンテンツ作成者向けに「What You See Is What You Get(WYSIWYG)」編集を可能にすることです。 ビジュアル編集により、コンテンツ作成者は別のビューで作業するのではなく、実際のレンダリングされたページを見て操作できるようになります。例えば、見出しをクリックしてその場で編集したり、コンポーネントをドラッグして並べ替えたり、結果を即座に確認しながらコンポーネント設定を設定したりできます。要するに、ビジュアル編集はコンテンツの制作と公開されたサイト上の見た目を見ることの間のギャップを埋めます。 具体的な実装の詳細はフレームワークによって異なりますが、ビジュアル編集を可能にするには同じ主要な手順があります: 1. Pageビルダーキャンバスのiframe内にフロントエンドアプリを読み込んでください。 2. レンダリングされたHTMLにメタデータを注釈してください。ページビルダーはこのメタデータを使って各プレースホルダー、コンポーネント、フィールドを特定します。 3. すべてのコンテンツ作成者がページビルダーからアプリに接続できるようにアプリを展開してください。 ## 始めましょう ビジュアル編集を始めるには: - [メタデータ編集モード、フィールドクローム、編集スクリプト、そしてアプリがページビルダーに公開しなければならないエンドポイントなど、編集の仕組みについて学びましょう。](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/visual-editing/editing-architecture.html) - [ページビルダーでインライン編集を有効にするために、各フィールドタイプごとにアプリが生成しなければならないHTMLクロームパターンを確認してください。](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/visual-editing/field-types-in-editing-mode.html) - [「ビジュアル編集を有効にする](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/visual-editing/enable-visual-editing.html)」ウォークスルーを完了してください。そこでエンドポイントを作成し、アプリがレンダリングするHTMLにメタデータラッパーを追加し、ページビルダーのiframeにアプリを読み込みます。 ## アプリのデプロイ ビジュアル編集を有効にした後、すべてのコンテンツ作成者がページビルダーからアプリに接続できるように展開できます。アプリの展開方法はフレームワークによって異なります: - *Nodeベースのプロジェクトでは*、SitecoreAI Deployがネイティブにアプリをビルドし、ホストしてくれます。リポジトリのxmcloud.build.jsonファイルで、renderingHostsにエントリを追加して[設定](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/create-a-sitecoreai-project-with-your-own-code.html#set-up-your-repository)します。SitecoreAIはホストされたインスタンスを編集ホストとして使用します。 - *Node以外のプロジェクトの場合*、SitecoreAI DeployはNode以外のアプリケーションを構築またはホストすることはできません。自分でアプリを自分のホスティングプロバイダーにデプロイし、その後Sitecoreで[外部編集ホスト](https://doc.sitecore.com/sai/ja/developers/sitecoreai/environment-editing-hosts-and-rendering-hosts/configure-an-external-editing-host.html)として登録します。xmcloud.build.jsonでは、renderingHosts対象は[空のままにされます](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/create-a-sitecoreai-project-with-your-own-code.html#set-up-your-repository)"renderingHosts": {}。詳細については、[SitecoreAIの編集ホスト](https://doc.sitecore.com/sai/ja/developers/sitecoreai/environment-editing-hosts-and-rendering-hosts/the-different-types-of-editing-hosts-in-sitecoreai.html)の種類をご覧ください。