導入設定の構成

導入設定では、ウェブアプリケーション内のすべてのガイドのデフォルトの動作を設定することができます。 これには、Adopt Editorでのコンテンツ開発を形成するための要素セレクターとガイドコンポーネントのセットアップが含まれます。 さらに、コンテクストのヘルプの表示に対するデフォルトオプションも選ぶことができます。

導入設定には次のサブタブが含まれています:

選択したアプリケーションのAdoption Settingsの設定

Nexthinkのアプリケーション > アプリケーションを管理からガイド付きのウェブアプリケーションを選択します。 導入設定タブ > 設定サブタブを開くには:

  1. ガイドコンポーネントの動作のためのガイドのデフォルトを有効または無効にします。

  2. Adopt Editorがウェブアプリケーションからページ要素を直接キャプチャする方法を、要素セレクター用の事前定義セットに基づいて決定します;

  3. 設定を保存

ガイドのデフォルト設定

ガイドコンポーネントのために以下のデフォルト動作を設定します:

  • ステップが表示されるときにURLアドレスに移動:従業員がガイド内の特定のステップまたはコンポーネントに到達すると、自動的に設定されたURLに移動します。

  • キーのページ選択を無視:アプリケーションページビュー内に特定の要素が存在するたびに、ガイドステップまたはコンポーネントを表示可能にします;

    • これにより、システムはキーページを無視し、要素セレクターにのみ依存してそれに付随するガイドステップを表示します。

  • 要素を表示するためにスクロール: ユーザーが関連するステップに達した際に、自動でページがステップ固有の要素へとスクロールします。

  • 要素が覆われていない時にステップを表示: モーダルダイアログのような追加のレイヤーで覆われていない場合にのみ、ガイドステップを表示可能にします。 選択を解除すると、追加のレイヤーがあってもステップを表示することができます。

  • 完了後にステップを維持:ユーザーがステップを完了した後もガイドステップを維持します。

    • **任意:**設定はステップに対するユーザーの操作に関わらず機能します。

    • ページリロード時: 設定はページのリロード時に機能します。

    • **移動時:**設定はユーザーがURLを変更した場合に機能します。

    • **戻る/進む:**設定はユーザーが前のページに戻った場合に機能します。

特定のビジュアルガイドコンポーネント(ステップ、アクション、ツールチップなど)の位置プロパティタブを設定する際にガイドのデフォルトをカスタマイズできます Adopt Editorから直接ウェブアプリケーション上のガイドタイプに関わらず。

セレクターのフレームワークの定義

要素セレクターセレクターのオーバーライドを決定して、Adopt Editorがウェブアプリケーションからページ要素を直接キャプチャする際のデフォルトの指示を指定します。 これらの指示は、Adoptが内部レンダリング構造を解釈するために使用するセレクターシステムを定義するものです。

Nexthinkは次の方法で要素の選択を微調整するのを支援します:

  • 要素を見つける可能性を高めるために、複数の種類のセレクターを特定します。

  • 動的に生成された識別子を検出し、それらをダイナミックコンポーネントから取り除くことでプロセスに対してより信頼性を向上させます。

特定のビジュアルガイドコンポーネント(ステップ、アクション、ツールチップなど)の位置プロパティタブを設定する際に、セレクター設定をカスタマイズすることができます。

Adopt Editorから直接ウェブアプリケーション上のガイドタイプに関わらず。

要素セレクターの定義

Adopt Editorで要素をキャプチャする際の視覚的なエラーを回避するために、以下の要素セレクターフィールドを記入してください。 この点については、ウェブサイトによって設計が異なるため、件によって異なります。

設定を保存した後に要素セレクターフィールドを更新しても、それ以降の要素選択にのみ影響を与え、既にAdopt Editorで設定されたガイドコンポーネント内の要素セレクターは更新されません。

"クラスのみ"のセレクターフィールド

一部のページにはガイドには頼りない動的要素が含まれています。 この設定で要素を指定し、その動的コンポーネントを除去することにより、より信頼性の高いガイドを作成します。

  • パターン: ワイルドカードを使用して動的要素を置き換えることで、動的要素を含むクラスを定義します。 例えば、table-layout-1234-toptable-layout-*-topとして入力されます。

  • 置換: 上記と同じクラスを、動的要素を含めずに定義します。 同じ例を使って、table-layout-topを入力してください。

どちらのフィールドにも、カンマで区切って複数の要素を含めることができます。

無視された要素IDフィールド

要素IDはページ要素を指し示す最も一般的な方法です。 しかし、要素の可視性はユーザーやページの状態に依存するため、これは常に適用されるとは限りません;

この設定により、ステップを記録する際に常に存在しない可能性のある要素を無視できます。 いくつかの要素をコンマで区切って含めることができます。

無視された要素クラス名フィールド

クラス名は複数のHTML要素で使用でき、異なるページ状態の表現をもたらす視覚的なスタイルによく使用されます;

この設定により、ガイドステップに干渉する可能性のあるこれらの異なる状態の結果を無視することができます。 いくつかの要素をコンまで区切って含めることができます;

含まれる要素のカスタム属性名フィールド

動的なクラス名を使用する場合、動的コンポーネントを削除するとページ状態の表現に問題が生じる可能性があります。 この設定では、要素がガイドステップに記録されている時に div に存在するカスタム属性を使用することができます。 いくつかの要素をコン間で区切って含めることができます。

Workdayウェブアプリケーションページ要素の例:

data-automation-id, data-uxi-widget-type

Shadow DOMを使用するSAP SuccessFactorsウェブアプリケーションページ要素の例:

data-ui5-stable

要素セレクターのオーバーライドの有効化/無効化

これらのオプションにより、特定のアプリケーションに対してシステムがデフォルトで有効にするセレクターを定義できます。

  • 要素XPath:言語固有の要素テキスト値に基づいたセレクター。

  • 要素CSSパス相対tag名、classNameIDnthChildで構成される相対CSSセレクター。 各要素セレクター間には > コンビネータがあります;

    • 親にID属性がある場合は、CSSセレクターはbodyではなくその要素から始まります。

    • 例:div#target.element:nthChild(0)

  • XPath要素-制限付き:CSSパス相対セレクターと同じですが、XPath表現に変換されます。

  • 要素CSSパス相対制限付き(nth-childセレクターなし)nthChild()偽クラスなしのCSSパス相対セレクターと同じ。

  • 要素CSS表現されたパス:クラス名のみを使用したセレクターですが、ターゲット要素は相対セレクターを使用して表現されます:.class1 .class2 > div#target.element:nthChild(0)。

  • 要素CSSクラス専用パス:クラス名のみで作成されたセレクター。

  • 要素CSSタグ専用パス>コンビネータで結合されたタグとnthChild偽クラスを使用して作成されたセレクター。

ウェブページからの属性の識別と抽出

設定タブで要素セレクターを定義するには、まずウェブページから属性を直接識別して抽出する必要があります;

ブラウザから:

  1. MS EdgeおよびChromeブラウザ内でデベロッパーツール (F12) を起動します。

  • 代替策として、右クリックして検査を行います。

  1. 必要な要素をマウスカーソルで選択します。

  2. 右側の要素パネルから、選択した要素に関連するデータが表示されます。

  3. 任意の属性が安定したデータを含んでいるか評価します。 比較のために5〜6つの要素をサンプルしてください。

下の画像のように、data-automation-id属性は要素セレクターの候補です;

ウェブページ要素がShadow DOMを使用しているかどうかの確認

Shadow DOMは、HTML要素に別のDocument Object Model(DOM)ツリーをアタッチしてカプセル化するためのウェブ開発技術です。 これにより、Shadow DOM内のスタイルとスクリプトがページの他の部分に影響を与えないようになります。

Shadow DOM要素の実際の例については、SAPアプリケーションのためのShadow DOMセレクター設定に関するユースケースを参照してください。

ウェブ要素がShadow DOMに含まれているかを確認するための手順を以下に示します。 このような場合、要素選択のための安定したカスタム識別子を作成し、検出精度を向上させる必要があります。

  1. デベロッパーツールを起動します(Webブラウザ内でF12)。

  2. 調べたい要素にカーソルを合わせます。

  3. 選択した要素から右側の要素ペインで上方向にスクロールします。

  4. 要素がshadow-root (open)エリア内にネストされているか確認します。 下の画像を参照してください。


選択したアプリケーションのためのAdoptテーマのカスタマイズ

テーマサブタブには、ガイドコンポーネント(ステップ、アクション、ツールチップなど)を表示するためのAdoptのデフォルトのカラースキームが記載されています。 これらのデフォルトカラーは、従業員のブラウザ表示設定ダークテーマまたはライトテーマに応じて変化します。

特定のアプリケーションのためにAdoptのカラースキームと外観をカスタマイズするには、Nexthinkのアプリケーション > アプリケーションを管理からガイド付きのウェブアプリケーションを選択します。 導入設定タブ > テーマサブタブを開きます:

  1. カスタムカラーはHEXカラーの名前法を使用して決定します。例えば:#1046a8

  2. バックグラウンドカラーメインカラーアクセントカラーフィールドにカスタムカラーを入力します。

HEXカラーの表記法は、16進数(base-16)の6桁の文字を使用して色を指定します。 これらの桁は (RR, GG, BB) のペアとしてまとめられ、赤、緑、および青の強度を 00 から FF で表します。


選択したアプリケーションのためのコンテクストヘルプ設定の構成

ウェブアプリケーション内の質問マークアイコンからアクセス可能なコンテクストヘルプ機能は、従業員がコンテクスト特定のガイドまたはドキュメントを検索して自助することを可能にします。

ターゲットアプリケーションサイトのコンテクストヘルプポップアップがどのように表示され、デフォルトで動作するかを構成します。

Nexthinkのアプリケーション > アプリケーションを管理からガイド付きのウェブアプリケーションを選択します。 導入設定タブ > コンテクストヘルプサブタブを開きます:

  1. ランチャーの位置を選んでください。

  2. プレースホルダを編集します。

  3. オプションで、可視ツアーを抑制します。

  4. オプションで、ガイダンスの制御を有効します。

  5. 設定を保存

ランチャーの位置

ランチャーの位置ドロップダウンから、コンテクストヘルプランチャー(感嘆符アイコン)の位置を選択します:

  • テーマに配置のオプションは、ランチャーを配置するときにNexthinkによって決定されるCSS定義に従います;

  • 要素に添付のオプションは、ランチャーを既存のページ要素に埋め込みます。 したがって、問題の要素のCSSセレクターを貼り付ける必要があります。 例:div.data-uxi-widget-type["value"]

プレースホルダー

検索プレースホルダー結果なしプレースホルダーフィールドを埋めて、コンテクストヘルプポップアップでコンテンツを検索する場合に表示されるデフォルトテキストを変更します;

  • **検索プレースホルダー:**コンテクストヘルプポップアップの検索フィールドに表示されるデフォルトテキストを変更します。 例:ここにガイド名を入力してください。

  • **結果なしプレースホルダー:**検索が失敗した後にコンテクストヘルプポップアップで表示されるデフォルトテキストを変更します。 例:一致する結果は見つかりませんでした。

可視ツアーの抑制

従業員がコンテクストヘルプポップアップから新しいガイドを開始するときに可視ツアーを抑制できます。 この構成により、二重にガイドが同時に表示されるのを回避できます。

ガイダンス制御の有効化

アプリケーションサイト内のガイド付きツアーを従う従業員のためにガイダンスのオン/オフトグルボタンを有効化するには、ガイダンス制御を有効にするガイダンスのオン/オフトグルをこれらの場所から表示します:

  • **コンテクストヘルプ:**コンテクストヘルプポップアップ内で。

  • **ランチャーの上:**ランチャー(感嘆符アイコン)の上。

  • **ステップ:**目的のガイド付きツアーのステップポップアップ内。

  • コンテクストヘルプとステップまたは**ランチャーとステップ:**上記の組み合わせた表示場所内。

  • **すべて:**上記のすべてのオプション。

オプションで、ガイダンスがオンになっているラベルガイダンスがオフになっているラベルフィールドを埋めて、トグルボタンに表示されるテキストを変更します。

Last updated

Was this helpful?