ここでは、ブラウザから拡張機能を起動し、
要素取得・要素指定を行う場合の設定方法をご説明します。
1. 拡張機能を使用する場合（推奨）
こちらから拡張機能を追加していただくことで、フォーカスする要素のセレクターの設定や ヒントの対象要素の設定に必要なCSSセレクターを簡単に取得できます。 ※Google Chromeのご利用が前提となります。
設定方法
- Chromeウェブストアで拡張機能をインストール ※従業員向け / サービス提供者向けで必要な拡張機能が異なるため、ご注意ください
- 要素を取得したいページを開き、ツールバーの拡張機能ボタンから拡張機能を立ち上げる
- 【任意】［高度な設定］を行う
- 拡張機能右下の［要素取得を開始］をクリック
- 要素指定を行いたい要素* にカーソルを移動させ、指定したいエリアに枠を合わせ右クリック
- 要素が自動でコピーされた状態になります ※［コピーボタン］をクリックすることで再度コピーできます
- 要素指定を行いたいガイドの編集画面を開き、設定箇所にペーストして完了
契約サービス | 拡張機能名 | URL |
従業員向けOnboarding | Onboarding Preview | |
サービス提供者向けOnboarding | Onboarding Preview(Classic） |
設定方法については以下の箇所をご確認ください
*＝各ガイドにおける要素指定を
行うシーン | |
ツアー・ポップアップ | ステップにて、要素に対してフォーカスを当てる |
ヒント | 要素に対してヒントを設置する |
高度な設定を活用する
「高度な設定」を開くとクラス名を使用・ID名を使用・文言指定を使用の3つの設定が表示されます。デフォルトでは3つ全て選択されています。
設定方法
［高度な設定］は拡張機能のウィンドウ下部から変更できます
各設定項目を外した方が良い例
- クラス名を使用を外すべき例
- クラス名が乱数で生成されてしまう場合（
.6j43jlkj8d32などが生成されるとき） .modal-closeのようにモーダルが閉じている時など、意図しない状態を表現するクラス名が含まれる場合- ID名を使用を外すべき例
- ID名が乱数で生成されてしまう場合（
#23ds2gdfa3など） - 文言指定を使用を外すべき例
- ユーザー毎に異なる文言が表示される場合（
p:contains('テスト太郎')など名前が表示されるとき） - 文言変更が行われる可能性が高い場合
form:contains('')のように空文字が入っている場合
高度な設定のチェックを全て外した場合
3つのチェックを全て外すとHTMLタグの nth-child を用いたセレクター出力となります。
検証ツールを使用する場合
Onboardingのステップ内の設定に必要な要素の指定方法をご説明します。
※Chromeブラウザの利用が前提となります
設定方法
- 該当ページで右クリック→［検証］または［F12］をクリックし［Chrome Dev Tools］を開く
- メニューバーの左端にある［矢印アイコン］をクリック
- 指定したい要素にマウスオーバーしてクリック。 Chrome Dev Tools内の［Elements］欄にクリックした該当要素にフォーカスされます。
- ［Elements］内のハイライトされた箇所を右クリック。 ［Copy］→［Copy selector］をクリックすると、対象の要素が抽出できます。
上記のボタンの場合の例
#__layout > div > main > div.main-visual > div > div > p.order-btn > a
