導入設定の構成

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

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

• 設定 サブタブ

• ローカリゼーションサブタブ

• テーマサブタブ

• コンテキストヘルプ サブタブ

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

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

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

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

3. 設定を保存。

ガイドデフォルトの設定

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

• 重要なページ選択を無視: ガイドステップまたはコンポーネントを特定の要素がアプリケーションページビューに表示されるたびに、そのページに関係なく表示させることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

要素セレクタの定義

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

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

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

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

• 要素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 Editor内でガイドオーバーレイの位置を設定する際には、上記の他に以下の要素セレクタのオーバーライドを有効または無効にできます。

• 要素のJSPath: 合成パスおよびシャドウDOMトラバーサルに基づくセレクタ。 要素がシャドウルート内に存在する場合のみ使用してください。 例: body > ui5-static-area > ui5-static-area-item-sf-header,...

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

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

Webページから属性を特定して抽出する

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

あなたのブラウザから:

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

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

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

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

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

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

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

以下の画像では、data-automation-id 属性が要素セレクターの候補となっています。

Webページ上のドロップダウンやメニューなど、Shadow DOMでカプセル化された動的に複雑な要素の場合、単なる属性抽出では一致する精度が十分でないことがあります。

Webページ要素がShadow DOMを使用しているかどうかの特定

シャドウDOMはWeb開発技術であり、HTML要素に別の文書オブジェクトモデル（DOM）ツリーをアタッチしカプセル化することができます。 これにより、シャドウDOM内のスタイルとスクリプトはページの他の部分に影響を与えることがありません。

ウェブ要素がシャドウDOM内に含まれているかを確認するには、以下の手順に従ってください。 その場合、検出精度のために要素選択のためのカスタム安定識別子を作成する必要があります。

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

2. アイコンをクリックします。

3. 検査したい要素の上にカーソルを合わせます。

4. 選択した要素から上にスクロールして右側の要素ペインを参照します。

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

ユーザー履歴をリセット

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

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

選択したアプリケーション用のローカリゼーション設定を構成します。

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

Nexthink アプリケーション > アプリケーションを管理から、ガイドを含むウェブアプリケーションを選択して、AI生成のローカリゼーションを有効にします。 Adoption settingsタブ > Localizationサブタブを開きます:

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

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

テーマサブタブには、ガイドコンポーネント（ステップ、アクション、ツールチップ等）を表示するためのAdoptデフォルトカラースキームが詳述されています。 これらのデフォルトカラーは従業員のブラウザ表示設定に影響されます: ダークテーマまたはライトテーマ。

Nexthink アプリケーション > アプリケーションを管理から、ガイドを含む特定のアプリケーション用のAdoptカラースキームと外観をカスタマイズします。 Adoption settingsタブ > Themeサブタブを開きます:

1. カスタムカラースキームを決定します—例としてHEXカラー命名法を使用します: #1046a8。

2. 背景色、プライマリカラー、アクセントカラーをカスタムの色で埋めます。

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

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

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

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

1. ランチャーの位置を選択します。

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

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

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

5. オプションで、構成をカスタマイズします。

6. 設定を保存。

ランチャーの位置

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

• テーマ配置済みオプションは、ランチャーを配置する際、Nexthinkによって予め定義されたCSS定義に従います。

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

プレースホルダー

検索プレースホルダーおよび結果なしプレースホルダーの項目に入力し、コンテキストヘルプポップアップ内のデフォルトで表示されるテキストを変更します:

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

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

可視ツアーを抑止

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

ガイダンス制御を有効にする

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

• コンテキストヘルプ: コンテキストヘルプポップアップ内。

• ランチャー: ランチャー（感嘆符アイコン）の上。

• ステップ: 問題のガイドツアーのステップポップアップ内。

• 前述の統合表示場所におけるコンテキストヘルプとステップまたはランチャーとステップ。

• どこでも: 上記のすべてのオプション。

トグルボタンに表示されるテキストを変更するために、オプションでガイダンスオンのラベルおよびガイダンスオフのラベルのフィールドに入力します。

コンポジション

コンテキストヘルプのポップアップに表示されるセクションヘッディングを変更して、ウォークスルーおよびメディアタイプのガイドを分類します。 デフォルトのヘッダーを特定のラベルに置き換えます。