WalkMe jQuery Cheatsheet

Download as PDF

役立つヒント

• コンソール：開発者ツールの中でも、特にページに存在するすべての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」セレクターと一致します。
• リレーションセレクター：セレクターが互いにどう関連しているかを利用して、jQueryをより具体化することができます。
  • 子孫：スペースを使用して表示
    • WalkMe jQueryを使用した検索の例：
      • wmjQuery("Input .btn")
      • これはInputエレメントから派生したすべてのbtnクラスを返します。 開発者ツールのエレメントセクションでは、目的のセレクターが先祖セレクターの右下側にインデントされて表示されます。
  • 兄弟：プラス記号を使用して表示
    • WalkMe jQueryを使用した検索の例：
      • wmjQuery("Input+.btn")
      • これはInputエレメントと兄弟関係にあるすべてのbtnクラスを返します。 開発者ツールのエレメントセクションでは、目的のセレクターが兄弟の下に表示され、インデントレベルは同じになります。 目的のエレメントの前に必ず兄弟エレメントがあります。
• コマンド：jQueryステートメントの最後にコマンドを追加して、より正確な検索を行えるようにします。 これらはコマンドの後にコロンを追加することで追加されます。
  • 最初のセレクター：yourselector:first
    • WalkMe jQueryを使用した検索の例：
      • wmjQuery(".btn:first")
      • これは現在のページの最初のbtnクラスを返します。
  • 最後のセレクター：yourselector:last
    • WalkMe jQueryを使用した検索の例：
      • wmjQuery(".btn:last")
      • これは現在のページの最後のbtnクラスを返します。
  • セレクター番号による選択：yourselector:eq(number_of_element)
    • WalkMe jQueryを使用した検索の例：
      • wmjQuery(".btn:eq(2)")
      • これは現在のページの3番目のbtnクラスを返します。 最初のセレクターが0と表示されているため、これは3番目です。 つまり、この場合は「btn 0」、「btn 1」、「btn 2」というクラスがあることになります。
  • テキストによる選択：yourselector:contains("desired selector's text")
    • WalkMe jQueryを使用した検索の例：
      • wmjQuery(".btn:contains('Save')")
      • これは「保存」というテキストが含まれる現在のページのすべてのbtnクラスを返します。 線の左側にあるニンジンのマークを使用して、開発ツールのエレメントセクションでセレクターを開きます。 セレクターの一番内側の行に
        テキストが表示されます。
  • セレクターによる選択：yourselector:has("selectors inside the desired selector")
    • WalkMe jQueryを使用した検索の例：
      • wmjQuery("Input:has('.btn')")
      • これは現在のページでbtnクラスを子孫に持つすべてのInputエレメントを返します。 線の左側にあるニンジンのマークを使用して、開発ツールのエレメントセクションでセレクターを開きます。 目的のセレクターから派生するセレクターが表示されます。
  • 可視化されたセレクター： yourselector:visible(number of element)
    • WalkMe jQueryを使用した検索の例：
      • wmjQuery(".btn:visible")
      • これはページ内に目的のセレクターの非表示のバージョンがある場合に使用されます。 例えば、単一ページアプリケーションではタブを切り替えて使用することができます。 これはエレメントが表示から非表示にされた場合でも、技術的にはページ上に存在することを意味します。

WalkMeプレーヤーコンポーネントのjQueryセレクター

この表はWalkMeプレーヤー（最も頻繁に使用されるのはSC、PS、CS）と相互作用するWalkMeコンテンツを作成したい人に役立ちます。

*XXXXXXの部分をコンポーネントの関連するWalkMe IDに置き換えます。

iFrame jQuery

以下のjQueryセレクターのテンプレートによって、WalkMeはiFrame内のエレメントを対象にすることができます。 例にあるような太字のアイテムをそれぞれのセレクターで更新します。

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

開発ツールのコンソールでセレクターを評価するには、以下のwmjQueryテンプレートを使用する必要があります。

jQueryウェビナー