導入設定の構成

採用設定では、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: 言語固有の要素テキスト値に基づくセレクターです。

• 要素CSSパス相対: tag名、className、IDおよびnthChildで構成される相対CSSセレクターです。 すべての要素セレクターの間には>結合子があります。

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

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

• 限定要素XPath: CSSパス相対セレクターと同じですが、XPath式に変換されます。

• nth-childセレクターなしの要素CSSパス相対限定: 同じ CSSパス相対セレクターですが、nthChild()擬似クラスは含まれません。

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

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

• 要素CSSタグのみパス: タグおよびnthChild擬似クラスのみを使用し、>結合子で結合したセレクターです。

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

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

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

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

あなたのブラウザから:

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

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

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

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

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

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

または、Nexthinkブラウザ拡張を使用してウェブアプリケーションページから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つのガイドが同時に表示されることを避けることができます。

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

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

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

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

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

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

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

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

コンポジション

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