仕方が無いのでPHPかJavaScriptで何とか...と思ったら、きままにポロポロさんが参考にしたdiving to ...さんがAjax版を用意されていた。
らっきー、ということで手を合わせて「頂きます」。
以下、設置メモ。
- 月別のアーカイブテンプレートを作成。
カレンダー部の実ファイルになるテンプレートを作成する。
[手順]
- メイン・メニュー > (BLOG名) > テンプレート を開く。
- 「新しいアーカイブ・テンプレートを作る」をクリック。
- 「テンプレートの名前」は参照元に習って"AjaxCalendar"と入力。
- 「このテンプレートにリンクするファイル」は空欄のまま。
- 「テンプレートの中身」はは以下を記述。
ただし、カレンダーからのリンク先を日別のアーカイブにするなど、カレンダー部分のテンプレートを編集している場合は、同様の修正を行うこと。
<table summary="投稿されたエントリーへのリンク付き月間カレンダー">
<caption>
<MTArchivePrevious>
<a href="#" onclick="calendarInit('<MTArchiveDate format="%Y">',
'<MTArchiveDate format="%m">');">«</a>
</MTArchivePrevious>
<$MTArchiveDate format="%Y / %m"$>
<MTArchiveNext>
<a href="#" onclick="calendarInit('<MTArchiveDate format="%Y">',
'<MTArchiveDate format="%m">');">»</a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="日曜日">S</th>
<th abbr="月曜日">M</th>
<th abbr="火曜日">T</th>
<th abbr="水曜日">W</th>
<th abbr="木曜日">T</th>
<th abbr="金曜日">F</th>
<th abbr="土曜日">S</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
- 作成したテンプレートをアーカイブに関連付ける。
[手順]
- メイン・メニュー > (BLOG名) > 設定 > アーカイブ を開く。
- 「新しく、テンプレートとアーカイブを関連付ける。」の「アーカイブの種類」に"月別"を選択。
- 同じく「テンプレート」に"AjaxCalendar"を選択。
- 「追加」ボタンを押す。
- 上で関連付けしたアーカイブとして出力されるカレンダーモジュールの出力先・ファイル名を指定する。
参照元の説明にはこの手順がないので、(デフォルトで作成される)月ごとのアーカイブファイルとして作成してしまう。
従来の月ごとのアーカイブが不要であればこの手順は飛ばしても良い。
[手順]
- メイン・メニュー > (BLOG名) > 設定 > アーカイブ を開く。
- 「アーカイブ」の"AjaxCalendar"テンプレートの「アーカイブ・ファイルのテンプレート」に任意の出力先・ファイル名を指定。
例)archiveディレクトリ配下の年月のパスにファイル名を"calendar.html"として出力する場合
<$MTArchiveDate format="%Y/%m/"$>calendar.html
- 「変更を保存」ボタンを押す。
- カレンダーを操作するJavaScriptファイルを配置する。
ここでは、MovableTypeのインストール先(WebからはWeblogのトップに見えるディレクトリ)に"ajaxcalendar2.js"として配置することにする。
[手順]
- 以下のJavaScriptの"xmlHttp.open"で対象にしているカレンダーモジュールの入力元を、上で指定したカレンダーモジュールの出力先・ファイル名に編集する。
例)archiveディレクトリ配下の年月のパスにファイル名を"calendar.html"として出力するようにした場合
xmlHttp.open('GET', "/mt/archives/" + year + "_" + month + ".html");
を
xmlHttp.open('GET', "/mt/archives/" + year + "/" + month + "calendar.html"
function showCalendar(xmlHttp) {
return function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if (xmlHttp.responseText) {
var calendarElement = document.getElementById('calendar')
calendarElement.innerHTML = xmlHttp.responseText;
} else {
alert("failed");
}
}
}
}
function calendarInit(year, month)
{
var xmlHttp = getXmlHttpObject();
xmlHttp.onreadystatechange = new showCalendar(xmlHttp);
xmlHttp.open('GET', "/mt/archives/" + year + "_" + month + ".html");
xmlHttp.send(null);
return false;
}
function getXmlHttpObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
// xmlhttp.overrideMimeType("text/xml");
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
- 編集したJavaScriptを"ajaxcalendar2.js"として、FTPするなりして配置する。ファイルのパーミッションはWebサーバが触れれば良い(実行権は不要)。
- 以下のJavaScriptの"xmlHttp.open"で対象にしているカレンダーモジュールの入力元を、上で指定したカレンダーモジュールの出力先・ファイル名に編集する。
- カレンダーを表示するテンプレートを、月めくり対応に編集する。
[手順]
- メイン・メニュー > (BLOG名) > テンプレート を開く。
- 「メインページ」など、カレンダーを表示したい全てのテンプレートのHTMLのヘッダ部分に以下を追加。
<script type="text/javascript" src="<$MTBlogURL$>ajaxcalendar2.js"></script>
上記例はJavaScriptファイルの入力元としてMovableTypeのインストール先を絶対指定しているので、必要に応じて上記の"<$MTBlogURL$>"をJavaScriptファイルの配置位置に変更する。 - 上で対象にしたカレンダーを表示したい全てのテンプレートの<body>タグを以下に変更。
<body onload="calendarInit('<$MTDate format="%Y"$>', '<$MTDate format="%m"$>');">
すでにbodyタグにonloadを指定している場合は、HTMLのヘッダ部分に以下に追加し、bodyタグのonloadを削除する。<script language="JavaScript">
window.onload=WindowOnLoadHandler;
function WindowOnLoadHandler() {
(もともとonloadで呼び出していた処理)
calendarInit('<$MTDate format="%Y"$>', '<$MTDate format="%m"$>
}
</script>
- 上で対象にしたカレンダーを表示したい全てのテンプレートのカレンダーを表示したい部分を、以下の例のように<div id="calendar">タグと</div>タグでくくる。
なお、「メインページ」テンプレートのカレンダー部分は、デフォルトで<div id="calendar">でくくられているようなので、既にそうなっていたらこの手順は飛ばす。
また、ここで紹介する方法に対応していないブラウザのために、もともとあるカレンダー部分は削除せず残しておく。
<div id="calendar">
(カレンダー部分)
</div>
- 再構築する。
投稿者 Kobito : 2005年04月28日 02:21




このエントリーのトラックバックURL
トラックバックはご自由にどうぞ。報告は不要です。
http://kobito.dnsalias.com/kobito/mt/mt-application/mt-tb.cgi/11
このエントリーへのコメント
Cool stuff. Keep up the good work. I finished the 6th ball: http://johnedithnotes.blogspot.com/2005/10/slatecom.html , 1 small clove garlic
投稿者 Juan Freeman : 2005年10月10日 23:03
コメントしてください
ご感想など残してもらえると励みになります