|
#### CSSセレクターテキストパターンを定義する
提供されたCSSセレクターが複数の要素に一致する場合、**開始/終了要素テキストパターン**フィールドで要素の選択をさらに絞り込むことができます。 これは、同じ構造を共有しながら表示テキストが異なるボタンやラベルを対象にする場合に特に便利です。
**例：「新しい見積もり」ボタンを選択する**
正しい使用方法を示すために、基本的な例を確認しましょう。
* 目的は、ユーザーが**新しい見積もり**ボタンをクリックしたときに開始するトランザクションを設定することです。
* ブラウザーの検証ツール（またはトランザクション設定ツール）を使用して、要素のCSSセレクターを見つけます。 この例では、セレクターが\*\*#button\*\*であるとします。
* このセレクターがページ上で一意であるかを確認すると、複数のボタンに一致することがわかります。したがって、セレクターだけでは正確な要素を識別するには不十分です。
* 一致を絞り込むには、**開始要素テキストパターン**フィールドを使用します。この場合は、**新しい見積もり**と入力します。
これにより、同じCSSセレクターを共有する他の要素の中から、表示ラベルが**新しい見積もり**である特定のボタンをシステムが識別できます。
**重要な注意事項**
* テキストパターンは、要素の**表示テキストコンテンツ**を指します。
* これは置き換えではなく、**CSSセレクターとともに**使用されます。
* この機能は、構造は共有しているもののラベルが一意である要素を区別するのに役立ちます。
{% hint style="info" %}
この例で使用されているセレクターは説明目的のみのものです。 実際のセレクターは、設定するアプリケーションによって異なります。
{% endhint %}
#### 既存のトランザクションを編集する
作成されたトランザクションは、アプリケーションの設定ページの**トランザクション**タブに一覧表示されます：
1. 既存のトランザクションにカーソルを合わせて、アクションメニューを表示します。
2. **トランザクションを編集**オプションをクリックして、トランザクションの編集ウィンドウを開きます。
3. トランザクションフィールドを編集します。 [トランザクション開始を定義する](#transactions-definingthetransactionstarttransstart)および[トランザクション終了を定義する](#transactions-definingthetransactionendtransend)を参照してください。
4. **完了**をクリックして変更を保存します。
***
### トランザクションをインポートおよびエクスポートする
アプリケーションの設定ページの**トランザクション**タブで：
* トランザクションをエクスポートするには、既存のトランザクションにカーソルを合わせてアクションメニューを表示します。
* **トランザクションをエクスポート**オプションをクリックして、トランザクションをJSONファイル形式でエクスポートします。
* ファイルはブラウザーのダウンロードフォルダーに表示されます。
* トランザクションをインポートするには、**トランザクションをインポート**ボタンをクリックして、JSON形式のトランザクションファイルをインポートします。
***
### トランザクションのCSSセレクターを設定する
CSSセレクターは、Webページ上の特定の要素を識別します。 トランザクションを設定する際には、適切なセレクターを使用することが重要です。
次の特別な考慮事項に留意してください：
* アプリケーションが更新またはアップグレードされると、セレクターが変更される場合があります。
* ページが再読み込みされると、セレクターが変更される場合があります。
* 単一のセレクターがページの複数の要素を参照する場合があります。
これらの問題を回避するには、各トランザクションの開始イベントおよび終了イベントについて、次の点を分析してください：
* アプリケーションが複数の言語で利用できる場合は、テキストを含むセレクターを避けてください。
* ランダムに生成された文字列を含むセレクターを避けてください。
* ページを再読み込みして、再読み込み後もセレクターが機能することを確認します。
* ページが別の構成になっている場合に他の要素が選択されないことを確認するために、すべてのページ要素を調査してください。
* たとえば、コンボボックスを展開したり、非表示のメニューを表示したりする場合です。
* アプリケーションが更新またはアップグレードされた場合にもセレクターが機能することを確認してください。
{% hint style="info" %}
システムメンテナンス後にNexthinkがトランザクションを収集できない場合は、セレクターの調整が必要である可能性があります。
{% endhint %}
次のオプションを使用してCSSセレクターを見つけることができます：
* [Nexthinkブラウザー拡張機能](#transactions-usingthenexthinkbrowserextensionbrowser)（推奨）
* [ブラウザーのデベロッパーツール](#transactions-usingthechromedevelopertoolsdevtools)
* Nexthinkツールボックス
#### Nexthinkブラウザー拡張機能を使用してトランザクションCSSセレクターを識別およびテストする
{% hint style="info" %}
Nexthinkブラウザー拡張機能のインストールに関するドキュメントを参照してください。
{% endhint %}
Nexthinkブラウザー拡張機能を使用すると、監視対象のWebアプリケーションまたはドメインの個々のトランザクションを検出できます。 この拡張機能では、次の操作を行えるため、トランザクションの設定プロセスが大幅に簡素化されます：
* 対象の要素のCSSセレクターを判定する。
* トランザクション設定をテストし、CSSセレクターが機能することを確認する
* トランザクションをJSONファイルとしてエクスポートし、Nexthinkにインポートする。
Nexthink拡張機能をインストールして起動した後：
1. ブラウザーのツールバーで拡張機能を見つけてクリックします。
2. **Powered by Nexthink**をすばやく連続して五回クリックし、Nexthink拡張機能ウィンドウを開きます。
3. Nexthink拡張機能ウィンドウの**トランザクションを設定**ボタンをクリックします。
4. **要素を自動検出**モードを使用し、目的の要素をクリックして追跡できます。
* Webアプリケーション上で操作したすべての要素がポップアップに表示されます。
* 要素の自動検出は、監視対象のアプリケーション/Webサイト内でのみ機能します。
5. ページ要素を自動選択した後、Nexthinkブラウザー拡張機能から直接トランザクションを**設定**できます。
{% hint style="warning" %}
拡張機能の設定機能は、自動検出でのみ使用できます。
{% endhint %}
6. **テスト**ボタンをクリックして、トランザクション設定がユーザー操作を正しく取得することを確認します。 必要に応じて、**テストを再開**できます。
7. **エクスポート**ボタンをクリックして、Nexthinkにトランザクションとして[インポート](#transactions-importingandexportingatransactionimportexport)できるJSONファイルをダウンロードします。
**Nexthinkブラウザー拡張機能を使用して要素を手動で選択する**
Nexthinkブラウザー拡張機能では、終了要素を適切に定義するためにより高い精度が必要な高度な設定シナリオ向けに、手動要素検出も提供しています。
これらのケースに対応するには：
1. **要素を選択**ボタンをクリックして、特定の要素を選択できるモードに入ります。
2. アプリケーションのページ上で、目的の要素を手動でクリックまたは操作します。
3. 要素の**セレクター**をコピーし、Nexthink Webインターフェイスで終了要素を設定するために使用します。
{% hint style="warning" %}
要素の手動選択は、監視対象のアプリケーション/Webサイト内でのみ機能します。
{% endhint %}
#### Nexthink Toolbox拡張機能を使用してCSSセレクターを識別する
{% hint style="warning" %}
ページ要素を識別するには、[Nexthinkブラウザー拡張機能を使用する](#transactions-usingthenexthinkbrowserextensionbrowser)ことをNexthinkは推奨します。\
Nexthink Toolboxはサポート対象ではなくなり、まもなく非推奨になります。
{% endhint %}
[chrome.google.com](https://chromewebstore.google.com/detail/nexthink-toolbox/clndcckcfbeokfnejgamfbeginbmbkgk) WebサイトのChrome Web Storeを通じてNexthinkが提供する追加のToolbox拡張機能を使用して、WebページのUI要素のCSSセレクターを識別できます。
Nexthinkツールボックスをインストールして起動した後：
1. セレクターを見つけるページに移動し、拡張機能をクリックします。
2. **要素を選択**ボタンをクリックして、検証モードを開始します。
3. Webページ上で薄い黄色で強調表示された対象領域をクリックすると、必要なCSSセレクターが自動的に収集されます。
#### Chromeデベロッパーツールを使用してCSSセレクターを識別する
Chromeデベロッパーツールはすべてのインストールで利用でき、関連するCSSセレクターを見つけることができます。
1. 対象のWebページを読み込み、Chromeデベロッパーツールを開きます。
2. ページ上の任意の場所を右クリックし、Chromeのポップアップから「検証」オプションを選択します。
3. 選択アイコンをクリックします。
4. カーソルを使用して、監視する機能をトリガーするWebページ上の特定の要素を選択します。
5. デベロッパーツールのサイドパネルで強調表示されたコード部分を右クリックします。
6. コンテキストメニューで、**コピー** > **セレクターをコピー**をクリックします。
**Chromeで一時的なCSSセレクターを見つける**
Chromeデベロッパーツールを使用して、一時的な要素のCSSセレクターを見つけることもできます。
1. 対象のWebページを読み込み、Chromeデベロッパーツールを開きます。
2. ページ上の任意の場所を右クリックし、Chromeのポップアップから「検証」オプションを選択します。
3. **Sources**タブに切り替えます。
4. ブラウザーで操作をトリガーして、検証したい状態にします。
5. F8、またはmacOSではfn+F8を押します。 これによりブラウザーが一時停止し、**Sources**に戻って再度F8を押すまで、**Elements**タブは更新されません。
5. **一時停止中**に、Elementsタブに戻り、標準の検証ツールを使用します。
#### ネストされたiframeおよびクロスオリジンiframeのトランザクション
多くの重要なビジネスアプリケーションでは、iframeを使用して外部要素をWebサイトに埋め込んでいます。 一部では、ネストされたiframeまたはクロスオリジンiframeと呼ばれる特定のタイプを使用しています。
コード内のiframeは、たとえば``タグで識別できます。``
* ネストされたiframeは、別のiframeを含むページを含むiframeです。
* クロスオリジンiframeには、Webサイトのドメイン外のコンテンツが含まれます。
ネストされたiframeおよびクロスオリジンiframeを使用するアプリケーションのトランザクションは、現在のトランザクション設定プロセスで設定します。
### CSSセレクターのユースケース例
これら二つのシナリオは、状況に応じてCSSセレクターを定義する方法を示しています。
シナリオ1：ユーザーの設定に応じて異なるメニューバー内のボタン。
メニューバー内のボタンは、すべてのユーザーで同じ位置に配置されるとは限らず、その位置は特定のユーザー権限または設定に依存する場合があります。
解決策：HTML要素の属性、たとえば`link`を使用します。 属性内の`"`には`\`文字を使用します。
CSSセレクターの例：`a[href=\"/lightning/o/Account/home\"]`
シナリオ2：複数要素の汎用セレクター。
複数の要素に対する汎用セレクターは、`nth child`で記述されます。
解決策：セレクターから`nth child`を削除します。
`#js-work-quickfilters > dd:nth-child(4) > a`から
`#js-work-quickfilters > dd > a`へ
***
関連タスク
*
*
*
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.nexthink.com/platform/ja/user-guide/applications/setting-up-and-managing-applications/configuring-applications/configuring-web-applications/transactions.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
