Strapiの管理画面トップをカスタマイズするstrapi-plugin-dashboard-builderプラグインを公開

少し前の記事でStrapiの管理画面トップページを上書きする方法を書きましたが、その後プラグイン化して簡単に導入できるようになったのでご紹介します。

npmのURLはこちら。ちなみにStrapi v5系をサポートしています。

インストールはnpm i strapi-plugin-dashboard-builder

設定画面からぽちぽち設定していくとコレクションタイプのデータやアップロード写真、各種グラフを出せるようになります。

↑のスクショだとウィジェットの数が上から２、３、３個となってますがグリッド形式と言いますか↓のように追加したり削除したり自由に配置できます。

こういうシステムチックというか管理機能特有のUIはあまり作ったことがなく、若干違和感がありますがまあご愛嬌。

４種類のグラフを表示できるようにしましたが、データ連携が難しかったのでユーザー側でAPIを作って参照する感じになります。

というのも、グラフで表示するようなデータは単純なSELECT文ではなく集計関数を使ったり独特な条件が複数求められるはずなので、それをプラグイン側で対応するのは困難だと判断しました。

ユーザー自身で独自のウィジェットを作りたいという要求があるような気がしたので、独自Reactコンポーネントを追加できるカスタムウィジェットというものを作りました。

これはStrapiの公式APIの一つ、Injection Zonesを使って実現しています。Injection ZonesはStrapiの公式プラグインでもかなり限定的な箇所でしか利用できず、情報もあまり出てこないかもしれません。

当プラグインにおけるカスタムウィジェットの利用方法はこちら。

他の公開プラグインもそうなんですが、UIメインみたいなプロジェクトはちょこっと直す度にブラウザテストするのが意外と負担になりますね。かといって自動化を導入するほどの規模や緊急度かと言うとそうでもないというジレンマ。

yasudacloudの日記