トランザクションの構成

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

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

• 開始イベントはユーザーが定義するアクションで、クリックやキーを押すといった要素に対してアクションが適用されるものです。 例えば、保存ボタンをクリックすることです。

• 終了イベントは、ページに定義された要素で追加または変更されるものです。 例えば、ページ上にメッセージやアイコンが表示されるか、あるいは逆に要素がページから消えることです。

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

Webアプリケーションのトランザクションを設定する

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

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

• 要素のvisible属性が変更される可能性があります。

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

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

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

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

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

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

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

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

トランザクションの追加ウィンドウから、トランザクション開始およびトランザクション終了タブの内容を記入します。

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

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

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

取引終了の定義

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

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

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

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

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

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

この機能はシステムによってデフォルトで有効になります。 このオプションを選択すると、他の設定オプションは必要なくなるため、折りたたまれます。

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

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

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

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

CSSセレクタテキストパターンを定義する

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

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

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

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

• ブラウザのインスペクトツール（またはトランザクション設定ツール）を使用して、要素のCSSセレクタを見つけてください。 この例では、セレクタが**#button**であるとします。

• このセレクタがページ上で一意であるか確認すると、複数のボタンと一致することがわかり、セレクタだけでは正確な要素を識別するのに十分ではありません。

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

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

重要な注意点

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

• CSSセレクタと共に使用され、代替にはなりません。

• この機能は、構造を共有するが、ラベルが一意の要素を区別するのに役立ちます。

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

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

1. 既存のトランザクションの上にカーソルを合わせてアクションメニューを表示します。

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

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

2. 変更を保存するために完了をクリックします。

トランザクションをインポートおよびエクスポートする

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

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

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

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

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

トランザクション用のCSSセレクタを設定する

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

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

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

• ページがリロードされるときに、セレクタが変わることがあります。

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

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

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

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

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

• ページが他の構成にある際に、他の要素が選択される可能性を排除するために、すべてのページ要素を探索してください。

  • 例えば、コンボボックスを展開したり隠されたメニューを公開すること。

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

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

• Nexthinkブラウザ拡張機能（推奨）

• ブラウザの開発者ツール

• Nexthink Toolbox

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

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

• 関心のある要素のCSSセレクタを決定する。

• トランザクション設定をテストし、CSSセレクタが機能していることを確認する。

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

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

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

2. Nexthink拡張ウィンドウを開くために、Powered by Nexthinkを速い間隔で5回クリックします。

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

1. 自動検出要素モードを使用し、追跡したい要素をクリックして追跡できます。

• Webアプリケーション上でやり取りするすべての要素がポップアップに表示されます。

• 要素の自動検出は、監視されているアプリケーションまたはウェブサイト内でのみ機能します。

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

1. トランザクション設定がユーザーインタラクションを適切にキャプチャしているか確認するには、テストボタンをクリックします。 必要に応じて、テストを再開できます。

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

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

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

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

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

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

3. エレメントのセレクターをコピーし、Nexthinkのウェブインターフェイスでエンドエレメントを構成するために使用します。

CSSセレクターを特定するためのNexthink Toolbox拡張機能の使用

Nexthink提供の追加のToolbox拡張機能を使用して、chrome.google.comウェブサイト経由で、ウェブページのUIエレメントのCSSセレクターを特定できます。

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

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

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

2. ウェブページの関心があるエリアをクリックし、薄黄色で強調表示されたCSSセレクターを自動的に収集します。

Chromeデベロッパーツールを使用したCSSセレクターの特定

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

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

2. ページ内のどこかを右クリックし、Chromeのポップアップから「Inspect」オプションを選択します。

3. セレクトアイコンをクリックします。

1. カーソルを使用して、監視したい機能をトリガーする特定の要素を選択します。

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

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

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

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

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

2. ページ内のどこかを右クリックし、Chromeのポップアップから「Inspect」オプションを選択します。

3. ソース タブに切り替えます。

1. ブラウザのアクションをトリガーして、インスペクトしたい状態に戻します。

2. F8キーまたはMacOSではfn+F8を押します。 ブラウザを一時停止させ、エレメントタブが更新されないようにし、ソースに戻ってF8を再度押するまで更新されません。

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

埋め込みおよびクロスオリジンのiframeのトランザクション

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

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

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

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

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

CSSセレクターの使用例

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

関連タスク

• 主要なページを設定する

• アプリケーションライセンスの設定

• アプリケーションしきい値の設定