ビジュアルデザインスタジオ（Visual Design Studio）の起動に関するヘルプ

最終更新日: 2025年05月10日 06:01

この記事では、ビジュアルデザインスタジオ（Visual Design Studio）の起動に問題がある場合の解決策を紹介します。

プロダクトエリア：［ガイド（Guides）］>［デザイナー（Designer）］（ウェブ）

ガイドをデザインするために［自分のアプリで管理（Manage In My App）］を選択すると、新しいブラウザタブまたはウィンドウが開き、ガイドとともにアプリのプレビューが表示されます。表示されない場合は、サポートに問い合わせる前に、以下を参考にしてください。

注：2020年2月17日時点でChromium（Chromeや他のほとんどのモダンブラウザに搭載されているオープンソースエンジン）は、httpプロトコルを使用するサイトにおけるクッキーの許可方法に影響を与えるセキュリティアップデートをリリースしました（httpsプロトコルを使用するサイトには影響ありません）。ChromiumのCookieに関するにアップデートついて詳しくはこちらをご覧ください。

デザイナーを起動するためのショートカットキー

Pendoにログインしたら、ブラウザタブを開き、ショートカットキー（Alt + Shift + 8）を使用して［ガイドの詳細（Guide Details）］ページからデザイナーを起動します。

うまくいかない場合は、開発者ツール（F12キー）でコンソールを開き、コンソールにpendo.designerv 2.launchInAppDesigner ()と入力してEnterキーを押します。

すでに別のアプリケーションでこのショートカットキーを使用している場合は、このショートカットキーを無効にできます。［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］>［アプリケーション（Applications）］の順に移動し、リストから該当するアプリを選択して、ショートカットの選択を解除します。

注：これらのショートカットのいずれも機能しない場合、またはAlt+Shift+8が機能しない場合は、Pendoサポートに連絡してください。

トラブルシューティング

ブラウザの新しいタブまたはウィンドウが開かない

別のブラウザのウィンドウでタブが開いていないかを確認します。
あるいは、ブラウザ（またはプラグインや拡張機能）の設定で、サイトが新しいタブやウィンドウを開けないようになっている場合があります。ブラウザの設定を確認して変更してください。
広告ブロッカーにより、ビジュアルデザインスタジオ（Visual Design Studio）の起動が妨げられる可能性もあります。

新しいタブは開くが、アプリがロードされない

入力したアプリケーションのURLが正しいことを確認してください。

新しいタブが開き、アプリがロードされるが、認証エラーのメッセージが表示される

ログインボタンを選択してapp.pendo.ioに移動し、ログインします。前回のデザイナーのセッションをブックマークした場合に、このエラーが発生する可能性があります。
さらに、ブラウザまたはプラグインの設定でCookieを無効にしている場合は、ブラウザの設定を変更してください。

新しいタブが開き、アプリがロードされたが、JavaScriptメソッドへの変更を検出した旨のメッセージが表示される

このメッセージは、デザイナーがアプリで非ネイティブJavaScriptメソッドを検出した場合に表示されます。非ネイティブJavaScriptを実装すると、ビジュアルデザインスタジオの機能が正常に動作しない可能性があります。このメッセージが表示され、ビジュアルデザインスタジオの使用に問題がある場合は、お客様のPendoサブスクリプション管理者に連絡してアプリのJavaScriptやPendoの実装についてトラブルシューティングを行うか、Pendoサポートに連絡して技術的なサポートを受けてください。

非標準JavaScriptをインストールしても、必ずしもPendoに対して問題を引き起こすわけではありません。エラーメッセージが表示されても、Pendoが正常に動作している場合は、そのエラーメッセージは無視してください。対処は不要です。

Pendo環境とJavaScriptメソッドのトラブルシューティング

コンソールにpendo.validateEnvironment()と入力してEnterを押します。
コンソールは、現在の訪問者およびアカウントのメタデータ、ネイティブJavaScriptメソッドチェック、サブスクリプション構成オプションの検証を返します。
ネイティブJavaScriptメソッドチェックは、Pendoでパフォーマンスの問題を引き起こしている可能性のある非ネイティブの実装を強調表示します
お客様の開発者が、アプリのJavaScriptの実装についてトラブルシューティングして、問題を解決できる場合があります。

追加の技術サポートが必要な場合は、Pendoサポートにお問い合わせください。

新しいタブが開いてアプリがロードされても、ガイドのプレビューが表示されない

まず、表示しているページにPendoインストールスクリプト（「スニペット」）がインストールされていることを確認します。確認するには、ブラウザ開発者コンソールを使用して次の手順に沿って操作します。

アプリケーションをブラウザタブで開き、ユーザーとしてお客様のアプリ（Pendoではありません）にサインインします。
ブラウザ開発者コンソールを開きます。
コンソールにpendo.validateInstall()と入力してEnterを押します。
識別可能なメタデータの情報が返されます。インストールスクリプトがこのページにインストールされていない場合は、Pendoが定義されていないというエラーが表示されます。このURLにPendoをインストールすることを想定している場合は、お客様の開発チームに連絡してください。

次に、Pendoエージェントのバージョン2.14.10以降を使用していることを確認してください。次の2つの手順のどちらでもバージョンを確認できます。

［サブスクリプション設定］に移動し、Pendoアプリの左下にあるユーザー名を選択してアプリを選択します。［エージェント設定（Agent Settings）］を選択し、本番環境のバージョンを確認します。
アプリケーションをブラウザタブで開き、ユーザーとしてお客様のアプリ（Pendoではありません）にサインインします。ブラウザ開発者コンソールを開き、pendo.VERSIONと入力してEnterキーを押します。

アプリがリダイレクトするときにPendoクエリパラメータが削除された可能性があります。URLとしてhttps://app.acme.comなどを入力した場合、ページがロードされると、ブラウザのURLバーに表示されているURLの末尾にクエリパラメータが追加され、https://app.acme.com?pendo-designer=eyJzdGVwSWQiOiJlTVZSQXN3WENweERTのように数秒程度表示されてから、クエリパラメータなしの元のURLに戻ります。

この場合は、以下の手順を実行します。

左側のメニューで［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動し、［アプリケーション（Applications）］タブを選択します。
アプリケーションのリストからアプリを選択します。
アプリのページで、［タグ付けとガイドの設定（Tagging & Guide Settings）］タブを選択します。
［基本設定（Basic Settings）］で、［デザイナー起動URLトークンの無効化（Disable Designer Launch URL Token）］チェックボックスを選択します。
ガイドに戻り、［アプリ内の管理（Manage In-App）］を選択して、アプリケーションにビジュアルデザインスタジオ（Visual Design Studio）を読み込みます。

［アプリ内の管理］を選択した後でも、URL入力に最初に入力したURLとは異なるURLが表示される場合は、アプリケーションが別のページにリダイレクトされている可能性があります（例：https://app.acme.comからhttps://app.acme.com/homeにリダイレクト）。その際にビジュアルデザインスタジオ（Visual Design Studio）が削除されました。その場合は、リダイレクトされたURL（例：https://app.acme.com/home）を、app.pendo.ioからURLを入力するときに［アプリ内の管理］をクリックして使用してみてください。

上記の方法で問題が解決しない場合は、以下のショートカットを参照してトラブルシューティングしてください。

次のブラウザコンソールコマンドを使用してデザイナーを起動します。window.pendo.designerv2.launchInAppDesigner()

クロスオリジンエンベッダーポリシー（COEP）の制限と既知の問題

‌ビジュアルデザインスタジオ（Visual Design Studio）は、クロスオリジンエンベッダーポリシー（COEP）をサポートしています。COEP対応環境でビジュアルデザインスタジオをリリースするには、エージェント2.272.0またはそれ以降が必要です。

一部のPendoガイド機能は、当社が管理していない外部リソースに依存しているため、これらのリソースが必要なヘッダーを返さない場合、COEP環境では正しく動作しない可能性がありますのでご注意ください。以下はその例です：

外部でホストされているリソース（埋め込みビデオや画像など）は、ホスティングサーバーにクロスオリジンリソースポリシー（CORP）ヘッダーが明示的に含まれていない場合、正常にロードされません。
現在のCORP機能フラグはサブスクリプションレベルに存在するため、COEPのあるアプリとないアプリを混在させることはできません。

COEP対応アプリの場合、ガイドプレビューはビジュアルデザインスタジオから起動する必要があります。Pendo内からガイドプレビューをリリースする必要がある場合は、COEPが有効になっていないステージングサーバーを使用してガイドをデザインまたはプレビューすることをお勧めします。

アプリケーションで［デザイナー起動URLトークンの無効化（Disable Designer Launch URL Token）］フラグが有効な場合、ビジュアルデザインスタジオ（Visual Design Studio）はPendoから起動できません。ただし、次のコマンドを使用してブラウザのコンソールから手動でアクセスできます。

pendo.designerv2.launchInAppDesigner()

重要：Pendoからビジュアルデザインスタジオを起動するには、ガイドに関連付けられたアプリケーションで［デザイナー起動URLトークンの無効化］フラグを無効にする必要があります。各ガイドは特定のアプリIDに関連付けられています。

ページやフィーチャーのタグ付けにビジュアルデザインスタジオを使用する必要がある場合は、デフォルトのアプリでこのフラグを無効にする必要があります。

ブラウザローカルストレージ

ビジュアルデザインスタジオは、［プライバシーとセキュリティ（Privacy and security）］設定からブラウザのローカルストレージを利用して起動します。必ず、お使いのブラウザのCookie設定を有効にしてください。

ヒント：Chromeをお使いの場合は、［プライバシーとセキュリティ］設定を［サイトによるデバイスへのデータの保存を許可する（Allow sites to save data on your device）］に変更してください（chrome://settings/content/siteData）。Mozilla Firefoxをお使いの場合は、プライバシーとセキュリティ設定でCookieの設定を変更してください。

Safariブラウザ（バージョン12以前の場合）

最新バージョンのSafari 12を使用していることを確認してください。ほとんどの場合、Safariではサイトのクッキーが保存されるため、最初の試行でビジュアルデザインスタジオ（Visual Design Studio）が起動しない場合は、クッキーを削除することをおすすめします。削除後は、正常に操作できるようになります。Cookieの削除方法について詳しくは、Safariのドキュメントを参照してください。

Safariブラウザ（バージョン13.0.4以降）

Safariでは、Intelligent Tracking Prevention（ITP）と呼ばれる独自セキュリティ標準を実装して、ファーストパーティアプリとサードパーティアプリ間のCookieの共有を制限しています。2020年2月20日の時点で、ITP（バージョン2.3）は、macOS Catalina、Mojave、High Sierra向けSafari 13に実装されています。PendoではCookieを利用してお客様のアプリケーション上でビジュアルデザインスタジオ（Visual Design Studio）を起動するため、ITPの制限によってガイドデザイナーを起動できなくなります。2020年2月20日の時点では、ビジュアルデザインスタジオ（Visual Design Studio）はSafari 13.0.4以降ではサポートされていませんが、将来的に再度検討対象となる可能性があります。