SaaS におけるカスタムダッシュボードの実装

ども、@kimihom です。

SaaS を開発していると、指標管理をしたいニーズが多く出てくるかと思う。そんな中で、どんな指標を掲示するかって部分は、企業の文化や目標によって違うため、企業ごとに最適な指標を掲示できるようにしたいという流れになることが多くあるだろう。

今回はその課題を解決するためのカスタムレポート(ダッシュボード)機能に関して技術的な部分にフォーカスを充てて解説してみる。

CallConnect カスタムレポート(ダッシュボード) デモ

表示形態の保存

まず、好きなように項目を表示できるように、設定データを設計しよう。全てのレポートで共通の項目と、レポートごとに違う項目を分けて考える必要がある、ここでは以下のようなデータ構造サンプルを挙げておく。

• order (順番)
• width (横幅)
• height (高さ)
• title (タイトル)
• period (集計期間)
• extra (レポート個別の設定項目、 JSON 形式)

個別の項目は JSON として切り出すことにした。そうしないと無駄に NULL の項目が大量にできてしまうのと、今後レポート項目を追加するときに柔軟に対応ができなくなるためである。最近はリレーショナルデータベースでも簡単に JSON 保存と管理ができるようになって、便利なものだ。

上記 動画デモでは、シンプルな横幅、高さの設計となっている。レポートの各高さは共通で、横幅は 1/4 か 1/2 かのどちらかしかない。必要に応じてそれぞれの width, height も DB に保存しておく必要があることだろう。

extra のデータ保存を、それぞれのフォームに落とし込むのが若干難しい。フォームで保存方法を選ぶと、グラフや表などの選択に応じて、選択項目を動的に変えていく必要がある。それは今回の話とは外れるので頑張って実装しようとだけ書いておく。動画にあるように、フォームで選択項目を変えるたびに、右側のプレビューを動的に変えるようにしてみよう。そうすれば都度都度作って確認して編集して・・みたいな面倒な手間を省くことができる。

順番の並び替え

直感的に各レポートの順番を移動できるように、ドラッグ&ドロップの実装をしたいところだ。このような実装を、ライブラリを使わずに自分の力だけで実装できるか。そこがフロントエンド 開発の実力の見せ所だ！今回はあくまで実装の大枠だけ、解説してみる。

まず、それぞれのレポートの場所を JSON で計算して保存しておくようにする。この情報をベースに、ドラッグ&ドロップしたときにどこに灰色プレビューの置くポジションを表示させるかを決定させる。

[
  { id: 1, left: 0, top: 0, width: 120, height: 120 },
  { id: 2, left: 140, top: 0, width: 120, height: 120 },
  { id: 4, left: 0, top: 140, width: 120, height: 120 },
]

ドラッグ時に、上記 JSON のポジションを満たす条件が出た場合に、各レポートの並び替えをして、改めて位置情報 JSON を計算し直す。実際はドラッグしている間に移動先候補の灰色プレビューをどう表示させるのがユーザーの操作に違和感を与えないか、工夫が必要になる。

`mousemove` 時のイベント
  ドラッグしているレポートを移動させる
  それぞれのレポート位置に対して {
    もし対象のレポート枠内に入っていたら {
      移動先候補の灰色プレビューを移動させる
      レポートの場所を再度計算
    }
  }

そして、ドロップした時点で、移動を確定させる。

`mouseup` 時のイベント
  移動候補先のところに、ドラッグしていたレポートを移動
  移動先候補の灰色プレビューを隠す
  各レポートの位置を API を通じて保存

なぜ独自実装が必要か？

「こういうのはどっかのライブラリ使えば良いっしょ」って考える方は多いかと思う。しかし、このドラッグ&ドロップによるカスタムレポート(ダッシュボード) は、サービスに応じて柔軟に実装を最適化する必要があるため、ライブラリでなんとかならない部分が必ず出てくる。従ってライブラリでなんとかならない部分だけ、ライブラリを拡張した実装をするという判断になることだろう。その判断をする前に気づいて欲しい。自前でゼロから実装した方が速く、そして無駄なコードを読んだり管理したりする必要がなくなるのである。

パッと簡単に実装できるような JavaScript コードでないことは、間違いない。でも上記デモ動画のケースでは200行ほどの JavaScript で実装できる。試行錯誤の果てに200行だけ管理すれば良いコンパクトなソースコードができあがる。しかも、自社 SaaS に最適な形式でね。

終わりに

今回は SaaS の開発で必要になるケースが多いであろう、カスタムダッシュボード(レポート) の実装例について紹介した。こうした動的なHTML要素のカスタマイズってのは JavaScript 実装の腕の見せ所だ。ぜひそれぞれの SaaS に最適な形式で、ダッシュボード(レポート) が作成できるようになって欲しいなと思う。

私はこうして自社の SaaS をより良いものに改善し続けている。