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

Ajax ハイブリッド月送りカレンダー

Movable Type 4 以降のバージョンで、ブログ記事が投稿されていない月のカレンダーも含めて月送りができるカレンダーのハイブリッド版です。

「Ajax ダイナミック月送りカレンダー」ではダイナミックパブリッシングを利用して、ブログ記事が投稿されていない月のカレンダーも含めた月送りカレンダーを紹介しましたが、ハイブリッド月送りカレンダーでは、該当月にブログ記事が存在する場合は、スタティックパブリッシングで生成されたカレンダーページを Ajax で読み込むようにしました。

また、カレンダーの月送りのリンク部分にも同じロジックを適用して、ダイナミック・スタティックの振り分けを行っています。動作イメージを図に示します。

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

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

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

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

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

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

GetQueryString_0_01.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>
<mt:setVarBlock name="current_prev_ym"><mt:getvar name="prev_year" /><mt:getvar name="prev_month"></mt:setVarBlock>
<mt:setVarBlock name="current_next_ym"><mt:getvar name="next_year" /><mt:getvar name="next_month"></mt:setVarBlock>
<mt:setVar name="prev_flag" value="0" />
<mt:setVar name="next_flag" value="0" />
<mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveDate format="%Y%m" setvar="ym" />
  <mt:if name="ym" eq="$current_prev_ym">
    <mt:setVar name="prev_flag" value="1" />
  </mt:if>
  <mt:if name="ym" eq="$current_next_ym">
    <mt:setVar name="next_flag" value="1" />
  </mt:if>
</mt:ArchiveList>
<table summary="<mt:GetVar name="year" />/<mt:GetVar name="month" />">
  <caption class="calendarhead">
<mt:if name="prev_flag">
    <a href="javascript:void(0);" onclick="getCalendar_static('<mt:BlogArchiveURL />calendar/<mt:getvar name="prev_year" />/<mt:getvar name="prev_month">/');">&#65308;</a> 
<mt:else>
    <a href="javascript:void(0);" onclick="getCalendar_dynamic('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
</mt:if>
    <mt:GetVar name="year" />年<mt:GetVar name="month" />月
<mt:if name="next_flag">
    <a href="javascript:void(0);" onclick="getCalendar_static('<mt:BlogArchiveURL />calendar/<mt:getvar name="next_year" />/<mt:getvar name="next_month">/');">&#65310;</a> 
<mt:else>
    <a href="javascript:void(0);" onclick="getCalendar_dynamic('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
</mt:if>
  </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>

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

５．カレンダーテンプレート作成（スタティックパブリッシング用）

ブログ管理画面の「デザイン」→「テンプレート」→「アーカイブ」→「アーカイブテンプレートを作成:ブログ記事リスト」をクリックし、次画面で下記を設定してください。

• テンプレート名：カレンダー（名称は何でもOKです）
• このテンプレートにリンクするファイル：（設定不要）
• テンプレートの内容：下記

<mt:ArchiveDate format="%m" setvar="month">
<mt:GetVar name="month" op="--" setvar="prev_month" />
<mt:ArchiveDate format="%Y" 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:ArchiveDate format="%Y" 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>
<mt:setVarBlock name="current_prev_ym"><mt:getvar name="prev_year" /><mt:getvar name="prev_month"></mt:setVarBlock>
<mt:setVarBlock name="current_next_ym"><mt:getvar name="next_year" /><mt:getvar name="next_month"></mt:setVarBlock>
<mt:setVar name="prev_flag" value="0" />
<mt:setVar name="next_flag" value="0" />
<mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveDate format="%Y%m" setvar="ym" />
  <mt:if name="ym" eq="$current_prev_ym">
    <mt:setVar name="prev_flag" value="1" />
  </mt:if>
  <mt:if name="ym" eq="$current_next_ym">
    <mt:setVar name="next_flag" value="1" />
  </mt:if>
</mt:ArchiveList>
<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<mt:if name="prev_flag">
    <a href="javascript:void(0);" onclick="getCalendar_static('<mt:BlogArchiveURL />calendar/<mt:getvar name="prev_year" />/<mt:getvar name="prev_month">/');">&#65308;</a> 
<mt:else>
    <a href="javascript:void(0);" onclick="getCalendar_dynamic('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
</mt:if>
    <mt:ArchiveDate format="%B %Y" /> 
<mt:if name="next_flag">
    <a href="javascript:void(0);" onclick="getCalendar_static('<mt:BlogArchiveURL />calendar/<mt:getvar name="next_year" />/<mt:getvar name="next_month">/');">&#65310;</a> 
<mt:else>
    <a href="javascript:void(0);" onclick="getCalendar_dynamic('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
</mt:if>
</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>

保存後、アーカイブマッピングに「月別」を追加し、アーカイブのパスから「カスタム...」を選択し、「calendar/%y/%m/%i」を設定してください。

６．テンプレート修正

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

ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「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> の直前を推奨）になるように設定します。

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

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

<mt:Date format="%Y%m" setvar="current_month" />
<mt:setVar name="flag" value="0" />
<mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveDate format="%Y%m" setvar="month" />
  <mt:if name="month" eq="$current_month">
    <mt:setVar name="flag" value="1" />
  </mt:if>
</mt:ArchiveList>
<div id="calendar"></div>
<script type="text/javascript">
<mt:if name="flag">
getCalendar_static("<$MTBlogArchiveURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
<mt:else>
getCalendar_dynamic("<$MTBlogURL$>calendar.php?date=<MTDate format="%Y%m" $>");
</mt:if>
</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;
}

８．再構築

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

９．注意事項

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

2010.01.27
５項にアーカイブマッピングの説明を追加しました。