MT:ダッシュボードにブログパーツを表示させてみた

Movable Typeのダッシュボードにプラグインとして、ウィジェットを追加することができるとのことで、あれこれ試して「ブログパーツ」を表示するというのができました。

最近ブログパーツとか使わないというか、それほどかまったりすることがないのですが、ほんの練習がてら作ってみたものです。ウィジェット作成の方法ですが、The blog of H.Fujimotoさまの以下の記事から始まる続き物記事にて詳しい解説があり、参考にさせていただきました。

以下に作成した手順を記しておきます。これはネタ的なものでして、実用性とか全く考えてませんのであしからず。例としてBlogPet（ブログペット）を表示させるというのを示します。まずはキャプチャから。

dashbordwidget_blogparts.gif

手順は以下のような感じです。

手順１：ブログペットを表示させるHTMLファイルを作る

テンプレート側で、インラインフレームにて呼び出す、という形にしています。因みに自分のVoxブログにて表示させていますが、あれもインラインフレームが使われています。

テンプレート自体はブログペットを表示させるだけの簡単なものでいいかと思います。blogparts.htmlとか適当なファイル名で保存して、サーバにアップしておき表示されることを確認しておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>blogpet</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="robots" content="noindex,nofollow" />
<style type="text/css">
object,embed{ border: 0px none; }
</style>
</head>
<body>
＜－－ここにブログペットを表示させるコード　－－＞
</body>
</html>

手順２：config.yamlとテンプレートを作成

config.yamlのコード

ここではidをWidgetBlogparts、テンプレートファイルは、blogparts_widget.mtmlとし、ファイル名config.yamlで保存します。

name: Widget Blogparts
id: WidgetBlogparts
description: ブログパーツを表示
version: 1.0
widgets:
  blogparts_widget:
    label: ブログパーツ
    plugin: $WidgetBlogparts
    template: blogparts_widget.mtml
    singular: true
    set: sidebar

テンプレート（blogparts_widget.mtml）のコード

ファイル名をblogparts_widget.mtmlとして、tmplという名前のフォルダを作成してその中に保存します。以下は上記のブログペットを表示するページをウィジェットに取り込むためのテンプレートの例です。

<mt:setvar name="blogpetID" value="ブログペットのID（貼り付け用コード内にある32文字くらいの英数）" />
<mt:setvar name="src" value="http://example.com/blogparts.html" />

<mt:setvartemplate name="showBlogparts">
<iframe frameborder="0" marginwidth="2"
marginheight="2" longdesc="http://www.blogpet.net/profile/view/<$mt:getvar name="blogpetID"$>" src="<$mt:getvar name="src"$>" width="134" height="324" scrolling="no"></iframe>
</mt:setvartemplate>

<mtapp:widget id="WidgetBlogparts" class="widget" label="ブログパーツ" can_close="1">
    <mt:getvar name="showBlogparts">
</mtapp:widget>

手順３：ファイルをまとめてプラグインディレクトリに入れる

ファイルの準備が整ったらフォルダにまとめていつものようにMTシステムのpluginsディレクトリに収めます。

フォルダの構成とかはこのような感じです

  • blogpartsWidget
    • tmpl
      • blogparts_widget.mtml
    • config.yaml

最後に

マルチブログ機能とかで、複数ユーザのパーツの対応とか考えたけど、ややこしくなってきそうなのでこの辺でやめておきます。この理屈でいうと、いくつでもパーツをつけれそうなのですが、ま・あまりつけ過ぎるとダッシュボードがカオス状態に！くれぐれもご注意を。次回はもう少しマトモなのをやってみたいと思います。以上です。

Comments:

コメントをどうぞ。書き込む場所が不明な場合やサイトオーナーへのコンタクトは、GuestBookまでお気軽にどうぞ

blog comments powered by Disqus

Access Ranking of the week