Help Center
WalkMeヘルプセンターへようこそ

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

jQueryセレクター

Last Updated 6月 14, 2024
jQueryは、エッジケースにのみ使用する必要があります

jQueryはできるだけ使用しないようにすることをお勧めします。 ウェブアプリケーションは絶えず変化しており、UIとページ構造への小さな更新は、使用されるjQueryを破壊する可能性があります。

WalkMeは、すぐに使用できるエレメント選択で、jQueryを使用せずに、基盤となるアプリケーションの変更に適応します。

概要

jQueryは、HTMLのページ操作に使用できるJavascriptライブラリです。 jQueryセレクターを使用することで、ID、クラス、タイプ、属性、属性値などの特性に基づき、HTML構造内のエレメントを識別できます。

WalkMeエディタで最も一般的なjQueryセレクターは次の目的で使用されます。

  • オンボーディングのゴール作成:画面上のエレメントに基づき、オンボーディングのゴールを作成します。
  • Selected Element(選択済みエレメント)のランチャー:ランチャーの[Selected Element(選択済みエレメント)]タブにjQueryセレクターを追加します。
  • 値の取得:画面上のユーザー変数またはテキストから値を取得し、ダイナミック・アナウンスに組み込むか、ルールにて使用します。
  • ページ条件の確認:WalkMeに指示することで、画面上のエレメントの属性を分析し、ルールエンジンのルールタイプとして使用します。

使用方法

要素を右クリックして [要素の検査] を選択し、HTML で要素を見つけます。 その要素が画面と開発者パネルで強調表示されます。 jQueryセレクターを構築するために、エレメント固有の特性(場所、クラス、ID、スタイルなど)を特定します。 エレメントは、その場所または属性(クラス、ID、およびスタイル)によって識別できます。

🎓 Digital Adoption Institute

ステップ1:jQueryセレクターを構築します

WalkMeでjQueryのエレメントを使用するための基本的な構文は、エレメント → セレクター → 値、となります。

エレメントを特定すると、特に関心度の高いものを調べるjQueryセレクターを作成します。

jQueryセレクターの例は次のとおりです。

  • id create-accountのulエレメント:ul#create-account
  • class navのulエレメント:ul.nav
  •  class navおよびclass flタイプのulエレメント:ul.nav.fl

便利なjQueryセレクターのリストについては、以下を参照してください。

WalkMeデータを使用してjQueryを作成します

jQueryセレクターに有利な既存のWalkMeデータを活用できるようになりました。

{wm-data-key}これは、希望のセレクターに「$」を追加することで達成できます。 {key}例:セレクター:[id="${key}"]は、「$」が実際のWalkMeデータに置き換えられ、[id="value"]のようになります。

ステップ2:コンソールにてセレクターをテストします

  1. 開発者パネルのコマンドラインにwmjQuery(“”)と入力し、jQueryセレクターを“”の間に挿入して、Enterキーを押します。
  2. クエリが求める値を返す場合は、セレクターが機能しています。
    • :選択済みのエレメントを画面に表示するには、[その他]リンクをクリックします。
  3. 返されたオブジェクトにカーソルを合わせることで、強調表示されたエレメントが表示されます。

ステップ3:WalkMeでjQueryセレクターを使用します

jQueryのエレメントの使用方法に応じ、jQueryはWalkMeの次の場所で使用できます。

  • jQueryのエレメントを使用し、[Options(オプション)]メニューの[Selected Element(選択済みエレメント)]タブにて、ステップまたはLauncherのエレメントを識別します。
  • jQueryエレメントを使用して、追加ステップトリガーメニューでクリックまたはホバーすると、ウォークスルーの次のステップをトリガーする、ユニー

    クなセレクターを使用して、複数のエレメントのクリックまたはホバーを一度に検出すると、期待どおりに動作しない場合があります。

  • jQueryのエレメントで画面上の値を取得し、ステップ用バルーンまたはシャウトアウトのリッチテキストエディターでダイナミック・テキストとして使用します。
  • jQueryのエレメントにより、[ゴール]タブでゴールを作成します。
  • ルールエンジンのjQueryセレクターをルールタイプとして使用します(jQueryと同様に画面上のエレメントのルールタイプと同様に使用されます)。
ヒント

WalkMeのビルドではjQueryを控えめに、常に比較的緩い条件と組み合わせて使用することを忘れないでください。 詳細については、次の記事を参照してください。WalkMeパフォーマンスのベストプラクティス

利用可能なルールエンジンのjQuery演算子:

  • True:1つ以上のエレメントが発見されたことを意味します。
  • False:エレメントが発見されなかったことを意味します。
  • Visible:エレメントが表示されていることを意味します。
  • 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のEditorがサポートするのは、jQuery1.8.3以下で使用可能なjQuery構文で記述されたセレクターのみです。 ただし、ウェブサイト上では、WalkMeのjQuery(wmjQuery)バージョンとの競合の心配なく、他の目的で任意のバージョンのjQueryを使用できます。

WalkMeのjQueryセレクターオプティマイザーも使用することをお勧めします。

便利なjQueryセレクター

クエリ 説明
エレメント エレメントに関するクエリの実行
element[attribute] エレメントの属性に関するクエリの実行
element[attribute][attribute] エレメントの複数属性に関するクエリの実行
element[attribute="attribute value"] エレメントの属性およびその値に関するクエリの実行
element[attribute^="text"] 属性の先頭にあるテキストをクエリ
element[attribute*="text"] 属性に含まれるテキストをクエリ
element[attribute!="text"] 属性に含まれないテキストをクエリ
element child-element 子エレメントのクエリ(スペースは、最初のエレメントが2番目の親エレメントであることを示します)
element:checked チェックボックスのステータスに関するクエリの実行(チェックまたは未チェック)
[element='']:visible エレメントの表示に関するクエリの実行
element:contains(Text) クエリのエレメントにテキストが含まれています
element:eq(#) 特定結果に対して順番にクエリを実行(カウントは0から始まります)
jQueryチートシート

その他のjQueryのヒントと例については、jQueryチートシートを参照してください。

jQueryセレクターのテスト

jQueryセレクターを選択するときは、ウェブサイトやアプリケーションに対するパフォーマンスへの悪影響が最少のものを選択するため、いくつかのセレクターを比較することを推奨します。 そのためには、以下の手順に従ってください。

  1. ウェブブラウザーの開発ツールを開きます。
  2. 開発ツールの[コンソール]タブに移動します。
  3. コンソールに以下を入力します。
    • var time1 = window.performance.now(); wmjQuery('<your jQuery selector>'); var time2 = window.performance.now(); console.log(time2 - time1);
  4. Enterキーを押します。
  5. コンソールでこのコマンドを数回実行し、所要時間のおおよその平均を確認します。
  6. これと同じコマンドをいくつかの代替jQueryセレクターにて実行するとともに、最少時間で実行できるものを選択します。

  • Shadow DOMがサポートされていれば、EditorでShadow DOMエレメントをキャプチャして、jQueryを使って識別できます。
  • ただし、DevToolsコンソールでwmjQueryを実行することはできません。代わりに以下の構文を使います。
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')

WalkMe ShareのjQuery

この記事は役に立ちましたか?

ご意見ありがとうございます!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×