> For the complete documentation index, see [llms.txt](https://docs.nexthink.com/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/defining-walkthrough-step.md).

# ウォークスルーステップの定義

## ウォークスルーのステップを定義する

Nexthink Applications でウォークスルータイプのガイドを作成し、Adopt Editor でそのガイドにアクセスした後:

{% stepper %}
{% step %}

### **新しいステップ**を作成する

ドロップダウンメニューから **Step** を選択するか、キーボードショートカット **Shift + A** を使用します。これによりエレメントピッカーが起動し、このステップに関連付けるページ上の要素を選択できます。 詳細については、Adopt Editor の「Using Element Selector」を参照してください。

ページ上にカーソルを移動し、クリックするかキーボードショートカット **Shift + S** を使用して要素を選択します。 これにより、選択した要素に割り当てられたステップが作成されます。

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-6f3de1365a5cd4e7b199e5515a8a6a6e101de974%2Fstep_creation.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Shift + S** ショートカットは、カーソルで要素を選択できない場合に便利です。 例えば、クリックすると表示されなくなるポップアップメニュー内の要素を選択する場合です。
{% endhint %}
{% endstep %}

{% step %}

### ステップの**プロパティ**を設定する

ステップの**プロパティ**を開き、**コンテンツ**、**外観**、**位置**、**表示**の各タブにアクセスします。これらのタブを使用して次の操作を行います:

* テキストと**コンテンツ**をウォークスルーステップに追加する
* ウォークスルーステップの**外観**を定義する
* ウォークスルーステップの**位置**オプションを定義する
* ウォークスルーステップの**トリガー**オプションを定義する

各タブの詳細については、このページに含まれる以下のセクションを参照してください。

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-782b39276977b292bd3eff149dfb7c9eb3dba5cc%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### ウォークスルーステップへのテキストとコンテンツの追加

Adopt Editor の左側パネルからステップの**プロパティ**にアクセスし、**コンテンツ**タブを開いて、ガイドを使用する従業員に視覚的または聴覚的に表示されるコンテンツを追加します。

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fy4CEPupwwbeHQrflu1qI%2Fimage.png?alt=media&#x26;token=48c2507c-ee3d-46f1-bc60-e22fa7cf170c" alt=""><figcaption></figcaption></figure>

#### ステップコンテンツ

* **ツールチップコンテンツ**エディターを使用してテキストを書き、形式を整えます。
* 必要に応じて、URL またはアセットライブラリから画像を追加します。
* オプションとして関連ページ、画像、音声、ビデオへのリンクを追加します。

#### ステップサウンド

ガイドステップに音を追加します。

***

### ウォークスルーステップの見た目の定義

Adopt Editor の左側パネルからガイドステップの**プロパティ**にアクセスし、**外観**タブを開きます:

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2F54vV3UEIn6o5y5GjMNfF%2FWalkthrough_step_appearance_050120261445.jpg?alt=media&#x26;token=b5c44a6a-1785-4283-916c-84c20963de1e" alt=""><figcaption></figcaption></figure>

<details>

<summary>ボタンとアクション</summary>

事前定義された追加ボタンを有効または無効にして、ステップに表示されるボタンを決定できます。

* **次へ**と**前へ**ボタンを有効にして、ステップで直接ナビゲートできるようにします。
* 追加ボタンを有効にします。これらは**アクションボタン**の設定に使用できます。
* **閉じるクロスボタン**を有効にして、ユーザーがステップを完了せずに終了できるようにします。

</details>

<details>

<summary>ステップの見た目</summary>

* **ステップラベル**を有効にした後、ステップの下部にある**ステップカウンター**のステップ番号の前に表示されるテキストを指定します。 **ステップカウンター**を有効にする必要があります ([操作とインジケーターを参照](#controls-and-indicators))。
* **閉じるラベル**を有効にし、閉じるボタンのテキストを指定します。 最初に閉じるアクションボタンを有効にする必要があります ([操作とインジケーターを参照](#controls-and-indicators))。

</details>

<details>

<summary>ステップのインタラクション</summary>

* ステップが表示されている間、ページ要素との**インタラクションを防ぐ**ことができます。 このオプションは、ステップの周囲またはページ全体の要素に適用されます。
* ステップが表示されている間、ページをスクロールできないようにすることもできます。

</details>

<details>

<summary>影</summary>

このオプションは、ステップ完了に必要な要素を除くページを暗くするか、ぼかしを入れることができます。

* 影の**種類**を選択します:
  * オフ (影をオフにする)
  * 透明
  * ぼやけた背景。
* **影**オプションを有効にすると、瞬時の視覚効果の代わりに漸進的な遷移**アニメーション**を適用できます。

</details>

<details>

<summary>枠線</summary>

* ステップにリンクされたUI要素に**単一**または**グラデーション**の枠線を追加します。 枠線を削除するには**オフ**を選択します。
* **枠線**オプションを有効にすると、瞬時の視覚効果の代わりに漸進的な遷移**アニメーション**を適用できます。

</details>

<details>

<summary>コントロールとインジケーター</summary>

ステップを進めるためのアクションボタンを表示します。

* ユーザーがステップを閉じることができるように**閉じるアクションボタン**を表示します。
* ユーザーが完了したステップの数を表示する**ステップカウンター**を表示します。
* ウォークスルーの**全ステップ数**を示すカウンターを表示します。
* ステップを独自のiframe内に配置するステップカプセル化を有効にします。 レンダリング中に全体のページ構造に干渉するのを防ぎます。
* ツールチップを関連するインターフェース要素に視覚的に接続するツールチップポインタである**矢印**を表示

</details>

<details>

<summary>ステップオーバーレイ</summary>

ステップの全体的な表示方法とページ上でのレンダリング方法を定義します。

* 標準のステップ外観である**ツールチップ**は、割り当てられた要素に対して相対的に表示されるボックスです。
* **スマートページ**は、ビデオコンテンツや大きな画像に推奨される画面中央の大きなボックスです。
* **通知** はページの下部にある通知に似た幅広いボックスです。
* **非表示**にすると、ユーザーからステップが削除されます。 これは、正しいページに誘導されるステップ間の遷移に推奨されます。 詳細については、ウォークスルーの位置オプションの定義を参照してください。
* ページの左側を上下に占める**サイドバー** このオプションは`.pdf`ファイルや大量のコンテンツに推奨されます。

</details>

<details>

<summary>アニメーション</summary>

* **ステップ**: ステップの出現または消去時に**フェード**、**ズーム**またはアニメーションなしを追加します。
* **要素**: ユーザーがステップに到達または完了したときに、割り当てられた要素に**フェード**、**ズーム**またはアニメーションなしを追加します。
* 上記のオプションのいずれかにズームアニメーションを有効にした場合、**ズーム強度**を定義します。

</details>

***

### ウォークスルーステップの位置オプションを定義する

Adopt Editor の左側パネルからステップの**プロパティ**にアクセスし、**位置**タブを開きます:

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-6306b83c7f7dc583415eee12ed8ba79a24893df3%2FPosition%20tab.png?alt=media" alt=""><figcaption></figcaption></figure>

#### **ステップ位置**

<details>

<summary><strong>選択されたステップ</strong> — 要素セレクターと不安定性 <strong>自動修正</strong></summary>

アプリケーションのWebページ上でステップに関連する要素を**プレビュー**します。 必要に応じて、要素を**再選択**するか、不安定なセレクターを**自動修正**します。

Adopt Editor は、ステップのセレクターの30％以上が不安定（動的に生成された識別子に依存している）で、少なくとも1つのセレクターがターゲット要素を正しく識別している場合に、**セレクターの自動修正**ボタンを有効にします。 システムは機能しているセレクターを使用して、不安定なセレクターを再生成し、セレクターの不安定性を軽減します。

<figure><img src="/files/dJ4Qc8oJO5wI0TpGaHyM" alt=""><figcaption></figcaption></figure>

要素が削除されている場合、または複数の動作するセレクターが異なる要素を識別し、セレクターの**自動修正**を実行できない場合を除き、**自動修正**機能では要素を**再選択**したりステップを再記録する必要はありません。 これらの場合は、手動で要素を**再選択**してください。

{% hint style="warning" %}
**自動修正**は単一のステップで動作し、ガイド全体のセレクターを修正するものではありません。
{% endhint %}

**不安定なセレクターを含むガイドの通知を受け取る**

デプロイされたガイド内の不安定なステップを能動的に識別するには、Nexthink Library から **Adopt Unstable Selectors** の事前定義モニターをインストールして使用します。 モニターは、ステップに不安定なセレクターが含まれている場合にアラートを生成します。

ライブラリコンテンツのセットアップについては、[Nexthink Library](/platform/ja/user-guide/nexthink-library.md#nexthinklibrary-accessingnexthinklibrary) を参照してください。

<figure><img src="/files/x2qmu4ADuLmFXjjkRG2a" alt=""><figcaption></figcaption></figure>

モニターが不安定なセレクターを含むガイドについて通知した場合:

* Nexthink でガイドの公開を中止します。
* Adopt Editor でガイドを開き、システムによりフラグ付けされたステップを確認します（下のスクリーンショットを参照）。
* 影響を受けたステップの**位置**タブで、**セレクターの自動修正**オプションを確認します。

<figure><img src="/files/4u0xHA2K978gmsBEr1Ca" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>キーのページ</summary>

* **ナビゲーション**を使用して、ステップに到達したときにユーザーを特定のページに誘導できます。 動的なアドレスを持つページをガイド目的でより安定させる**位置URLパターン**
* **キーページをターゲットにする**は、**一致を表示**を選択することやリストからキーページを選択することを許可します。また、**検索**バーを使用して、名前で結果をフィルタリングすることもできます。
  * 事前定義されたキーページは、動的URLとまだ認識可能なNexthink Infinityのステップを関連付けることができます。例: `https://impl.workday.com/*/d/home.htmld`
  * 一致するキーページがない場合は、キーページのドキュメントを参照してください。
  * **キーページ選択を無視し**、**ナビゲーション**の下で静的URLを定義します。

</details>

<details>

<summary>要素の位置</summary>

必要に応じて、Nexthink Infinity Adoption 設定でデフォルト構成されている**要素セレクター**を有効または無効にし、このステップ専用にします。

* **Element XPath** セレクターの上書きは、特定のテキストブロックを対象としているため、別の言語にローカライズできます。

{% hint style="warning" %}
ifのあるアプリケーション内でAdopt Editorを使用する場合、**一致の表示**オプションは、対象要素が存在するiframeの一致するキーページを表示できません。

これらのケースでは、一致するキーページを表示するには、ターゲットの要素を**再選択**します。
{% endhint %}

</details>

<details>

<summary>ユーザーがスクロールする際の位置再計算を有効にする</summary>

複数のスクロールバーを持つコンテナがメインページ以外にある場合、**ユーザーがスクロールする際の位置再計算を有効にします。** 一般的に、Adoptはステップに関連する要素に到達するため、メインページをスクロールしようとします。 このオプションを有効にし、そのコンテナに制限するために `element ID` を指定します。

</details>

<details>

<summary>ガイドデフォルト</summary>

Nexthink Adoption 設定にある**ガイドのデフォルト**を有効または無効にし、このステップ専用にします:

* ステップが表示される際にURLアドレスに自動的に移動するようにするには、この設定を有効にします。
  * この設定は、ウォークスルーの最初のステップでは有効にできません。
* **記録されたクエリパラメータを無視する:** URLにクエリが含まれている。たとえば、`http://google.com/?query`のように特定のURLに移動する場合、この設定を有効にしてクエリ以降、`/?` より後を無視し、ベースURLのみを使用します。
* **要素が覆われていないときにステップを表示:** Adoptは通常、関連する要素がモーダルウィンドウやダイアログでオーバーラップされている場合でもステップを表示します。 この設定を有効にして、要素が他の要素で覆われていない場合にのみステップが表示されることを確認します。
* **要素の表示にスクロールする:** この設定を有効にして、関連する要素が表示されるまで自動的にページをスクロールします。
  * **スクロール時に要素をセンター:** Adoptは、大抵、ページスペーシングを尊重するように要素へスクロールしようとします。 この設定を有効にして、ページに対する相対的に中央に配置することを試みます。
* **要素の表示用にスクロールするためのカスタムオフセットを設定:** 特定のWebページの性質がスクロール計算のエラーを引き起こします。 この設定を有効にして、追加の距離をピクセル単位で追加してスクロールに加えます。 このオフセットは、指定されたステップ中にAdoptがスクロールしている方向に追加されます。
* 選択した要素の位置に基づき、ステップ描画の方向を決定する**方向**を選択します。
  * **自動**がデフォルト設定です。 要素がページの上部にある場合、ステップは下から描画され、それ以外の場合は上から描画されます。
  * 描画する方向を指定するには **上**, **右**, **下** または **左** を選択します。

{% hint style="info" %}
**方向**, **カスタム領域**および **z-index** オプションを使用して、選択された要素に対するステップ位置を定義します。
{% endhint %}

</details>

{% hint style="info" %}
システムがスペースの制約により希望する位置に表示できない場合、Adopt は時計回りの方向で最適な位置に配置します。
{% endhint %}

#### **カスタム領域**

**カスタム領域**を定義することにより、関連するステップが表示されたときに要素のハイライトされた領域が拡大または縮小されます。

* **コンテンツにトリミングする**アダプトの試みは、要素全体ではなく、たとえばテキストラベルなどの要素の関連コンテンツのみを含む領域を定義することです。
  * ページのフォーマットが不適切な場合、この設定は機能しない可能性があります。
* ニーズに合わせてカスタム領域の形状を作るために、方向ごとの**パディング**をピクセル単位で定義します。

#### **Z-index**

Nexthink拡張がステップを描画する際のz-indexの起点を決定するために**Z-indexソース**を選択します。

* **テーマ**は、Nexthinkのデフォルトz-index値である`73999`を使用します。
* **要素**は、ページフォーマットで決定された関連要素のz-index値を使用します。
* **マニュアル**を使用して**影**と**ステップ**のz-index値を定義します。 正しく表示されるためには、影に対して少なくとも`1`増のステップが必要です。

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-5232671768184c8367347136bdce83e5399c6b4f%2Fz-index.png?alt=media" alt=""><figcaption></figcaption></figure>

***

### ウォークスルーステップのトリガーオプションを定義する

Adopt Editor の左側パネルからステップの**プロパティ**にアクセスし、**トリガー**タブを開きます:

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-b438546d4da38abdc03f8ca5ccc8ca6f39e1ab17%2Ftriggers.png?alt=media" alt=""><figcaption></figcaption></figure>

#### **ステップが開始される条件を定義する**

* **スポット/アンスポット**トリガーは、ページに表示されている要素で機能し、**プレゼント/アンプレゼント**は、ページには表示されていないが存在する要素に関連します。たとえば、CSSで`hidden`に設定されています。
* **ビューポートでのスポット**は、要素が従業員の画面に表示されたときにステップを開始します。
* **選択値の入力および移動**は、検索バーに単語を入力するなど、ページ上の入力フィールドとのインタラクションのためにステップをトリガーします。
* **要素がフォーカスを失う**と、フォーカスされたページ要素から離れたときにステップがトリガーされます。 たとえば、検索バーでの入力を無効にするためにクリックします。
* 前のステップが完了した後にステップが表示されるように、タイマーを秒単位で設定します。
* ステップの表示をトリガーとして受け取るためにカスタム外部コマンドを定義します。
* 他のガイドのリストを定義し、これらのガイドが完了したときにのみステップが表示されるように。

{% hint style="info" %}
前のステップの設定の**トリガー**タブでカスタム外部コマンドを作成する必要があります。
{% endhint %}

#### **ステップが完了する時の条件を定義する**

* ユーザーが**次へ**ボタンを**押す**。
  * オプションで、**次へ**または**完了**ラベルを追加します。
* ユーザーが**前へ**ボタンを**押す**。
  * オプションで、**前へ**ラベルを追加します。
* **Spot/Unspot** トリガーはページ上で見える要素に対して機能し、 **Present/Unpresent** は存在するがページに表示されない要素を指します。たとえば、CSSで`非表示`と設定されている場合があります。
* **ビューポートでのスポット** は、要素が従業員の画面に表示されているときに、そのステップをトリガーします。
* **選択値を入力して進める** と、ページ上の入力フィールドとの相互作用、例えば検索バーに単語を入力する、またはドロップダウンからオプションを選ぶ際にそのステップをトリガーします。
* **要素がフォーカスを失ったとき** は、フォーカスされたページ要素から離れたときにステップをトリガーします。 たとえば、検索バーからタイピングを停止させるためにクリックして離れてください。
* ステップを終了するために、Adopt に時間を`秒`単位で設定します。
* ステップの完了をトリガーとして受け取るカスタム外部コマンドを定義します。
* ステップが完了したときにカスタム外部コマンドを送信するかどうかを定義し、そのコマンドを作成します。
* ステップが完了後に持続するかどうかを定義します。
  * **URLアドレスの変更時** は、ガイドが別のページに移動した後もステップを持続します。
  * **ページのリロード時** は、ユーザーがページを更新した後もステップを持続します。
  * **履歴を遡るとき** は、ユーザーが以前のページに戻った後もステップを持続します。
  * **どのオプションでも** 、上記の条件を満たしたときにステップを持続させます。


---

# 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/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/defining-walkthrough-step.md?ask=<question>&goal=<endgoal>
```

`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.