採用設定の設定

circle-exclamation

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

採用設定には次のサブタブが含まれます。

選択されたアプリケーションの採用設定を構成する

Nexthink Applications > アプリケーションを管理から、ガイドがあるWebアプリケーションを選択します。 採用設定タブ > 設定サブタブを開くには次の操作を行います。

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

  2. アドプトエディタがウェブアプリケーションから直接ページ要素をキャプチャする方法を、要素セレクタのための事前定義されたセットに基づいて決定します。

  3. 設定を保存

ガイドデフォルトの設定

ガイドのコンポーネントのデフォルト動作を構成します:

  • キーのページ選択を無視: 指定された要素がアプリケーションページビューに存在するたびに、ガイドステップやコンポーネントが表示されるようになります。

    • これはシステムが主要ページを無視し、要素セレクタのみに基づいてガイドステップを表示することを意味します。

  • 記録されたクエリパラメータを無視する: ステップが特定のURLにナビゲートし、たとえばhttp://google.com/?queryというクエリが含まれている場合、この設定を有効にしてクエリ、つまり/?以降のすべてを無視し、基本URLのみを使用します。

  • ユーザーがスクロールするときに位置を再計算する機能を有効にします。これは、メインページ以外にもスクロールバーを持つ複数のコンテナがある場合に便利です。 通常、Adoptはステップに関連付けられた要素に到達するためにメインページをスクロールします。 このオプションを有効にして、element IDを指定することで、そのコンテナへのスクロールに制限を課すことができます。

  • 要素が覆われていない場合にステップを表示する:モーダルダイアログなど、追加の層に覆われていない場合にのみガイドステップを表示させます。 選択を解除すると、追加の層があってもステップが表示されます。

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

    • 任意の: ステップへのユーザーの操作に関係なく設定が機能します。

    • 再読み込み時:ページの再読み込み時に設定が機能します。

    • ナビゲート時: ユーザーがURLを変更したときに設定が機能します。

    • バックフォワードでの動作: 設定はユーザーが前のページに戻るときに機能します。

circle-info

特定のガイドオーバーレイ(ステップ、アクション、ツールチップなど)のポジション プロパティ タブを設定する際に、ガイドデフォルトをカスタマイズすることができます。 ガイドの種類に関係なく、ウェブアプリケーション上でAdopt Editorから直接。

circle-exclamation

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

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

Nexthinkは、次の方法で要素の選択を微調整するのに役立ちます:

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

  • 動的に生成された識別子を検出し、信頼性のあるガイドオーバーレイ表示のために動的コンポーネントから削除します。

circle-info

特定のガイドオーバーレイ(ステップ、アクション、ツールチップなど)のポジション プロパティ タブを設定する際に、セレクターの設定をカスタマイズすることができます。 ガイドの種類に関係なく、ウェブアプリケーション上でAdopt Editorから直接。

要素セレクタの定義

[Adoptエディターで要素をキャプチャするとき](../../guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md)に不安定を避けるために、次の要素セレクターフィールドに入力してください。 要素セレクターはケースバイケースであり、一部のWebサイトは他よりも複雑なデザインを持っています。

設定を保存した後に要素セレクタフィールドを更新すると、その後行われた要素選択にのみ影響し、Adopt Editorですでに構成されている既存のガイドコンポーネント内の要素セレクタには影響しません。

circle-exclamation
chevron-right無視された要素IDフィールドhashtag

要素IDはページ要素を指し示す最も一般的な手段です。 ただし、要素の可視性はユーザーやページの状態に依存するため、これは常に適用されるわけではありません。

この設定により、ステップを記録する際に常に存在するとは限らない要素を無視することができます。 複数の要素をカンマで区切って含めることができます。

chevron-rightID置換またはクラス名置換フィールドhashtag

ID置換またはクラス名置換フィールドを使用して、IDまたはクラス名セレクターから数字などの動的要素を削除し、関心のある静的セグメントのみを保持するようシステムに指示します。

circle-info

ID 替換の実際の使用例については、ユースケース: Microsoft Dynamics用のエレメントセレクター ドキュメントを参照してください。

chevron-right無視された要素のクラス名フィールドhashtag

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

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

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

動的クラス名を扱う場合、動的な要素を取り除くとページ状態の表現に問題を引き起こす可能性があります。 この設定では、ガイドステップで要素が記録される際にdiv内に存在するカスタム属性を使用することができます。 カンマで区切って複数の要素を含めることができます。

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

data-ui5-stable

セレクタ検証ルール

Adoptのセレクタシステムは、構成されたすべての要素、パターン、および置換が有効であり、Webアプリケーション全体で一貫して機能することを保証するための一連の検証ルールに従っています。

  • オプションフィールド: すべてのセレクターフィールドはオプションです。 構成に必要ない場合は、任意のフィールドを空白のままにすることができます。

  • 正規表現パターンフィールド: 以下のフィールドには有効な正規表現が含まれている必要があり、特定のフォーマットルールに従う必要があります:

    • 無視された要素ID

    • 無視された要素クラス名

    • クラス名置換 → パターン

    • 要素ID置換 → パターン

    これらのパターンは次の要件を満たす必要があります:

    • 有効な正規表現であること。

    • 数字で始めないこと。

    • 二重引用符を \" としてエスケープすること。

    • エスケープされたバックスラッシュを含まないこと。

  • カスタム属性フィールド: フィールド 含まれる要素のカスタム属性名 には、有効な HTML 属性名を含める必要があります。 例えば: data-user または aria-label

  • 置換フィールド: フィールド クラス名置換 → 置換子 および 要素ID置換 → 置換子 には、有効な CSS セレクターを含める必要があります(例えば #element-id または .element-class)。

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

circle-exclamation

これらのオプションは、特定アプリケーションに対してデフォルトで有効にするセレクターを定義することを可能にします。

  • 要素 XPath: 言語特有の要素テキスト値に基づくセレクタ。 例えば: (/html/body//span[contains(translate(.,'AÁÄBCČDĎEÉFGHIÍJKLĽĹMNŇOÓÔPQRŘŔSŠTŤUÚVWXYÝZŽ ','aáäbcčdďeéfghiíjklľĺmnňoóôpqrřŕsštťuúvwxyýzž'),concat('new',''))][not(ancestor-or-self::yes-elf-holder)])[3]

  • 要素 CSS 相対パス: タグ名、クラス名、ID、nth-child からなる相対 CSS セレクタ。 例えば: div#target.element:nth-child(0)

    • 各レベルは>結合子で区切られています。

    • 利用可能であれば、IDを持つ最も近い親から開始します。

  • 限定されたXPath要素: 相対CSSパスに相当しますが、XPath形式で表現されています。 通常は自動生成され、評価が遅い。 例えば: input[@id='...'][contains(@class,'textbox')]

  • 要素のCSS相対パス限定: CSS相対パスと同様ですが、nth-child()擬似クラスを除外します。 要素が兄弟の中でユニークな場合、位置を指定する必要がない場合に使用します。 例えば: input#RequestID_input.alignmentLeft.field.textbox

  • 要素 CSS 表現パス: 複数のクラス名に依存し、ターゲット要素を相対セレクタで定義するセレクタ。 例えば: .class1 .class2 > div#target.element:nth-child(0)

  • 要素 CSS クラスのみパス: クラス名のみを使用して作成されたセレクタ—ID やタグは使用しません。 例えば: .applicationShell-2 .active-form.dialog-container

  • 要素のCSSタグのみのパス: タグ名とnth-child()擬似クラスのみを使用したセレクタ、それらを>で結合します。 クラスまたは ID が存在しない場合に便利です。 例えば: html > body > div:nth-child(3) > div:nth-child(1) > input:nth-child(4)

ガイドオーバーレイの位置を Adop エディターで設定する際に、上記に記載されているものに加えて、以下の要素セレクターのオーバーライドを有効または無効にすることができます:

  • Element JSPath: 合成されたパスとShadow DOMのトラバースに基づくセレクタ。 例: body > ui5-static-area > ui5-static-area-item-sf-header,...

Webページから要素セレクターを抽出する

要素セレクターの定義時にWebページから属性を抽出するのが初めての場合、次の手順に従ってください:

chevron-rightWebページから属性を特定して抽出するhashtag

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

あなたのブラウザから:

  1. MS EdgeとChromeブラウザ内で開発者ツールを起動します (F12)。

    • 他の手段として、右クリックしてインスペクトします。

  2. ツールバー内の アイコンをクリックします。

  3. マウスカーソルを使用して必要な要素を選択します。

  4. 右側のElementsパネルから選択した要素に関連するデータが見えるでしょう。

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

または、Nexthink ブラウザー拡張機能arrow-up-rightを使用して、Web アプリケーションページから CSS セレクター を抽出します。この拡張機能は現在、Firefox をサポートしていません。

以下の画像では、data-automation-id 属性が要素セレクタの候補です。

circle-exclamation

ユーザー履歴をリセット

Nexthink Adoptは、ユーザーの操作、具体的にはガイドビューや完了をデータベースに保存します。 管理者は、このデータを特定のユーザー単位で、またはアプリケーション全体に対して削除することができます。 削除するユーザーを指定するには、そのNQL IDを入力してください。

保存されたユーザー操作は、ガイド条件チェックをサポートします。 公開済みのガイドをテストした後、自分のインタラクション履歴をリセットして、クリーンな状態からの動作を確認できます。

circle-exclamation

選択したアプリケーション用のローカライズ設定を構成する

ローカリゼーション は、従業員のブラウザ設定に基づいてAIによる自動翻訳を使用してガイドの内容をローカライズします。

採用コンテンツをローカライズするには二つの方法があります: AIによる方法と手動で翻訳を提供する方法です。

  • AIローカリゼーションはガイド名とその手順内のすべてのコンテンツに影響を及ぼします。

  • 手動翻訳はガイドの手順内のすべてのコンテンツに影響を及ぼしますが、ガイド名を異なる言語に適合させるために変更することはできません。

ローカリゼーションを有効化するには、Nexthinkの Applications > Manage applications からガイドを含むWebアプリケーションを選択します。 Adoption settingsタブ > Localizationサブタブを開きます:

  • 最大5つの言語を選択できます。 ユーザーの言語が選択されたオプションの中にない場合、システムはデフォルトで英語を使用します。

circle-exclamation

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

テーマを設定するには、アプリケーション管理に移動し、必要なアプリケーションを選択してから、導入設定とテーマタブを選択してください。

Adoptがデフォルトの配色として使用するテーマを選択し、コンテキストヘルプや手順、アクション、ツールチップなどのガイドコンテンツを表示します。

選択したアプリケーションのテーマをカスタマイズするには:

  1. Navi、Light または Dark からテーマを選んでください。

  2. LightまたはDarkでは、HEXカラーコードを使用してカスタムのアクセントカラーを選ぶことができます。 例えば: #1046a8.

  3. 変更をアプリケーションとガイドコンテンツに適用するため、保存してください。

Navi テーマは追加オプションとして提供されますが、カスタマイズはできません。

circle-info

HEXカラー規則は16進数(基数16)桁を使用して色を指定します。 これらの数字は 00 から FF までの赤、緑、青の強度を示すようにペア(RR、GG、BB)でグループ化されています。


選択したアプリケーション用のコンテキストヘルプ設定を構成します

circle-info

ウェブアプリケーション内のクエスチョンマークアイコンからアクセスできるコンテキストヘルプは、従業員が自己支援のためにコンテキスト特有のガイドやドキュメントを検索することができます。

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

Nexthink アプリケーション > アプリケーションを管理から、ガイドを含むウェブアプリケーションを選択します。 Adoption settingsタブ > コンテキストヘルプサブタブを開きます:

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

  2. オプションで、可視ツアーを抑止します

  3. 任意で、構成をカスタマイズしてください。

  4. 設定を保存.

プレースホルダー

コンテキスト ヘルプ ポップアップにコンテンツを検索する際に表示されるデフォルト テキストを変更するために検索プレースホルダー結果なしプレースホルダーのフィールドに入力します。

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

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

目に見えるツアーを抑制

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

コンポジション

  • オプションで、ガイド ジャーニー、ウォークスルー、およびメディア型ガイドを分類するためにコンテキスト ヘルプ ポップアップに表示されるヘッダーを変更します。 必要に応じて、デフォルトのヘッダーを保持します。

  • ユーザーに表示されるそれらのセクション内のガイドジャーニーの視覚順序を並べ替えます。


関連トピック

Last updated

Was this helpful?