--- title: "ダッシュボードアクションボタン" canonical: "https://wiki.yellowfin.co.jp/space/yfcurrent/1903644/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9C%E3%82%BF%E3%83%B3" format: markdown --- > Macro (anchor) > Macro (toc) ## 概要 ダッシュボードにアクションボタンを追加することで、クリック時に内部および外部イベントのトリガーにしたり、（エンタープライズアプリケーションに対して）データを送信、および取得したり、カスタムワークフローを実行することができます。例えば、そのまま使用できるYellowfin アクションにより、ダッシュボード上の次のサブタブに移動するボタンを追加したり、Salesforceへリードレコードを送信することができます。 こちらのウィジェットは、アクションボタンに使用される複数のデザインを提供しますが、プロパティパネルを使用してルックアンドフィールをカスタマイズしたり、編集したりすることができます。開発者は、コードモードを通して、アクションボタンにカスタムコードを追加し、ダッシュボードへのシームレスなワークフローの統合を可能にします。 **注意：**実際の動きを確認するには、ダッシュボードをプレビューする必要があります。 ### アクションボタンクリックイベント Yellowfinは、ボタンに割り当てはめられた様々なアクションが用意されています。選択肢は、以下の通りです。 - 質問する - レポートへ移動 - URLへ移動 - 次のサブタブ - 前のサブタブ - フィルターのリセット - ダッシュボードのリセット - ダッシュボードのエクスポート（PDFまたはXLSX） より詳細な情報は、画面をスクロールダウンして、アクションボタンプロパティの表を参照してください。 --- ## アクションボタンの使用方法 こちらの機能はキャンバスレイアウトでのみ機能することに注意してください。 1. 画面左側にある「**ウィジェット**」ボタンをクリックします。 2. 表示された一覧で、「**ボタン**」項目を展開します。事前にデザインされたボタンが表示されます。 3. 必要なデザインをキャンバスにドラッグします（さらなるカスタマイズを適用できます）。 4. ボタンウィジェットのプロパティパネルで、「**アクション**」項目を展開し、こちらのボタンに適用するクリックイベントを選択します。Yellowfinは、ボタンのクリックをトリガーに様々なタイプのイベントを提供しますが、ユーザーはコードモードを使用することで、カスタムイベントを定義することもできます。 5. 必要に応じて、選択したイベントにさらなる情報を提供します。例えば、「レポートへ移動」を選択した場合は、移動先のレポートのUUIDを入力します。 > Macro (inline-media-image) 6. ボタンに表示するテキストを変更するには、「**ボタンのテキスト**」項目を展開して、テキストを更新します。ユーザーに実行してほしいアクションを反映する名前をつけてください。 7. ユーザーがボタンにマウスオーバーした場合の異なるスタイルの表現など、ボタンをさらにカスタマイズすることもできます。すべてのカスタマイズプロパティの説明は、ボタンのプロパティ項目を参照してください。 8. ボタンの機能をテストする場合は、プレビューモードに移動して、アクションボタンを使用します。 --- ### アクションボタンプロパティ ![image](media://5c7f1b99-cd73-4a07-bccd-f9cac019f4ce) | | | | --- | --- | | **プロパティの名前** | **説明** | | **名前** | このボタンウィジェットの名前を更新します。これはボタン自体に表示されるテキストではないことに注意してください。 | | **サイズと位置** | | **X** | ダッシュボードキャンバスに正確に配置するために、ボタンウィジェットの左上隅のX座標を指定します。 | | **Y** | ダッシュボードキャンバスに正確に配置するために、ボタンウィジェットの左上隅のY座標を指定します。 | | **幅** | ボタンウィジェットの幅をピクセル単位で指定することで、正確にサイズを変更します。
ボタン上のテキストがこちらで指定したサイズを超える場合、ボタンサイズは拡張することに注意してください。 | | **高さ** | ボタンウィジェットの高さをピクセル単位で指定することで、正確にサイズを変更します。
ボタン上のテキストがこちらで指定したサイズを超える場合、円形ボタンのサイズは拡張することに注意してください。 | | **角の丸み** | こちらのオプションは、選択したボタンの角の丸みを定義します。ヒント：角の丸みを最大にするには、ボタンの高さの半分の値を設定します。例えば、高さが130ピクセルの場合、角の値を65ピクセルに設定します。さらに、角の値を65より大きくしたとしても、今回の例ではこれ以上の効果はありません。 | | **回転** | 選択したボタンウィジェットを回転する角度を指定します。正の角度はウィジェットを右回りに回転し、負の値は左回りに回転します。 | | **アスペクト比** | こちらのトグルを有効にして、アスペクト比を維持します。これにより、ボタンのサイズを拡大したり、縮小したりしても、その形状が維持されます。（幅と高さの関係）
こちらが無効の場合、ボタンは横、または縦方向に引き伸ばされます。 | | **ウィジェットを固定** | こちらのトグルを有効にして、ボタンの位置を固定します。これにより、移動やサイズの変更はできなくなります。これは、キャンバス上で複数のウィジェットを選択する場合にも適用されます。固定されたボタンは、引き続きカスタマイズできることに注意してください。 | | **アクション** | | **クリックイベント** | 選択したウィジェットがクリックされたときに、トリガーになるイベントを選択します。イベントの選択肢は、次の通りです。
- **なし：**ウィジェットをイベントのトリガーにしない場合は、こちらを使用します。 - **質問する：**ビューのUUIDを使用して、ユーザーがガイド付きNLQで質問するように誘導します。 - **レポートへ移動：**特定のレポートへ移動します。レポートUUIDを提供することで、レポートの指定ができます。 - **URLへ移動：**指定されたURLを使って、外部のリンクやページに移動します。リンクを新しいページで開くか、現在のウィンドウで開くかを選択することもできます。詳しくは、以下のURLとターゲットの設定を参照してください。 - **次のサブタブ：**同じダッシュボード内の任意のサブタブに移動します。サブタブは注文番号で指定します。例えば、4番目のサブタブに移動するには、サブタブ番号欄に4と入力します。なお、サブタブの順番は1番から始まります。 - **前のサブタブ：**ダッシュボード内の次のタブに移動します。 - **フィルターのリセット：**フィルター選択をクリア、またはデフォルト値が設定されている場合は、フィルターをデフォルト値にリセットします。 - **ダッシュボードのリセット：**ユーザーが実行したすべてのインタラクションのクリアや、適用されたすべてのフィルターを削除することで、ダッシュボードを更新します。 | | **レポートID** | 「**レポートへ移動**」クリックイベントを使用してレポートへ移動する場合は、移動先レポートのUUIDを提供します。 | | **サブタブ#** | 「**サブタブへ移動**」クリックイベントを使用してサブタブへ移動する場合は、サブタブの順序を入力します。 | | **URL** | 「**URLへ移動**」クリックイベントを使用して外部ページへ移動する場合は、ページの完全URLを提供します。 | | **ターゲット** | 「**URLへ移動**」クリックイベントを使用して外部ページへ移動する場合は、ページターゲットを指定します。選択肢は、次の通りです。
- **新規タブ/ウィンドウ：**使用しているブラウザ設定に応じて、URLページを新しいタブ、またはウィンドウに開きます。**注意：**大部分のブラウザのデフォルトはウィンドウですが、コンピューターのショートカットを使用して、新規タブに開くこともできます（Windowsの場合はCtrl、Macの場合はCmd）。 - **現在のウィンドウ：**現在のウィンドウにページを開きます。 - **親フレーム：**YellowfinがiFrameとして組み込まれている場合、新規ページは親フレーム内で開きます（つまり、そのコンテンツが表示されます）。親フレームとは、Yellowfinフレームが組み込まれいてるフレームです。 - **現在のフレーム：**YellowfinがiFrameとして組み込まれている場合、URLページのコンテンツは現在のフレームに開きます。現在のフレームとは、Yellowfinを組み込んでいるフレームです。 | | **ボタンのテキスト** | | **ボタンのテキスト** | ボタンに表示するテキストを提供します。これは、ボタンが実行する機能を反映させるのが望ましいです。 | | **テキスト位置** | ボタン内のテキストの位置を揃えます。左揃え、右揃え、中央揃えを使用できます。 | | **Active - Hoverトグル** | こちらのトグルは、ボタンの状態を指定します。「**Active**」は、一般的なボタンの状態（マウスオーバーや、クリックしないとき）を表し、「**Hover**」はマウスオーバーした際のボタンの状態を表します。
選択した状態は、残りのボタンプロパティの一部に影響するため、異なる状態ごとにボタンのスタイルを変更することができます。 | | **不透明度** | 現在選択された状態でのボタンの不透明度を指定します。 | | **フォント** | ボタンのフォントタイプとサイズを指定します（両方の状態で一貫します）。 | | **色** | 現在選択された状態でのボタンのテキストの色を選択します。 | | **スタイル** | ボタンのテキストに太字や斜体、下線など、書式スタイルを適用します（両方の状態で一貫します）。 | | **塗りつぶし** | | **色** | 現在選択された状態のボタンを塗りつぶす色を指定します。 | | **境界線** | | **幅** | ボタンの境界線の幅を指定します。境界線を設定しない場合は、スライダーを0に設定します（両方の状態で一貫します）。 | | **色** | 現在選択された状態でのボタンの境界線の色を指定します。 | | **スタイル** | 現在選択された状態でのボタンの境界線のスタイルを指定します。 | | **影** | | **影のX方向の位置** | サイズをピクセル単位で定義することで、ボタンのX方向に影を投影します。 | | **影のY方向の位置** | サイズをピクセル単位で定義することで、ボタンのY方向に影を投影します。 | | **影のぼかし** | ボタンの影の鮮明さを定義します。値が小さくなるにつれて、鮮明さが増し、影が濃くなります。影をぼかす場合は、大きな値を定義します。 | | **影の色** | 影に色を設定します。影を表示するためには、必ずこちらを指定する必要があります。 |