Movable Type の管理画面にログインしたときに最初に表示されるユーザーダッシュボード。そこに、ユーザーが自由に編集できるダッシュボードウィジェットを作ってみました。

ユーザーのタスクリストに、備忘録に、自分のエントリー一覧に、ご自由にお使いください！という感じです。

ダッシュボードウィジェットのひな形を用意する

ひな形はアルファサードの野田さんがブログで公開していますので、そちらをダウンロードします。DashboardSample.zip というやつです。

• MTCafe 福岡でダッシュボードの作り方をライブでやってきたのでそのサンプルとか。 - Junnama Online

config.yaml を編集する

ダウンロードしたファイルを解凍すると、中に config.yaml というファイルが入っています。

name: DashboardSample
widgets:
 DashboardSample:
 label: サンプルダッシュボードウィジェット
 plugin: $DashboardSample
 template: DashboardSample.tmpl
 singular: true
 set: main

まずはこのファイルを編集します。今回は「UserEditDashboard：ユーザーエディットダッシュボード」という名前のダッシュボードにします。

name: UserEditDashboard
widgets:
UserEditDashboard:
 label: ユーザーエディットダッシュボード
 plugin: $UserEditDashboard
 template: UserEditDashboard.tmpl
 singular: true
 set: main

ディレクトリ名とファイル名を変更する

次に、config.yaml が入っているディレクトリ名と、tmpl ディレクトリの中にあるファイルの名前を、上記の config.yaml の内容と合わせて変更します。

ここでは、以下のようになります。

• UserEditDashboard
  • config.yaml
  • tmpl
    • UserEditDashboard.tmpl

ダッシュボードの中身用のブログを作成する

ここで、一度ダッシュボードウィジェットファイルの編集から離れます。

次に、ダッシュボードウィジェットの中身を管理するためのブログを作成します。

ここでは「ダッシュボードウィジェット管理用ブログ」とします。ブログを作成したら、そのブログ ID を控えます。今回は「20」でした。

このブログはテンプレートは必要ないので、システムテンプレート以外はすべて削除します。削除しておかないと、誤って公開してしまうと言うトラブルを起こしかねませんね。

ブログを作成したらさっそくブログ記事を投稿します。今回は、次のような内容で、「オレオレだっしゅぼーど」というタイトルのブログ記事を作成しました。

<h2>タスクリスト</h2>
<ul>
 <li>7/13までにDBとファイルのバックアップを取って別サーバーに転送するPerlスクリプトを書く。</li>
 <li>夏休みの計画を立てる。</li>
 <li><a href="http://www.sixapart.jp/movabletype/news/2012/06/18-1400.html">MTDDC</a>のライトニングトークのネタを考える。</li>
 <li>日中の眠気対策を考える。</li>
</ul>

<h2>最近書いたブログ記事</h2>
<mt:Entries author="okuwaki" include_blogs="all" exclude_blogs="20">
 <mt:EntriesHeader><ul></mt:EntriesHeader>
 <li><a href="<$mt:CGIRelativeURL$><$mt:AdminScript$>?__mode=view&_type=entry&blog_id=<$mt:BlogID$>&id=<$mt:EntryID$>"><$mt:EntryTitle escape="html"$></a></li>
 <mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

ここでは MT タグも書きたかったのでエディタフォーマットを「なし」にしましたが、リッチテキストエディタにすれば、クライアントさんでも楽に編集できるかもしれないですね。

ちなみに、上記テンプレート下段の li > a 要素の href 属性みたいに書いておけば、直接そのブログ記事の編集画面に飛べるから便利です。mt:Entries のモディファイアは自分の環境に合わせて変更してください。

テンプレートファイルを作成する

またダッシュボードウィジェットファイルの編集に戻ります。

上記で作成したブログ記事をダッシュボードに反映させるためのテンプレートを書きます。編集するファイルは、UserEditDashboard.tmpl です。

• UserEditDashboard
  • config.yaml
  • tmpl
    • UserEditDashboard.tmpl

まず、サンプルファイルの状態の UserEditDashboard.tmpl の１行目と最終行以外を削除します。

その１行目と最終行を次のように編集します。

<mtapp:widget id="UserEditDashboard" class="widget UserEditDashboard" label="ユーザーエディットダッシュボード" can_close="1">
</mtapp:widget>

そして、この２行に加えて、ダッシュボードウィジェットの中身となるコンテンツを書いていきます。

今回は、先ほど作成したブログ記事を表示させたいので、次のようなテンプレートになります。

<mt:Entries include_blogs="20" author="$author_name" lastn="1">
 <$mt:EntryTitle escape="html" setvar="entry_title"$>
 <mt:SetVarBlock name="entry_content">
 <$mt:EntryBody mteval="1"$>
 <$mt:EntryMore mteval="1"$>
 </mt:SetVarBlock>
</mt:Entries>

<mtapp:widget id="UserEditDashboard" class="widget UserEditDashboard" label="$entry_title" can_close="1">
 <$mt:Var name="entry_content"$>
</mtapp:widget>

このテンプレートのポイントは次のとおりです。

1. include_blogs には先ほど作った「ダッシュボードウィジェット管理用」ブログのIDを設定
2. author="$author_name" lastn="1" とすることで、ログイン中のユーザーの記事だけが１件表示
   ※ author_name はもともと管理画面に渡されている変数
3. mtapp:widget タグの前で mt:Entries を回して結果を変数にセットすることで、mtapp:widget タグで label="$entry_title" のようにして、ウィジェットのタイトルもユーザーが自由に設定できる。

これで完成です。

ダッシュボードウィジェットのインストール

完成した UserEditDashboard ディレクトリを、MTインストールディレクトリ直下のplugins の中に入れます。

ユーザーダッシュボードにアクセスして、ウィジェットを表示させれば完了です！

表示すると以下のようになりました。あとは MTAppjQuery の user.css などでスタイルを当てれば完璧ですね！

以上です。