ユーザーが自由に編集できる Movable Type のダッシュボードウィジェットを作ってみた

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

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

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

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

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 の1行目と最終行以外を削除します。

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

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

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

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

<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" とすることで、ログイン中のユーザーの記事だけが1件表示
    ※ author_name はもともと管理画面に渡されている変数
  3. mtapp:widget タグの前で mt:Entries を回して結果を変数にセットすることで、mtapp:widget タグで label="$entry_title" のようにして、ウィジェットのタイトルもユーザーが自由に設定できる。

これで完成です。

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

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

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

UserEditDashboard

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

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...