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

Ajax 月送りカレンダー（横型）

「Ajax 月送りカレンダー」の横型版のカスタマイズを紹介します。

このカレンダーは、従来の月送りカレンダー（横型・iframe 利用）と比較して、下記のアドバンテージがあります。

• クロスブラウザで悩まない
• 月送りのリンクの履歴がブラウザの履歴に残らない

「クロスブラウザで悩まない」というのは、これまでの月送り版・横型カレンダーは、iframe の中に表示するカレンダーの垂直位置が IE系と Mozilla 系で微妙に異なったため、CSSハック等で表示位置の微調整を行っていました。今回の Ajax 版では iframe が不要なため、この問題で悩む必要が（多分）なくなります。

以下に簡単なサンプルを作りましたので動作をお試しください。

Ajax 月送りカレンダー（横型）サンプル

仕様

ここで紹介する月送りカレンダー（横型）の主な仕様です。

• Ajax を利用して横型カレンダーを月送りにします。Ajax 化されるのはページ表示時および月送り時のカレンダー取得です
• クッキーを利用して月送り状態を保持します
• カレンダーの取得に失敗した場合、カレンダー表示エリアには何もされません（カスタマイズ可能）

以下、カスタマイズ方法です。テンプレートの指定はありませんので、CSS を変更すればどのテンプレートでもお使いになれます。

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

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

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

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また、prototype.js はダウンロードしたアーカイブを解凍して、dist フォルダの中にある prototype.js をメインページと同じディレクトリにアップロードしてください。

注：ここで配布している ajaxCalendar.js は横型カレンダー専用です。テーブルタイプのカレンダーで配布している ajaxCalendar.js はお使いになれません。

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

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。

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

<div title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65310;</a>
</MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div> 

設定が終わったら「保存」をクリックしてください。

なお、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストで2ヶ所出現する

<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/index.html">');">＜</a>

の赤色部分を変更します。
例えば「archives」というパスを付与している場合は、

<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="archives/calendar/%Y/%m/index.html">');">＜</a>

とします。

２．１ ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください（バージョン 3.3 以降の場合、右上にある「詳細モードに切り替え」のリンクをクリックすることで「公開」というメニューが表示されます）。

バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

• アーカイブの種類：月別
• テンプレート：カレンダー（←２項で設定した「テンプレート名」です）

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、２項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「出力フォーマット（3.2-ja 以降）」または「アーカイブ・ファイルのテンプレート（3.1x 以前）」に下記を設定してください。

出力フォーマット（3.2-ja 以降）

calendar/%y/%m/%i

アーカイブ・ファイルのテンプレート（3.1x-ja 以前）

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。

日付アーカイブ「Monthlyxxxx」の再構築に失敗しました: テンプレート「カレンダー」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました:<$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

４．テンプレート修正

カレンダーを表示させたいテンプレートに下記の設定を行います。

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

<head>～</head> の間に下記を追加します。

<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>

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

カレンダーを利用したいテンプレート（メインページ／カテゴリー・アーカイブ／日別アーカイブ／エントリーアーカイブ等）のバナータイトルの下に、下記のカレンダー表示用のタグ（青色部分）を追加してください。
リストは公開テンプレートの場合を例にしています。

<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>
 
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>

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

また、２項と同様、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストの赤色部分を修正します。
例えば archives というアーカイブパスを設定している場合は、下記の青色のように修正てください。

getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="archives/calendar/%Y/%m/" $></MTEntries>");

５．CSS修正

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

#calendar {
    text-align: center;
    padding: 5px 0;
    border-bottom : 1px solid #666699;
    font-family: Verdana, Arial, sans-serif; 
    font-size: 10px; 
    color:#444444; 
}
#calendar a,
#calendar a:link,
#calendar a:visited {
    color: #006699;
}
#calendar a:hover {
    text-decoration: underline;
}
#calendar a:active {
    color: #006699;
}
#calendar .calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
#calendar .today { 
    border : 1px solid #444444; 
    padding: 0 2px;
} 
#calendar .holiday,
#calendar .holiday a:link,
#calendar .holiday a:visited {
    color: #e50003;
}
#calendar .saturday,
#calendar .saturday a:link,
#calendar .saturday a:visited {
    color: #0000ff;
}
#calendar .tholiday {
    border: 1px solid #444444;
    padding: 0 2px;
    color: #e50003;
}
#calendar .tholiday a:link,
#calendar .tholiday a:visited {
    color: #e50003;
}
#calendar .tsaturday {
    border: 1px solid #444444;
    padding: 0 2px;
    color: #0000ff;
}
#calendar .tsaturday a:link,
#calendar .tsaturday a:visited {
    color: #0000ff;
}

６．ページ表示時にローディング状態を表示する場合

インチキっぽいですが、４．２項で設定した

<div id="calendar"></div>

に、例えば青色の

<div id="calendar">loading ...</div>

を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。

月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは７項の設定と関連します）。

７．カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $('calendar').innerHTML = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、６項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、６項の「loading ...」というメッセージの代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

８．トラブルシューティング

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

• カレンダーアーカイブの再構築ができていない
• カレンダーアーカイブページへのパス設定が誤っている
• ajaxCalendar.js の修正誤り
• テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
• カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

1. ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
2. 表示されたソースから下記のタグをみつけ、そこに記述されている URL（赤色）をブラウザに設定して実行

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるカレンダーアーカイブへのパスが誤っている可能性があります。

９．その他

当サイトで運用している月送りカレンダーの Ajax ライブラリは、prototype.js ではなく、「入門 Ajax」のサポートページで紹介されている jslb_ajax.js を使っていますが、紹介するカスタマイズでは知名度の高い protptype.js を用いています。

2007.03.21 追記
Cookie に保持された場合にカレンダーが表示されなくなる不具合および、複数ブログで利用可能になるよう、ajaxCalendar.js および４．２項のMTタグを修正しました。

---

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

path = blogURL + "calendar/" + cookie + "/";

path = blogURL + "/calendar/" + cookie + "/";