WebSig24/7 MT4分科会コミュの【MT4分科会第2回勉強会】ユーザー指向管理画面の設計と実装

【MT4分科会第2回勉強会】ユーザー指向管理画面の設計と実装 ( alt-tmplate とプラグインを使った管理画面のカスタマイズ )

■担当者：野田純生
■目的：「MT(OS)でサイト構築して、CMSをお客さんに渡して更新してもらう」とき、CMS利用者が迷わず、使いやすい管理画面を作ることでCMSのユーザビリティは向上し、利用者/制作者ともにハッピーになれます。

今回は、その考え方(設計)と具体的な方法(実装)を理解することによって、自分の理想の管理画面づくりの第一歩を踏み出すことを目指します。

■参加対象
受託制作のWeb制作でCMSにMT(OS)を選択し、顧客に提供する立場の人。主に実装担当者ですが、設計についてはディレクター等の提案・設計業務を行う人も対象に含みます(実装に近い立場のディレクターの人等にも良いと思います)。

■参加資格
少なくとも以下の3つについて理解していること
・MTのテンプレートタグ
・CSS
・HTML

■ゴール
エントリー編集画面に実際に手を入れて「プラスひとつの[かゆいところに手の届く]工夫」を実現できるところまでやります。

■Agenda

1) edit_entry.tmplを読んで、CMSで使われているMTタグの構成をざっと理解します。
2) alt-tmplとCMSContextプラグインを使い、MTタグだけでエントリー編集の拡張・改良にチャレンジします。
3) やり方のアウトラインを掴んだら、事前に用意した管理画面のスケッチを元に、編集画面のカスタマイズにチャレンジします*。

* やり方を理解した時点でアイデアが浮かべば設計し直しも有りです。

■事前準備
・ノートパソコンを持参してください。
・ローカルサーバー（XAMPP等)をインストールし、そこにMTOS 4.1以降をインストールしておいてください。
・CMSContextプラグインをダウンロードしてインストールしておいてください。
・エントリーの編集画面のキャプチャをプリントして何枚か用意しておくと設計の際に役立ちます。
・紙(A4の白い紙を何枚か)と筆記用具

CMSContextプラグイン
http://alfasado.net/contents/labs.html#labs03

■参加者課題
自分が実装したい改良後の管理画面のスケッチを事前に作成しておいてください。但し、「大モノ」を狙うと当日完成しない可能性もあるので、「かゆいところに手の届く一発ネタ」をイメージしてくれると良いと思います。

コメント(9)

最初
全て
最新の40件

[1] mixiユーザー 05月19日 18:13

トピック作成し直したのでDakinyさんからいただいたコメントが消えてしまいました。
なので、こちらにも貼付けておきます。

Dakiny@FreeJapanさんのコメント：

＞このグループの最大の魅力は参加しないと理解できない、「alt-tmplate を使った管理画面のカスタマイズ」ですね。

＞一見すると、プラグインに流れ勝ちですが、システムテンプレートのハックは、従来から使われた技で、それを安全に効率よくおこなう、「alt-tmplate を使った管理画面のカスタマイズ」は高度な要求を満たす上で必要なスキルだと感じます。

＞他のセミナーではもちろん、MT本にも意外と書かれていないテーマなので、MT構築を行う方は気にかけてもいいかなと思います。

[2] mixiユーザー 06月11日 18:15

WebSig24/7MT4分科会第2回勉強会 - ユーザー指向管理画面の設計と実装参加者の皆様へ

# 6月7日にメールでお送りした内容ですが、こちらにも貼付けておきます。

野田純生 (Junnama) です。
6月21日に開催されるWebSig24/7MT4分科会第2回勉強会 - ユーザー指向管理画面の設計と実装のテーブルを担当させていただきます。
皆様よろしくお願いします。

(続く)
当日のアジェンダについては、トピックの冒頭を参照ください。

また、以後の情報共有ややりとりについても上記のトピックを利用することとします。
※ファイルの共有が必要な場合は(面倒ですが)私を介してのやりとりとさせていただきます。

【当日までにご用意いただきたいもの】
・当日の成果を具体的なものとするために、以下の3点について用意をお願いします。
・不明点等あれば遠慮なくおたずねください。

■環境
実際に動作可能なMTOS (ローカルサーバー等) 環境

■当日実現したいことのスケッチ
まず、プロジェクトなのかプラグインなのかわかりませんが、名前をつけてください (名前大事、イメージ大事)。
わかりにくくて申し訳ないですが、添付の画像を参考に、何を実現したいかがわかるもの。添付のように実際の管理画面ベースでなくともワイヤーフレーム(線画のスケッチ)でも構いません。
添付のサンプルはエントリーの編集画面ですが、その他の画面でも構いません (例：ダッシュボードウィジェットとか)。また、添付サンプルはエントリー編集画面と出力されるテンプレートの対象を左右に配していますが、管理画面上で特定の動作をさせたい場合は、テキストで説明を書いていただければ構いません。
複数のスケッチがあっても構いませんが、当日の時間のこともあるので、そのあたり考えて設定ください。

■知識ベースでの事前準備
管理画面のカスタマイズ方法としては、以下の方法があります。

(1)管理画面のCSSに手を入れる方法
(2)MTの管理画面(App::CMS)のテンプレートに手を加える方法
(3)Transformerプラグイン (MT::App::CMS::template_source,MT::App::CMS::template_output,MT::App::CMS::template_paramコールバックに対する処理) を作成して行う方法
(4)プラグインによる拡張インターフェイス (ダッシュボードウィジェット、メニュー、ダイアログ、プラグインアクション、リストフィルタ等) に機能を追加する方法
(5)Bootstrapアプリとして別のcgiアプリケーションを作る方法

このうち、(5)はカスタマイズの範疇を超えているように思うので、今回は(1)～(4)を対象にします。管理画面のUI変更だけならば(1)(2)の方法だけで行えますが、(3)(4)になると若干の事前学習があったほうが良いと思います。(1)についてはWebの制作(XHTML,CSS)スキルで普通に対応できると思います。

(2)については、私がこれまでにごちゃごちゃブログに書いたり「Movable Type プロフェッショナル・スタイル」に書いたりしています。

[3] mixiユーザー 06月11日 18:15

(続きです)

参考になりそうなエントリーのURLを上げておきます。

http://junnama.alfasado.net/online/2008/01/mtmtoscms.html
http://junnama.alfasado.net/online/2008/01/alttemplatemt.html
http://junnama.alfasado.net/online/2007/07/moebabletype.html

書籍「Movable Type プロフェッショナル・スタイル」をお持ちでない方も、サンプルは以下から落とせますので可能なら見ておいていただければ。
http://alfasado.net/contents/labs.html#labs03

(3)についてはウェブ上にわかりやすく解説したドキュメントとかあるようでなかった気がします。(「Movable Type プロフェッショナル・スタイル」や「WebSiteExpert」のMovable Type特集で関根さんcheebowさん)が書かれているものも参考になるかと思います)。
MT3については以下のページがあるのですが (MT4については今週中に何か簡単なものを作成してどこかに上げます)。
http://www.sixapart.jp/pronet/developers/plugin/transformer.html

ダッシュボードウィジェット、メニュー/ダイアログについては以下
http://www.movabletype.org/documentation/developer/plugins/dashboard-widgets.html
http://www.movabletype.org/documentation/developer/plugins/creating-menu-items.html
http://www.movabletype.org/documentation/how-to-create-a-modal-dialog.html

サンプルプラグインとしては、以下のようなものがあります。

http://junnama.alfasado.net/online/2008/04/post_172.html
http://junnama.alfasado.net/online/2008/01/entryasset.html

また、前述の書籍「Movable Type プロフェッショナル・スタイル」にもメニュー、ダイアログ等のサンプルが入ってます。
http://alfasado.net/contents/labs.html#labs03

事前にスケッチが出来ましたら、一旦私宛にお送りいただくかmixiのコミュニティにアップしてください。実装の方針についてイメージがわかない方は少し事前にやりとりができればと思います。

それでは、よろしくお願いいたします。

[4] mixiユーザー 06月11日 18:18

たて続けにすいません。

本日、私のブログに関連するエントリーを上げました。

Movable Type管理画面の「壊れにくい」カスタマイズのために。
http://junnama.alfasado.net/online/2008/06/mt_6.html

プラグイン、alt-tmplともに、バージョンアップ等の際にメンテナンスしやすくカスタマイズしましょう、というテーマでTips等まとめてありますので、参加の方は目を通しておいてください。

[5] mixiユーザー 06月20日 21:27

結局2名の方から事前にいただきました...がっ、他の方、明日のテーマは決まってますか?

明日ですが、最初に各人にテーマを発表していただき、あとはひたすら実装という方向で行きたいと思います。わかんないことは何でも聞いてください。僕は時間と余裕があれば何か作りますが、基本ご質問等があればそちらを優先します。

あと、直前ですいませんがデータのやりとりがあったときのために、用意できる人はUSBメモリを持って来てください。

それでは明日よろしくお願いします。

[7] mixiユーザー 06月30日 14:09

当日デモしました2つのプラグイン、1つは(SideBarImageプラグン)ブログにアップしました。
http://junnama.alfasado.net/online/2008/06/websig247mt42.html

もうひとつ(TinyMCE)は、(半分以上は弊社のスタッフの成果物でもあるので、GPLと商用のデュアルライセンスですが...) 会社のサイトで公開しました。

http://alfasado.net/contents/news/200806281824.html

その他、ちびぽっぽさんの立てていた課題を試しに作ってみました。
エントリーの一括編集画面で、「タグ」を編集できるようにするものです。

http://junnama.alfasado.net/online/2008/06/30/EntryTagEditor.zip

ちょっと強引っぽい実装になっていますが少しだけ解説します。

一括編集のエントリー一覧画面のテンプレは、
/tmpl/cms/include/entry_table.tmpl

にあります。

よって、
/alt-tmpl/cms/include/entry_table.tmpl
にコピーを作り、これに手を入れます。

エントリー一覧画面で「タグ」等のmt_entry以外のテーブルのデータをプラグインでちょこちょこっと手を入れて表示させるのは実は結構やっかいで、実際は自前で実装しないと難しいのですが、(かなり)裏技を使って(template_outputコールバックでエントリーのIDを抽出して各エントリーをloadして)処理しています(なのでちと重くなります)。
参考程度ですが、alt-tmplとプラグインを組み合わせたサンプルとしてあげておきます。

その他、現場でやりきれなかった部分で、その後ひっかかっているところがあれば出来る限りここでフォローしますので、もしうまくいっていないところがあれば投げてみてください。

# うまくいった方も上げてくださいね～

[8] mixiユーザー 06月30日 20:12

>エントリーの一括編集画面で、「タグ」を編集できるようにするものです。
これ、すごくいいですね。参考になります。

[9] mixiユーザー 07月08日 10:52

こちらでのアナウンス遅くなりました。

MT分科会で作っていたプラグイン公開しました。

Movavle Type プラグイン/公開リクエストをダッシュボードに表示するプラグイン - PublishRequst
http://www.ark-web.jp/sandbox/wiki/336.html
[MTOS-Plugin] 公開リクエストをダッシュボード表示するプラグイン
http://shinchi.vox.com/library/post/mtos-plugin-%E5%85%AC%E9%96%8B%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-publishreq.html

動作させるにはJunnamaさんのCMSContextプラグインが必要です。（ステキなプラグイン、ありがとうございます＞Junnamaさん）

お役にたてたらうれしいです。

ログインすると、みんなのコメントがもっと見れるよ