--- title: "コードウィジェットの作成" canonical: "https://wiki.yellowfin.co.jp/space/yfcurrent/1906925/%E3%82%B3%E3%83%BC%E3%83%89%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" format: markdown --- > Macro (anchor) > Macro (toc) ## 概要 コードウィジェットは、ダッシュボードを柔軟にカスタマイズできる再利用可能なコードのバンドルです（詳細は[こちら](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1903697)を参照してください）。 コードウィジェットを作成するには、以下の作業が必要です。 1. [バックエンドコードを記述](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1905832)して、それが機能するかを確認します。 2. [フロントエンドコードを記述](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1907221)して、それが機能するかを確認します。 3. [コードウィジェットプロパティパネルをカスタマイズ](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1904433)します（オプション設定）。 4. [jar ファイルへコードをバンドルし、Yellowfinへアップロード](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1904875)します。 コードウィジェットは、ダッシュボードキャンバスエディター内のコードウィジェット一覧に表示され、ダッシュボード作成モードの画面左側に表示されるコードウィジェットメニューから、キャンバスにドラッグ&ドロップできます。 [こちら](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1906488#IDEの設定)の手順に従うことで、Yellowfin プラグインを構築するIDEをセットアップできます。 > ℹ️ **開発のヒント** > ℹ️ > ℹ️ コードウィジェットはキャンバスウィジェットの子になるので、手順内で言及しているMETA-INF/services 機能を使用している場合、コードウィジェットをCanvasObjectTemplateとして追加しなくてはいけません。 > ℹ️ > ℹ️ ![image](media://1f75b003-140a-4be5-a0fc-fbb9d2cf4fd4) ## コードウィジェットシーケンスダイアグラム ![image](media://5f3feac0-f176-43e9-8008-034bb8caa48d) --- ## 次のステップ コードウィジェット作成の準備が整ったら、次のプロセスに従います。 1. [バックエンドコードの記述](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1905832)　← こちらから着手します 2. [フロントエンドコードの記述](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1907221) 3. [コードウィジェットプロパティパネルのカスタマイズ](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1904433)（オプション設定） 4. [jarファイルにコードをバンドルし、Yellowfinへアップロード](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1904875) コードウィジェット開発をさらにサポートする、サンプルコードやAPIリンク、より詳細な説明は、[こちら](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1906862)からご確認いただけます。