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

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

WalkMe jQuery Cheatsheet

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

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

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

役立つヒント

  • コンソール:開発者ツールの中でも、特にページに存在するすべての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に置き換えます。

コンポーネント 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())

🎓 Digital Adoption Institute

jQueryウェビナー

ヒント:WalkMe Worldコミュニティーで、より役立つウェビナーをご覧ください。

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

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

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×