---
title: "ビジュアル編集のトラブルシューティング"
slug: "troubleshoot-visual-editing"
abstract: "SitecoreAIページビルダーでビジュアル編集を有効にする際のよくあるエラーと解決策。"
---
# ビジュアル編集のトラブルシューティング

> !注**このドキュメントの改善にご協力ください**フレームワークに依存しないドキュメントは現在開発中です。コンテンツ改善の提案があれば、このページの下部で **フィードバック** を共有してください。

このトピックでは、フロントエンドアプリのSitecoreAIページビルダーでビジュアル編集を有効にする際の最も一般的なエラーと解決策について説明します。

## ホストに接続できませんでした

ページビルダーのキャンバスでは、ページビルダーのAPIリクエストがあなたのアプリに失敗すると **「ホストに接続できません」** エラーが表示されます。

問題を解決するために:

1.  アプリの SITECORE\_EDITING\_SECRET 値がSitecoreAIデプロイの数値と正確に一致しているか確認してください。
2.  ページビルダー内の **ローカルホスト** アドレスがあなたのローカルホストアドレスと完全に一致しているか確認してください。
3.  端末でアプリに関するエラーを確認し、修正してください。

## 401無許可

/api/editing/configや/api/editing/renderエンドポイントが401 Unauthorized返した場合は、アプリのSITECORE\_EDITING\_SECRET値がDeployの値と正確に一致しているかSitecoreAI確認してください。

## キャンバスは読み込みますが、コンポーネントは選択できません

ページビルダーキャンバスは正しく読み込まれてもコンポーネントが選択できない場合、[レンダリングクロム<code>ブロック](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/visual-editing/field-types-in-editing-mode.html) が欠落しているか、形が歪んでいる可能性があります。

問題を解決するために:

1.  レンダリングされたHTMLソースを確認し、各コンポーネントの周囲に <code chrometype="rendering"> ブロックが表示され、各プレースホルダーの周りに <code chrometype="placeholder"> ブロックが表示されているか確認してください。
2.  <body>に<script id="jss-hrz-editing">が存在するか確認してください。
3.  sitecore.contextの[編集<script>タグ](./editing-architecture.md#editing-scripts)が<head>に存在しているか確認してください。タグは以下の通りです:
    -   clientScripts
    -   hrz-canvas-state
    -   hrz-canvas-verification-token

## フィールド値はインライン編集できません

ページビルダーキャンバスでコンポーネントを選択できるが、フィールドがインライン編集できない場合、コンテンツ作成者はテキストを選択できますが、入力には影響がありません。この場合、フィールドクローム<code>ブロックが欠けている可能性があります。

レイアウトデータフィールドオブジェクトにはmetadataプロパティが含まれなければならず、これは[sc\_editMode: "true"が設定](./editing-architecture.md#the-editing-graphql-query)された場合にのみ存在します。また、レンダリングされた各フィールド値は[<code chrometype="field">](./field-types-in-editing-mode.md#field-chrome)開閉ブロックでラップしなければなりません。

問題を解決するために:

-   編集コンポーネントのレンダラーが呼び出されていること、 [metaField()](./enable-visual-editing.md#add-metadata-wrappers-to-the-html) が各フィールドのレンダリング出力をラップしていることを確認しましょう。

## キャンバスが読み込まれなかったり、CSPでブロックされたりします

もしページビルダーキャンバスがアプリを全く読み込めず、ブラウザのコンソールにContent-Security-PolicyやCORSエラーが表示されるなら、アプリがiframeリクエストをブロックしているか、ページビルダーが呼び出すAPIをブロックしている可能性が高いです。

問題を解決するために:

1.  /api/editing/configと/api/editing/renderエンドポイントがページビルダーのオリジン(https://pages.sitecorecloud.ioとhttps://app.sitecorecloud.io)を許可するCORSヘッダーを返していることを確認してください。許可されたオリジンについては、アプリが検証すべきものについては[、CORSやCSPのガイダン](./editing-architecture.md#handshake-endpoints)スを参照してください。
2.  アプリのコンテンツ・セキュリティ・ポリシー frame-ancestors 指令が、ページビルダーの元がiframeでアプリを読み込めるようにしているか確認してください。 frame-ancestors が欠けているか 'none'/'self'に設定されている場合、ブラウザはキャンバスのアプリの読み込みをブロックします。
3.  ブラウザのコンソールと **ネットワーク** タブで特定のブロックリクエストを確認し、レスポンスヘッダーが期待通りかどうか確認してください。