# Adopt Editorでのエレメントセレクターの使用

{% hint style="warning" %}
Adopt Editorで機能を使用するには、まずNexthink Infinityで[ガイドを作成](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/creating-guides)し、特定のwebアプリケーションの[採用設定を構成する](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings)必要があります。
{% endhint %}

Adopt Editorの要素セレクタを使用して、ブラウザ上でターゲットのwebアプリケーションに[ガイドビジュアルコンポーネント](https://docs.nexthink.com/platform/ja/user-guide/getting-started-with-adopt#what-are-the-different-visual-components-available-for-guides)を添付します。

## Adopt Editorでの要素セレクタの使用

ガイドの種類に関係なく、Adopt Editorから要素セレクタを開くには:

1. ガイドの種類に応じて、**ツールチップ、** ステップ、アクション、またはメディアを追加します—ショートカットキーとして **Shift + a** を押します。
   * 要素セレクタを起動した後、ガイドビジュアルコンポーネントを割り当てたいweb要素の上にカーソルをホバーします。
   * または、特定のツールチップ、ステップ、アクション、またはメディアピースの\[プロパティ]タブから要素セレクタを再起動することも可能です。ガイドのタイプに関係なく行えます。
   * アプリケーション内を要素を選択せずに移動するには、**Shift + Click** を押します。
2. webアプリケーションページで選択した要素を確認するには、**✓** アイコンをチェックするか、**Shift + C** を押します。
   1. **Esc**を押します。

{% hint style="info" %}
Adopt Editorで要素を選択するとき、可能なアクションとコマンドを示す青いボックスが表示されます。
{% endhint %}

コントロールパネルを使用して[要素選択を精錬します](#refining-element-selection)。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-f2b9d03673bee7e49530b1c4b00ca42ba72c04b7%2Felement%20selector.png?alt=media" alt=""><figcaption></figcaption></figure>

### **Adopt Editorでの要素選択の精錬**

{% hint style="info" %}
Nexthink Infinityで[採用設定を構成するとき](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings)、特定のアプリケーションに対してガイドの要素セレクタのデフォルトを定義し、特定の要素属性を含めたり、除外したりできます。
{% endhint %}

webアプリケーションページで要素を選択した後、コントロールパネルは、選択を鋭利化するためのいくつかの視覚的および機能的なオプションを提供します。

1. コントロールパネル内の上下の矢印を使用してキャプチャされた要素を調整し、強度インジケータに影響を与えます。
2. コントロールパネル内でキャプチャされた要素の属性をチェックして、クラスや **ids** が動的に作成されるかどうかを確認します。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-a083a9845aecf27585414fcbcb9be83f99afa02d%2FPicture5.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
要素を選択する際、ページ全体がiframeとなり、完全にハイライトされることがあります。
{% endhint %}

Nexthink Adoptでは、オーバーレイを表示することでiframe内の個々の要素を選択することができます。

***

関連トピック

* [ツールチップガイドの開発](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-tooltip-guides)
* [ウォークスルーガイド開発](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides)
* [メディアガイドの開発](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-media-guides)