2019-12-15

使いやすいCMSはダッシュボードが重要では？と思ったのでサンプルを作ってみた #movabletype #mtappjquery

このエントリは Movable Type Advent Calendar 2019 15日目のエントリです。
昨日は nasa114 さんの「MT広島のSSL証明書を更新しました - MT広島」でした。

Movable Type に限らず bit part ではいくつかのCMSを使っている。
どのCMSを使うかは機能的な面（と好みとか）から選択していったり、指名できまっていたりするが、機能差はだいぶ減ってきていると思う。
（厳密には色々あるけどそこはおいといて。）

そんななかで bit part に依頼してもらったからには「使いやすいCMS」を提供したいと考えることが増えた。
MTAppjQuery はそのためにあるといっても過言ではないと思う。

「なんでもできるCMS」ではなくて使いやすさを重要視したいなぁ、と改めて。

使いやすさの最初の判断基準としてのダッシュボード

使いやすいという表現、判断基準もだいぶ主観的で「何が使いやすいか？」は使うユーザーによってかなり違うところもあるので、一概にこれがあれば使いやすい、というのは難しい。

必要な機能があれば使いやすいと感じてもらえるのは当然として、それに加えて何か、、、と考えた時に「まずとっつきやすいかどうか？」なのではないかと。

CMSのリニューアル（CMS載せ替え）か、初めて CMS を使うかのどちらかが多いと思うので、基本的には新しいものを触るようなかんじがほとんどとなる。

そうなった時にログインして迷わずやりたいことまでいけるかどうか？がとっつきやすさ、最初に壁と感じるかどうかという視点で重要なのではないのかなぁと。

そのためには独自のダッシュボードを作ってみるのがいいのではないか？ということで今回MT7で試しに作ってみた。

この程度のことは日常的に当たり前のようにやってるよ、という方にはすみませんm(_ _)m


まず「ダッシュボード」と思ったのはどうしてもCMSの構成がCMSのデータなどの構造に依存してしまうところがあるという気がしたから。

もちろんWebサイトの構成とCMS内での構成が1:1であればわかりやすいとは思うが、データはデータ、Webサイトのページはページとなってくればやはり構成は変わってくると思う。

ユーザーに振られた権限によって表示されているメニューの内容が変わることで確かに迷いは減るが、メニューは基本的にCMSの構造にあわせたものが出ているので、やりたいことがあってもログインした時にわからない、となる可能性はある。

マニュアルなしでやりたいことができると要件も満たせていそう

CMSの操作はある程度の慣れが必要な部分もあるかもしれないが、基本的にマニュアルなしで触って更新できるのがいいのではないかと考えている。
ログイン方法とかCMSの前段階だけはマニュアルで補助するとして。。。

CMSを使ったプロジェクトということは、CMSでやりたいこと、要件をまとめて実装・開発されたものがログインして触っているCMSなわけで、その目的を満たすための動線を置いておけば、やりたいことはちゃんと満たせるんじゃないのかなぁと。

そういったカスタマイズをされている案件のダッシュボードなどをイベントとかのセッションなどでみたりすることもあるし、 bit part でも案件で作ったことはある。

MT7ではまだちゃんとやってないなー、とおもったので今回はその辺も含めてサンプルを自分で試しに作ってみた。

記事、ページ、コンテンツデータの編集画面は今回割愛

管理画面のカスタマイズという意味では MTAppjQuery は多くのサイトで使ってもらっていて嬉しい限り。

それらカスタマイズの多くは記事やコンテンツデータの編集画面の使い勝手向上に使われているんじゃないか？という気がしている。

そのような感じで編集画面のカスタマイズは日常的に考えられていて、どういうフィールドが使いやすいのか、構成が使いやすいのか？というのを考えられていると思うので今回はそっちについては割愛。

baigieさんのオウンドメディアの内容に激しく同意

ちょうどこのエントリを書いている時に、 baigie さんのオウンドメディアで SaaS のUIデザインの話が書いてあったが同意する内容ばかりだった。

SaaSがUIデザインに力を入れるメリット | knowledge / baigie
https://baigie.me/officialblog...

今回はダッシュボードだけに絞っているのでかなり部分最適に近いところはあるけど、それは CMS の箱に乗っかってやっているので、カスタマイズしすぎ注意というところもある。

CMS 側に考えてもらいたいところも多々あるとは思うけど、 お客さんからしたら SaaS かどうかとかは関係ないわけで、そういったものを提供しているという自負をもって CMS 案件はやっていきたいと思う。

Movable Type 7 のスタイルガイド

Movable Type 7 の管理画面をカスタマイズする際には Movable Type 7 のスタイルガイドを参照するとテイストを合わせる感じで管理画面のカスタマイズができる。

MT7 スタイルガイド : MT7 Styleguide
https://movabletype.github.io/...

今回ちゃんとみてみましたm(_ _)m

オリジナルのテイストを作ってもいいとは思うので、そのあたりは作業工数との相談ってかんじで。

ログイン直後のダッシュボードをカスタマイズ

ログイン直後のダッシュボードはデフォルトはこんな感じ（システム管理者）

これをカスタマイズしていく。
alt-tmpl でのカスタマイズではなく MTAppjQuery を使ったカスタマイズという前提で。

ユーザーのロールを元に情報を出し分けてしていけばいいと思うが、まずはダッシュボードの分岐はこんな感じで  mtappVars で取れる。

blog_id: 0
mode: "dashboard"
scope_type: “user” → "system" だとシステムのダッシュボード
screen_id: "dashboard"

なので user.js に書く分岐としては

if(mtappVars.scope_type == 'user' && mtappVars.blog_id == 0 && mtappVars.screen_id == "dashboard"){

こんな感じになる。

mtappVars の話については @tinybeans のブログ記事が参考になる。

MTAppjQuery が提供する mtappVars の中身を確認する | MTAppjQuery | かたつむりくんのWWW
https://tinybeans.net/blog/201...

あとはデフォルトで用意されている部分をガシガシ消していく。

左カラムのメニューをどうするかは悩んだのだけど、遷移した先ではみることになるので残しておくことにした。

それらを消した上で、必要なメニューやリンクを追加していく。


このメニューはどこを編集するのか？が実際の画面のキャプチャも入ってるとわかりやすいと思う。
この辺は案件で田村さんが実装してて「わかりやすい！」とおもったのでパクらせてもらったm(_ _)m

メニューのリンクとかが手動で作成する形にはなってしまうが、ダッシュボード用のHTMLをテンプレート管理するようにしてMTタグとか使ってやりつつ、それをどこかに出力しておいた上で、jsでロードするようなとり方をすれば良いと思う。

ロール・権限とユーザーの種類が多くなってくるとどうしても作業工数としては増えるところもありそうだし、センスよく使いやすいダッシュボードを用意する必要もある。

user.js のサンプルコードとしてはこんな感じ。

if(mtappVars.scope_type == 'user' && mtappVars.blog_id == 0 && mtappVars.screen_id == "dashboard"){
	$(".mt-secondaryPanel, #site_list").css({'display':'none !important'});
	$(".mt-secondaryPanel, #site_list").removeClass("d-md-block");
	$('.clearfix').hide();
	$('#page-title').after('<div id="custom_dashboard"></div>');
	$('#custom_dashboard').load('alt-tmpl/cp.html');
}

cp.html のサンプルはこんな感じ

<div class="row mb-6">
<div class="col-6"><div class="mt-productHeader mb-3">
  <div class="col-1">
    <h1 class="mt-productHeader__logo btn-group">
      <svg role="img" class="mt-icon--primary mt-icon--xlg"><title>追加</title><use xlink:href="/cms/mt/mt-static/images/sprite.svg#ic_addhtml"></use></svg>
    </h1>
  </div>
  <div class="col-11">
    <div class="row justify-content-end">
      <div class="col align-self-center">
    出版社情報の管理
      </div>
    </div>
  </div>
  </div>

  <div class="bpboard_links">
    <a href="#" class="btn btn-primary"><svg role="img" class="mt-icon--inverse mt-icon--sm"><title>追加</title><use xlink:href="/cms/mt/mt-static/images/sprite.svg#ic_add"></use></svg>新規作成</a>
    <a href="#" class="btn btn-default"><svg role="img" class="mt-icon mt-icon--sm"><title>追加</title><use xlink:href="/cms/mt/mt-static/images/sprite.svg#ic_edit"></use></svg>編集</a>
  </div>

    </div>
<div class="col-6"><div class="mt-productHeader mb-3">
  <div class="col-1">
    <h1 class="mt-productHeader__logo btn-group">
      <svg role="img" class="mt-icon--primary mt-icon--xlg"><title>追加</title><use xlink:href="/cms/mt/mt-static/images/sprite.svg#ic_addhtml"></use></svg>
    </h1>
  </div>
  <div class="col-11">
    <div class="row justify-content-end">
      <div class="col align-self-center">
    著者データの管理
      </div>
    </div>
  </div>
</div>

  <div class="bpboard_links">
    <a href="#" class="btn btn-primary"><svg role="img" class="mt-icon--inverse mt-icon--sm"><title>追加</title><use xlink:href="/cms/mt/mt-static/images/sprite.svg#ic_add"></use></svg>新規作成</a>
    <a href="#" class="btn btn-default"><svg role="img" class="mt-icon mt-icon--sm"><title>追加</title><use xlink:href="/cms/mt/mt-static/images/sprite.svg#ic_edit"></use></svg>編集</a>
  </div>

    </div>
</div>

使いやすいCMSを提供するのを諦めない

CMSは使ってもらってなんぼ、リニューアルした後からがスタートなのでこのダッシュボードをはじめとして最初に触れるところは力を入れていった方がいいんだろうなぁと。

慣れてきたらショートカットを自由に使えるとかそういう方法も提供してもいいのかもしれない。

ダッシュボードを出来るだけ効率的に作れるような仕組みも用意しておけば、最初の最初にクライアントなりお客さんが見る・触るときの印象も変わりそう。

CMS は当たり前のように採用されているけれど、実際に使う人の視点を忘れないようにこれからもやっていこうと改めて思った。
2020年も update して頑張っていこう！

Movable Type Advent Calendar 2019 明日は @hei_a 浅田さんです。
どんなエントリか楽しみですね。