Ptengine ページ編集機能の留意事項

Ptengineのページ編集機能を使用する際には、各機能とそれに伴う影響を理解することが非常に重要です。

この記事では、「HTMLの編集」、「要素のコピー＆ペースト」、「移動」、「スタイルの変更」

というよく使う操作についての説明のおすすめの使い方をご紹介します。

HTMLの編集 #

ページ編集機能によって、Ptengineを介してページのHTMLを編集し、Ptengineを介して本番に適用することができます。HTMLの経験がある方には非常に便利な機能ですが、不適切に使用すると副作用が発生する可能性があります。

インタラクティブコンテンツの不具合

インタラクティブコンテンツとは
クリックやマウスオーバーなどのユーザーの操作によって機能するコンテンツ及びその機能自体を指します。メニューやアコーディオン、カーツ追加ボタン、購入ボタン、フォーム、リンクなどが該当します。

状況説明

1)HTMLの編集は、特定要素に対して指定して作用するJavaScriptイベントに影響を与え、元の機能が使用できなくなる可能性があります。たとえば、スライダーの編集後に正常にスライドしなくなることがあります。他にもクリックして開くようなポップアップやアコーディオンなども同様です。
2) HTMLの編集は、モジュールの元の構造を破壊し、機能が使用できなくなったり、レイアウトが異常になったりする可能性があります。タブやメニューのインタラクションがマウスクリックに正常に応答しないなどが該当します。

おすすめの使い方

1)インタラクティブ性のある要素の変更を最小限に抑える

関連する要素を変更したい場合は、編集後にJavaScriptでイベントを再度適用する必要があります。同様の体験の「コードモード」で記述を追加して適用します。

2)編集を個々のレベルで行う

複数のコンテンツを変更する場合は、上位の階層を選択して、「HTML編集」を使うのではなく、コンテンツを一つずつ「HTML編集」を行うのがおすすめです。なぜなら、個別で編集すれば元のページ構造を壊すリスクが少ないからです。

例えば、下記の画像内赤枠の3つのコンテンツを変更する場合は、2つの方法があります。

方法1【おすすめの方法】：それぞれ1、2、3を個別に変更し、3回の変更で修正を完了します。
方法2【おすすめしない方法】：1、2、3を包含する上位のレイヤーを選択すると、その下位のhtmlも編集できます。一度に複数の変更が可能ですが、構造が崩れやすくなります。

方法2は変更を素早く行うことができますが、ページ構造を壊しやすいため、インタラクティブ要素に悪影響が発生する可能性があります。

コピーと貼り付け #

ページ上の任意の要素をコピーし、別の位置に貼り付けることができます。

非常に柔軟性が高い機能ですが、不適切な使用方法では予期せぬ影響が発生する可能性があります。以下にいくつかの一般的なケースと注意点を紹介します。

IDの競合

コピーされた対象要素にIDが含まれている場合、貼り付け後にページ上に複数の同じIDの要素が存在する可能性があります。W3Cの標準によれば、IDは一つである必要があります。IDが重複すると、予期せぬ影響が発生する可能性があります。

状況説明

IDに基づくイベントが発動せず、コピー後の要素に対して期待されるインタラクティブな動きが実行されない場合があります。

おすすめの使い方

貼り付け後、貼り付けされた要素のHTMLを確認し、ID属性が存在するかどうかを確認します。存在する場合は、対応するIDの文字列を変更してページ上のIDが重複しないようにしてください。

function findDuplicateIds() {
    // ページ上のすべての要素を取得します
    const allElements = document.querySelectorAll('*');
    const idMap = {};
    // すべての要素を反復処理し、重複するIDがあるかどうかを確認します
    allElements.forEach((element) => {
        const id = element.id;
        if (id) {
            if (idMap[id]) {
                // 重複するIDが存在する場合、そのIDを出力します
                console.log(`ページに重複するIDの要素が存在します：${id}`);
            } else {
                // 重複するIDが存在しない場合、IDをIDマップに追加します
                idMap[id] = true;
            }
        }
    });
}
// 重複するIDを検索するメソッドを呼び出します
findDuplicateIds();

上記のコードを使用してページ上に重複するIDが存在するかどうかを確認できます。具体的な操作手順は以下の通りです。

1. ウェブサイトにアクセスし、ディベロッパーツール>コンソールを開きます。
2. 上記のコードをコンソールに貼り付けます。
3. Enterキーを押して実行し、出力結果を確認します。ページに重複する要素がある場合は、「ページに重複するIDの要素が存在します：[要素のID]」という情報が出力がされます。
   

   スタイルの損失

要素をページの別の位置に貼り付けすると、新しい位置の要素が元の要素と比較して構造やスタイルが保持されていないことがあります。

状況説明

例えば、ECサイトの場合、商品情報（商品画像、価格、基本情報などを含む）を別の位置にコピーすると、商品ページ全体のレイアウトが崩れることがあります。

おすすめの使い方

CSSセレクタをチェックし、新しく貼り付けた要素に適用できるように調整します。
html上で作用するインラインスタイルを使用するか、CSSセレクタ指定の階層を減らし、コピー及び貼り付け操作によるスタイルの破壊を防ぎます。

インタラクティブ機能の同期不良

貼り付け後、元の要素のインタラクションが新しい位置の要素で利用できないことがあります。例えば、「カゴに追加」ボタンがコピーされ、クリックしてもカート追加機能が動作しない場合があります。

状況説明

コピー元の要素に指定されているインタラクションイベント（カゴ追加、チェックアウトなどの操作）は、大抵の場合、自動的に新しく貼り付けた要素で機能しません。

おすすめの使い方

インタラクティブ性の高い要素のコピーを避ける
必要な場合は、JavaScriptを使用して新しく貼り付けた要素にインタラクションイベントが実行できるよう記述を追加してください。
記述を追加する場合、次のようなコードモードを使用して実行させることができます。

要素に対してのインタラクションイベントを追加する際には、次の手順でJavaScriptのインタラクションロジックを見つけることができます。

1. 開発者ツールを開きます。
2. 要素パネルをクリックして、対象の要素を選択します。
3. イベントリスナーの下に、バインドする必要があるイベントタイプを見つけ、可能なJavaScriptロジックを確認します。
   

要素の移動 #

要素の移動はよくあるニーズです。例えば、Ptengineのヒートマップ分析により、割引や全額保証などの情報が購入を後押しすることがわかります。しかし、割引や全額保証の詳細情報が下の方にある場合、要素を目立つ位置に移動するアクションが考えられます。

移動後のインタラクションコンテンツの失効

状況説明

現在、コンテンツの移動はコピー→貼り付け→コピー元削除で実現できます。したがって、移動は、前述のコピーと貼り付けの影響を考慮する必要があります。

おすすめの使い方

インタラクティブ性の高い要素の移動をできるだけ減らす。必要な場合は、JavaScriptを使用して新しい位置に移動した要素にイベントを実行されるよう調整してください。
Ptengineコードモードで下記の要素移動APIを使用して実現します。

    // targetSelector： 
ptKit.moveElement(
    "targetSelector",
    "relativeSelector",
  'before', {
    timeout: 60000,
    interval: 500
  }
);

スタイルの変更 #

要素のスタイルはページ編集機能内で調整できます。例えば、色、レイアウト、フォントなどが変更できます。

スタイルが適用されないの場合

1)状況説明
スタイルを調整した後、変更が適用されない場合、通常はスタイルの競合が原因で、新しいスタイルの優先度が低いからです。
2)おすすめの使い方
調整後に変更がない場合、CSSコードモードを使用してスタイルを直接変更し、!importantを使用してスタイルの優先度を上げることができます。

各機能の原理と悪影響のケースを理解することで、Ptengineのインライン編集機能をより効果的かつ安全に活用できるようになります。上記のようなよくある問題を回避し、ウェブサイトにおける正常な動作と優れたユーザー体験の提供を実現しましょう。操作を行う前に、常にバックアップとテストを行うことをおすすめします。