概要

コードウィジェットは、カスタムUIオブジェクトであり、外部のアプリケーションエクスペリエンスをダッシュボードに取り込み、他のダッシュボード作成者のために、再利用可能なローコード・ノーコードウィジェットが作成できるようにデザインされています。Yellowfinには、そのまま使用できる複数のコードウィジェットや、アクションボタンも含まれており、それらについても、こちらの項目で紹介します。

注意：これらのウィジェットは、キャンバスレイアウトでのみサポートされています。他のタイプのダッシュボードレイアウトに追加することはできません。

コードウィジェットの例

Yellowfinでは、デフォルトで、次のタイプのコードウィジェットを利用できます。各コードウィジェットの説明は、以下の表を参照してください。さらに詳細な情報は、表に続く項目にて紹介します。

コードウィジェットのタイプ	説明
シグナル一覧	Yellowfin シグナルを使用できる環境下で、シグナル一覧を追加します。これにより、ダッシュボードのコンテンツに関連する、自動的に発見されたインサイトを、迅速かつ簡単に統合することができます。
ストーリーフィード	Yellowfin コンテンツフォルダーに基づき、ストーリーフィードを追加します。フィードには、フォルダーまたはサブフォルダーに保存されているストーリーの一覧が表示されます。
カスタムHTML	このウィジェットは、キャンバス上のどこにでも配置可能であり、コードモードに移動することで、ウィジェットのタグ内でHTMLのコーディングを始めることができます。
ビデオ	YouTube、Dailymotion、TED、Vimeoなど、一般的なオンラインビデオプラットフォームからビデオを埋め込むことができます。
関連レポート	関連するレポートを完全に表示するのではなく、リンクとして追加します。

独自のウィジェットを作成

Yellowfinは、独自のウィジェットを自由に実装することができ、JS APIは、開発者が個別のビジネスニーズに合わせてYellowfinの機能を拡張するために必要なツールを提供します。これらは、プラグイン管理からインポートすることで、ダッシュボードに追加できます。これにより、コードウィジェット一覧に表示され、ダッシュボードの構築プロセスで選択できるようになります。コードウィジェットの作成について、より詳細な情報やリソースは、こちらを参照してください。

ストーリーフィードウィジェット

Yellowfin 9.6は、Yellowfin ダッシュボードのニュースフィードのように機能する、ストーリーフィードウィジェットを提供します。このウィジェットは、選択したフォルダーまたはサブフォルダーに保存された最新のストーリーの一覧を表示します。

必要なアクセス権が付与されている場合、ユーザーはこのウィジェットを使用することで、以下の操作を実現できます。

ダッシュボードまたはプレゼンテーションにひとつ以上のストーリーフィードを追加し、表示をカスタマイズ
定期的な使用のためにストーリーテンプレートを管理 (フィルターを設定する時間などを節約)
テンプレートから新規ストーリーを作成

ダッシュボードにストーリーフィードを追加

ダッシュボードにストーリーフィードを追加する際に、オブジェクトのサイズや背景書式など、通常の書式設定をすべて適用することができます。また、ストーリーフィードに特有の表示オプションを設定することもできます。各機能の詳細は、以下の表を参照してください。

項目	説明
名前 (タイトル)	ウィジェットの上部に表示するタイトルテキストを入力します。タイトルを表示しない場合は、空欄のままにします。コード内でこのウィジェットを特定したい場合は、公開UUIDを使用してください。
コンテンツフォルダー	ストーリーフィードのソースが含まれるコンテンツフォルダーを選択します。デフォルトでは、すべてのサブフォルダーに保存されたストーリーがフィードに表示されます。
サブフォルダー (コンテンツフォルダーを選択することで表示されます)	特定のサブフォルダーのコンテンツのみを表示する場合は、こちらで選択をします。上記コンテンツフォルダー項目で忘れずに親フォルダーを選択してください。サブフォルダーを選択することで、サブフォルダーのコンテンツのみがフィードに表示されます。
ダークテーマ	フィードのテーマをライトまたはダークから選択します。
作成者を表示	フィード内に各アイテムを作成したユーザーの名前を表示する場合は、こちらのトグルを有効にします。
公開日を表示	各アイテムが最後に公開された日付を表示する場合は、こちらのトグルを有効にします。
説明を表示	フィード内に各アイテムの説明を表示する場合は、こちらのトグルを有効にします。
未読を太字で表示	ストーリーフィード内の未読アイテムを太字で表示する場合は、こちらのトグルを有効にします。
サムネイルを表示	イメージが存在する場合に、フィード内に各アイテムのサムネイルバージョンのメインイメージを表示する場合は、こちらのトグルを有効にします。

ストーリーフィード追加手順

選択したダッシュボードキャンバスで、画面左側からウィジェットツールをクリックします。
ダッシュボードキャンバスに、ストーリーフィードオプションをドラッグします。
画面右側のストーリーのプロパティパネルで、ストーリーテリングコンテンツを含む任意のフォルダーおよび、必要に応じてサブフォルダーを選択します。
フィードにストーリーが表示されていることを確認し、ストーリーのプロパティパネル内の任意のオプションを調整して、フィードをカスタマイズします。

ストーリーテンプレートの管理

ストーリーテンプレートは、ユーザーが閲覧できる任意の既存ストーリーに基づき、新規コンテンツを作成することができます。これは、類似するコンテンツを定期的に作成する場合に便利です。例えば、前月の売上を含む表やグラフを埋め込んだストーリーを毎月公開する場合、将来の使用に備えてこれをテンプレート化することができます。

テンプレートは、ダッシュボードやプレゼンテーションの編集時に、ストーリーウィジェット内から管理することができます。ストーリーテンプレートを選択、または選択解除するには、以下の手順に従います。

テンプレートを管理する手順

ストーリーフィードが既に追加されたダッシュボードを編集していることを確認します。
フィードの下部にあるテンプレートの一覧を編集ボタンをクリックします。
スクロール可能なフィード内の各アイテムの横にチェックボックスが表示されます。
チェックボックスを使用して、テンプレートとして使用する任意のストーリーを選択 (または、使用しないストーリーの選択解除) します。
保存ボタンをクリックします。

テンプレートから新規ストーリーを作成

ダッシュボード、またはプレゼンテーションから、直接新規ストーリーを作成することができます。既存のテンプレートを使用することで、フィルターやイメージ、テキストなどのコンテンツが新規ストーリーにコピーされます。

定期的にコンテンツを作成する場合、含める表やグラフに適用するフィルターを再作成する時間を節約できます。代わりに、更新されたコンテンツに合わせて、既存のコンテンツやフィルター値を修正することができます。新規ストーリー内でフィルターを更新しても、元のテンプレートに変更内容が反映されることはないため、元のストーリーをそのままの状態で維持することができます。

ダッシュボードに既にストーリーフィードが追加され、公開またはプレビューモードで閲覧していることを確認してください。

ダッシュボード、またはプレゼンテーション上のフィードから、以下を実現できます。

既存のテンプレートに基づく新規コンテンツの作成
空の新規ストーリーの作成

すべての新規コンテンツは、フィードに設定されたものと同じサブフォルダーに自動的に保存されます。これにより、作成したストーリーを公開すると同時に、ダッシュボードまたはプレゼンテーションスライド上のストーリーフィードに自動的に追加されることになります。

テンプレートから新規ストーリーを作成する手順

ストーリーフィードが既に追加されたダッシュボードを、プレビューまたは公開モードのいずれかの状態で閲覧していることを確認します。
フィードの左下隅でフィードに追加ボタンをクリックし、フィードに追加するアイテムを作成ダイアログボックスを表示します。
テンプレートとして使用するよう選択したすべてのストーリーが、ダイアログボックス内に一覧として表示されます。
既存のテンプレート一覧からひとつを選択し、既存のストーリーのコピーを作成するか、右下隅の新規ストーリー作成ボタンをクリックし、コンテンツが何も追加されていない新しい空のストーリーを作成します。
ストーリーは、タイトルにコピーの文字が追加された状態で、編集モードで表示されます。
要件に応じて、フィルターの設定やコンテンツの調整を行います (ストーリーの作成について、より詳細な情報は、こちらを参照してください)。
ストーリー上部にある公開ボタンをクリックします。
作成したストーリーをストーリーフィードに表示する場合は、元のストーリーと同じフォルダー (およびフィードの設定に応じて、同じサブフォルダー) に保存し、公開ボタンをクリックします。
公開されたストーリーを閉じると、先に追加したストーリーフィードのあるダッシュボードに戻ります。
新規ストーリーは、フィードのトップに表示されます。

シグナル一覧コードウィジェット

アナリティクススイートの一部としてYellowfin シグナルを導入している場合、こちらのウィジェットを使用して、ダッシュボードに文脈的なシグナル一覧を追加することができます。これは、ダッシュボード上のコンテンツに関連する自動的に検知されたインサイトを、素早く、簡単に統合する方法です。（分析の実行時にシグナルが検知され、ウィジェットフィルターがこれを表示するように設定されている場合）シグナル一覧ウィジェットは、リアルタイムに検知される新しいシグナルを反映して、更新されます。

この一覧は、色分けされたシグナルを使用しており、ポジティブなインサイトは青、ネガティブな結果のインサイトはオレンジで表示します。

ウィジェットインタラクション

公開されたダッシュボードのユーザーは、シグナル一覧を閲覧し、対話することができます。

シグナルのオープン：一覧内のシグナルをクリックし、その詳細ページへ移動します。

シグナル一覧ページの閲覧：「すべてを表示する」をクリックするとシグナル一覧ページへ移動し、シグナルの評価やウォッチへの追加、オーナーのアサインなど、一覧とのさらなる対話が可能になります。シグナル一覧ウィジェットにフィルターが適用されている場合、これはシグナル一覧ページにも反映されます。

一覧のスクロール：ウィジェット一覧を簡単にスクロールできます。表示するシグナルの数に制限はありません。

シグナル一覧ウィジェットの構成

こちらの手順では、シグナル一覧ウィジェットの追加方法や、ユーザーの好みに応じてシグナルを閲覧するためにフィルターを適用し、設定する方法を紹介します。これは、一覧に表示されるシグナルを制御します。

「ウィジェット」ボタンをクリックして、「コードウィジェット」項目展開します（デフォルトでは展開済みです）。
キャンバスに、「シグナル一覧」ウィジェットをドラッグします。
これにより、「プロパティ」パネルが更新され、このウィジェットのプロパティが表示されます。
フィルター値を選択して、シグナルウィジェット一覧にフィルターを適用します。利用可能なオプションにより、以下に基づきシグナルを閲覧します。
1. 時間：過去30日分など、事前に選択した時間範囲に応じて、シグナルを閲覧します。時間に応じて表示されるシグナルを制限したくない場合は、「すべて」を選択します。
2. シグナル解析ジョブ：特定の解析構成ジョブにより検知されたシグナルを閲覧します。
3. シグナルのステータス：これには、ウォッチ一覧に追加したシグナルや、最近閲覧したシグナル、クローズしたシグナルや無視したシグナルが含まれます。
4. シグナルのタイプ：急増や急減のみを表示するなど、特定のタイプのシグナルのみを表示します。
5. ビュー：特定のビュー内で検知されたシグナルを表示します。
適用したフィルターに応じて、一覧が保存されることに注意してください。「フィルターが適用された」一覧は、公開されたダッシュボードに表示されます。
こちらのウィジェットに関連するすべてのプロパティの説明や設定方法は、プロパティ項目を参照してください。

シグナルウィジェットのプロパティ

シグナル一覧ウィジェットに特化したプロパティです。

プロパティの名前	説明
名前	シグナルウィジェットの名前を更新します。
フィルター	一覧によりシグナルウィジェットを更新する複数のフィルターを提供します。これらは、上記シグナルフィルター項目で網羅されています。
スタイル
ダークテーマ	こちらのトグルを有効にして、ダークテーマでシグナルウィジェットを表示するか、無効にすることで、ライトテーマを維持します。
サイズと位置
X	ダッシュボードキャンバスに正確に配置するために、シグナルウィジェットの左上隅のX座標を指定します。
Y	ダッシュボードキャンバスに正確に配置するために、シグナルウィジェットの左上隅のY座標を指定します。
高さ	現在選択しているシグナルウィジェットの高さをピクセル単位で指定して、正確にサイズを変更します。シグナルウィジェットの幅は、こちらのウィジェットで調整できないため、設定項目は表示されません。
ウィジェットを固定	こちらのトグルを有効にして、シグナルウィジェットの位置を固定します。これにより、ウィジェットの移動やサイズの変更はできなくなります。これは、キャンバス上で複数のウィジェットを選択する場合にも適用されます。クイックグラフは引き続きカスタマイズできることに注意してください。

カスタムHTML

こちらのウィジェットは、ダッシュボードキャンバス上の任意の箇所にカスタムHTMLを追加します。こちらのウィジェットから追加されたHTMLは、ダッシュボードのすべてのモードで表示されます。

HTMLはダッシュボードのコードエディターでサポートされていますが、コードモードでのカスタムHTMLの実際の出力は、ビジュアルモードには反映されません。実際の出力を確認するには、ダッシュボードをプレビューする必要があります。

カスタムHTMLコードウィジェットは、コードモードに追加されたカスタムHTMLコンテンツの出力を、プレビューすることなくビジュアルモードで確認できます。

カスタムHTMLコードウィジェットの使用

こちらのウィジェットは、特にHTML、CSS、JavaScriptなどのコーディング知識を持つユーザーが使用するためにデザインされています。これは、ウィジェットの編集にコードモードの使用が要求されるからです。

これを適切に機能させるためには、「コードモード使用権」が付与されていることを確認してください。

画面の左側で、「ウィジェット」ボタンをクリックします。
表示された一覧の「コードウィジェット」項目から、「カスタムHTML」ウィジェットをキャンバスへドラッグします。
ダッシュボード上部のトグルを「コードモード」に切り替えます。
画面左側のオブジェクトの一覧から、「カスタムHTML」オブジェクトをクリックして正確なコードセクションを強調表示し、移動します。ヒント：こちらのオブジェクト一覧には、ダッシュボードに追加されたすべてのオブジェクトが表示され、特定のオブジェクトの正確なコードを検索し、編集できるようにします。
配置をしたら、ウィジェットのコードにHTMLコードを入力します。
ビジュアルモードに戻ると、HTMLコンテンツの出力を確認することができます。

ビデオウィジェット

Yellowfin 9.6では、ビデオウィジェットを導入しました。これは、URLをビデオソースとして使用することで、ダッシュボードやプレゼンテーションに簡単にビデオを追加することができます。ビデオウィジェットはYouTube、Dailymotion、Vimeo、TED (Talks) など、一般的なビデオプラットフォームからのビデオを共有するために使用できます。

ダッシュボードにビデオを追加

ダッシュボードのプレビューおよび公開モードでは、任意の埋め込みビデオのようにすべてのビデオを閲覧することができます。

ダッシュボードの編集モードでは、ビデオを閲覧することはできません。また、VimeoおよびTEDからのビデオは、カスタムプレビューイメージを表示することはできません。

選択したダッシュボードキャンバスで、画面左側からウィジェットツールをクリックします。
キャンバスに、ビデオオプションをドラッグします。
画面右側のプロパティパネルで、Video URL項目をクリックし、ビデオへのURLを貼り付けます。 (例: https://www.youtube.com/watch?v=yKP7jQknGjs)
ビデオプラットフォームに応じて、ダッシュボードキャンバス上のビデオプレースホルダーは、このようなプレビューイメージに変化するか、

このような一般的なグラフィックのいずれかに変化します。
ビデオのサイズを調整する場合は、ウィジェットプレースホルダーの任意の角をドラッグします。
ダッシュボードキャンバスのプレビューボタンをクリックします。
ビデオをクリックして、再生します。