概要

ほとんどのWalkMeアイテムでは、jQueryセレクターを自由に入力してエレメントを選択できます。 jQueryライブラリはかなり前から存在していましたが、その構文とセレクターの書き方は時間の経過とともに変化してきました。

最新の構文に慣れていないユーザーにとっては、昔ながらのjQueryセレクターの書き方を使用している場合、評価時間が長くなってしまうこともあります。 これが問題になるのは、ユーザーが昔ながらのセレクターでコンテンツを多く持っている場合です。

WalkMeのページ上でのエレメント探しのパフォーマンスを向上させ、より効率的なセレクターの書き方ができるようにしたいと考えています。

「jQueryオプティマイザー」は、書いた特定のセレクターを、より高速に評価できる最新の構文で書き換えることができるかどうかを検出します。 その際には、変更を手動で元に戻すオプションを残したまま、最適化されたセレクターでフィールドの値を自動的に更新します。

使用方法

この機能は、特定のデプロイ可能アイテムの設定内で、「要素を識別する方法を定義する」オプションがあるデプロイ可能アイテムに対して、自動的に利用可能となります：

最適化の例

JQueryオプティマイザーの使用手順

1. 選択した要素があるいずれかのデプロイ可能アイテムを開きます
2. ［Selected Element​​​（選択した要素）］タブをクリックします。
3. 「Define how to identify the element（エレメントを識別する方法を定義）」セクションの［jQuery selector​​​​​（jQueryセレクター）］を選択します。
4. 古い方法で記述された値を入力し（例：[class= foo="" bar"]）、入力フィールドの外側をクリックします：
5. セレクターが最適化されていく魔法をご覧ください。

技術的なノート

オプティマイザーは、特殊文字を含むIDからバックスラッシュを取り除くことができます。これにより、短縮表現の#idセレクターが壊れます。

これが起こる理由

コロンなどの特殊文字は、CSSおよびjQueryのセレクター（例：：hover）において、予約済みの意味を持ちます。 IDにworkflow：contacts：0：sections：0：titleSectionなど、リテラル特殊文字が含まれている場合、パーサーはIDの一部ではなく構文としてそれらの文字を読み取り、セレクターを機能させなくします。

修正方法

各特殊文字の前にバックスラッシュを追加します。

• 前：#workflow:contacts:0:sections:0:titleSection
• 後：#workflow\:contacts\:0\:sections\:0\:titleSection

代替

代わりに属性セレクター形式を使用してください。エスケープする必要はありません。 [id= workflow:contacts:0:sections:0:titlesection=""]