簡単なダッシュボードウィジェットを作る（その2）

昨日に続いて、簡単なダッシュボードウィジェットを作る方法を解説します。
今日は、テンプレートの作り方と、ファイルのアップロード先について解説します。

2009年4月17日
昨日公開したサンプルファイルに一部不具合がありましたので、修正しました。

1.MTApp:Widgetタグ

ダッシュボードウィジェットに出力する内容は、テンプレートタグを組み合わせて作ります。

ウィジェットの全体は、「MTApp:Widget」というタグのブロックで表します。
このタグは、内部的にはdiv要素の組み合わせに変換されるようになっています。

MTApp:Widgetタグには、いくつかのモディファイアを指定することができます。
主に以下のモディファイアを指定します。

モディファイア	内容
id	ウィジェット全体のdiv要素に与えるIDを指定します。ただし、IDにはハイフンは含まないようにする必要があります（ハイフンが含まれていると、ダッシュボードからそのウィジェットを削除することができなくなります）。
class	ウィジェット全体のdiv要素に与えるクラスを指定します。一般に、「widget」というクラスと、オリジナルのクラスを与えるようにします。
label	ウィジェットの左上に表示するラベルを指定します。
can_close	ウィジェットを閉じられるようにする（右上に「×」のアイコンを表示する）場合は、「can_close="1"」のモディファイアを指定します。

2.ウィジェット内部の作成

ウィジェットの内部は、HTMLで作ります。
管理画面内の各ページにリンクするようにするには、リンクしたいページを実際に表示してそのアドレスを調べ、aタグを組みます。

また、MTVarタグやMTIfタグを使うこともできます。
MTVarタグ等で使える変数が、あらかじめ以下のように定義されています。

変数	内容
mt_url	mt.cgiのパス
static_uri	mt_staticディレクトリのパス
blog_id	ブログ単位のダッシュボードでは、そのブログのID システムメニューでは未定義
author_id	ログインしているユーザーのID

管理画面のアドレスを単純にコピー＆ペーストすると、複数のMTで同じテンプレートを使いまわすには、インストール先に合わせて、テンプレートを書き換えることが必要になってしまいます。
一方、リンク先のアドレスの中で、インストール先等によって変化する部分をこれらの変数に置き換えれば、MTのインストール先ディレクトリ等が変わっても、テンプレートの内容はそのままでウィジェットを出力することができます。

3.テンプレートの例

昨日の記事で、ダッシュボードウィジェットの画面の例を紹介しました。
そのウィジェットのテンプレートは、以下のような内容になります。

<mtapp:widget id="sample-widget" class="widget sample-widget" label="作業メニュー" can_close="1">
    <ul>
        <li><a href="<$mt:var name="mt_url"$>?__mode=view&_type=entry&blog_id=<$mt:var name="blog_id"$>">新しい記事を作成</a></li>
        <li><a href="<$mt:var name="mt_url"$>?__mode=list&_type=entry&blog_id=<$mt:var name="blog_id"$>">これまでに書いた記事の一覧</a></li>
        <li><a href="<$mt:var name="mt_url"$>?__mode=list&_type=comment&blog_id=<$mt:var name="blog_id"$>">コメントの確認</a></li>
    </ul>
</mtapp:widget>

4.ファイルのアップロード

テンプレートを作り終わったら、それをテキストファイルとして保存します。
テンプレートのファイル名は、config.yamlファイルの「template:」の行に書いたファイル名に合わせます。
また、テンプレート内に日本語を入れた場合は、ファイルの文字コードを、mt-config.cgiのPublishCharsetの設定に合わせます。

テンプレートのファイルは、config.yamlファイルとともにサーバーにアップロードします。
ファイルの配置は、以下のようにします。
なお、プラグインのディレクトリの名前は、プラグインのID（config.yamlファイルの「id:」の行でつけたID）に合わせます。

MTのディレクトリ
└ pluginsディレクトリ
   └ プラグインのディレクトリ
      ├ config.yamlファイル
      └ tmplディレクトリ
         └ テンプレートのファイル

例えば、config.yamlファイルの内容が昨日の記事のようになっている場合だと、以下のようにファイルをアップロードします。

MTのディレクトリ
└ pluginsディレクトリ
   └ DashboardWidgetSampleディレクトリ
      ├ config.yamlファイル
      └ tmplディレクトリ
         └ sample_widget.tmplファイル

5.サンプルファイル

昨日のconfig.yamlファイルと、今日のテンプレートファイルのサンプルは、以下からダウンロードすることができます。

DashboardWidgetSample1.zip

ダウンロードしたファイルを解凍すると、「DashboardWidgetSample」というフォルダができます。
このフォルダを、Movable Typeの「plugins」ディレクトリの中にアップロードすると、ウィジェットの動作を試すことができます。

なお、ファイルの文字コードはUTF-8になっています。
インストール先のMTの文字コードをUTF-8以外にしている方は、ファイルの文字コードをMTの文字コードに合わせて変換してから、アップロードしてください。

お知らせ