トランザクションの設定

Nexthinkは、すべてのアプリでのトランザクションの総数が1000未満である限り、1つのアプリケーションあたり無制限のトランザクションを設定することができます。

トランザクションとは、会社にビジネス価値を生むウェブアプリケーション内の社員行動またはイベントのことです。 サービスマネージャーは、特定のアクションをアプリケーションのウェブページで社員が効率的に実行できるかを細かく確認する必要があります。

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

  • 開始イベントは、クリックやキー入力などの、アクションが適用される要素へのユーザー定義のアクションです。 例:保存ボタンをクリックする。

  • 終了イベントは、ページに追加または変更された要素を指します。 例:ページにメッセージやアイコンが表示されたり、逆に要素がページから消える。

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


ウェブアプリケーションのためのトランザクション設定

設定フォームを使用してトランザクションの開始と終了を指示し、トランザクションを設定します。

いくつかのアプリケーションは、常にウェブページの一部である要素を含んでいます。 これらの要素は、CSSの変更により表示・非表示になることがあります。

  • 要素のvisible属性が変わることがあります。

  • 要素のクラス名が動的に変更されることがあります。

  • 要素は、動的に変更されうる属性またはクラスを含む他の要素によって覆われる場合があります。

新しいトランザクションの追加

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

  1. メインメニューからアプリケーション > アプリケーションを管理を選択します。

  2. 選択したアプリケーション名をクリックして、その設定にアクセスします。

  3. アプリケーションの設定ページでトランザクションタブをクリックします。

  4. トランザクションを追加ボタンをクリックして、トランザクション追加ウィンドウを開きます。

トランザクション追加ウィンドウで、トランザクション開始タブとトランザクション終了タブに記入します。

Transactions tab

トランザクション開始の定義

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

Transaction start

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

トランザクション開始フィールド
説明

トランザクション名

トランザクションに意味のある名前を入力します。

開始イベントのタイプ

ユーザーがトランザクションをトリガーする方法に応じて、オプションの中から1つを選んでください。

トリガーは、クリック、キーボードでのリターンキーを押す、ページへの移動 などがあります。

開始イベント名

開始要素の名前を100文字以内で選んでください。

名前を記述するときは標準のUTF-8文字セットを使用してください。

他のソースからテキストをコピーすると、サポートされていない特殊文字を持ち込むことがあるので注意してください。

開始要素のCSSセレクタ

トランザクションをトリガーするために使用するページ要素のCSSセレクタを貼り付けてください。

CSSセレクタのセクションを参照してください。

開始要素のテキストパターン(オプション)

CSSセレクタに加えて、テキストパターンを使って開始要素を絞り込むことができます。

一部のアプリケーションでは、テキストが複数の言語で存在する可能性があります。

詳細情報は、このページのCSSセレクタテキストパターンの定義セクションを参照してください。

すべての一致する要素を選択

このボックスにチェックを入れると、要素IDに一致するすべての要素が選択されます。

これを使用すると、ユーザーが任意のテーブル行をクリックしたときにトランザクションをトリガーするのに便利です。

トランザクション終了の定義

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

Automatic transaction end detection

以下のどちらかを選ぶことができます。:

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

  • 手動トランザクション終了フィールドを手動で入力するために自動オプションを解除します。

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

プロセストランザクション終了構成を簡素化するために、Nexthink Applicationsは自動検出を提供します。

システムはデフォルトでこの機能を有効にします。 このオプションを選ぶと、残りの設定オプションはもはや必要ないため、折りたたまれます。

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

既存のトランザクション終了を編集すると、このチェックボックスにチェックを入れて完了を押すと現在の設定が失われます。

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

自動トランザクション終了検出オプションを解除すると、手動トランザクション終了フィールドが開きます。

Transaction end

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

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

終了イベント名

スペースで区切られた標準の安全な文字の組み合わせを使用して、開始要素の名前を100文字以内で選択します。

終了イベントのタイプ

トランザクションの終了のオプションから1つを選択します:

  • 要素が表示される

  • 要素が消える

  • 要素のCSSクラスが追加される

  • 要素のCSSクラスが削除される

終了要素のCSSセレクタ

トランザクションを終了させるために使用するページ要素のCSSセレクタを貼り付けてください。

CSSセレクタのセクションを参照してください。

終了要素のテキストパターン(オプション)

CSSセレクタに加えて、テキストパターンを使って終了要素を絞り込むことができます。

一部のアプリケーションでは、テキストが複数の言語で存在する可能性があります。

詳細については、このページのCSSセレクタテキストパターンの定義セクションを参照してください。

すべての一致する要素を選択

このフィールドのチェックボックスを選択しないでください。これは非推奨であり、Nexthinkウェブインターフェースから削除される予定です。

新しい要素のみを確認

トランザクション開始後に既存の要素識別子で生成される新しい要素のために、このオプションを選択します。

システムは既存の要素を無視し、新しいものをキャプチャしてトランザクションを終了します。

CSSセレクタテキストパターンの定義

開始/終了要素のテキストパターンフィールドは、提供されたCSSセレクタが複数の要素に一致する場合、要素の選択をさらに絞り込みます。 これは、構造は同じですが、表示テキストが異なるボタンやラベルをターゲットにする場合に特に役立ちます。

例:「新しい見積もり」ボタンの選択

適切な使用法を説明するため、基本例を通じて見ていきましょう。

  • 目標は、ユーザーが新しい見積もりボタンをクリックしたときにトランザクションが開始されるように設定することです。

  • ブラウザの検査ツール(またはトランザクション設定ツール)を使用して要素のCSSセレクタを見つけます。 この例では、セレクタが #button であると仮定します。

  • このセレクタがページ上でユニークであるかを確認したところ、複数のボタンに一致することが判明し、セレクタだけでは正確な要素を特定するには不十分でした。

  • 一致を絞り込むため、 開始要素のテキストパターン フィールドを使い、今回は 新しい見積もり と入力します。

これにより、他の要素と同じCSSセレクタを共有している中から、特定の新しい見積もりラベルを持つボタンを識別することができます。

重要な注意事項

  • テキストパターンは、要素の表示テキストコンテンツを指します。

  • CSSセレクタと一緒に使用するものであり、置き換えとして使用するものではありません。

  • この機能は、構造は同じですがラベルが固有である要素を区別するのに役立ちます。

この例で使用されるセレクタは、あくまで説明用のものです。 実際のセレクターは、設定するアプリケーションによって異なります。

既存のトランザクションの編集

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

  1. 既存のトランザクションにカーソルを合わせると、アクションメニューが表示されます。

  2. トランザクション編集オプションをクリックして、トランザクション編集ウィンドウを開きます。

Transactions-1703773348 (1).png
  1. トランザクションフィールドを編集します。 トランザクション開始の定義およびトランザクション終了の定義を参照してください。

  2. 完了をクリックして変更を保存します。

Transactions-1703773255.png

トランザクションのインポートとエクスポート

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

  • トランザクションをエクスポートするには、既存のトランザクションにカーソルを合わせてアクションメニューを表示します。

    • トランザクションをエクスポートオプションをクリックして、JSONファイル形式でトランザクションをエクスポートします。

    • ファイルはブラウザのダウンロードフォルダに表示されます。

  • トランザクションをインポートするには、トランザクションをインポートボタンをクリックして、JSON形式のトランザクションファイルをインポートします。

Transactions-1703773348.png

トランザクションのCSSセレクタ設定

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

これらの特別な考慮事項を覚えておいてください:

  • アプリケーションが更新またはアップグレードされると、セレクタが変更される場合があります。

  • ページが再読み込みされるとセレクタが変更される場合があります。

  • 1つのセレクタがページの複数の要素を参照することがあります。

これらの問題に対処するため、各トランザクションの開始および終了イベントについて以下のポイントを分析してください:

  • アプリケーションが複数の言語で利用可能な場合は、テキストを含むセレクタを避けてください。

  • ランダムに生成された文字列を含むセレクタを避けてください。

  • ページをリロードして、ページのリロード後もセレクタが機能するか確認してください。

  • ページのすべての要素を探索して、別の構成時に他の要素が選択されることがないか確認してください。

    • 例えば、コンボボックスの展開や隠されたメニューの表示など。

  • アプリケーションがアップデートまたはアップグレードされたときにセレクタが依然として機能することを確認してください。

システムメンテナンス後にNexthinkがトランザクションを収集できない場合、セレクタの調整が必要である可能性があります。

次のオプションを使用してCCSセレクタを見つけることができます:

Nexthinkブラウザ拡張機能を使用してトランザクションのCSSセレクタを識別しテストする

Installing the Nexthinkブラウザ拡張機能のドキュメントを参照してください。

Nexthinkブラウザ拡張機能は、監視対象のウェブアプリケーションまたはドメインの個々のトランザクションを検出することができます。 この拡張機能は、トランザクションの設定プロセスを大幅に簡素化し、以下のことを可能にします:

  • 興味のある要素のCSSセレクタを決定します。

  • トランザクションの設定をテストして、CSSセレクタが動作しているか確認してください。

  • トランザクションをJSONファイルとしてエクスポートし、Nexthinkにインポートします。

Nexthink拡張機能をインストールして起動した後:

  1. ブラウザツールバーで拡張機能を見つけてクリックします。

  2. Nexthinkによる提供を5回連続で素早くクリックすると、Nexthink拡張機能のウィンドウが開きます。

  3. Nexthink拡張機能のウィンドウで、トランザクションの設定ボタンをクリックします。

Transactions-170368422544.png
  1. 自動検出要素モードを使用して、クリックすることで目的の要素を追跡できます。

  • ウェブアプリケーション上で対応するすべての要素がポップアップに表示されます。

  • 要素の自動検出は、監視対象のアプリケーション/ウェブサイト内でのみ機能します。

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

Transactions-1703778148.png
  1. トランザクション設定がユーザーの操作を正確にキャプチャしていることを確認するには、テストボタンをクリックしてください。 必要に応じて、テストを再開することもできます。

  2. エクスポートボタンをクリックして、JSONファイルをダウンロードし、Nexthinkでトランザクションとしてインポートします。

Transactions-1703778419.png

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

Nexthinkブラウザ拡張機能は、終了要素を適切に定義するために、より精度が必要な高度な設定シナリオに手動要素検出を提供します。

Transactions-1703841873.png

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

  1. 要素を選択ボタンをクリックして、特定の要素を選択できるモードに入ります。

  2. アプリケーションページ上の望ましい要素を手動でクリックまたは操作します。

  3. 要素のセレクタをコピーして、Nexthinkウェブインターフェンスで終了要素を設定するために使用します。

Transactions-1703842122.png

Nexthink Toolbox拡張機能を使用してCSSセレクタを識別する

Nexthinkはページ要素を識別するためにNexthinkブラウザ拡張機能の使用を推奨しています。 Nexthink Toolboxはサポートされなくなり、間もなく廃止される予定です。

NexthinkがChrome Web Storeで提供する追加のToolbox拡張機能を使用して、ウェブページのUI要素のCSSセレクタを識別できます。chrome.google.com ウェブサイトで入手可能です。

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

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

CSS selector picker
  1. 要素を選択 ボタンをクリックして検査モードを開始します。

  2. ウェブページで興味のある領域をクリックし、淡い黄色でハイライトされ、自動的に必要なCSSセレクタを収集します。

Element CSS selector

Chromeデベロッパーツールを使用してCSSセレクタを識別する

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

  1. 興味のあるウェブページを読み込み、Chromeデベロッパーツールを開きます。

  2. ページ内の任意の場所を右クリックし、Chromeのポップアップから「検証」オプションを選択します。

  3. 選択アイコンをクリックします。

Transactions-1703690988.png
  1. 監視が必要な機能をトリガーする特定のウェブページ要素をカーソルを使って選択します。

  2. 開発ツールのサイドパネル内でハイライトされたコードの部分を右クリックします。

Transactions-1703691255.png
  1. コンテキストメニューで、コピー > セレクタをコピーをクリックします。

Transactions-1703691417.png

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

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

  1. 興味のあるウェブページを読み込み、Chromeデベロッパーツールを開きます。

  2. ページ内の任意の場所を右クリックし、Chromeのポップアップから「検証」オプションを選択します。

  3. Sources タブに切り替えます。

Transactions-1703691626.png
  1. 調査したい状態にするため、ブラウザでアクションをトリガーします。

  2. F8 キーを押します。MacOSの場合は fn+F8 キーを押します。 これによりブラウザが一時停止し、Elements タブは再び Sources に戻ってF8を押すまで更新されません。

Transactions-17036955550.png
  1. 一時停止中にElementsタブに戻り、通常の検査ツールを使用します。

ネストされたおよびクロスオリジンのiframe用のトランザクション

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

例えば、コード内で<iframe></iframe>タグを使用してiframeを識別できます: <iframe src="https://nexthink.com"></iframe>

  • ネストされたiframeは、別のiframeを含むページを含んでいるiframeです。

  • クロスオリジンiframeは、ウェブサイトのドメイン外のコンテンツを持っています。

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

CSSセレクタの利用事例

これらの二つのシナリオは、異なる状況におけるCSSセレクタの定義方法を例示しています。

シナリオ1: ユーザーの好みに応じて変更されるメニューバーのボタン。

メニューバーのボタンはすべてのユーザーに対して同様には配置されておらず、その位置は特定のユーザー権限や好みに依存する可能性があります。

解決策: HTML要素の1つの属性、例えば 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


関連タスク

Last updated

Was this helpful?