# トランザクションの設定

{% hint style="info" %}
Nexthinkは、アプリケーションごとに無制限のトランザクションを設定することを可能にしますが、すべてのアプリケーションでのトランザクションの合計数が1000未満である必要があります。
{% endhint %}

トランザクションとは、企業にとって価値を創造する従業員の行動やWebアプリケーション内のイベントを指します。 サービスマネージャーは、従業員がアプリケーションのWebページで特定のアクションを効率的に実行できるかどうかを詳細に把握する必要があります。

NexthinkのWebインターフェイスは、開始イベントと終了イベントを指定することでトランザクションを定義します：

* 開始イベントはユーザーが定義するアクションで、クリックやキーを押すといった要素に対してアクションが適用されるものです。 例えば、保存ボタンをクリックすることです。
* 終了イベントは、ページに定義された要素で追加または変更されるものです。 例えば、ページ上にメッセージやアイコンが表示されるか、あるいは逆に要素がページから消えることです。

NexthinkはアプリケーションのWebページ上の開始要素と終了要素を定義するためにCSS セレクタを使用します。

***

## Webアプリケーションのトランザクションを設定する <a href="#transactions-transactionconfigurationtrue" id="transactions-transactionconfigurationtrue"></a>

Web アプリケーション構成の [General タブでフィールドを設定](https://docs.nexthink.com/platform/ja/user-guide/applications/configuring-applications/configuring-web-applications) した後、このページの手順に従って **Transactions** タブを構成します。

### 新しいトランザクションを追加する <a href="#transactions-addinganewtransaction" id="transactions-addinganewtransaction"></a>

新しいトランザクションを追加するには:

1. メインメニューから**アプリケーション > アプリケーションの管理**を選択します。
2. 選択したアプリケーションの名前をクリックして、その設定にアクセスします。
3. アプリケーションの設定ページから**トランザクション**タブをクリックします。
4. **トランザクションの追加**ボタンをクリックして**トランザクションの追加**ウィンドウを開きます。

**トランザクションの追加**ウィンドウから、[トランザクション開始](#transactions-definingthetransactionstarttransstart)および[トランザクション終了](#transactions-definingthetransactionendtransend)タブの内容を記入します。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-7409a438a0b96fe4569ed245183081843d5dec4c%2Fappex-1684825819.png?alt=media" alt="Transactions tab" width="760"><figcaption></figcaption></figure>

### トランザクション開始の定義 <a href="#transactions-definingthetransactionstarttransstart" id="transactions-definingthetransactionstarttransstart"></a>

**トランザクションの追加**ウィンドウから、**トランザクション開始**タブをクリックし、フィールドを記入します。

一部のアプリケーションには、常にWebページの一部となる要素が含まれています。 これらの要素はCSSの変更によって、表示されたり非表示になったりします：

* 要素の`visible`属性が変更される可能性があります。
* 要素のクラス名が動的に変更される可能性があります。
* 要素が動的に変更可能な属性またはクラスを含む他の要素によって隠されることがあります。

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

次の表には、トランザクション開始フィールドとその定義方法が表示されています:

| トランザクション開始フィールド      | 説明                                                                                                                                                                                                                           |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| トランザクション名            | 取引のために意味のある名前を入力してください。                                                                                                                                                                                                      |
| 開始イベントのタイプ           | <p>ユーザーがどのように取引を開始するかによって、オプションから1つを選択してください。</p><p>トリガーはクリック、キーボードのリターンキーを押す、またはページをナビゲートすることによって発生する可能性があります。</p>                                                                                                          |
| 開始イベントの名前            | <p>開始要素の名前を100文字以内で選択してください。</p><p>名前を書く際には、標準的なUTF-8文字セットを使用してください。</p><p>他のソースからのテキストのコピーには、サポートされていない特殊文字が含まれる可能性があることに注意してください。</p>                                                                                      |
| 開始要素のCSSセレクタ         | <p>取引をトリガーするために使用されるページ要素のCSSセレクタを貼り付けてください。</p><p>このページの<a href="transactions">CSSセレクタ</a> セクションを参照してください。</p>                                                                                                              |
| 開始要素のテキストパターン（オプション） | <p>CSSセレクタに加えて、テキストパターンを使用して開始要素を絞り込むことができます。</p><p>いくつかのアプリケーションではテキストが複数言語で存在する可能性がありますのでご注意ください。</p><p>詳細については、こちらのページの <a href="#transactions-editinganexistingtransaction">CSS セレクターテキストパターンの定義</a> セクションを参照してください。</p> |
| すべての一致する要素を選択する      | <p>このチェックボックスにマークを付けると要素IDに一致するすべての要素が選択されます。</p><p>これは、たとえば、ユーザーが任意の表の行をクリックした際に取引を開始する場合に便利です。</p>                                                                                                                         |

### 取引終了の定義 <a href="#transactions-definingthetransactionendtransend" id="transactions-definingthetransactionendtransend"></a>

**取引の追加**ウィンドウから、**取引終了**タブをクリックし、項目を入力してください。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-8de5623853b7b8276e0d960aff6463fca9ffefd5%2Fappex-1684826204.png?alt=media" alt="Automatic transaction end detection"><figcaption></figcaption></figure>

以下のいずれかを選択できます:

* 自動トランザクション終了検出を使用
* 手動トランザクション終了フィールドの自動オプションを無効にします。

#### **自動トランザクション終了検出を使用**

プロセストランザクション終了の設定を簡素化するために、Nexthink Applicationsは自動検出を提供しています。 この機能は、システムによってデフォルトで有効化されています。

* このオプションを選択すると、他の設定オプションは必要なくなるため、折りたたまれます。
* 既存のトランザクション終了を編集する場合、チェックボックスを選択して **Done** を押すと、現在の構成は失われます。

Nexthinkは、自動トランザクション終了検出を進める前に、既存のトランザクション終了設定のバックアップを推奨しています。

{% hint style="info" %}
**自動終了検出** を使用するトランザクションの場合、Nexthink はソフトナビゲーションと同じ完了ロジックを使用してトランザクションの終了を判定します。

[#computing-the-end-of-transactions-automatic-end](https://docs.nexthink.com/platform/ja/user-guide/monitoring-applications/monitoring-web-applications/performance/transactions#computing-the-end-of-transactions-automatic-end "mention") を参照してください。
{% endhint %}

#### **手動トランザクション終了フィールド**

自動トランザクション終了検出オプションを無効にすると、手動トランザクション終了フィールドが開かれます。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-3c7664142a5de5114b8420da9329ec10d7a960a6%2Fappex-1684826792.png?alt=media" alt="Transaction end"><figcaption></figcaption></figure>

以下の表は手動トランザクション終了フィールドとその定義方法を示しています。

| 手動トランザクション終了フィールド    | 説明                                                                                                                                                                                                                           |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 終了イベント名              | 100文字以内で、標準的な安全な文字の組み合わせを使用して、開始要素に名前を付けてください。                                                                                                                                                                               |
| 終了イベントタイプ            | <p>トランザクションの終了のために、次のオプションのいずれかを選択してください:</p><ul><li>要素が表示される</li><li>要素が消える</li><li>要素のCSSクラスが追加される</li><li>要素のCSSクラスが削除される</li></ul>                                                                                       |
| 終了要素のCSSセレクタ         | <p>トランザクションを終了させるために使用されるページ要素のCSSセレクタを貼り付けてください。</p><p><a href="https://docs.nexthink.com/platform/ja/transactions.md#transactions-settingcssselectorsfortransactionsselectors">CSSセレクタ</a> セクションを参照してください。</p>             |
| 終了要素のテキストパターン（オプション） | <p>CSSセレクタに加えて、テキストパターンを使用して終了要素を絞り込むことができます。</p><p>いくつかのアプリケーションではテキストが複数言語で存在する可能性がありますのでご注意ください。</p><p>詳細については、こちらのページの <a href="#transactions-editinganexistingtransaction">CSS セレクターテキストパターンの定義</a> セクションを参照してください。</p> |
| すべてのマッチング要素を選択       | このフィールドは廃止予定のため、チェックボックスを選択しないでください。NexthinkのWebインターフェースから削除されます。                                                                                                                                                            |
| 新しい要素のみをチェック         | <p>トランザクション開始後に既存の要素識別子で生成された新しい要素のためにこのオプションを選択してください。</p><p>既に存在する要素は無視され、トランザクション終了がキャプチャされます。</p>                                                                                                                        |

### CSSセレクタテキストパターンを定義する <a href="#transactions-definingthecssselectortextpattern" id="transactions-definingthecssselectortextpattern"></a>

**開始/終了要素テキストパターン**フィールドは、指定されたCSSセレクタが複数の要素に一致する場合に選択肢をさらに絞ります。 これは、同じ構造を共有するが、表示されるテキストによって異なるボタンやラベルをターゲットにする場合に特に便利です。

#### 例: 「新しい見積もり」ボタンを選択する

正しい使用方法を示すために基本的な例を見てみましょう。

* ユーザーが**新しい見積もり**ボタンをクリックすると、トランザクションが開始されるように設定することが目標です。
* ブラウザのインスペクトツール（またはトランザクション設定ツール）を使用して、要素のCSSセレクタを見つけてください。 この例では、セレクタが\*\*#button\*\*であるとします。
* このセレクタがページ上で一意であるか確認すると、複数のボタンと一致することがわかり、セレクタだけでは正確な要素を識別するのに十分ではありません。
* 一致を絞り込むために、**開始要素テキストパターン**フィールドを使用し、この場合は**新しい見積もり**と入力します。

これにより、システムは同じCSSセレクタを共有する他の要素の中から、可視ラベル**新しい見積もり**を持つ特定のボタンを特定することが保証されます。

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

#### 重要な注意点

* テキストパターンは要素の**可視テキストコンテンツ**を指します。
* **CSSセレクタと共に**使用され、代替にはなりません。
* この機能は、構造を共有するが、ラベルが一意の要素を区別するのに役立ちます。

{% hint style="info" %}
この例で使用されているセレクタはあくまで例です。 実際のセレクタは、設定されるアプリケーションによって異なる場合があります。
{% endhint %}

### 既存のトランザクションを編集する <a href="#transactions-editinganexistingtransaction" id="transactions-editinganexistingtransaction"></a>

作成したトランザクションは、アプリケーションの設定ページの**トランザクション**タブにリストされます:

1. 既存のトランザクションの上にカーソルを合わせてアクションメニューを表示します。
2. **トランザクションを編集**オプションをクリックして編集ウィンドウを開きます。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-8d5d63e5c31f353d5e605e29073d327226d8259f%2Ftransactions-1703773348-1.png?alt=media" alt="Transactions-1703773348 (1).png" width="760"><figcaption></figcaption></figure>

3. トランザクションフィールドを編集します。 [トランザクションの開始の定義](https://docs.nexthink.com/platform/ja/transactions.md#transactions-definingthetransactionstarttransstart)および[トランザクションの終了の定義](https://docs.nexthink.com/platform/ja/transactions.md#transactions-definingthetransactionendtransend)を参照してください。
4. 変更を保存するために**完了**をクリックします。

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

***

## トランザクションをインポートおよびエクスポートする <a href="#transactions-importingandexportingatransactionimportexport" id="transactions-importingandexportingatransactionimportexport"></a>

アプリケーションの設定ページの**トランザクション**タブで:

* 既存のトランザクションの上にカーソルを合わせてアクションメニューを表示します。
  * **トランザクションをエクスポート**オプションをクリックして、JSONファイル形式でトランザクションをエクスポートします。
  * ファイルはブラウザのダウンロードフォルダに表示されます。
* トランザクションをインポートするには、**トランザクションをインポート**ボタンをクリックして、JSON形式のトランザクションファイルをインポートします。

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

***

## トランザクション用のCSSセレクタを設定する <a href="#transactions-settingcssselectorsfortransactionsselectors" id="transactions-settingcssselectorsfortransactionsselectors"></a>

CSSセレクタは、ウェブページ上の特定の要素を識別します。 トランザクションをセットアップする際には、適切なセレクタを使用することが重要です。

以下の特別な注意事項に留意してください:

* アプリケーションが更新またはアップグレードされたときに、セレクタが変わることがあります。
* ページがリロードされるときに、セレクタが変わることがあります。
* 1つのセレクタがページの複数の要素を参照する場合があります。

これらの問題を回避するために、各トランザクションの開始および終了イベントについて次のポイントを分析します:

* アプリケーションが複数言語で利用可能な場合、テキストを含むセレクタは避けてください。
* ランダムに生成された文字列を含むセレクタは避けてください。
* ページをリロードして、ページのリロード後にセレクタが機能していることを確認してください。
* ページが他の構成にある際に、他の要素が選択される可能性を排除するために、すべてのページ要素を探索してください。
  * 例えば、コンボボックスを展開したり隠されたメニューを公開すること。
* アプリケーションが更新またはアップグレードされたときにセレクタが機能するかを確認してください。

{% hint style="info" %}
システムメンテナンス後にNexthinkがトランザクションを収集できない場合、セレクタの調整が必要であることを示している可能性があります。
{% endhint %}

CSSセレクタを見つけるには、次のオプションを使用できます:

* [Nexthinkブラウザ拡張機能](https://docs.nexthink.com/platform/ja/transactions.md#transactions-usingthenexthinkbrowserextensionbrowser)（推奨）
* [ブラウザの開発者ツール](https://docs.nexthink.com/platform/ja/transactions.md#transactions-usingthechromedevelopertoolsdevtools)
* Nexthink Toolbox

### Nexthink ブラウザエクステンションを使用してトランザクション CSS セレクターを識別およびテスト <a href="#transactions-usingthenexthinkbrowserextensionbrowser" id="transactions-usingthenexthinkbrowserextensionbrowser"></a>

{% hint style="info" %}
[ネックスシンクのブラウザ拡張機能をインストールする](https://docs.nexthink.com/platform/ja/configuring_nexthink/bringing-data-into-your-nexthink-instance/deploying-nexthink-in-non-vdi-environment/installing-the-nexthink-browser-extension) のドキュメントを参照してください。
{% endhint %}

Nexthinkブラウザ拡張機能は、監視されたWebアプリケーションまたはドメインの個々のトランザクションを検出することを可能にします。 拡張機能により、トランザクションの設定プロセスが大幅に簡素化され、次のことが可能になります:

* 関心のある要素のCSSセレクタを決定する。
* トランザクション設定をテストし、CSSセレクタが機能していることを確認する。
* トランザクションをJSONファイルとしてエクスポートし、それをNexthinkにインポートする。

Nexthink拡張機能のインストールおよび起動後:

1. ブラウザのツールバーで拡張機能を見つけてクリックします。
2. Nexthink拡張ウィンドウを開くために、**Powered by Nexthink**を速い間隔で5回クリックします。
3. Nexthink拡張ウィンドウで**トランザクションを設定する**ボタンをクリックします。

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

4. **自動検出要素**モードを使用し、追跡したい要素をクリックして追跡できます。
   * Webアプリケーション上でやり取りするすべての要素がポップアップに表示されます。
   * 要素の自動検出は、監視されているアプリケーションまたはウェブサイト内でのみ機能します。

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

5. ページ要素を自動選択した後、Nexthinkブラウザ拡張機能から直接トランザクションを**設定**できます。

{% hint style="warning" %}
拡張機能の設定機能は自動検出でのみ使用できます。
{% endhint %}

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

6. トランザクション設定がユーザーインタラクションを適切にキャプチャしているか確認するには、**テスト**ボタンをクリックします。 必要に応じて、**テストを再開**できます。
7. JSONファイルをダウンロードするために、**エクスポート**ボタンをクリックし、Nexthinkにトランザクションとして[インポート](https://docs.nexthink.com/platform/ja/transactions.md#transactions-importingandexportingatransactionimportexport)します。

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

#### **Nexthinkブラウザ拡張機能を使用して要素を手動で選択する**

Nexthinkブラウザ拡張機能は、特定の終了要素を正確に定義するために、より高度な構成シナリオを必要とする手動要素検出も提供します。

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

これらのケースをカバーするために:

1. **要素を選択**ボタンをクリックして、特定の要素を選択するモードに入ります。
2. アプリケーションページ上で目的の要素を手動でクリックまたは操作します。
3. エレメントの**セレクター**をコピーし、Nexthinkのウェブインターフェイスでエンドエレメントを構成するために使用します。

{% hint style="warning" %}
手動でのエレメントの選択は、監視しているアプリケーション/ウェブサイト内でのみ機能します。
{% endhint %}

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

### CSSセレクターを特定するためのNexthink Toolbox拡張機能の使用 <a href="#transactions-usingthenexthinktoolboxextensiontoolbox" id="transactions-usingthenexthinktoolboxextensiontoolbox"></a>

{% hint style="warning" %}
Nexthinkは、[Nexthinkブラウザエクステンション](#transactions-usingthenexthinkbrowserextensionbrowser)を使用してページ要素を識別することを推奨しています。\
Nexthink Toolboxのサポートは終了しており、今後廃止される予定です。
{% endhint %}

Nexthink提供の追加のToolbox拡張機能を使用して、[chrome.google.com](https://chromewebstore.google.com/detail/nexthink-toolbox/clndcckcfbeokfnejgamfbeginbmbkgk)ウェブサイト経由で、ウェブページのUIエレメントのCSSセレクターを特定できます。

Nexthink Toolboxをインストールして起動した後:

1. セレクターを見つけたいページに移動し、拡張機能をクリックします。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-33c8d335fc451c937cebebdd978211ee59853bd8%2Fimage-20210423-181942.png?alt=media" alt="CSS selector picker" width="442"><figcaption></figcaption></figure>

2. **ピックして要素を選ぶ**ボタンをクリックして検査モードを開始します。
3. ウェブページの関心があるエリアをクリックし、薄黄色で強調表示されたCSSセレクターを自動的に収集します。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-2f34c907b00df2e7d50338843432205b7e78d64e%2Fimage-20210423-181215.png?alt=media" alt="Element CSS selector" width="442"><figcaption></figcaption></figure>

### Chromeデベロッパーツールを使用したCSSセレクターの特定 <a href="#transactions-usingthechromedevelopertoolsdevtools" id="transactions-usingthechromedevelopertoolsdevtools"></a>

Chromeデベロッパーツールはすべてのインストールに付属し、関連するCSSセレクターを簡単に見つけることができます。

1. 興味のあるウェブページを読み込み、Chromeデベロッパーツールを開きます。
2. ページ内のどこかを右クリックし、Chromeのポップアップから「Inspect」オプションを選択します。
3. セレクトアイコンをクリックします。

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

4. カーソルを使用して、監視したい機能をトリガーする特定の要素を選択します。
5. デベロッパーツールのサイドパネル内でハイライトされたコードの部分を右クリックします。

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

6. コンテキストメニューで、**コピー** > **セレクターをコピー**をクリックします。

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

#### **Chromeで一時的なCSSセレクターを見つける**

Chromeのデベロッパーツールを使用して、一時的な要素のCSSセレクターを見つけることもできます。

1. 興味のあるウェブページを読み込み、Chromeデベロッパーツールを開きます。
2. ページ内のどこかを右クリックし、Chromeのポップアップから「Inspect」オプションを選択します。
3. **ソース** タブに切り替えます。

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

4. ブラウザのアクションをトリガーして、インスペクトしたい状態に戻します。
5. F8キーまたはMacOSではfn+F8を押します。 ブラウザを一時停止させ、**エレメント**タブが更新されないようにし、**ソース**に戻ってF8を再度押するまで更新されません。

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

5. **一時停止されている間**、エレメントタブに戻り、通常のインスペクションツールを使用します。

### 埋め込みおよびクロスオリジンのiframeのトランザクション <a href="#transactions-transactionsfornestedandcross-originiframes" id="transactions-transactionsfornestedandcross-originiframes"></a>

多くのビジネスアプリケーションは、外部要素をウェブサイトに埋め込むためにiframeを使用します。 一部はネストされているまたはクロスオリジンと言われる特定のタイプのiframeを使用しています。

コード内で`<iframe></iframe>`タグを使ってiframeを識別できます。例：`<iframe src="https://nexthink.com"></iframe>`

* ネストされたiframeは、別のiframeを含むページを内包しているiframeです。
* クロスオリジンのiframeは、ウェブサイトのドメイン外のコンテンツを含んでいます。

ネストおよびクロスオリジンiframeを利用するアプリケーションのトランザクションを、トランザクションを設定する現行プロセスで構成します。

## CSSセレクターの使用例 <a href="#transactions-configurationtips" id="transactions-configurationtips"></a>

これらの2つのシナリオは、さまざまな状況におけるCSSセレクターの定義方法を表しています。

<details>

<summary>シナリオ1: ユーザーの設定によって変わるメニューバー内のボタン。</summary>

メニューバー内のボタンは、すべてのユーザーに同様に配置されるわけではなく、その位置は特定のユーザーの権利または設定に依存する可能性があります。

解決策: HTMLエレメントの属性の1つを使用します。たとえば、`link`。 属性内の`"`には`\`を使用します。

CSSセレクターの例: `a[href=\"/lightning/o/Account/home\"]`

</details>

<details>

<summary>シナリオ2: 多数のエレメントに適用するジェネリックセレクター。</summary>

多くのエレメントに使用されるジェネリックセレクターは、`nth child`で記述されます。

解決策: セレクターから`nth child`を削除します。

`#js-work-quickfilters > dd:nth-child(4) > a` から `#js-work-quickfilters > dd > a` へ

RELATED TASKS

</details>

***

関連タスク

* [key-pages](https://docs.nexthink.com/platform/ja/user-guide/applications/configuring-applications/configuring-web-applications/key-pages "mention")
* [application-licenses](https://docs.nexthink.com/platform/ja/user-guide/applications/configuring-applications/configuring-web-applications/application-licenses "mention")
* [thresholds](https://docs.nexthink.com/platform/ja/user-guide/applications/configuring-applications/configuring-web-applications/thresholds "mention")