2009年12月25日にリリースされた「はてなブックマークブログパーツ」をブログ Movable Type につけてみた。

ブログサービスをお使いの方は、利用しているブログのボタンを押すだけでコードが取得できる。それを貼り付けるだけ。

Movable Type や WordPress などブログソフトウェアでは、

• はてなブックマークコメント表示ブログパーツ

を参考に以下のコードをブログ記事のテンプレートに貼り付け設置。新しくテンプレートモジュールを作成して管理もいいだろう。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js">
</script>
<script type="text/javascript">
HBBlogParts.commentInsertSelector = 'div.hateana-bookmark-comment';
HBBlogParts.permalinkSelector = 'div.asset-header h1 a';
HBBlogParts.permalinkAttribute = 'href';
HBBlogParts.permalinkPathRegexp = /\/archives\/\d+\.html$/;
</script>
<div class="hateana-bookmark-comment"></div>

設定は以下の4つが最低限必要。

• 「HBBlogParts.commentInsertSelector」にコメントが挿入される DOM Element を CSS セレクタで指定。「div.hateana-bookmark-comment」にしてみた。
• 「HBBlogParts.permalinkSelector」にブログのパーマリンクが記載されている DOM Element を CSS セレクタで指定。標準のままのテンプレートなら「div.asset-header h1 a」で可。
• 「HBBlogParts.permalinkAttribute」に HBBlogParts.permalinkSelector で取得した要素のどこにブログのパーマリンクの URL が記載されているか属性を指定。
• 「HBBlogParts.permalinkPathRegexp」にブログのパーマリンクにマッチする正規表現。アーカイブマッピングによって正規表現を調整。

ほかにも細かな設定が可能だ。デザインもスタイルシートで設定できる。

Twitterのツイートをウェブサイトやブログに表示するJavaScript × JSON に触発されて、ブログの更新情報も同じように表示する JavaScript × JSON を作ってみた。

1. 更新情報の json ファイルを出力。
Movable Typeの「インデックステンプレートを作成」から
タイトル「MTCallback」
出力ファイル名「mt.json」
テンプレートの種類「カスタムインデックステンプレート」
で以下のソースを貼り付けて保存。json ファイルを出力。

MTCallback([
<mt:Entries glue=",">
{
"created_at":"<$mt:EntryDate format="%x %X"$>",
"title":"<mt:EntryTitle escape="url" $>",
"url":"<mt:EntryPermalink$>"
}
</mt:Entries>
]);

記事を更新するごとに公開日時、タイトル、URLを含んだ json ファイルを出力してくれる。タイトルは URLエンコード化。

2. あとは、ページにjsonファイルまでのブログURLを設定した三行のソースを貼り付けるだけ。JavaScriptファイル (blogger.js) はダウンロードして使ってもOK。

<ul id="blog_update_list"></ul>
<script type="text/javascript" src="http://api.thingslabo.com/MTCallback/blogger.js"></script>
<script type="text/javascript" src="ブログURL/mt.json?callback=MTCallback"></script>

JavaScriptのソース (blogger.js) は、こんな感じの10行。

function MTCallback(MT) {
  var statusHTML = [];
  for (var i=0; i<MT.length; i++){
    var title = decodeURIComponent(MT[i].title);
    var url = MT[i].url;
    var date = MT[i].created_at;
    statusHTML.push('<li><a href="'+url+'">'+title+'</a> '+date+'</li>');
  }
  document.getElementById('blog_update_list').innerHTML = statusHTML.join('');
}

ブログサービスでも json ファイルで更新情報の出力に対応してほしいゾ。

ブログ記事を指定した日時に公開してしてくれる指定日投稿。テストもかねて。

cron の設定

Movable Typeでは、記事を日時指定で公開する機能がありますが。使う前に設定が必要です。スクリプトやプログラムを自動実行するための cron を利用します。設定ファイル crontab にプログラムを登録することで自動的に公開してくれます。

登録するプログラムは、toolsディレクトリにある run-periodic-tasks です。まずは、run-periodic-tasks に実行権限を与えます。

$ chmod +x /path/to/mt/tools/run-periodic-tasks

cron に登録。

$ crontab -e

crontab には、分 時 日 月 曜日コマンド の書式で設定。毎時間ごとに更新するように設定してみる。

0 * * * * cd /path/to/mt/; ./tools/run-periodic-tasks

注意点としては、まず mt までのディレクトリに移動後、プログラム run-periodic-tasks を指定すること。

0 * * * * /path/to/mt/tools/run-periodic-tasks

と横着しちゃうと

Can't locate MT/TheSchwartz.pm in @INC (@INC contains: ./lib ../lib extlib ../extlib
....

モジュールがないとエラーが出る。

共用サーバの管理画面で cron の設定管理が用意されている場合はそれを使えばかなり楽に設定できます。

Movable Typeでの指定日投稿は、cronのほかに複数の方法でできる。

• 指定日投稿や公開キュー等のスケジュール処理の設定
• crontab - Wikipedia

ブログ記事の編集画面で書いた記事を公開状態「日時指定」を選んで、公開日を設定保存するだけで、指定した日時に記事を公開してくれる。厳密には、cronに登録した日時に更新されるわけですが。