jQueryは、エッジケースにのみ使用する必要があります
jQueryはできるだけ使用しないようにすることをお勧めします。 ウェブアプリケーションは絶えず変化しており、UIとページ構造への小さな更新は、使用されるjQueryを破壊する可能性があります。
WalkMeは、すぐに使用できるエレメント選択で、jQueryを使用せずに、基盤となるアプリケーションの変更に適応します。
概要
jQueryは、ページ上のHTMLエレメントを識別し、操作するために使用されるJavaScriptライブラリです。 WalkMeは、UIの変更に適応するすぐに使えるエレメント選択を提供しますが、jQueryセレクターは、エッジケースにおける強力な代替手段として機能します。
これらのセレクターは、ID、クラス、タイプ、属性など、特定の特性に基づいてエレメントを識別します。
ユースケース
ビルドの安定性を維持するために、jQueryを控えめに使用することをお勧めします。 ただし、以下のタスクには不可欠なツールです：
- オンボーディングゴールの作成：画面上の要素に基づいてゴールを定義します。
- ランチャーの設定：選択したエレメントタブに特定のセレクターを入力します
- 値の取得：動的な告知用のユーザー変数または画面上のテキストをキャプチャします。
- ページ条件を確認：条件ビルダーを使用して、要素の属性を分析します
使用方法
以下の手順に従って、WalkMeコンテンツにカスタムセレクターを構築、テスト、実装します。
利用可能な条件ビルダー演算子
条件ビルダーでjQueryルールタイプを使用する場合は、以下の演算子を使用してロジックを定義します：
- True：少なくとも1つのエレメントが見つかりました。
- False：エレメントは見つかりませんでした。
- 表示：エレメントは現在ページに表示されています。
- テキストが一致する / 一致しない：要素のテキストが入力と一致するか、一致しません。
- 注：セレクターが複数のエレメントを返す場合、すべてのエレメントのテキストが1つのエレメントとして結合されます。
- より大きい / より小さい：値が番号の上または下にあります
- Like / Not Like：複雑なテキスト構文を意味します。
- 長さが一致する / 一致しない / より大きい / より小さい：クエリによって返された要素の番号
- 正確なクエリ長さを見つけます：wmjQuery(“element.value”).length
注
WalkMeエディタは、jQuery 1.8.3で使用されているものまでのjQuery構文で記述されたセレクターのみをサポートします。 ただし、ウェブサイト上では、WalkMeのjQuery（wmjQuery）バージョンとの競合の心配なく、他の目的で任意のバージョンのjQueryを使用できます。
WalkMeのjQueryセレクターオプティマイザーも使用することをお勧めします。
Condition Builder
Common jQuery Selectors
Use these patterns to identify elements within your application:
- element: Locate a specific HTML element by its tag name
- element[attribute]: Locate an element that contains a specific attribute
- element[attribute][attribute]: Locate an element that matches multiple attributes simultaneously
- element[attribute="value"]: Locate an exact match for an attribute and its value
- element[attribute^="text"]: Locate an element where the attribute starts with specific text
- element[attribute*="text"]: Locate an element where the attribute contains specific text anywhere within the string
- element[attribute!="text"]: Locate an element that does not contain the specified attribute text
- element child-element: Locate a nested child element (the space indicates a parent-child relationship)
- element:checked: Locate the status of a checkbox or radio button
- [element]:visible: Verify if a specific element is currently visible on the page
- element:contains(Text): Locate an element based on the specific text string it contains
- element:eq(#): Locate a specific index in a list of results (note that the count starts at 0)
Step 1: Build the selector
- Locate the element in the HTML by right-clicking it and selecting Inspect Element
- Identify unique characteristics like class, ID, or style
- Draft your selector using the syntax: Element → Selector → Value
- Example (ID): ul#create-account
- Example (Class): ul.nav
WalkMeデータを使用してjQueryを作成します
jQueryセレクターに有利な既存のWalkMeデータを活用できるようになりました。
{wm-data-key}これは、希望のセレクターに「$」を追加することで達成できます。 例：セレクター「[id=],」では、「${key}」が実際のWalkMeデータに置き換えられ、以下のようになります：「[id=”value”].」。
Step 2: Test in the console
Note: You must have the Editor Extension enabled to use this method.
- Open your browser's Developer Tools and select the Console tab
- Type wmjQuery("your-selector-here") and press Enter
- Hover over the returned objects in the console to verify the correct element is highlighted on screen
Step 3: Implement in the editor
Once verified, you can apply your selector in several locations:
- Selected Element tab: Use for specific Step or Launcher identification
- Additional step triggers: Use to trigger steps on click or hover
- Rich Text Editor: Use to display Dynamic Text in balloons or Shoutouts
- Condition Builder: Select the jQuery Rule Type to build complex logic
To ensure the best user experience, compare the speed of your selectors:
- Type the following script into your console: var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- Run the command several times to find the average execution time
- Select the version with the lowest average time
Technical Notes
- For sites using Shadow DOM you won't be able to run wmjQuery in the DevTools Console, you'll need to use this syntax instead:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
