このページでは、ビジュアルデザインスタジオ（Visual Design Studio）で、ガイドの作成やページおよびフィーチャーのタグ付けに利用できる設定について説明します。
ビジュアルデザインスタジオはアプリケーションレベルで設定されます。ビジュアルデザインスタジオを設定するには、［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動し、［アプリケーション（Applications）］リストからアプリを選択して、［タグ付けとガイドの設定（Tagging & Guide Settings）］タブを開きます。
ビジュアルデザインスタジオの設定画面を開いて変更するには、Pendoの管理者ユーザーである必要があります。
基本設定
基本設定では以下のことが可能です。
- ビジュアルデザインスタジオの起動URLトークンの無効化
- ガイドコードブロックへのアクセスの防止
- ビジュアルデザインスタジオのキーボードショートカットの無効化
ビジュアルデザインスタジオの起動URLトークンを無効にする
［アプリ内で管理（Manage In-App）］ボタンからビジュアルデザインスタジオを起動すると、新しいタブが開き、アドレスバーにアプリURLおよび認証トークンが表示されます。ユーザーが認証されると、デザイナーの読み込み時にURLからトークンが削除されます。これがデフォルトの動作であり、ほとんどのお客様で問題なく動作します。アプリ上でのURLトークンを使用したデザイナーの起動に問題が発生した場合は、この設定で起動URLトークンを無効化し、代わりにwindow.openerを使用してデザイナーの新規タブを開きます。
ガイドコードブロックへのアクセスを防止する
この設定により、ビジュアルデザインスタジオのカスタムコードブロック（Custom Code Block）ビルディングブロックが無効になります。コードブロックは、ガイドステップ読み込み時に、ガイドステップにCSS、HTML、およびJavascriptを追加し、実行します。コードブロックは、ボタンや画像のようにガイド内のコード要素をカスタム化するために使用され、動作の記述にはJavascriptが使われます。また、現在のガイドステップやお客様のアプリケーションをはじめとして、DOM要素の外観や動作を変更することもできます。これは強力なツールであり、ガイドで創造的なソリューションをいろいろと実装するのに役立ちます。一部のお客様は、標準で提供されているビルディングブロックのみを使用し、ガイド作成者のコードブロックのアクセスを無効にしています。
デザイナーでコードブロックを無効にしたい場合は、Pendoサポートにご連絡ください。
ビジュアルデザインスタジオのキーボードショートカットを無効にする
Pendoサブスクリプションのアクティブユーザーは、Alt（MacではOption）+ Shift + 8を押すと、いつでもアプリケーション上でビジュアルデザインスタジオを起動できます。このマクロが、お客様側のアプリケーションのマクロに干渉している場合や、PendoユーザーのみがPendoからビジュアルデザインスタジオを起動できるようにしたい場合は、このショートカットを無効にできます。
カスタムHTML属性の収集
Pendoのデフォルト属性だけでなく、カスタムHTML属性の収集も設定できます。これらは、フィーチャーのタグ付けやツールチップガイドの配置に使用できます。カスタムHTML属性の追加方法については、カスタムHTML属性を参照してください。
カスタムHTML属性による自動タグ付け
カスタムHTML属性を収集すると、Pendoでフィーチャーを作成するための自動タグ付けを有効にできます。この機能の詳細と使用方法については、カスタムHTML属性によるフィーチャーの自動タグ付けを参照してください。
推奨される一致からのHTML属性除外
フィーチャーのタグ付けやガイドの配置を行う際、不安定なタグや過度に汎用的なタグになり得るクラスや動的なIDといった特定のCSSクラスやIDを、ビジュアルデザインスタジオの［推奨される一致（Suggested Match）］オプションから除外できます。
クラスまたはIDを除外リストに追加する場合は、以下の点に注意してください。
- HTMLクラスとIDでは大文字と小文字が区別されます。
- 除外はアプリケーション固有です。
- クラスやIDを除外しても、イベントの生データとして収集の対象になります。
- 以下の特殊文字がサポートされています。
- アンダースコア（
_）：制限なく使用できます。 - ハイフン（
-）：クラスの先頭と末尾には配置できません。 - ワイルドカード（
*）：クラスの末尾に配置できます。
- アンダースコア（
注：推奨される一致からクラスを除外しても、イベントの生データの収集は防止できません。
クラスやIDを除外する理由
ビジュアルデザインスタジオでフィーチャーにタグを付ける場合、要素タグ付けツールを使用してアプリ内の要素を選択し、一意のターゲットルールを作成します。このルールは、すべてのPendoクリックイベントデータの中で、そのターゲット要素にのみ一致する必要があります。タグ付けツールでは、ターゲットルールの推奨、親要素リストの提供、またはカスタムターゲットルールの入力を行うことができます。
［推奨される一致］オプションは、選択した要素のプロパティから、一意の識別子を提案します。タグ付けツールは、Sizzleクエリを使用して要素を検索し、アプリで識別されたカスタムHTML属性を検索し、［推奨される一致クラスの除外（Suggested Match Class Exclusions）］リストにあるCSSクラスを削除します。これにより、ID、カスタムHTML属性、CSSクラスなど、ほとんどのアプリケーションで一般的に一意である要素が優先されます。
一部のアプリケーションフレームワークは、動的に生成されたCSSクラスとIDを使用します。これらの属性は一意または変数です。通常、属性名の一部はコンテンツがレンダリングされる時に変更されます。ユーザーが要素をクリックすると、Pendoは正確なクラスを保存します。推奨される一致によって、フィーチャーがタグ付けされた時点で正確なクラスに一致するタグ付けルールが生成されます。名前の変数部分が変わることで、ユーザーがいつ要素をクリックしてもフィーチャーにタグ付けしたルールと一致しなくなります。そのため、要素に対するすべてのクリックはタグ付けルールでキャプチャされることはありません。
［推奨される一致］のクラスとIDの除外は、動的なCSS属性およびその他の不要な属性を推奨される一致から除外するために使用されます。推奨される一致の生成には安定したプロパティのみが使用されるため、推奨されるタグ付けルールの方が信頼性が高くなります。
除外を追加する
- ［+除外を追加（+ Add Exclusion）］フィールドにクラスまたはIDを入力します。このフィールドに入力すると、クラスの形式が利用可能かどうかを検証します。
- ［+除外を追加］を選択して、クラスまたはIDをリストに追加します。ここで追加された属性は、フィーチャーのタグ付けまたはガイドの紐付けにおいて一致の対象として推奨されませんが、イベントの生データの収集は継続されます。
除外を削除する
- リスト内のクラスにカーソルを合わせると、ゴミ箱アイコンが表示されます。
- ゴミ箱アイコンを選択し、警告モーダルで処理を確認します。
- ［除外を削除（Delete Exclusion）］を選択して、リストからクラスを削除します。これは即時に処理されます。クラスは、必要に応じて再度追加できます。