jQueryセレクターとは？

jQueryセレクターは、WalkMeのデフォルト要素選択ができない場合にHTML要素をターゲットとする文字列です。 すべてのページはHTMLで構成されており、ボタン、ヘッダー、フォーム、画像といった各可視要素は、そのHTML構造内で表現されます。 jQueryセレクターでは、WalkMeはクラス、ID、またはその他の属性を使用して要素を見つけることができます。

jQueryが必要な場合：

• WalkMeはクリックされたときに要素をキャプチャできません
• ステップが間違った要素を指します。
• ランチャーまたはスマートチップは表示されません。
• ステップが時々しか再生されません
• 精度タブオプションは、正しい要素を返すことができません。

jQueryセレクターを構築する前に、精度タブを確認し、ネイティブ選択を改善できるかどうかを確認します。

主要用語

• HTML：ウェブページを構成するマークアップ言語
• 要素：div、input、h2、pなど、HTMLの一部
• jQuery：HTML要素を検索対象とし、説明するために使用されるJavaScriptライブラリ
• セレクター：jQueryの要素を識別するコード

jQueryセレクターの作成

ステップ1：要素を識別します。

ターゲットにする必要がある要素を右クリックし、検査（Chrome/Safari）または要素検査（Firefox/IE）を選択します。

これにより、ブラウザーの開発者コンソールが開き、ページのHTMLを確認し、WalkMeがターゲットにしなければならない正確な要素を見つけることができます。

「WalkMeサポートへようこそ」のテキストを確認すると、HTML行がハイライトされます：

<h2 class="site-header__title">

また、開発ツールヘッダーのカーソルアイコンをクリックして、要素にカーソルを合わせ、HTML表現に直接ジャンプすることもできます。 カーソルを合わせると、対応するHTML行が青色でハイライトされます。 クリックすると、インスペクターがその要素に固定されます。

ステップ2：セレクターを構築します。

HTMLエレメント

一般的なHTML要素には、div、a（リンク）、h2、p、form、input、imgがあります。 要素には、多くの場合、それらを説明するクラス、ID、または属性が含まれ、セレクターで使用できます。 要素タイプは、オリエンテーションに役立ちますが、最終セレクターでは必ずしも必要ではありません。

クラス、ID、属性などの記述子は、それらのエレメントがどのように見え、またページ上でどのように動作するかを決定します。 jQueryを記述する際には、エレメントは常に記述子よりも優先されます。 つまり、エレメントの前にはどんな種類の記号も配置してはいけないということです。

クラスを使用する

クラスは最も一般的な記述子です。 HTMLでは、class="example"として表示されます。 jQueryでは、クラスはドット表記を使用します：

.site-header__title

IDの使用

要素に ID がある場合、ID はより具体的なため、クラスよりも優先します。 IDは、HTMLではid="name"として表示され、jQueryでは#を使用します。

以下の例から、検索バーはセレクター：#hkb-searchでターゲットに<input id="hkb-search" class="…">できます。

iFrame内の要素を選択する

iFrame内の要素には、コンテキストオブジェクトが必要です。 このテンプレートを使用：

{"element"： "#yourElement", "context"： "iframe#iframeSelector"}

例：

{"element"： "h2.mainTitle", "context"： "iframe#Main"}

DevToolsでテストするには：

wmjQuery("#yourElement", wmjQuery("iframe#iframeSelector").contents())

ステップ3：セレクターをテストします。

1. WalkMeエディタがブラウザーに接続されていることを確認します。
2. DevToolsを開きます
3. 「コンソール」を選択します。
4. タイプ：

   wmjQuery('yourSelector')

5. Enterキーを押します。

前述の例から、次のように入力できます：

wmjQuery('.site-header__title')

コンソールは、次のオブジェクトを返します：length — セレクターに一致した要素の数

• 0 = 一致なし
• 1=正しい

返される値のlengthが1を超える場合は、セレクターに一致する要素が複数見つかったことを意味します。 結果が1を超える場合、セレクターをより
具体的なものにしたいと思います。

以前の例から、.site-header__titleをテストすると、長さ：1が返され、選択した要素がハイライトされます。

開発ツールの結果で返された要素にカーソルを合わせると、ページ上の正しい要素がハイライトされていることを確認できます。

長いまたは失敗するセレクターのトラブルシューティング

ルールエンジンで長いセレクターが赤い感嘆符を返す場合、セレクターを小さな部分に分割し、各部分をテストすることで問題を分離できます。

例えば、不正なセレクターを考えてみましょう：

div.ht-container form.hkb-site-serch

トラブルシューティングするには、最初の要素から開始し、セレクターを段階的に構築します：

1. ルールエンジンに「div」を入力します。 チェックマークが返される場合、要素は存在し、正しく記述されています。
2. .ht-containerを追加し、div.ht-containerを作成します。チェックマークは残っているため、この部分は有効です。
3. formを追加し、div.ht-container formを作成します。 フォームはdiv.ht-containerの子であるため、これは引き続き有効です。
4. この時点で、セレクターの各部分は機能しています。

次に、最後の部分を追加します：.hkb-site-serch。 追加するとすぐに、ルールエンジンが緑色のチェックマークから赤い感嘆マークに変わります。 HTMLを検査すると、問題が見つかります：クラス名がスペルミスされています。 .hkb-site-searchである必要があります。

入力ミスを修正すると、フルセレクターは

div.ht-container form.hkb-site-search

は、再度チェックマークを返します。 つまり、セレクターが有効になりました。

この方法は、セレクターのどの部分が正しく記述されていないか、ページと一致していないかをすばやく特定するのに役立ちます。

ステップ4：WalkMeでセレクターを実装します。

1. ステップを含むスマートウォークスルーを開きます。
2. ステップを選択します。
3. 「高度な設定」タブを開きます。
4. 認識方法として「jQueryセレクター」を選択します。
5. 「値」フィールドにセレクターを貼り付けます。
6. [Done（完了）]を選択します
7. ステップを再生して、正しくアタッチされていることを確認します。

ランチャー、スマートチップ、および jQuery 選択をサポートするルールでも同じ方法が機能します。

高度なテクニック

他の属性の使用

要素にクラスまたはIDがない場合、その属性のいずれかを使用してターゲットにできます。

基本フォーマットは次のとおりです：

[attribute= value=""]

例えば、WalkMeサポートロゴにはクラスやIDはありませんが、HTMLには次の属性が含まれます：

href="https://support.walkme.com"

この属性を使用して、ロゴをターゲットにできます：

[href= https:="" .walkme.com"]

同じ要素には、別の属性も含まれます：

data-ht-sitetitle="WalkMeサポート"

以下を使用してこれをターゲットにできます：

[data-ht-sitetitle= walkme="" Support"]

クラスまたはIDではない属性をターゲットにするときは、属性の前に要素タイプを常に含めます。 これにより、WalkMeは検索を絞り、パフォーマンスを向上させることができます。 サポートロゴの正しいセレクターは：

A[href= https:="" .walkme.com"]

HTMLでは、aはリンクを識別し、hrefはリンク先を識別します。 この場合、ロゴはWalkMeサポートページへのリンクです。

クラスやIDなどの属性は、同じ[attribute= value=""]フォーマットを使用してターゲットにできますが、可能な限りショートカット「.className」と「#idName」を使用したほうが効率的です。

親子関係の使用

属性単独でターゲット設定すると、複数の結果が返される場合があります。 例えば、テスト：

wmjQuery('[href= https:="" .walkme.com"]=

support.walkme.comは長さ：2を返します。

これは、WalkMeロゴと「ホーム」リンクが同じhref属性を共有しているためです。

要素タイプaを追加しようとするかもしれませんが、両方の要素がリンクであるため：

A[href= https:="" .walkme.com"]

は依然として2つの一致を返します。

セレクターをより具体的にするには、HTMLにある親子構造を使用します。 開発ツールでは、HTMLの行を展開して、どの要素に他の要素が含まれているかを確認できます。 包含要素は親要素であり、入れ子要素は子要素です。

例えば、WalkMeロゴの親は次のとおりです：

div.site-logo

「ホーム」リンクの親は別の要素です：追加属性を持つli

親は異なるため、親と子の両方を含めることで、セレクターをより具体的にできます。 親子セレクターは、それらの間にスペースを入れて記述されます。

「ホーム」リンクをターゲットにするには：

li [href= https:="" .walkme.com"]

このセレクターをテストすると、「ホーム」テキストを正しく識別する単一の一致が返されます。

代わりにロゴのみをターゲットにするには、既知の親を使用します：

div.site-logo a[href= https:="" .walkme.com"]

親子階層を理解することは、複数の要素が類似した属性を共有する場合にセレクターを絞り込む最も信頼できる方法の1つです。

修飾子

修飾子を使用すると、セレクターの最後にルールを追加することで、jQueryセレクターをさらに絞り込むことができます。 複数の修飾子を組み合わせることができますが、セレクターの保守性を保つため、3つ以上を使用しないでください。

例：

h2:contains(Welcome to WalkMe):visible

「WalkMeへようこそ」というテキストを含み、かつ画面上に表示されているh2要素を選択します。

.hkb-site-search:has([type= text=""])

属性 type="text" を持つネストされた要素を含む、クラス hkb-site-search の要素を選択します。

form.hkb-site-search input:eq(0)

：eq(n)は、ゼロインデックス付きリストのn番目の要素を選択します。 eq(0)は、フォーム内の最初の一致入力です。

form.hkb-site-search input:last

：lastは、最後に一致する入力要素を選択します。 ：firstを使用して、最初を選択します。

兄弟修飾子を使用して兄弟要素を見つける方法を学びます。

ダイナミックID

動的IDは、ページが読み込まれるたびに変更されるIDです。 通常、長い英数字文字列のように見えます。例：

id="00N00000067211_ilecell"

この値は更新時に変更されるため、フルIDを使用するセレクターは壊れます。 可能な限り、完全に動的なIDの使用を避けてください。

動的IDを持つ要素をターゲットにする必要がある場合、IDの安定した部分を特定します。つまり、上記の例の「ilecell」など、読みやすいまたは一貫した部分を特定します。 次に、部分属性セレクターを使用します：

[id*= ilecell=""]

*=記号は「含む」を意味します。 これは、IDの残りの部分が変更された場合でも、WalkMeにilecellを含むIDを探すよう指示します。

部分セレクターは、複数の要素に一致する場合があります。 意図しない一致を防ぐには、部分IDセレクターを要素の構造または属性の別の部分と組み合わせます。 例：

[id*= ilecell=""].inlineEditWrite

または

.dataCol.inlineEditWrite[id*= ilecell=""]

このアプローチは、正しい要素と一致することを保証しながら、セレクターを安定させます。

Tip Tuesday動画

jQueryを使用したカスタムトリガー

iFrame iQuery