小粋空間  -  a cheap joke and a play on words site

Ajax ダイナミック月送りカレンダー

Movable Type 4 以降のバージョンで、ブログ記事が投稿されていない月のカレンダーも含めて月送りができるカレンダーです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。

このカスタマイズは下記のサイトで紹介されています。これまで月送りカレンダーのカスタマイズは色々行なってきましたが、ブログ記事が投稿されていない月のカレンダーの表示方法が思いつきませんでした。このアイデアは素晴らしいと思います。

ブロッけんＪｒ - Movable Type カレンダー

１．概要

Ajax ダイナミック月送りカレンダーの動作概要を図に示します（図をクリックすれば拡大します）。

①：ページを表示します
②：ページに埋め込んだスクリプトで Ajax 呼び出しを行ないます
③：Ajax から呼び出すページ（カレンダー）をダイナミックパブリッシングで起動します
④：ページを呼び出す際に、年月データをクエリーとして与え、プラグインで取得し、テンプレーとに引継ぎます
⑤：取得した年月データを MTCalendar タグの month モディファイアの値として利用し、該当月のカレンダーを生成します
⑥⑦：生成したデータを返却し、最初のページに表示します。表示されたカレンダーの前月・次月のリンクにも同じ仕組みを適用します。前月・次月の算出は、MTArchive 系テンプレートタグではなく、制御系テンプレートタグで計算します。

このような構造にすることで、ブログ記事がない月のカレンダーを含めた月送りが実現できます。

なお、上記の説明でお分かりの通り、このカスタマイズはダイナミックパブリッシングの利用が可能な環境に限ります。

以下、カスタマイズ方法です。

２．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

• prototype.js（"Download the latest version" のリンクをクリック）
• ajaxCalendar.js
• dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

３．プラグインのダウンロード・アップロード

下記のリンクをクリックして、GetQueryString プラグインをダウンロードします。このプラグインは、ダイナミックパブリッシングでカレンダーページを呼び出すときにクエリーを取得するためのものです。

GetQueryString_0_02.zip

ダウンロードしたアーカイブを展開し、中にある GetQueryString フォルダを plugins ディレクトリにアップロードします。

アップロード後、システム管理画面の「ツール」→「プラグイン」で GetQueryString が表示されていればOKです。

４．日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。

アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

「日別」を選択して「追加」をクリック。

これで日別アーカイブが追加されました。

再構築アイコンをクリックして、日別アーカイブページを生成してください。

５．カレンダーテンプレート作成

管理メニューの「デザイン」→「テンプレート」→「インデックステンプレート」→「インデックステンプレートを作成」をクリック。

次画面で下記を設定してください。

• テンプレート名（一番上のテキストフィールド）：カレンダー
• 出力ファイル名：calendar.php
• テンプレートの種類：カスタムインデックステンプレート
• ファイルへのリンク：（設定不要）
• 公開：ダイナミック
• テンプレートの内容（テキストエリア）：下記のいずれか

デフォルトテンプレートの場合

<mt:GetQueryString name="date" setvar="yearmonth" />
<mt:GetQueryString name="date" regex_replace="/^(\d\d\d\d).*/","\$1" setvar="year" />
<mt:GetQueryString name="date" regex_replace="/.*(\d\d)$/","\$1" setvar="month"/>
<mt:GetVar name="month" op="--" setvar="prev_month" />
<mt:GetVar name="year" setvar="prev_year" />
<mt:if name="prev_month" eq="0">
  <mt:SetVar name="prev_month" value="12" />
  <mt:SetVar name="prev_year" op="--" />
</mt:if>
<mt:if name="prev_month" lt="10">
  <mt:GetVar name="prev_month" regex_replace="/(.*)/","0\$1" setvar="prev_month" />
</mt:if>
<mt:GetVar name="month" op="++" setvar="next_month" />
<mt:GetVar name="year" setvar="next_year" />
<mt:if name="next_month" eq="13">
  <mt:SetVar name="next_month" value="1" />
  <mt:SetVar name="next_year" op="++" />
</mt:if>
<mt:if name="next_month" lt="10">
  <mt:GetVar name="next_month" regex_replace="/(.*)/","0\$1" setvar="next_month" />
</mt:if>
 
<div class="widget-calendar widget">
  <h3 class="widget-header">
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
    <mt:GetVar name="year" />年<mt:GetVar name="month" regex_replace="/0(\d)/","\$1" />月
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
  </h3>
  <div class="widget-content">
    <table summary="<mt:GetVar name="year" />/<mt:GetVar name="month" />">
        <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>
<mt:Calendar month="$yearmonth">
  <mt:CalendarWeekHeader>
      <tr>
  </mt:CalendarWeekHeader>
        <td><mt:CalendarIfBlank><mt:Else><span></mt:Else></mt:CalendarIfBlank><mt:CalendarIfEntries><mt:Entries lastn="1"><a href="<mt:EntryLink archive_type="Daily" />"><mt:CalendarDay /></a></mt:Entries></mt:CalendarIfEntries><mt:CalendarIfNoEntries><mt:CalendarDay /></mt:CalendarIfNoEntries><mt:CalendarIfBlank><mt:Else></span></mt:Else></mt:CalendarIfBlank></td>
  <mt:CalendarWeekFooter>
      </tr>
  </mt:CalendarWeekFooter>
</mt:Calendar>
    </table>
  </div>
</div>

公開テンプレートの場合

<mt:GetQueryString name="date" setvar="yearmonth" />
<mt:GetQueryString name="date" regex_replace="/^(\d\d\d\d).*/","\$1" setvar="year" />
<mt:GetQueryString name="date" regex_replace="/.*(\d\d)$/","\$1" setvar="month"/>
<mt:GetVar name="month" op="--" setvar="prev_month" />
<mt:GetVar name="year" setvar="prev_year" />
<mt:if name="prev_month" eq="0">
  <mt:SetVar name="prev_month" value="12" />
  <mt:SetVar name="prev_year" op="--" />
</mt:if>
<mt:if name="prev_month" lt="10">
  <mt:GetVar name="prev_month" regex_replace="/(.*)/","0\$1" setvar="prev_month" />
</mt:if>
<mt:GetVar name="month" op="++" setvar="next_month" />
<mt:GetVar name="year" setvar="next_year" />
<mt:if name="next_month" eq="13">
  <mt:SetVar name="next_month" value="1" />
  <mt:SetVar name="next_year" op="++" />
</mt:if>
<mt:if name="next_month" lt="10">
  <mt:GetVar name="next_month" regex_replace="/(.*)/","0\$1" setvar="next_month" />
</mt:if>
 
<table summary="<mt:GetVar name="year" />/<mt:GetVar name="month" />">
  <caption class="calendarhead">
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
    <mt:GetVar name="year" />年<mt:GetVar name="month" regex_replace="/0(\d)/","\$1" />月
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
  </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>
<mt:Calendar month="$yearmonth">
  <mt:CalendarWeekHeader>
  <tr>
  </mt:CalendarWeekHeader>
    <td><mt:CalendarIfBlank><mt:Else><span></mt:Else></mt:CalendarIfBlank><mt:CalendarIfEntries><mt:Entries lastn="1"><a href="<mt:EntryLink archive_type="Daily" />"><mt:CalendarDay /></a></mt:Entries></mt:CalendarIfEntries><mt:CalendarIfNoEntries><mt:CalendarDay /></mt:CalendarIfNoEntries><mt:CalendarIfBlank><mt:Else></span></mt:Else></mt:CalendarIfBlank></td>
  <mt:CalendarWeekFooter>
  </tr>
  </mt:CalendarWeekFooter>
</mt:Calendar>
</table>

テンプレートの設定部分は次のようになります。

６．テンプレート修正

６．１ 外部ファイルのインクルード

ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「HTMLヘッダー（公開テンプレートの場合は「ヘッダー」）」をクリックし、下記の内容を追加して「保存」をクリック。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

注：利用しているテンプレートによって設定位置が異なりますが、ブラウザでページを表示したときに <head>～</head> の間（</head> の直前を推奨）になるように設定します。

６．２ カレンダー表示部分の設定

「デザイン」→「ウィジェット」→ウィジェットテンプレートの「カレンダー」をクリックし、下記の内容に入れ替えたあと、「保存」をクリックします。「カレンダー」ウィジェットがない場合は、「ウィジェットテンプレートを作成」をクリックして以下の内容を設定してください。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogURL$>calendar.php?date=<MTDate format="%Y%m" $>");
</script>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

修正した「カレンダー」ウィジェットを利用していない場合は、ブログ管理画面の「デザイン」→「ウィジェット」をクリック、さらに利用しているウィジェットセットをクリックし、「インストール済み」にドラッグして「変更を保存」をクリックしてください。

７．CSS修正

「デザイン」→「テンプレート」→「スタイルシート」を選択し、下記の内容を追加して「保存および再構築」をクリックします。

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.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: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定（下）を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

８．再構築

全てのページを再構築します。これでメインページ等を表示してカレンダーが表示されれば完成です。

９．注意事項

日別アーカイブは先に再構築しておいてください。日別アーカイブがなくても再構築エラーにはなりませんが、日付のリンクから日別アーカイブに移動できません。

１０．その他

このカスタマイズではインデックステンプレートのみを使用しましたが、ブログ記事のある月はアーカイブテンプレート、そうでない月はインデックステンプレートを利用するという、ハイブリッドな月送りカレンダーについても検討中です。

2011.02.04
GetQueryStringのバージョンを0.02にアップしました。

2011.02.05
テンプレートの一部を修正しました。

…前略…
<mt:GetVar name="year" />年<mt:GetVar name="month" />月
…後略…