> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/developer/inline-edit-mechanism.md).
# ページ編集体験の実装原理：変更が与える影響と対処方法
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：技術サポートに連絡
上記の手順でも失効の問題が解決しない場合、またはさらなるご支援が必要な場合は、技術サポートチームまでご連絡ください。
## 最後に
みなさまにページ編集の原理とセレクターについてご理解いただくことは、ページ構造の変更に対処する上で非常に重要です。
ページ変更後にセレクターが正確であるかどうかを確認することで、ページ編集の失効を防ぎ、体験データの正確性と信頼性を向上させることができます。