# ページ編集体験の実装原理：変更が与える影響と対処方法
Ptengine のページ編集機能は、直感的で柔軟な操作を可能にし、リアルタイムでサイトのコンテンツやレイアウトを調整できます。この機能を活用することで、ユーザー体験の向上やコンバージョン率の改善が期待できます。
しかし、**元のページ構造が変更されると、編集した体験が無効になる可能性があります**。\
以下では、ページ編集体験の実装原理、変更が与える影響、および失効時の対処方法について詳しく解説します。
## ページ編集体験の実装原理
### **ページ編集の仕組み**
ページ編集では、**セレクター**を使用して編集対象の要素を特定し、変更内容を保存します。\
ページがレンダリングされる際、ptengineのサーバーが保存されたセレクターに基づいて要素を特定し、ページ編集を実現します。
### **セレクターとは？**
セレクターは、HTML要素を特定するための識別子であり、地図の道案内のように、その情報に基づいてページ上の特定の位置にある要素を見つけることができるものです。\
通常、要素のタグ名、クラス名、IDなどで構成されます。
以下の図の例のように：
テキスト：**こんなに簡単に実現** に対応するセレクターは：`body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)` となります。
### ページ編集体験の一例
例えば、ページのファーストビューにあるテキスト「**こんなに簡単に実現」**を「**迅速かつインテリジェントに実現」** に置き換えるとします。
テキストを更新し、「保存」をクリックすると、体験はセレクターと変更内容を保存します。データ構造はおおよそ以下のようになります：
```
[{
selector: 'body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)',
text: '迅速かつインテリジェントに実現'
}]
```
最後にクライアントページがレンダリングされる際、体験で保存された**セレクター**に従って要素を見つけ、その要素の内容を置き換えます。
## **元のページ変更が体験に与える影響**
一方で、クライアントの元のページが変更された場合、セレクターの正確性が影響を受ける可能性があります。
ページの変更が、テキストや画像の置き換えのみの場合、通常セレクターには影響がなく、ページ編集体験は引き続き有効です。
しかし、ページの構造に対して変更が加えられた場合（要素の削除、クラス名の変更、全体的な構造の調整などが行われた場合）、セレクターが以前に指定した要素を正確に特定できなくなることで、結果的にページ編集実験が無効になることがあります。
上述の体験の例に基づいて、さらに詳しくご説明します：
### 例1：元のページがテキストを調整した場合
元のページが単にテキストのみを調整したと仮定します。その場合は、以下のようになります：
セレクター：`body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)`
セレクター：`body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)`
この場合、セレクターには変更がないため、体験にも影響がなく、正常に実行されます。
### 例2：元のページがページ構造を調整した場合
元のページが、バナーのページ構造を調整し、サブタイトルを削除し、スタイルとテキストを更新する必要があると仮定します。
セレクター：`body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)`
セレクター：`body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud **> div.pt-head > h1**`
この場合、上図のように、要素の削除や置き換えによるページ構造の変更により、セレクターが正しく機能せず、最終的に体験の変更が無効になります。
### 例3：元のページ上の要素IDが動的に変化する場合 ❌
元のページ上の要素の`id`属性が動的に生成され、ページの更新やリフレッシュ時に要素`id`が変化すると仮定します。
セレクター：`body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)`
セレクター：`body > **#__nuxt-xxad-da** > **#__layout-x-xx** > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)`
上図のように、ページIDの変更によってセレクターが正しく機能せず、最終的に体験の変更が無効になります。
## 体験失効への対処方法
ページ構造を変更する前に、すでにページ編集している部分に留意し、すでにセレクターが設定されている要素の変更を避けていただく必要があります。変更後は、以下の方法でインライン編集への影響を確認することができます。：
### 手順1：体験のプレビュー
ページ編集体験が失効または異常と判明した場合、まず体験のプレビューを行い、失効の原因がページ構造の変更によるものかどうかを確認します。
* **プレビューが正常：** ページ構造に問題がないことを示します。ユーザーはページ体験の適用範囲や体験のトリガー条件に注目する必要があります。
* **プレビューが異常：** 次のステップに進んで確認します。
### 手順2：体験の再編集
体験編集画面に入り、変更項目に【要素が見つかりません】の表示があるかどうかを確認します。この表示がある場合、その変更項目は失効していることを意味します。
失効の表示がある場合：その変更項目を削除し、正しい要素を再度特定してページ編集を行なってください。
### 手順3：技術サポートに連絡
上記の手順でも失効の問題が解決しない場合、またはさらなるご支援が必要な場合は、技術サポートチームまでご連絡ください。
## 最後に
みなさまにページ編集の原理とセレクターについてご理解いただくことは、ページ構造の変更に対処する上で非常に重要です。
ページ変更後にセレクターが正確であるかどうかを確認することで、ページ編集の失効を防ぎ、体験データの正確性と信頼性を向上させることができます。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://helps.ptengine.com/developer/inline-edit-mechanism.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.