Ajax版　月間移動可能なMovableTypeカレンダー

Ajax movabletype

以前iframeを使用した月間移動可能なMovableTypeのカレンダーを作成しました。今回、デザインを変更したついでに、カレンダーの仕組みも変更しました。動作する環境は以下のとおり

サーバ
PHPが使用可能なこと

動作確認の取れたクライアント
MS IE6.0
Firefox1.02
Mozilla1.7.3

PHPが使用できることが前提となっています。本来はPHPも使用したくなかったのですが、IEでこの仕組みを使うためにはHTTPヘッダーのContent-typeをtext/xmlにしてやる必要があったためです。Firefoxはそこの部分を書き換えてくれるメソッドがあるんですけどね。。。もしからしたら解決方法があるのかもしれません。知っている方がいたら教えてください！！

今回の月間移動可能なMovableTypeカレンダーのしくみは流行のAjaxです。ですから、現在のOperaでは動きません。ただ、Operaのバージョン7.60から使えるようになるらしいです。頑張って早くリリースして欲しいな。

前置きが長くなってしまったので、そろそろ本題に。

設置の方法ですが。以下の順序で行います。

  1. JavaScriptファイルの配置
  2. メインインデックステンプレートの編集
  3. 月別のアーカイブテンプレートの作成
  4. PHPテンプレートの編集

i. JavaScriptファイルの配置

ajaxcalendar.jsをDLして自分のサーバの任意の場所に配置してください。もちろん、Webから見える場所に配置してくださいね。

ii.メインインデックステンプレートの編集

編集といってもほんの少しです。現在カレンダーが表示されている部分を<div id="calendar"> </div>で囲ってください。id="calendar"で囲まれた部分にJavaScriptがカレンダーを新しく書き込みます。Operaなどの対応していないブラウザが参照できるように既存のカレンダーは残しておきましょう。次はbodyタグを次のように編集

<body onload="calendarInit('<$MTDate format="%Y"$>', '<$MTDate format="%m"$>');">

最後にHTMLのヘッダ部に次の文を追加

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

ちなみにウチのテンプレートはこんな感じです

iii.月別のアーカイブテンプレートの作成

これは新規に作成しましょう。MovableTypeにログインして、左のメニューからテンプレートを選択します。そうするとアーカイブに関連したテンプレートというリンクがあるのでこれをクリック。テンプレートの名前はAjaxCalendarとでもしておきましょうか。内容は下記のとおり。
<?xml version='1.0' encoding='utf-8' ?>

<calendar>

<date year="<MTArchiveDate format="%Y">" month="<MTArchiveDate format="%m">" />

<MTArchivePrevious>

<prev year="<MTArchiveDate format="%Y">" month="<MTArchiveDate format="%m">" />

</MTArchivePrevious>

<MTArchiveNext>

<next year="<MTArchiveDate format="%Y">" month="<MTArchiveDate format="%m">" />

</MTArchiveNext>

<MTCalendar month="this">

<MTCalendarWeekHeader><week></MTCalendarWeekHeader>

<MTCalendarIfEntries><MTEntries lastn="1"><day href="<$MTEntryLink archive_type="Daily"$>" num="<$MTCalendarDay$>" /></MTEntries></MTCalendarIfEntries>

<MTCalendarIfNoEntries><day num="<$MTCalendarDay$>" /></MTCalendarIfNoEntries>

<MTCalendarIfBlank><day num="" /></MTCalendarIfBlank>

<MTCalendarWeekFooter></week></MTCalendarWeekFooter></MTCalendar>

</calendar>

iv.PHPテンプレートの編集

こちらは先ほどのページから新しいインデックス・テンプレートを作るのリンクをクリック。名前も適当にCalendarXMLとか決めます。出力ファイル名はcalndarxml.phpにします。内容は下記のとおり。
<?php

$year = $_REQUEST['year'] + 0;

$month = $_REQUEST['month'] + 0;
header('Content-Type: text/xml');

$month = sprintf("%02d", $month);

@readfile('./archives/' . $year . '_' . $month. '.html');

?>

最後に、ウェブログの設定→アーカイブの設定で新しく、テンプレートとアーカイブを関連付けるという部分で、先ほど作ったAjaxCalendarを月別に追加します。追加した後、優先をAjaxCalendarにに設定します。

これでサイトの再構築を行えば無事Ajaxカレンダーが表示されるはずです。