---
title: "ダッシュボードコードモード"
canonical: "https://wiki.yellowfin.co.jp/space/yfcurrent/1901439/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%82%B3%E3%83%BC%E3%83%89%E3%83%A2%E3%83%BC%E3%83%89"
format: markdown
---
> Macro (anchor)



> Macro (toc)

## 概要

コードモードは、一般的なコーディング言語を使用して、無制限の機能性とデザインの柔軟性により、ダッシュボードやプレゼンテーションのカスタマイズや拡張を可能にします。ビジュアルモードでキャンバスにドラッグされたすべてのダッシュボードオブジェクトのコードは、こちらのエディターから確認できます。開発者は、オブジェクト機能を強化し、カスタマイズして、独自のUIオブジェクトや機能を、スクラッチから作成することができます。コードモードは、カスタムHTMLウィジェットや、アクションボタン機能など、特定のコードウィジェットの編集に必須です。

Yellowfinは、独自の[コードウィジェット](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1906925)を作成するためのツールおよびリソースも提供しています。ダッシュボードコードモードを使用してウィジェットのパーツをテストし、コードウィジェットを開発する開発者向けの[追加リソースページ](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1906862)も参照してください。

### バイラテラルエディター

コードモードでの編集は、ビジュアルモードで即座に可視化されるため、JavaScriptを通して追加されたすべての対話機能や、HTMLを通してウィジェットプロパティに追加されたカスタマイズ、CSSを通した全体的なキャンバスデザインは、ビジュアルエディターに自動的に同期され、利用できるようになります。同様に、ビジュアルモードで行われた変更も、コードモードへ即座に反映されます。

コードエディターは自動保存をサポートするので、コード変更を手動で保存する必要はありません。

**<span style="color: #FF0000">注意：</span>**

- コードモードは、ダッシュボードおよびプレゼントで利用できます。
- ダッシュボードでは、キャンバスレイアウトでのみコードモードを使用することができ、他のレイアウトではサポートされていません。
- こちらのモードを使用するには、特定の「**コードモード**」ロール権限が必要です。これにより、権限のある開発者のみが、ダッシュボードのコードを編集することができます。


---

## コードモードエディターの理解

以下のダイアグラムは、コードモードの機能を示します。


![image](media://9732a069-8124-4dc3-a7e9-378f556ba290)


| **番号** | **説明** |
| --- | --- |
| 1 | これらのボタンを使用して、コードモードとビジュアルモードを切り替えます。 |
| 2 | こちらのコードエディターで、ダッシュボードのコードを記述し、編集します。 |
| 3 | こちらのボタンは、コードエディターのHTML項目へ移動します。 |
| 4 | こちらのボタンは、コードエディターのJavaScript項目へ移動します。 |
| 5 | こちらのボタンは、コードエディターのCSS項目へ移動します。 |
| 6 | こちらの一覧は、ダッシュボードに追加されたすべてのオブジェクトを表示します。より詳細な情報は、[こちら](#id-ダッシュボードコードモード-オブジェクト一覧)を参照してください。 |



---

## オブジェクト一覧

画面左側のオブジェクト一覧には、ダッシュボードに追加されたすべてのオブジェクトが表示されます。こちらの一覧を使用して、次のアクションを実行できます。

- オブジェクト名にマウスオーバーするか、これをクリックすることで、コードエディターのHTML項目で対象のコードを強調表示します。これにより、簡単にコードを見つけることができます。
- 横にある削除アイコンを使用して、オブジェクトを削除します。


![image](media://e4399f1a-7d0c-4e5f-a613-1648e974b87e)


- コードエディターに表示される順序で、オブジェクトを確認します。新規オブジェクトは一覧の最後に追加されますが、オブジェクトをコードエディター内で移動した場合、これを反映して一覧が更新されます。これにより、その配置に従って、エディター内でコード要素を簡単に見つけることができます。



### 簡単にデバッグ

以下に示すように、エラーや間違いのあるコードには、エラーアイコンが表示されます。


![image](media://5314273d-b2e7-401b-90c1-0dc51ac4b345)



### コードモードのヒント

- プレビューモードで、カスタムコード機能をテストします（プレビューモードには、ダッシュボードエディター右上にある「**プレビューモード**」ボタンからアクセスすることができます）。
- 他のダッシュボードで再利用したいコード機能は、コードウィジェットに保存することができます。ウィジェットとしてパッケージ化する前に、こちらでテストをします。ウィジェットは、プラグイン管理から追加することができ、ダッシュボードビルダーのコードウィジェット一覧に表示されます。
- 特定のオブジェクトのコーティングを容易にするためには、プロパティパネルから、キャンバスにドラッグした各コンテンツに名前を付けます。これにより、コードモードで対象のオブジェクトをより簡単に見つけることができます。


---


## コードモードの例

こちらの項目では、コードモードを使用したシンプルなダッシュボード機能の例を紹介します。これには、ユーザーのダッシュボードでも利用できる、コードスニペットが含まれています。

**目的：**ユーザーの選択に基づき、グラフを変更するレポートセレクターを、ダッシュボードキャンバス上に作成します。

このため、片側に2つのアクションリンクを追加します。各リンクは、異なるグラフを表示します。ユーザーが他のリンクをクリックした場合、グラフは変更されます。

![image](media://51bfa5d0-5c92-40fc-a558-448d42f3687b)


### UUIDタイプ

Yellowfin 9.5では、ウィジェットのUUIDの名前が変更されました。新しい公開UUIDは、ダッシュボードの編集やバージョン間で永続的な識別子を提供します。Yellowfin 9.5以降のバージョンにアップグレードしてからダッシュボードを編集すると、以前のUUIDであるウィジェットUUIDは、自動的に公開UUIDに更新されます。ダッシュボードを編集しない場合、以前のウィジェットUUIDはそのまま機能し続けます。

**<span style="color: #FF0000">注意：</span>**<span style="color: #000000">こちらのページでは、更新されたUUIDである公開UUIDをを反映するように更新されています。以前のバージョンのYellowfinを使用されているユーザーは、アップグレードをするか、公開UUIDの代わりに一時的に名前属性を使用することを推奨します。</span>


### 手順

非開発者向けに、この機能を自身で作成する方法を紹介します。

1. ダッシュボードにキャンバスタブを追加します。
2. レポートパネルを開き、キャンバスにレポートを2つドラッグします。
3. これらを重ねます。レポートプロパティパネルを使用して、これら２つをまったく同じサイズにし、同じ場所に配置します（これにより、ユーザーがダッシュボードと対話することで、レポートの表示がまったく同じ場所で切り替わります）。
4. 最初に表示するレポートを「レポート1」、もうひとつのレポートを「レポート2」という名前に変更します。
5. コードモードに切り替えます。両方のレポートに関連するコードを、HTML項目で既に確認することができます。
6. 次のコードスニペットをコピーして、**HTML**エディターに貼り付けます（**</canvas-area>**タグを閉じる直前まで）。エディターに貼り付けると、Yellowfinは自動的に変更するため、オブジェクトの公開UUIDを変更する必要はありません。
  <span style="color: #FF0000">**注意：**</span>こちらのコードスニペットは基本的に、見出しと、レポートを表示する2つの「アクションリンク」を表示します。
7. ビジュアルモードに戻り、見出しと2つのリンク/テキストを表示するコードスニペットの影響を確認することができます。
8. コードモードに戻り、**JavaScript**項目へ移動し、次のコードセグメントをコピーします。
  **<span style="color: #FF0000">注意：</span>**こちらのコードは、リンク1がレポート1を表示し、リンク2がレポート2を表示する機能を定義します。
9. コードをプレビューして、テストします。ダッシュボードエディターの上部にある「**プレビューモード**」ボタンをクリックします。
10. 最初のレポートだけが表示されたダッシュボードが表示されます。「レポート2を閲覧」をクリックすることで、表示されるレポートの変更、またはその逆を確認できます。

  


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

Yellowfinは、独自のウィジェットを自由に実装することができ、[JS API](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1905938)は、開発者が個々のビジネスニーズに合わせてYellowfinの機能を拡張するために必要なツールを提供します。これらは、プラグイン管理からインポートすることで、ダッシュボードに追加でき、ダッシュボード構築プロセスで、コードウィジェット一覧に表示されます。より詳細な情報およびリソースは、[コードウィジェットの作成ガイド](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1906925)を参照してください。




> Macro (styleclass)
> 
> [ページトップ](#id-ダッシュボードコードモード-top)