リソースセンターの有効化

最終更新日: 2025年12月18日 16:20

アプリケーション内でリソースセンターを起動するための有効化方法は2つあります。

バッジ。訪問者は、アプリケーション内に配置したアイコンを選択することでリソースセンターを開きます。
ターゲット要素。訪問者は、指定されたアプリケーション内の既存の要素を選択してリソースセンターを開きます。

これらの有効化方法にはそれぞれ独自の設定オプションがあります。

アクティベーション方法を選択する

ビジュアルデザインスタジオから有効化方法を選択して編集します。

左側のメニューから［ガイド（Guides）］>［リソースセンター（Resource Center）］に移動します。
［リソースセンター（Resource center）］ページのテーブルから、リソースセンターを見つけて開きます。
リソースセンターの詳細ページの［ドラフト］タブから、［自分のアプリで編集］を選択します。
［アクティベーション設定］ウィンドウを開きます。これを行うには、次の2つの方法があります。
- ページの一番上にあるアクションバーの［ナビゲーション］オプションの左にある［アクティベーション］ショートカットを選択します。
- ページ上部のモジュールアクションバーの最初の（アクティベーション）カードにカーソルを合わせ、編集アイコンを選択します。
［バッジ］または［ターゲット要素］のいずれかを選択し、この記事のバッジの有効化を設定するか、ターゲット要素の有効化を設定するかの指示に従います。
- ［ターゲット要素］を選択するには、［バッジ］の選択を解除する必要があります。両方を同時にオンにすることはできません。
- リソースセンターの有効化方法として［確認］を選択することはできません。これはガイドにのみ利用可能です。このオプションの詳細については、「ガイドのアクティベーション」を参照してください。

バッジの有効化を設定する

訪問者がアプリケーション上のアイコンを選択したときにリソースセンターがアクティブ化（開く）されるように設定するには、［アクティベーション設定］ウィンドウのトグルを使用して［バッジ］のアクティベーションをオンにし、［設定を編集］を選択します。これにより［バッジ設定］ウィンドウが開きます。ここから、バッジのスタイル、場所、動作をカスタマイズできます。

注：アラートバッジはリソースセンターバッジとは異なります。アラートバッジは、メニュー内に確認すべき通知があるときに、リソースセンターのバッジと重なって表示される円の中の数字です。また、アラートバッジは、訪問者が確認すべき更新があるモジュールの右側にも表示されます。アラートバッジのスタイルに関する情報は、リソースセンターのスタイル設定をご覧ください。

バッジのスタイル設定

バッジのスタイリングを編集するには、［バッジ設定］ウィンドウの［スタイル設定］タブを開き、以下の内容を編集してください。

バッジアイコン。デフォルトのバッジアイコンの選択肢は、一定のサイズの円形です。最大サイズが30MBの独自の画像をアップロードすることもできます。カスタム画像はすべて、バッジのサイズに合わせて自動的に拡大縮小されます。読み込み時間を最適化するために、画像の品質を維持しつつ、できるだけ画像を小さくすることをお勧めします。また、カスタム画像を円形にすることをお勧めします。
色。デフォルトのバッジアイコンの色はPendoピンクに設定されています。これを変更するには、色を選択し、16進数、RGB数値、またはビジュアルカラーセレクターを使用してアイコンに別の色を設定します。これは、［バッジアイコン］ドロップダウンメニューに表示されるデフォルトアイコンオプションの色のみを変更します。カスタム画像の色を変更するには、アップロードする際に希望の色になっていることを確認してください。
Zインデックス。 Zインデックスはバッジのスタック順序、またはバッジをページ上の別の要素の前に表示するか後ろに表示するかを指定します。デフォルトでは、Zインデックスは非常に大きな値（19000）に設定されているため、アプリケーション内の他のすべての要素の上に表示されます。必要に応じてこの数を増減できます。
アラートバッジの位置。バッジアイコンに対してアラートバッジが表示される位置には、左上、右上、左下、右下の4つの選択肢があります。アラートバッジの色とその中のフォントを変更したい場合は、リソースセンターのスタイル設定の指示に従ってください。
バッジサイズ。デフォルトのバッジアイコンのサイズは56ピクセルです。選択できるバッジアイコンの最小サイズは50ピクセルです。選択可能な最大のバッジアイコンサイズは200ピクセルです。バッジアイコンのサイズをデフォルトに戻すには、［デフォルトにリセット］を選択します。
アクセシビリティ。スクリーンリーダーの利便性のために、バッジアイコンのARIAラベルを編集できます。

バッジの位置

バッジの場所と位置を編集するには、［バッジ設定］ウィンドウの［場所］タブを開き、以下を編集します。

ターゲットページ。次のいずれかを選択します。
- サイト全体でリソースセンターをアプリケーション全体に展開します。
- 当該ページのみでアプリケーションの特定のページにリソースセンターを提供します。リソースセンターを追加したいページにPendoでタグを付けていない場合は、ページのタグ付けの指示に従ってください。
バッジの位置とオフセット。 リソースセンターバッジのデフォルトの場所は画面の右下隅で、10ピクセルのオフセットがあります。リソースセンターのバッジは、画面の四隅のいずれか、または画面の下中央、上中央、右中央、左中央に配置できます。

バッジの動作

バッジがリソースセンターをリリースするタイミングを制御するには、［バッジ設定］ウィンドウの［動作］タブを開き、以下を編集します。

［ガイドの動作］にある次の2つのオプションから1つを選択します。

バッジの上にカーソルを合わせるか、クリックして表示。訪問者がバッジにカーソルを合わせた時と、選択した時の両方でリソースセンターが開きます。
バッジのクリック時のみ表示。訪問者がバッジアイコンを自分で選択した場合にのみリソースセンターを開きます。

［デバイスタイプ］で以下の3つのオプションから1つを選択します。

すべてのデバイス。アプリケーションのモバイル、タブレット、デスクトップ版でリソースセンターを表示します。
デスクトップとタブレットのみ。これはタブレット版とデスクトップ版のアプリケーションでのみリソースセンターを表示します。
モバイルのみ。 これはアプリケーションのモバイル版でのみリソースセンターを表示します。

ターゲット要素の有効化を設定する

訪問者がアプリケーションの特定の要素を選択したときにリソースセンターが有効化される（開く）ように設定するには：

［アクティベーション設定］ウィンドウのトグルを使用して［ターゲット要素］の有効化をオンにします。これにより［アクティベーション設定］ウィンドウが非表示になり、アプリケーション内でターゲット要素を選択するように促されます。
ターゲット要素を選択します。画面上でマウスを動かすと、アプリケーション内の要素を囲む赤い点線のボックスに基づいて、どの要素を選択しているかを確認できます。UI要素を選択すると、赤い点線が赤い実線に変わります。その後、表示される［ターゲット要素の設定］ウィンドウでこの選択を編集できます。
［ターゲット要素の設定］ウィンドウの［場所］タブと［動作］タブのオプションを使用して選択を編集します。
［完了］を選択して終了します。

リソースセンターがターゲット要素から有効化され、訪問者がリソースセンター内のコンテンツに適格でない場合でも、ターゲット要素を選択すると、コンテンツがないことを示すエラーメッセージと共にリソースセンターが表示されます。このエラーメッセージを表示させたくない場合は、次のいずれかを実行してください。

すべての訪問者がリソースセンターの少なくとも1つのモジュールを利用できることを確認してください。
リソースセンターの有効化方法を［バッジ］に変更してください。手順については、この記事の「バッジの有効化を設定する」を参照してください。

場所タブ

［ターゲット要素設定］ウィンドウの［場所］タブを開き、以下を編集します。

［ページ上の位置］ドロップダウンメニューを使用して、ページ上のターゲット要素を基準にしてリソースセンターが開く位置を選択します。リソースセンターを選択した要素の上（上）、下（下）、左（左）、右（右）に開くかを選択できます。デフォルトは［自動］で、要素に対してリソースセンターを開くための最適な場所を選択しようとします。
［ターゲットページ］で、以下のいずれかを選択してください：
- サイト全体でアプリケーション全体にリソースセンターを追加します。リソースセンターは、対象要素が存在するページでのみ利用可能です。
- 当該ページのみを使用して、アプリケーションの特定のページにリソースセンターを追加します。Pendoでリソースセンターを追加したいページにタグを付けていない場合は、ページのタグ付けの指示に従ってください。
［要素の場所］欄では、［一致候補］を保持するか、以下のいずれかのオプションを選びます。
- 親要素。選択した要素のより大きなクリック可能な領域（相対的な親要素）を選択する場合は、これを選択します。
- カスタムCSS。 要素の選択を絞り込む場合はこれを選択します。UI要素のターゲティングにCSSを使用するためのガイダンスについては、「ガイドのターゲット設定にCSSルールを使用する」を参照してください。

再度やり直して別の要素を選択するには、［選択をクリア］を選択してください。

動作タブ

ターゲット要素がリソースセンターを開くタイミングを制御するには、［ターゲット要素設定］ウィンドウの［動作］タブを開き、以下を編集します。