WalkMe jQuery Cheatsheet
Last Updated 11月 16, 2023
役立つヒント
- コンソール:開発者ツールの中でも、特にページに存在するすべてのHTMLを表示するエレメントセクションを表す言葉です。
- セレクターをテストするためにwmjQueryを入力するコンソールセクションもあるため、紛らわしいと感じるかもしれません。 この2つのセクションは通常、同じ意味で使われていますが、誰かがコンソールに何かを入力するよう求めている場合、それは開発者ツールのコンソールタブのことを指しています。
- アクセスするには[F12]キーを使用するか、ブラウザメニューに移動して[Developer Tools(開発者ツール)]を選択します。
- 大文字と小文字の区別:すべてのjQueryは大文字と小文字を区別します。 大文字または小文字を間違えて入力している場合、目的のセレクターとは一致しません。
- 常にテストを実行:使用する前には、必ず開発者ツールのコンソールセクションでjQueryをテストする必要があります。
- コマンドを使用:wmjQuery("insert_your_selector_here")
jQueryセレクター
- エレメント:通常、開発者ツールのエレメントセクションにピンク/紫色の文字で表示されます(エレメントセクションでカーソルを合わせるとページ上にも表示されます)。 それらを表す特別な文字はなく、単語として表記されます。
- 一般的な例:div、span、script、head、body、input、li、a、img
- WalkMe jQueryを使用した検索の例:
- wmjQuery("span")
- ID:開発者ツールのエレメントセクションでこのセレクターにカーソルを合わせると、画面上の検査済みアイテムの横に「#」で始まるオレンジ色の記述が表示されます。
- IDは開発者によって一意の識別子として作成されているため、使用可能な最も強力なセレクターの1つです。 そのため、よくIDの後ろにランダムな番号が付いています。 このような状況を「ダイナミックID」と呼びます。 WalkMeの選択はログインごとに変更される可能性があり、信頼できるセレクターではないため、避けた方が賢明です。
- これらはサイトごとに異なるため、一般的な例はありません。 「#header、#logo、#searchbar」のように表示されることがあります。
- WalkMe jQueryを使用した検索の例:
- wmjQuery("#logo")
- クラス:開発者ツールのエレメントセクションでこのセレクターにカーソルを合わせると、画面上の検査済みアイテムの横に「.」で始まる青色の記述が表示されます。
- クラスはとても一般的なもので、サイト全体で再利用されます。 選択したクラスが選択しようとしているページに一度しか表示されないようにするか、またはページ上のどのクラスを参照しているかをWalkMeに具体的に伝えてあることをご確認ください。
- これらはサイトごとに異なる傾向があるため、一般的な例はありません。「.btn」、「.dropdown」、「.navlink」のように表示されることがあります。
- WalkMe jQueryを使用した検索の例:
- wmjQuery(".btn")
- 属性 - カーソルを合わせても表示されず、開発者ツールのエレメントセクションで検索する必要があります。
- これらはセレクターを説明するために使用されるため、パフォーマンス上の理由からエレメント、ID、クラスと組み合わせて使用する必要があります。 それ自体で使用されている場合、WalkMeはページ上のすべてのセレクターを検索して一致するかどうかを確認する必要があります。
- 一般的な例:値、名前、タイプ
- WalkMe jQueryを使用した検索の例:
- wmjQuery("#example[name='Website User']")
- 注:こちらの例のように、属性の前には必ずエレメント/ID/クラスを入力します。
特別な修飾子
- ワイルドカードの使用状況:ワイルドカードを使用して、選択範囲を少し広げることができます。
- これは、保存ボタンのように複数のボタンを選択したいが、それぞれのボタンが少しずつ異なる場合などに便利です。 また、一部の動的なエレメントに一貫性がある場合にも有効です。
- WalkMe jQueryを使用した検索の例:
- wmjQuery("#example[name*='Website']")
- これは属性の例で使用された「ウェブサイトのユーザー」と一致します。
- これはID/クラスセレクーにも使用できます。開発者ツールのエレメントセクションにあるHTMLセレクターは、HTMLにカーソルを合わせたときに画面上に表示される「.btn」とは異なり、[class='btn']として表示されます。これはワイルドカードがここにも適用できることを意味しています。
- WalkMe jQueryを使用した検索の例:
- wmjQuery("[class*='btn']")
- これは「.btn1234」または「.btntab」であっても、ページ上のすべての「.btn」セレクターと一致します。
- WalkMe jQueryを使用した検索の例:
- リレーションセレクター:セレクターが互いにどう関連しているかを利用して、jQueryをより具体化することができます。
- 子孫:スペースを使用して表示
- WalkMe jQueryを使用した検索の例:
- wmjQuery("Input .btn")
- これはInputエレメントから派生したすべてのbtnクラスを返します。 開発者ツールのエレメントセクションでは、目的のセレクターが先祖セレクターの右下側にインデントされて表示されます。
- WalkMe jQueryを使用した検索の例:
- 兄弟:プラス記号を使用して表示
- WalkMe jQueryを使用した検索の例:
- wmjQuery("Input+.btn")
- これはInputエレメントと兄弟関係にあるすべてのbtnクラスを返します。 開発者ツールのエレメントセクションでは、目的のセレクターが兄弟の下に表示され、インデントレベルは同じになります。 目的のエレメントの前に必ず兄弟エレメントがあります。
- WalkMe jQueryを使用した検索の例:
- 子孫:スペースを使用して表示
- コマンド:jQueryステートメントの最後にコマンドを追加して、より正確な検索を行えるようにします。 これらはコマンドの後にコロンを追加することで追加されます。
- 最初のセレクター:yourselector:first
- WalkMe jQueryを使用した検索の例:
- wmjQuery(".btn:first")
- これは現在のページの最初のbtnクラスを返します。
- WalkMe jQueryを使用した検索の例:
- 最後のセレクター:yourselector:last
- WalkMe jQueryを使用した検索の例:
- wmjQuery(".btn:last")
- これは現在のページの最後のbtnクラスを返します。
- WalkMe jQueryを使用した検索の例:
- セレクター番号による選択:yourselector:eq(number_of_element)
- WalkMe jQueryを使用した検索の例:
- wmjQuery(".btn:eq(2)")
- これは現在のページの3番目のbtnクラスを返します。 最初のセレクターが0と表示されているため、これは3番目です。 つまり、この場合は「btn 0」、「btn 1」、「btn 2」というクラスがあることになります。
- WalkMe jQueryを使用した検索の例:
- テキストによる選択:yourselector:contains("desired selector's text")
- WalkMe jQueryを使用した検索の例:
- wmjQuery(".btn:contains('Save')")
- これは「保存」というテキストが含まれる現在のページのすべてのbtnクラスを返します。 線の左側にあるニンジンのマークを使用して、開発ツールのエレメントセクションでセレクターを開きます。 セレクターの一番内側の行に
テキストが表示されます。
- WalkMe jQueryを使用した検索の例:
- セレクターによる選択:yourselector:has("selectors inside the desired selector")
- WalkMe jQueryを使用した検索の例:
- wmjQuery("Input:has('.btn')")
- これは現在のページでbtnクラスを子孫に持つすべてのInputエレメントを返します。 線の左側にあるニンジンのマークを使用して、開発ツールのエレメントセクションでセレクターを開きます。 目的のセレクターから派生するセレクターが表示されます。
- WalkMe jQueryを使用した検索の例:
- 可視化されたセレクター: yourselector:visible(number of element)
- WalkMe jQueryを使用した検索の例:
- wmjQuery(".btn:visible")
- これはページ内に目的のセレクターの非表示のバージョンがある場合に使用されます。 例えば、単一ページアプリケーションではタブを切り替えて使用することができます。 これはエレメントが表示から非表示にされた場合でも、技術的にはページ上に存在することを意味します。
- WalkMe jQueryを使用した検索の例:
- 最初のセレクター:yourselector:first
WalkMeプレーヤーコンポーネントのjQueryセレクター
この表はWalkMeプレーヤー(最も頻繁に使用されるのはSC、PS、CS)と相互作用するWalkMeコンテンツを作成したい人に役立ちます。
*XXXXXXの部分をコンポーネントの関連するWalkMe IDに置き換えます。
コンポーネント | jQuery |
WalkMeウィジェット | div#walkme-player |
WalkMeメニュー | div#walkme-menu |
WalkMeヘルプタブ(選択済み) | div[class='walkme-XXXXXX-tab-button walkme-css-reset walkme-tab-button walkme-first-tab walkme-override walkme-css-reset walkme-tab-button-selected'] |
WalkMeヘルプタブ(選択されていません) | div[class='walkme-XXXXXX-tab-button walkme-css-reset walkme-tab-button walkme-first-tab walkme-override walkme-css-reset walkme-tab-button-not-selected' |
WalkMeタスクタブ(選択済み) | div[class='walkme-XXXXXX-tab-button walkme-css-reset walkme-tab-button walkme-override walkme-css-reset walkme-tab-button-selected'] |
WalkMeタスクタブ(選択されていません) | div[class='walkme-XXXXXX-tab-button walkme-css-reset walkme-tab-button walkme-tab-button-not-selected walkme-override walkme-css-reset'] |
Walk検索バー | div[class='walkme-search-box-container.walkme-override.walkme-css-reset'] |
WalkMe進捗状況バー | div[class='walkme-progress-bar-wrapper walkme-loading-hide walkme-override walkme-css-reset'] OR div#walkme-progress-bar |
Walk検索バー検索アイコン | div[class='walkme-search-box-button walkme-loading-hide walkme-override walkme-css-reset'] |
WalkMeオンボーディングタスク | div.walkme-deployable-name.walkme-name.walkme-override.walkme-css-reset:contains('タスク名') |
WalkMeプレーヤーカテゴリ | div[class='walkme-deployable-row walkme-override walkme-css-reset'] |
WalkMe言語 | div[class='walkme-current-language walkme-override walkme-css-reset'] OR div#walkme-languages |
iFrame jQuery
以下のjQueryセレクターのテンプレートによって、WalkMeはiFrame内のエレメントを対象にすることができます。 例にあるような太字のアイテムをそれぞれのセレクターで更新します。
{ "element" : "#yourElement" , "context" : "iframe#iframeselector" } |
例:{"element": "h2.mainTitle" ,"context": "iframe#Main"}
開発ツールのコンソールでセレクターを評価するには、以下のwmjQueryテンプレートを使用する必要があります。
wmjQuery( "#yourElement" ,wmjQuery( "iframe#iframeselector" ).contents()) |
jQueryウェビナー
この記事は役に立ちましたか?
はい
いいえ
ご意見ありがとうございます!