はじめに
MotionBoard には、「プラグインアイテム」という JavaScript でチャートを描画することできるアイテムが用意されています。
※ MotionBoard や「プラグインアイテム」の詳細については、下記を参照ください。
JavaScript で、Canvas API の Context2D に対する描画（context.fillRect など）を実装することにより、MotionBoard で用意されているチャート以外に、独自の見た目のアイテムを表現することができます。
HTML・CSS の組み合わせでの描画とは異なるため、注意が必要です。
まずは、MotionBoard のプラグインアイテムの基本的な作成方法を説明します。
手順
- テンプレート JS ファイルをダウンロードする
- テンプレート JS ファイルにプログラムを記述する
- 作成した JS ファイルをアップロードする
- MotionBoard でプラグインアイテムを作成する
1．テンプレート JS ファイルをダウンロードする
ボードメニューの［管理］－［システム設定］－［全般］－［プラグイン］から、テンプレート JS ファイルをダウンロードすることができます。
［テンプレート出力］ボタンをクリックし、表示された画面でクラス名を入力します。
※ 指定したクラス名は、JS ファイルのファイル名として使用されます。
2. テンプレート JS ファイルにプログラムを記述する
ダウンロードしたテンプレート JS ファイルを開くと、下記のようなプログラムが用意されていて、「Please write your program.」の箇所が編集可能であることが分かります。
function JSPluginSample(canvasId) がコンストラクタ、
JSPluginSample.prototype.updateDisplayList = function (width, height) が、アイテム描画時に呼び出されるメソッドです。
ここに、Context2D に対する描画を実装していけば良さそうです。
まずは簡単に、102 行目の fillText で描画するテキストを「はじめてのプラグインアイテム」に変更して、JS ファイルを保存します。
3. 作成した JS ファイルをアップロードする
［プラグイン］画面で、作成した JS ファイルをアップロードます。
4. MotionBoard でプラグインアイテムを作成する
MotionBoard の編集画面において、アイテムツールバーの［プラグイン］を選択します。
アイテムの配置場所を指定し、使用するプラグインアイテムとして、アップロードした JS ファイルを選択すると、JavaScript 記述により Context2D に対して描画した結果が MotionBoard ダッシュボード画面上に表示されることが分かります。
最後に
本記事では非常に簡単なプラグインアイテムの使い方を紹介しましたが、もちろんデータソースを利用することができるため、MotionBoard の表現の幅が更に広がりそうですね。
今後もプラグインアイテムを触ってみて、プラグインアイテムの Tips を紹介していきたいと思います！