Craft CMS の Guide プラグインをつかってログイン直後のダッシュボード(ウィジェット)をカスタマイズする #craftcms

このエントリは Craft CMS Advent Calendar 2019 16日目のエントリです。
15日目は Ippei Sumida さんの「Rollbarプラグインを使ってサイトのエラーを通知する」でした。
Sentry みたいなものなのかな、、、 Sentry もエラー飛んできたのをみたことがある程度で、ちゃんと使えてないけど Rollbar もみてみよう。
ユーザーがログインした直後のダッシュボードの話を Movable Type Advent Calendar 2019 の 15日目のエントリとして書いた。
使いやすいCMSはダッシュボードが重要では?と思ったのでサンプルを作ってみた
https://asset.mersy418.com/arti…
今回は Craft CMS の場合どうするか?という感じで考えてみる。
ダッシュボードのウィジェットを利用する
Craft CMS はダッシュボード(cp)にウィジェットが使えるのでそれを使うことである程度調整ができる。
Sprout Notes プラグインを使った例は以前試してみた。
このプラグインをつかって、必要な要素をちゃんと入れてあげれば、使いやすい導線を定義することは可能。
ユーザーの権限で調整するというのは難しいから、そこは何かしら考える必要はありそう。
menuの方になるが、ユーザーによってかえるといったことは可能なプラグインもありそう。
CP Nav - Features | Verbb
https://verbb.io/craft-plugins…
Guide プラグインのウィジェットを利用する
他のサンプルとして、今回は Guide プラグインを試してみる。
プラグインをインストールしたところ。

このプラグインにはダッシュボード用のウィジェットが用意されている。
使い方は色々ありそうだが、今回はひとまずこのダッシュボード用のウィジェットに限定してみる。
Guide プラグインの設定周り
テンプレートでのカスタマイズもできるのでその設定と利用するアセットのボリュームを設定する。

クライアント名、自社名を変数に設定しておける。

ガイドをカスタマイズするときに利用できるコンポーネントを設定する。

ウィジェットのスタイルを上書きできる。デザインセンスが問われる。。。

Guide の作成
このような感じでガイドを新規に作成することが可能。

真ん中のところに、左からコンポーネントを持っていくことで、コードが挿入される。

これはこのコンテンツで編集するパターンだが、テンプレートで管理するタイプ

既存URLをiframe で埋め込むタイプがある。

ガイドには表示する対象を制御することも可能。

ただこれはガイドごとに権限を持つのではない様子。ガイドを表示する権限を持っているかどうかをみてるっぽい。
テンプレートで管理する方法を取った場合は、テンプレートでみているユーザーの情報をもとに判定するといったこともできるかもしれない。
それは次回試す。
ガイドを使う場所を選択する
作成したガイドはどこで使うか?を選択することができる。

Dashboardで表示できるようにした上で、表示するWidgetをGuideにして作成したガイドを選択する。

この選択・設定はユーザーごとにやる必要がある。
別のユーザーはこのような感じのデフォルトのまま。

なので、ここは Default Dashboard プラグインを使えば、共通化することができる。

Default Dashboard
https://plugins.craftcms.com/d…
プラグインを入れて設定をする。

これで他のユーザーにも同じ Guide プラグインのウィジェットが表示された状態になる。

Craft CMS のスタイルにあわせて管理画面はデザインの調整した方がそれっぽくはなると思う。
もちろん、CSSとかを調整して独自CMSっぽい見せ方もあるとは思う。
MT7の場合はスタイルガイドが公開されていたが、Craft CMS はそれっぽいのがなかったけど、CP Style Guide プラグインがある。
CP Style Guide
https://plugins.craftcms.com/c…
これをみながら、Craft CMS っぽいダッシュボードのカスタマイズをしていけば良さそう。
ダッシュボードというページ名の見出しと、ガイドに含まれる見出しが両方出てしまうのがちょっといけてないかな、という気はする。
とはいえ Guide プラグインをつかうことで、ログインした直後にユーザーが迷わず、必要な導線を提供するということはできるとは思う。