jQueryは、エッジケースにのみ使用する必要があります
jQueryはできるだけ使用しないようにすることをお勧めします。 ウェブアプリケーションは絶えず変化しており、UIとページ構造への小さな更新は、使用されるjQueryを破壊する可能性があります。
WalkMeは、すぐに使用できるエレメント選択で、jQueryを使用せずに、基盤となるアプリケーションの変更に適応します。
概要
jQueryは、ページ上のHTMLエレメントを識別し、操作するために使用されるJavaScriptライブラリです。 WalkMeは、UIの変更に適応するすぐに使えるエレメント選択を提供しますが、jQueryセレクターは、エッジケースにおける強力な代替手段として機能します。
これらのセレクターは、ID、クラス、タイプ、属性など、特定の特性に基づいてエレメントを識別します。
ユースケース
ビルドの安定性を維持するために、jQueryを控えめに使用することをお勧めします。 ただし、以下のタスクには不可欠なツールです：
- オンボーディングゴールの作成：画面上の要素に基づいてゴールを定義します。
- ランチャーを構成：[Selected Element（選択したエレメント）]タブに特定のセレクターを入力します。
- 値の取得：動的な告知用のユーザー変数または画面上のテキストをキャプチャします。
- ページ条件の確認：ルールエンジンを使用して要素の属性を分析します。
使用方法
以下の手順に従って、WalkMeコンテンツにカスタムセレクターを構築、テスト、実装します。
🎓 Digital Adoption Institute
利用可能なルールエンジン演算子。
ルールエンジンでjQueryルールタイプを使用する場合は、以下の演算子を使用してロジックを定義します：
- True：少なくとも1つのエレメントが見つかりました。
- False：エレメントは見つかりませんでした。
- 表示：エレメントは現在ページに表示されています。
- Text Is / Is Not：要素テキストが入力と一致するか、一致しません。
- 注：セレクターが複数のエレメントを返す場合、すべてのエレメントのテキストが1つのエレメントとして結合されます。
- Greater Than / Less Than：値が整数の番号より大きい、または小さいことを意味します。
- Like / Not Like：複雑なテキスト構文を意味します。
- Length Is / Is Not / Greater Than / Less Than：クエリによって返される要素の番号
- 正確なクエリ長さを見つけます：wmjQuery(“element.value”).length
注
WalkMeエディタは、jQuery 1.8.3以下で使用可能なjQuery構文で記述されたセレクターのみをサポートします。 ただし、ウェブサイト上では、WalkMeのjQuery（wmjQuery）バージョンとの競合の心配なく、他の目的で任意のバージョンのjQueryを使用できます。
WalkMeのjQueryセレクターオプティマイザーも使用することをお勧めします。
jQueryの一般的なセレクター
これらのパターンを使用して、アプリケーション内のエレメントを識別します：
- エレメント：タグ名で特定のHTMLエレメントを検索します。
- element[attribute]：特定の属性を含むエレメントを検索します。
- element[attribute][attribute]：複数の属性に同時に一致するエレメントを検索します。
- element[attribute= value=""]：属性とその値と完全に一致するものを検索します。
- element[attribute^= text=""]：属性が特定のテキストで始まるエレメントを検索します。
- element[attribute*= text=""]：文字列内の任意の場所で属性が特定のテキストを含む要素を検索します。
- element[attribute!= text=""]：指定された属性テキストを含まないエレメントを検索します。
- element child-element：ネストされた子要素を検索します（スペースは親子関係を示します）。
- element:checked：チェックボックスまたはラジオボタンのステータスを検索します。
- [element]:visible：特定の要素が現在ページ上で表示されているかどうかを確認します。
- element:contains(Text)：含まれる特定のテキスト文字列に基づいてエレメントを検索します。
- element:eq(#)：結果のリストで特定のインデックスを検索します（カウントは0から始まることに注意してください）。
ステップ1：セレクターを構築します
- HTMLで要素を右クリックし、[Inspect Element（エレメントの検査）]を選択して、要素を見つけます。
- クラス、ID、スタイルなどの固有の特性を識別します。
- 構文を使用してセレクターをドラフトします：要素 → セレクター → 値
- 例（ID）：ul#create-account
- 例（Class）：ul.nav
WalkMeデータを使用してjQueryを作成します
jQueryセレクターに有利な既存のWalkMeデータを活用できるようになりました。
{wm-data-key}これは、希望のセレクターに「$」を追加することで達成できます。 例：セレクター：[id=]は、「${key}」が実際のWalkMeデータに置き換えられ、以下のようになります[id=”value”]。
ステップ2：コンソールでテストする
注：この方法を使用するには、Editor拡張機能を有効にする必要があります。
- ブラウザーの開発者ツールを開き、[コンソール]タブを選択します
- wmjQuery("your-selector-here")と入力し、Enterキーを押します
- コンソールで返されたオブジェクトにカーソルを合わせ、画面上で正しい要素が強調表示されていることを確認します。
ステップ3：エディタで実装する
検証後、いくつかの場所でセレクターを適用できます：
- ［Selected Element（選択済みエレメント）］タブ：特定のステップまたはランチャーの識別に使用します。
- 追加ステップトリガー：クリックまたはホバー時にステップをトリガーするために使用します。
- リッチテキストエディター：バルーンまたはシャウトアウトにダイナミックテキストを表示するために使用します。
- ルールエンジン：jQueryルールタイプを選択して、複雑なロジックを構築します。
ステップ4：パフォーマンスの最適化
最適なユーザーエクスペリエンスを確保するには、セレクターの速度を比較します：
- 以下のスクリプトをコンソールに入力します：var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- コマンドを数回実行して、平均実行時間を確認します。
- 平均時間が最も低いバージョンを選択します。
技術的なノート
- Shadow DOMを使用するサイトでは、DevToolsコンソールでwmjQueryを実行することはできません。代わりに以下の構文を使用する必要があります：
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
