Tour UI
Drupal CoreのTourモジュールを管理するためのユーザーインターフェースを提供し、直感的な管理画面を通じてガイドツアーの作成、編集、削除を可能にします。
tour_ui
インストール
composer require 'drupal/tour_ui:^2.0'
概要
Tour UIは、Drupal CoreのTourモジュールを拡張し、ガイドツアーを管理するための完全な管理インターフェースを提供します。このモジュールがなければ、ツアーを作成するには手動でYAML設定ファイルを作成する必要があり、技術的な知識とファイルシステムへのアクセスが必要です。
Tour UIを使用すると、サイト管理者はDrupalの管理画面から直接インタラクティブなガイドツアーを作成できます。ツアーは、サイトの特定のページや機能をユーザーに案内する一連のヒント（ツールチップ）で構成されます。各ヒントは任意のDOM要素を基準に配置でき、HTMLでフォーマットされたテキストを含めることができます。
このモジュールには、ツアー作成機能の使い方を示す独自のインターフェース用の組み込みツアーが含まれています。また、ルートやモジュール名を検索するためのオートコンプリート機能も提供しており、ツアーを表示する場所の設定が容易になります。
Features
- 管理画面からツアーの完全なCRUD操作が可能 - コードを書かずにツアーの作成、表示、編集、削除が可能
- ツアーヒントの追加、編集、削除、ドラッグ＆ドロップによる並べ替え機能
- ルーターテーブルを検索してツアーターゲット用の正しいルート名を見つけるルートオートコンプリート機能
- ツアー設定が属するモジュールを指定するためのモジュール名オートコンプリート
- 特定のページ（例：特定のNode）をターゲットにできるルートパラメータのサポート
- auto、top、bottom、left、right、およびそれらのstart/endバリエーションを含むツールチップの複数の配置オプション
- Tour UI自体の使い方を示す組み込みの自己文書化ツアー
- リッチなツールチップコンテンツを作成するためのフォームベースの設定を持つ拡張テキストヒントプラグイン
- ツアーステップの表示順序を制御するためのヒントウェイトシステム
Use Cases
新しいサイト管理者のオンボーディング
Drupal管理画面のガイドツアーを作成し、新しい管理者が一般的な設定の場所を学べるようにします。例えば、/admin/configルート用のツアーを作成し、各設定カテゴリを説明しながら、各セクションの内容といつ使用する必要があるかを案内します。
コンテンツ編集者のトレーニング
コンテンツ作成ワークフロー用のツアーを構築します。node/add/articleルートにツアーを作成し、コンテンツ編集者にタイトル、本文コンテンツ、画像、タクソノミータームの各フィールドを案内しながら、ベストプラクティスを説明します。
モジュールドキュメント
カスタムモジュールを開発する際、Tour UIを使用してインタラクティブなドキュメントを作成します。カスタム管理ページ、設定オプション、モジュール固有のワークフローを説明するツアーを作成します。
機能のお知らせ
新機能をデプロイした後、変更点をハイライトする一時的なツアーを作成します。例えば、ダッシュボードを再設計した後、新しい要素を指し示し、その目的を説明するツアーを作成します。
複雑なフォームのガイダンス
多くのフィールドや複雑なオプションを持つフォームに対して、各セクションを説明するツアーを作成します。これは、誤った設定が問題を引き起こす可能性がある設定フォームに特に有用です。
Tips
- Develモジュールの/devel/routesページを使用すると、ツアーのターゲット用のルート名を簡単に見つけられます
- 本番サイト用のツアーを作成する場合、tour_uiに残すのではなく、カスタムモジュールに設定をエクスポートしてください - Tour UIは開発ツールとして意図されています
- ルートパラメータ（- node:2など）を使用すると特定のコンテンツページをターゲットにできますが、この機能にはissue #2978327で文書化された制限があることに注意してください
- ヒントはウェイトに基づいた順序で表示されます - ウェイトが低いほどツアーシーケンスの先に表示されます
- セレクターフィールドは任意の有効なCSSセレクターを受け入れるため、ページ上の特定の要素を簡単にターゲットにできます
- 空のセレクターを使用すると、ツールチップが画面中央に表示されます。これは導入やまとめのヒントに便利です
- ヒントの位置を選択する際はユーザーのビューポートを考慮してください - 「auto」は自動的に最適な位置を見つけようとします
- ヒント本文コンテンツではHTMLがサポートされており、フォーマットされたテキスト、リンク、さらにはツアーコンテンツ内の画像も使用できます
Technical Details
Admin Pages 7
/admin/config/user-interface/tour
システム内のすべての利用可能なツアーを一覧表示するメインのツアー管理ページ。ツアーID、ラベル、ルート（ツアーが表示されるページ）、ヒント数、操作を含むテーブルを表示します。このページから新しいツアーを追加したり、既存のツアーを編集/削除できます。
/admin/config/user-interface/tour/add
新しいガイドツアーを作成するフォーム。ツアー名、所属するモジュール、表示されるルートを指定します。ツアー作成後、個別のヒント（ツアーステップ）を追加できます。
/admin/config/user-interface/tour/manage/{tour}
既存のツアーを編集するフォーム。ツアー設定を変更し、ツアーヒントを管理します。ヒントはドラッグ＆ドロップで並べ替えでき、ヒントタイプセレクターを使用して新しいヒントを追加できます。
/admin/config/user-interface/tour/manage/{tour}/tip/add/{type}
ツアーに新しいヒント（ツアーステップ）を追加するフォーム。フォームフィールドは選択したヒントタイプによって異なります。Textヒントタイプが最も一般的で、フォーマットされたコンテンツを含むツールチップを作成できます。
/admin/config/user-interface/tour/manage/{tour}/tip/edit/{tip}
既存のツアーヒントを編集するフォーム。ヒント追加フォームと同じフィールドですが、現在のヒント値が事前に入力されています。
/admin/config/user-interface/tour/manage/{tour}/tip/delete/{tip}
ツアーヒントを削除する確認フォーム。ツアー名とヒント名を表示し、削除前に確認を求めます。
/admin/config/user-interface/tour/manage/{tour}/delete
すべてのヒントを含むツアー全体を削除する確認フォーム。
権限 1
Hooks 4
hook_entity_type_alter
Tour Entityタイプを変更し、Tour UI管理インターフェース用のカスタムフォームクラス、アクセスハンドラー、リストビルダー、リンクテンプレートを追加します。
hook_tour_tips_info_alter
ツアーヒントプラグインの定義を変更し、CoreのTextプラグインをフォームベースの設定を含む拡張バージョンでオーバーライドします。
hook_module_implements_alter
tour_uiのentity_type_alterフックが他のモジュールより先に実行されるようにし、その変更が優先されるようにします。
hook_help
ヘルプページでTour UIモジュールのヘルプテキストを提供します。
Troubleshooting 6
Develモジュールの/devel/routesページを使用してルート名が正しいことを確認してください。また、ユーザーがCoreのTourモジュールからの「access tour」パーミッションを持っていることを確認してください。
ツアー編集ページでウェイト値を確認してください。ウェイトが低いほど先に表示されます。ドラッグ＆ドロップでヒントを並べ替え、ツアーを保存してください。
ツアーがロードされた時点で要素が表示されていないか、CSSセレクターが複数の要素にマッチしている可能性があります。クラスではなくIDなど、より具体的なセレクターを使用してみてください。
これは、ヒントプラグインがgetConfiguration()を実装していない場合に発生します。Tour UIと互換性のないカスタムヒントプラグインで起こることがあります。
オートコンプリートをトリガーするには少なくとも1文字入力してください。モジュールが候補に表示されるには有効化されている必要があります。
ルート検索がトリガーされるには少なくとも4文字を入力する必要があります。検索はルート名とパスパターンの両方にマッチします。
Security Notes 3
- 「Administer tour」パーミッションは「restrict access」としてマークされており、信頼できる管理者にのみ付与すべきです
- ツアーヒントの本文コンテンツはHTMLを受け入れるため、信頼できないユーザーにadminister tourパーミッションが与えられた場合、XSSに使用される可能性があります - 信頼できるHTMLタグのみが許可されます（Xss::getAdminTagList()を使用）
- Tour UIは主に開発ツールであり、ツアーが作成されモジュール設定にエクスポートされた後は、本番サイトで有効にする必要がない場合があります