Ajaxを使ったカレンダー(MT5)

 Movable TypeのテンプレートでもってAjaxを使った便利な月送りカレンダーが作れます。作り方は小粋空間のAjax 月送りカレンダー(MT4版)を参考にしました。同様の方法でMT5でもきちんと機能しました。ここではMovable Type 5以降での設定方法を紹介します。

Ajaxのライブラリースクリプトをダウンロードと設定

ダウンロード
1. Ajaxのライブラリースクリプトをダウンロードします。MT-Ajax-calendar.zip
2. 適当な場所に解凍し、MT-Ajax-calendarフォルダーの中に含まれるajaxCalendar.js、dayChecker.js、prototype.jsの3つのファイルをMTのパブリッシングディレクトリの最上位(index.htmlやindex.phpのあるディレクトリ)にアップロードします。特にこれらのファイルの場所は決まっていませんが、スクリプトを呼び出す際にトップディレクトリの方がわかりやすいです。

設定
1. テンプレートモジュールの「HTMLヘッダー」内に、以下のコードで上記のライブラリースクリプトを呼び出します。
<script type="text/javascript" src="<$mt:BlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>dayChecker.js"></script>
※もしこの3つのスクリプトを別のディレクトリに配置している場合はそのディレクトリを指定します。

2. コードを書いたら(コピーしたら)保存します。

アーカイブテンプレートの設定

 カレンダーをクリックした際にそれらのブログにリンクできるようにアーカイブテンプレートの設定をします。
1. 左メニューの「デザイン」から「テンプレート」を選択します。
2. アーカイブテンプレートの作成で「ブログ記事リスト」を選択します。これで新しいブログ記事リストを編集する画面に移ります。
3. テンプレートの編集画面で、テンプレート名を「カレンダー」にします。(もちろんテンプレート名は任意ですが、ここではわかりやすく「カレンダー」にしています。)
4. 以下のコードをテンプレートに貼り付けます。
<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$>
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a>
</MTArchiveNext>
</caption>
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
5. 下部のテンプレートの設定を開きます。ファイルへのリンクは空のままにしておきます。アーカイブマッピングから「新しいアーカイブマッピングを作成」を選択(*1)し、種類で「月別」を選択し「追加」ボタンを押します。「yy/mm/index.html」というマッピングが作成されます。
6. 新しく作成した月別のアーカイブマッピングからプルダウンで「カスタム」を選択します。「calendar/%y/%m/%i」を入力します。
7. 最後に設定を確認してから保存します。

*1 アーカイブマッピングの設定フィールドがない場合は、一度そのまま「保存」をします。保存が完了したらアーカイブマッピングの設定フィールドが出現する筈です。

カテゴリー別ブログ記事リスト新しい日付アーカイブマッピングを追加

 日付別の新しいアーカイブマッピングを設定しないと再構築時にエラーが発生します。Movable Type 4では「ブログ記事リスト」にアーカイブマッピングを追加しましたが、Movable Type 5では「カテゴリー別ブログ記事リスト」に日付のアーカイブマッピングを追加します。
1. 同じくアーカイブテンプレートの一覧から「カテゴリー別ブログ記事リスト」を選択します。
2. 編集画面の下部にある、「テンプレートの設定」をクリックします。
3. ファイルへのリンクは空のままにします。アーカイブマッピングの項目で「新しいアーカイブマッピングを作成」を選択します。種類では「日別」を選び「追加」ボタンを押します。設定が終わったら保存します。
4. 「カテゴリー別ブログ記事リスト」に以下の二つのアーカイブマッピングが設定されていることを確認してください。
  • yyyy/mm/dd/index.html
  • category/sub-category/index.html

ウィジェットの設定

 Ajaxのカレンダーを表示するためのウィジェットを作成します。
1. 左メニューの「デザイン」から「ウィジェット」を選択します。「ウィジェットテンプレート」から「ウィジェットテンプレートの作成」を選択します。
2. ウィジェット名には「Ajaxカレンダー」とします。(もちろん任意で構いません。)
3. ウィジェット内に以下のコードを貼り付けます。
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogArchiveURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>
4. 設定が終わったら保存します。
5. ウィジェットセットを選択し、カレンダーを表示させたい場所に先の「Ajaxカレンダー」をドラッグして設定します。最後に設定を保存します。

CSSのセット

 カレンダーのデザインを適用するためにCSSを設定します。CSSは様々な方法で設定している可能性があるので、ここではコードだけを書いておきますので便宜使用してください。また、過去のカレンダーとのCSSと競合する可能性があるのでCSSファイルの一番最後に付け加えるか、これまで使用していたカレンダーのウィジェットとCSSを外しておく必要があるかもしれません。
 CSSは便宜調整してください。
/*Ajax Calendar*/
#calendar {
    margin: 5px 0 10px;
    color: #444444;
    margin-top: 15px;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 10px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 11px;
    line-height: 120%;
}
.today { /*本日のスタイル*/
    display: block;
    /*border: 1px solid #444444;*/
    /*font-weight: bold;*/
    color:#339900;
    text-decoration: underline;
}
.sunday, /*日曜祝日のスタイル*/
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #ff6600;
}
.saturday, /*土曜日のスタイル*/
.saturday a:link,
.saturday a:visited {
    color: #006699;
}
 最後に再構築をします。エラー無く再構築が終了すればOKです。指定した場所に月送りカレンダーが表示されていると思います。