# ウォークスルーステップの定義 ### ウォークスルーステップの作成 Nexthink Applicationsで[ウォークスルータイプのガイドを作成](/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/creating-guides.md) し、[Adopt Editorでガイドにアクセスすると](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor.md#accessing-specific-guide-in-adopt-editor): 1. **新しいステップ**を作成するには、**ステップを追加**を選択するか、**+** アイコンをクリックします。 * ドロップダウンメニューから **ステップ** を選択するか、キーボードショートカット **Shift + A** を使用してください。 * これにより要素ピッカーが起動し、このステップに関連付けるページ上の要素を選択できます。 詳細については、[Adopt Editorでの要素選択の使用](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md) を参照してください。 * ページ上にカーソルを置き、クリックまたはキーボードショートカット **Shift + S** を使用して要素を選択します。 これにより、選択した要素に割り当てられるステップが作成されます。
{% hint style="info" %} カーソルで要素を選択できない場合に、**Shift + S** ショートカットは便利です。 例えば、クリックすると表示されないポップアップメニュー内で要素を選択する場合です。 {% endhint %} 2. ステップの**プロパティ**を開き、**コンテンツ**、**見た目**、**配置**、**表示**のプロパティタブにアクセスします。これらのタブを使用して次の操作を行います: * [ウォークスルーステップにテキストやコンテンツを追加する](#adding-text-and-content-to-walkthrough-step) * [ウォークスルーステップの見た目を定義する](#defining-walkthrough-step-appearance) * [ウォークスルーステップの配置オプションを定義する](#defining-walkthrough-step-positioning-options) * [ウォークスルーステップのトリガーオプションを定義する](#defining-walkthrough-step-trigger-options)
## ウォークスルーステップへのテキストとコンテンツの追加 [Adopt Editor左側パネル](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides.md#understanding-adopt-editor-for-walkthroughs)からステップの**プロパティ**にアクセスし、**コンテンツ**タブを開いて、ガイドを使用する従業員に表示および/または聞こえるコンテンツを追加します。 ### ステップコンテンツ * **ツールチップコンテンツ**エディターを使用してテキストを書き、形式を整えます。 * オプションで、[アセットライブラリ](/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/managing-adoption-assets-with-the-asset-library.md)やURLから画像を追加します。 * オプションとして関連ページ、画像、音声、ビデオへのリンクを追加します。 ### ステップサウンド ガイドステップに音を追加します。 ## ウォークスルーステップの見た目の定義 [Adopt Editor左側パネル](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides.md#understanding-adopt-editor-for-walkthroughs)からステップの**プロパティ**にアクセスし、**見た目**タブを開きます:
ボタンとアクション 事前定義された追加ボタンを有効または無効にして、ステップに表示されるボタンを決定できます。 * **次へ**と**前へ**ボタンを有効にして、ステップで直接ナビゲートできるようにします。 * [**アクションボタン**](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/defining-walkthrough-step/configuring-actions-buttons-within-a-walkthrough-step.md)を設定するために利用できる追加ボタンを有効にします。 * **閉じるクロスボタン**を有効にして、ユーザーがステップを完了せずに終了できるようにします。
ステップの見た目 * **ステップラベル**を有効にした後、ステップの下部にある**ステップカウンター**のステップ番号の前に表示されるテキストを指定します。 **ステップカウンター**を有効にする必要があります ([操作とインジケーターを参照](#controls-and-indicators))。 * **閉じるラベル**を有効にし、閉じるボタンのテキストを指定します。 最初に閉じるアクションボタンを有効にする必要があります ([操作とインジケーターを参照](#controls-and-indicators))。
ステップのインタラクション * ステップが表示されている間、ページ要素との**インタラクションを防ぐ**ことができます。 このオプションは、ステップの周囲またはページ全体の要素に適用されます。 * ステップが表示されている間、ページをスクロールできないようにすることもできます。
影 このオプションは、ステップ完了に必要な要素を除くページを暗くするか、ぼかしを入れることができます。 * 影の**種類**を選択します: * オフ (影をオフにする) * 透明 * ぼやけた背景。 * **影**オプションを有効にすると、瞬時の視覚効果の代わりに漸進的な遷移**アニメーション**を適用できます。
枠線 * ステップにリンクされたUI要素に**単一**または**グラデーション**の枠線を追加します。 枠線を削除するには**オフ**を選択します。 * **枠線**オプションを有効にすると、瞬時の視覚効果の代わりに漸進的な遷移**アニメーション**を適用できます。
コントロールとインジケーター ステップを進めるためのアクションボタンを表示します。 * ユーザーがステップを閉じることができるように**閉じるアクションボタン**を表示します。 * ユーザーが完了したステップの数を表示する**ステップカウンター**を表示します。 * ウォークスルーの**全ステップ数**を示すカウンターを表示します。 * ステップを独自のiframe内に配置するステップカプセル化を有効にします。 レンダリング中に全体のページ構造に干渉するのを防ぎます。 * ツールチップを関連するインターフェース要素に視覚的に接続するツールチップポインタである**矢印**を表示
ステップオーバーレイ ステップの全体的な表示方法とページ上でのレンダリング方法を定義します。 * 標準のステップ外観である**ツールチップ**は、割り当てられた要素に対して相対的に表示されるボックスです。 * **スマートページ**は、ビデオコンテンツや大きな画像に推奨される画面中央の大きなボックスです。 * **通知** はページの下部にある通知に似た幅広いボックスです。 * **非表示**にすると、ユーザーからステップが削除されます。 これは、正しいページに誘導されるステップ間の遷移に推奨されます。 詳細については、[ウォークスルーの配置オプションの定義](broken://pages/52rkAgYRF6FJJnz3Fj1O)を参照してください。 * ページの左側を上下に占める**サイドバー** このオプションは`.pdf`ファイルや大量のコンテンツに推奨されます。
アニメーション * **ステップ**: ステップの出現または消去時に**フェード**、**ズーム**またはアニメーションなしを追加します。 * **要素**: ユーザーがステップに到達または完了したときに、割り当てられた要素に**フェード**、**ズーム**またはアニメーションなしを追加します。 * 上記のオプションのいずれかにズームアニメーションを有効にした場合、**ズーム強度**を定義します。
## ウォークスルーステップの位置オプションを定義する [Adopt Editor左側パネル](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides.md#understanding-adopt-editor-for-walkthroughs)からステップの**プロパティ**にアクセスし、**位置**タブを開きます:
### **ステップ位置**
選択されたステップ アプリケーションのWebページ上でステップに関連する要素を**プレビュー**します。 必要に応じて、要素を**再選択**します。 [Adopt Editorでの要素選択の使用](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md)のドキュメントを参照してください。 * システムが幅の制約のため希望する位置に表示できない場合、Adoptは時計回りに最適な位置に配置します。
キーのページ * **ナビゲーション**を使用して、ステップに到達したときにユーザーを特定のページに誘導できます。 動的なアドレスを持つページをガイド目的でより安定させる**位置URLパターン** * **キーページをターゲットにする**は、**一致を表示**を選択することやリストからキーページを選択することを許可します。また、**検索**バーを使用して、名前で結果をフィルタリングすることもできます。 * 事前定義されたキーページは、動的URLとまだ認識可能なNexthink Infinityのステップを関連付けることができます。例: `https://impl.workday.com/*/d/home.htmld` * 一致するキーページがない場合、[キーページ](/platform/ja/user-guide/applications/configuring-applications/configuring-web-applications/key-pages.md)のドキュメントを参照して詳細を確認してください。 * **キーページ選択を無視し**、**ナビゲーション**の下で静的URLを定義します。
要素の位置 必須に応じて**要素選択**を、有効または無効に（普通はNexthink Infinityアドプション設定で設定済み）して、このステップに特化させます。 * **要素XPath**セレクターの上書きは、特定のテキストブロックをターゲットにしている場合、異なる言語に[ローカライズ](/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/creating-guides.md#localizing-content)できます。 {% hint style="warning" %} ifのあるアプリケーション内でAdopt Editorを使用する場合、**一致の表示**オプションは、対象要素が存在するiframeの一致するキーページを表示できません。 これらのケースでは、一致するキーページを表示するには、ターゲットの要素を**再選択**します。 {% endhint %}
ユーザーがスクロールする際の位置再計算を有効にする 複数のスクロールバーを持つコンテナがメインページ以外にある場合、**ユーザーがスクロールする際の位置再計算を有効にします。** 一般的に、Adoptはステップに関連する要素に到達するため、メインページをスクロールしようとします。 このオプションを有効にし、そのコンテナに制限するために `element ID` を指定します。
ガイドデフォルト [Nexthink Adoption設定](/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings.md#setting-guide-defaults)に存在する**ガイドデフォルト**をこのステップに特化するために有効または無効にします: * ステップが表示される際にURLアドレスに自動的に移動するようにするには、この設定を有効にします。 * この設定は、ウォークスルーの最初のステップでは有効にできません。 * **記録されたクエリパラメータを無視する:** URLにクエリが含まれている。たとえば、`http://google.com/?query`のように特定のURLに移動する場合、この設定を有効にしてクエリ以降、`/?` より後を無視し、ベースURLのみを使用します。 * **要素が覆われていないときにステップを表示:** Adoptは通常、関連する要素がモーダルウィンドウやダイアログでオーバーラップされている場合でもステップを表示します。 この設定を有効にして、要素が他の要素で覆われていない場合にのみステップが表示されることを確認します。 * **要素の表示にスクロールする:** この設定を有効にして、関連する要素が表示されるまで自動的にページをスクロールします。 * **スクロール時に要素をセンター:** Adoptは、大抵、ページスペーシングを尊重するように要素へスクロールしようとします。 この設定を有効にして、ページに対する相対的に中央に配置することを試みます。 * **要素の表示用にスクロールするためのカスタムオフセットを設定:** 特定のWebページの性質がスクロール計算のエラーを引き起こします。 この設定を有効にして、追加の距離をピクセル単位で追加してスクロールに加えます。 このオフセットは、指定されたステップ中にAdoptがスクロールしている方向に追加されます。 * 選択した要素の位置に基づき、ステップ描画の方向を決定する**方向**を選択します。 * **自動**がデフォルト設定です。 要素がページの上部にある場合、ステップは下から描画され、それ以外の場合は上から描画されます。 * 描画する方向を指定するには **上**, **右**, **下** または **左** を選択します。 {% hint style="info" %} **方向**, **カスタム領域**および **z-index** オプションを使用して、選択された要素に対するステップ位置を定義します。 {% endhint %}
### **カスタム領域** **カスタム領域**を定義することにより、関連するステップが表示されたときに要素のハイライトされた領域が拡大または縮小されます。 * **コンテンツにトリミングする**アダプトの試みは、要素全体ではなく、たとえばテキストラベルなどの要素の関連コンテンツのみを含む領域を定義することです。 * ページのフォーマットが不適切な場合、この設定は機能しない可能性があります。 * ニーズに合わせてカスタム領域の形状を作るために、方向ごとの**パディング**をピクセル単位で定義します。 ### **Z-index** Nexthink拡張がステップを描画する際のz-indexの起点を決定するために**Z-indexソース**を選択します。 * **テーマ**は、Nexthinkのデフォルトz-index値である`73999`を使用します。 * **要素**は、ページフォーマットで決定された関連要素のz-index値を使用します。 * **マニュアル**を使用して**影**と**ステップ**のz-index値を定義します。 正しく表示されるためには、影に対して少なくとも`1`増のステップが必要です。
## ウォークスルーステップのトリガーオプションを定義する [Adopt Editor左側パネル](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides.md#understanding-adopt-editor-for-walkthroughs)からステップの**プロパティ**にアクセスし、**トリガー**タブを開きます:
### **ステップが開始される条件を定義する** * **スポット/アンスポット**トリガーは、ページに表示されている要素で機能し、**プレゼント/アンプレゼント**は、ページには表示されていないが存在する要素に関連します。たとえば、CSSで`hidden`に設定されています。 * **ビューポートでのスポット**は、要素が従業員の画面に表示されたときにステップを開始します。 * **選択値の入力および移動**は、検索バーに単語を入力するなど、ページ上の入力フィールドとのインタラクションのためにステップをトリガーします。 * **要素がフォーカスを失う**と、フォーカスされたページ要素から離れたときにステップがトリガーされます。 たとえば、検索バーでの入力を無効にするためにクリックします。 * 前のステップが完了した後にステップが表示されるように、タイマーを秒単位で設定します。 * ステップの表示をトリガーとして受け取るためにカスタム外部コマンドを定義します。 * 他のガイドのリストを定義し、これらのガイドが完了したときにのみステップが表示されるように。 {% hint style="info" %} 前のステップの設定の**トリガー**タブでカスタム外部コマンドを作成する必要があります。 {% endhint %} ### **ステップが完了する時の条件を定義する** * ユーザーが**次へ**ボタンを**押す**。 * オプションで、**次へ**または**完了**ラベルを追加します。 * ユーザーが**前へ**ボタンを**押す**。 * オプションで、**前へ**ラベルを追加します。 * **Spot/Unspot** トリガーはページ上で見える要素に対して機能し、 **Present/Unpresent** は存在するがページに表示されない要素を指します。たとえば、CSSで`非表示`と設定されている場合があります。 * **ビューポートでのスポット** は、要素が従業員の画面に表示されているときに、そのステップをトリガーします。 * **選択値を入力して進める** と、ページ上の入力フィールドとの相互作用、例えば検索バーに単語を入力する、またはドロップダウンからオプションを選ぶ際にそのステップをトリガーします。 * **要素がフォーカスを失ったとき** は、フォーカスされたページ要素から離れたときにステップをトリガーします。 たとえば、検索バーからタイピングを停止させるためにクリックして離れてください。 * ステップを終了するために、Adopt に時間を`秒`単位で設定します。 * ステップの完了をトリガーとして受け取るカスタム外部コマンドを定義します。 * ステップが完了したときにカスタム外部コマンドを送信するかどうかを定義し、そのコマンドを作成します。 * ステップが完了後に持続するかどうかを定義します。 * **URLアドレスの変更時** は、ガイドが別のページに移動した後もステップを持続します。 * **ページのリロード時** は、ユーザーがページを更新した後もステップを持続します。 * **履歴を遡るとき** は、ユーザーが以前のページに戻った後もステップを持続します。 * **どのオプションでも** 、上記の条件を満たしたときにステップを持続させます。 --- # Agent Instructions: 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: ``` 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= ``` The question should be specific, self-contained, and written in natural language. 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.