jQueryセレクター

更新日 2月 10, 2021 Download PDFDownload as PDF
image_pdf

この記事では、WalkMe内でのjQueryセレクターの使用に関し、基本的な事項のみを解説します。 事前にjQueryセレクターの使用に関する予備知識を持っていることを推奨します。

概要

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

特定の状況において、jQueryセレクターはWalkMeアルゴリズム(キャプチャモード)の代替として機能し、特定の値を取得する機能を備えるとともに、強化された精度、最適化されたパフォーマンスにてエレメントを識別します。

jQueryセレクターは、提供された基準に基づき、現在のウィンドウ内のエレメントを迅速に発見することができます。 WalkMe Editorで最も一般的なjQueryセレクターは次の目的で使用されます。

  • Onboardingのゴール作成 – 画面上のエレメントに基づき、Onboardingのゴールを作成します。 Onboardingの目標は随時チェックされていることから、jQueryを使用することでサイトの負担が軽減されます。
  • Selected Element(選択済みエレメント)のLaunchers – パフォーマンス最適化のために、Launcherの[Selected Element(選択済みエレメント)]タブにjQueryセレクターを追加します。
  • 値の取得 – 画面上のユーザー変数またはテキストから値を取得し、ダイナミック・アナウンスに組み込むか、ルールにて使用します。
  • ページ条件の確認 – WalkMeに指示することで、画面上のエレメントの属性を分析し、ルールエンジンのルールタイプとして使用します。
  • 取得が困難または変化するエレメントのキャプチャー – ウェブサイト上の位置や含まれるテキストなど、属性が変化する可能性のあるエレメントを選択します。 または、[Precision(精度調整)]を使用することで、WalkMeアルゴリズムを微調整します。

仕組み

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

ステップ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セレクターのリストについては、以下を参照してください。

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

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

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

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

  • jQueryのエレメントを使用し、[Options(オプション)]メニューの[Selected Element(選択済みエレメント)]タブにて、ステップまたはLauncherのエレメントを識別します。
  • jQueryのエレメントを使用し、[Additional Step Triggers(追加のステップトリガー)]メニューでクリックまたはカーソル移動したときに、Walk-Thruの次のステップをトリガーします。
  • jQueryのエレメントで画面上の値を取得し、ステップ用バルーンまたはShoutOutのRich Text Editorでダイナミック・テキストとして使用します。
  • jQueryのエレメントにより、[ゴール]タブでゴールを作成します。
  • ルールエンジンのjQueryセレクターをルールタイプとして使用します(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を使用できます。 何かご不明な点がございましたら、[email protected]までお問い合わせください。

便利な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=”]:mt_visible エレメントの表示に関するクエリの実行
element:contains(Text) クエリのエレメントにテキストが含まれています
element:eq(#) 特定結果に対して順番にクエリを実行(カウントは0から始まります)

jQueryセレクターのテスト

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

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

試してみましょう

jQueryのゴールに基づき、Walk-Thruのゴールを作成してみましょう。

  1. プロセスの完了(メインゴール)またはプロセス中のステージ(マイルストーンゴール)を表すエレメントを特定します。
  2. [コンソール]を開いて、jQueryのエレメントに基づき、ゴールを作成するエレメントを特定します。
  3. 作業をプレビューし、Flow Trackerでゴール完了を確認します。

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

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

関連記事

< 戻る