ビジュアル編集
日本語翻訳に関する免責事項
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
!注このドキュメントの改善にご協力くださいフレームワークに依存しないドキュメントは現在開発中です。コンテンツ改善の提案があれば、このページの下部で フィードバック を共有してください。
フロントエンドアプリでSitecoreコンテンツをレンダリングした後、次の重要な開発タスクは、SitecoreAIページビルダーで作業するコンテンツ作成者向けに「What You See Is What You Get(WYSIWYG)」編集を可能にすることです。
ビジュアル編集により、コンテンツ作成者は別のビューで作業するのではなく、実際のレンダリングされたページを見て操作できるようになります。例えば、見出しをクリックしてその場で編集したり、コンポーネントをドラッグして並べ替えたり、結果を即座に確認しながらコンポーネント設定を設定したりできます。要するに、ビジュアル編集はコンテンツの制作と公開されたサイト上の見た目を見ることの間のギャップを埋めます。
具体的な実装の詳細はフレームワークによって異なりますが、ビジュアル編集を可能にするには同じ主要な手順があります:
- Pageビルダーキャンバスのiframe内にフロントエンドアプリを読み込んでください。
- レンダリングされたHTMLにメタデータを注釈してください。ページビルダーはこのメタデータを使って各プレースホルダー、コンポーネント、フィールドを特定します。
- すべてのコンテンツ作成者がページビルダーからアプリに接続できるようにアプリを展開してください。
始めましょう
ビジュアル編集を始めるには:
- メタデータ編集モード、フィールドクローム、編集スクリプト、そしてアプリがページビルダーに公開しなければならないエンドポイントなど、編集の仕組みについて学びましょう。
- ページビルダーでインライン編集を有効にするために、各フィールドタイプごとにアプリが生成しなければならないHTMLクロームパターンを確認してください。
- 「ビジュアル編集を有効にする」ウォークスルーを完了してください。そこでエンドポイントを作成し、アプリがレンダリングするHTMLにメタデータラッパーを追加し、ページビルダーのiframeにアプリを読み込みます。
アプリのデプロイ
ビジュアル編集を有効にした後、すべてのコンテンツ作成者がページビルダーからアプリに接続できるように展開できます。アプリの展開方法はフレームワークによって異なります:
- Nodeベースのプロジェクトでは、SitecoreAI Deployがネイティブにアプリをビルドし、ホストしてくれます。リポジトリのxmcloud.build.jsonファイルで、renderingHostsにエントリを追加して設定します。SitecoreAIはホストされたインスタンスを編集ホストとして使用します。
- Node以外のプロジェクトの場合、SitecoreAI DeployはNode以外のアプリケーションを構築またはホストすることはできません。自分でアプリを自分のホスティングプロバイダーにデプロイし、その後Sitecoreで外部編集ホストとして登録します。xmcloud.build.jsonでは、renderingHosts対象は空のままにされます"renderingHosts": {}。詳細については、SitecoreAIの編集ホストの種類をご覧ください。
この記事を改善するための提案がある場合は、 お知らせください!