他サイトのFeedを読み込んで表示するにはいくつかの方法があります。

Movable Type 4には、FeedAppLiteというプラグインがインストールされており、簡単にFeedを表示するテンプレートが作れますが、このテンプレートを再構築しない限り、最新の情報に更新されません。

ここでは、FeedAppLiteを使わずに、大黒屋本舗で公開されている、jsRSS++ v3.15というCGIを使ってリアルタイムにFeedを表示させています。

大黒屋本舗からCGIをダウンロードして、任意のフォルダにアップロードし、テンプレートを好みにあわせて書き換えればいいだけで、非常に簡単に行えます。

2009年1月26日追記

現在は、リアルタイムに他サイトのFeedを表示する（2）：リアルタイム再構築プラグインに変更しています。

本文や続きといったラベルはまだしも、タグやカテゴリ、キーワードといったラベルでは取っ付き難かったり、それらのフィールドを使ってURLを入力させたりする場合、管理者以外ではマニュアルでもなければ理解できません。

そこで、エムロジック放課後プロジェクトで公開されている、RenameLabel Pluginを使ってラベルの付け替えをしています。

管理画面の「デザイン」から「スタイル」を選択すると、「規定のスタイル」の他、「MT 4 スタイルライブラリ」からも新しいスタイルをダウンロードして使うことができます。

ここではオリジナルに作成したスタイルを、登録して利用する手順を紹介します。このサイトでも同様の方法でスタイルを適用しています。

オリジナルのスタイルを一から作成するよりも、気に入ったスタイルを真似て作るのが手っ取り早いと思います。

基本的には、デフォルトのスタイルシート(ベーステーマ:base_theme.css)の変更箇所を上書きするようなスタイルシートを作成することになります。こうすることでデフォルトのスタイルと互換性をもたせることで、デフォルトテンプレートに手を加えず、カスタマイズが可能になりますし、後々の変更も容易になります。

ちなみに、スタイルシート(メイン:styles.css)は、ベーステーマ（base_theme.css)を読み込む役目のスタイルシートです。

@charset "shift_jis";
/*
name: Marlins (独自スタイルの名前：なんでもよい)
designer: Hironori Shikida (独自スタイルの作成者：なんでもよい)
designer_url: http://koyo-marlins.biz/ (独自スタイルの作成者のサイトURL：なんでもよい)
layouts: layout-wtt, layout-twt, layout-wt, layout-tw (独自スタイルのレイアウト：後述)
*/

layouts: に書いてある、layout-wtt, layout-twt, layout-wt, layout-tw は、適用できるカラムレイアウトの種類です。

• layout-wttは3カラムで大少少
• layout-twtは3カラムで少大少
• layout-wtは2カラムで大少
• layout-twは3カラムで少大

です。

Movable Type 4 では、ネガネィブマージンという手法で、メインカラム（大：id="alpha"）が必ず先に来るようになっています。そのためスタイルシートの中に、

/* Wide-Thin-Thin */
.layout-wtt #alpha {
	width: 400px;
}
.layout-wtt #beta {
	width: 190px;
	margin-left: 30px;
}
.layout-wtt #gamma {
	width: 190px;
	margin-left: 30px;
}
/* Thin-Wide-Thin */
.layout-twt #alpha {
	margin-left: 220px;
	width: 400px;
}
.layout-twt #beta {
	margin-left: -620px;
	width: 190px;
}
.layout-twt #gamma {
	margin-left: 30px;
	width: 190px;
}
/* Wide-Thin */
.layout-wt #alpha {
	width: 610px;
}
.layout-wt #beta {
	width: 190px;
	margin-left: 40px;
}
/* Thin-Wide */
.layout-tw #alpha {
	margin-left: 230px;
	width: 610px;
}
.layout-tw #beta {
	margin-left: -840px;
  width: 190px;
}

と、それぞれのレイアウトに対応してカラムサイズと配置を記述しておくいことで、先ほどの、layouts: に書かれた内容が適用できるようになります。

プラグインをダウンロードしてアップロードし、管理画面にログインすれば自動的にデータベースのアップロードがされてすぐにインストールが完了します。

2008年12月16日現在のバージョンは1.02です

そこで、アルファ画像を扱うalphafilter.jsライブラリ[to-R]で紹介されているalphafilter.jsを使用しています。

head要素内に

<script type="text/javascript" src="alphafilter.js"></script>

とライブラリを読み込み、

<p class="alphafilter"><img alt="" src="http://koyo-marlins.biz/img/hogehoge.png" /></p>

としています。

htmlに直接書かれた画像も、

<img src="http://koyo-marlins.biz/img/hogehoge.png" class="alphafilter" alt="" />

のように、img要素にalphafilterというclassを直接指定すれば、透過されます。

このサイトでは、年度別アーカイブを作成する拡張プラグインを使っています。

詳細は、FiscalYearlyArchives Plugin 0.01公開 - Ogawa::Memorandaをご覧ください。

なお、現時点ではバージョンが0.03になっています。

詳しくは、Google Sitemapsへの更新通知を自動化するMovableTypeプラグイン - Open MagicVox.netをご覧ください。

使用するスクリプトは

• prototype.js
• ajaxCalendar.js
• dayChecker.js

です。

詳しくは、小粋空間: Ajax 月送りカレンダー（MT4版）をご覧ください。

//newmark.js
displayNewMark = function() {
  if (!document.getElementsByTagName) return;
  // passage time
  var passageTime = 168;
  // display mark
  var mark = 'New';
  var currentDate = new Date();
  var elements = document.getElementsByTagName('span');
  for (var i = 0, len = elements.length; i < len; i++) {
    if(elements[i].className == 'new') {
      var time = elements[i].firstChild.nodeValue.split(':');
      var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
      var currentTime = (entryDate.getTime () - currentDate.getTime())/(60*60*1000);
      currentTime = Math.ceil(currentTime);
      if(-currentTime <= passageTime){
        elements[i].innerHTML = mark;
        elements[i].style.display = 'inline';
      }
    }
  }
};

2.次にHTMLヘッダーテンプレートに次のタグを追加します。

<script type="text/javascript" src="http://<$mt:BlogHost$>/script/newmark.js"></script>

3.テンプレート中にNewマークを表示させるためのタグを記述します。

<span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span>

実例

<ul>
<mt:Entries lastn="5">
<li class="widget-list-item"><a href="<$mt:EntryPermalink$>" title="e<$mt:EntryID$>"><$mt:EntryTitle encode_html="1"$></a>(<$mt:EntryDate format="%b/%d"$>) <span class="new"><$mt:EntryDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
</mt:Entries>
</ul>

4.テンプレートの最後の部分に（本サイトでは</body>の直前）にスクリプトを呼び出す記述をします。

<script type="text/javascript">
//<![CDATA[
displayNewMark();
//]]>
</script>

5.最後にcssに次のようにスタイルを追加します。

/* New表示用 */
span.new {
	background: #fff;
	color: red;
	font-size: small;
	display: none;
}

6.まとめ

テンプレートに埋め込んだ日付を<span class="new">で囲み、cssとjavascriptで表示・非表示切り替えているわけです。

詳しくは、The blog of H.FujimotoのメールフォームプラグインV1.30（その1・概要）をご覧ください。

エントリーは1から12までありますが、基本は1から10まで、ajax化する場合は11も、さらにサイドバーへ表示する方法は12で書かれています。

メールフォームプラグインと、補助的に使用するGetQueryParamプラグインは、以下からダウンロードすることができます。ajax化する場合はprototype.jsもダウンロードします。また、ajaxのロード中に表示する画像はajaxload.infoというサイトで作成したものを使用しています

• MailForm_1_30.zip
• GetQueryParam_1_10.zip
• prototype.jsのサイト（英語）
• ajaxload.info（ajaxロード画像作成サイト）

なお、XHTML 1.0 Transitionalの場合はそのままでかまいませんが、Strictの場合は、テンプレートとスクリプトに若干の変更を加えます。

<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi" name="mail_form">

を、

<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi" id="mail_form">

と書き換えます。

次に、「document.mail_form」では、form要素のname属性の値を得ることになり、id属性の値が得られないためスクリプトエラーになります。そのため、「document.name属性の値」ではなく、「document.forms['id属性の値']」としてやる必要があります。オリジナルのコードは、

<script type="text/javascript">
<!--
function mail_ajax(mode)
{
    $("send_status").style.display = 'block';
    document.mail_form.mail_preview.disabled = true;
    document.mail_form.mail_post.disabled = true;
    var params = Form.serialize("mail_form");
    if (mode == "post") {
        params += "&mail_post=1";
    }
    else if (mode == "preview") {
        params += "&mail_preview=1";
    }

    new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",

                     { method : "post",

                       parameters : params,

                       onComplete : displayMailResult,

                       onFailure : failureMailResult });

    return false;

}

function displayMailResult(obj)

{

    document.mail_form.mail_preview.disabled = false;

    document.mail_form.mail_post.disabled = false;

    $("send_status").style.display = 'none';

    $("ajax_mail").innerHTML = obj.responseText;

}

function failureMailResult(obj)

{

    alert('メールの処理が失敗しました。');

    document.mail_form.mail_preview.disabled = false;

    document.mail_form.mail_post.disabled = false;

    $("send_status").style.display = 'none';

}

//-->

</script>

ですが、次のコードに書き換えます。

<script type="text/javascript">
<!--
function mail_ajax(mode)
{
    $("send_status").style.display = 'block';
    document.forms['mail_form'].mail_preview.disabled = true;
    document.forms['mail_form'].mail_post.disabled = true;
    var params = Form.serialize("mail_form");
    if (mode == "post") {
        params += "&mail_post=1";
    }
    else if (mode == "preview") {
        params += "&mail_preview=1";
    }

    new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",

                     { method : "post",

                       parameters : params,

                       onComplete : displayMailResult,

                       onFailure : failureMailResult });

    return false;

}

function displayMailResult(obj)

{

    document.forms['mail_form'].mail_preview.disabled = false;

    document.forms['mail_form'].mail_post.disabled = false;

    $("send_status").style.display = 'none';

    $("ajax_mail").innerHTML = obj.responseText;

}

function failureMailResult(obj)

{

    alert('メールの処理が失敗しました。');

    document.forms['mail_form'].mail_preview.disabled = false;

    document.forms['mail_form'].mail_post.disabled = false;

    $("send_status").style.display = 'none';

}

//-->

</script>

とします。