小粋空間: カレンダーアーカイブ

Ajax 日めくりカレンダー（MT4版）

September 6,2007 1:55 AM
Tag：[Ajax, Calendar, MovableType]
Permalink

Movable Type 4 版の Ajax 日めくりカレンダーのカスタマイズです。

ご覧の通り、オーソドックスな日めくりカレンダーっぽい表示で、その下にはその日に投稿されたブログ記事（エントリー)タイトルが表示されます。リアルタイムカレンダー（本日の日付を太字で表示）および土・日・休日表示も盛り込まれています。

なお、厳密には日めくりではなく、投稿があった日のみを表示する「日送りカレンダー」です。

ここでは公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

このカスタマイズはかなり以前ご質問を頂いていたもので、元データとなるアーカイブに日別を使うか、月別を使って全ての日を表示するか、迷っているうちに公開が大変遅れてしまいました。この場をお借りしてお詫び申しあげます。

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

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

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

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

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

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

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

テンプレート名（一番上のテキストフィールド）：日めくりカレンダー
ファイルへのリンク：（設定不要）
テンプレートの内容（テキストエリア）：下記
注：テキストエリアにペーストする際はテキストエリア右上にある構文強調表示切替を「強調表示なし」を選択してから作業を行ってください。「構文強調表示」の状態でペーストするとテンプレートの内容の改行が失われます。

<table summary="<MTArchiveDate format="%Y/%m/%d">">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeDate('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%d/%f">');">＜</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$> 
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeDate('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%d/%f">');" >＞</a>
</MTArchiveNext>
</caption>
<tr><td class="calendarday"><span><a href="<$MTArchiveLink type="Daily"$>"><$MTArchiveDate format="%e" strip=""$></a></span></td></tr>
<tr><td class="calendartitle"><dl><MTEntries><dd><$MTEntryTitle$></dd></MTEntries></dl></td>
</table>

設定後は次のような感じになります。

テンプレート設定

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

２．１ブログの文字コードが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 等で文字コードを強制的に指定している場合は未確認です。

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

テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「種類」から「日別」を選択して「追加」をクリック。

アーカイブマッピング追加

これでカレンダーテンプレートが日別アーカイブとして定義され、カレンダー用の「パス」が表示されます。
注：「日別」欄の右側にあるチェックボックスは絶対にチェックしないでください。

アーカイブマッピング追加完了

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

セレクトボックスより「カスタム」を選択

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。

calendar/%y/%m/%d/%f

パス変更

下のようになればアーカイブマッピングの設定完了です。

パス変更完了

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

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注：この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択し、アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

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

アーカイブマッピング

これで日別アーカイブが追加されました。チェックボックスは必ずチェックしてください。

日別アーカイブの追加

５．テンプレート修正

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

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をクリックし、<head>～</head> の間に下記を追加して「保存」をクリック。

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

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

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2（またはサイドバー）」をクリックし、カレンダーを表示させたい位置に下記を追加して「保存」をクリック。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/%d" $></MTEntries>");
</script>

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

６．CSS修正

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

スタイルは叩き台レベルです。また機会があれば見直したいと思います。

#calendar {
    border: 1px solid #999;
    text-align: center;
    margin: 5px 0 10px;;
    color: #444444;
}
#calendar table {
    width: 153px;
    padding: 0;
    border-collapse: collapse;
    margin-right: auto;
    margin-left: auto;
}
#calendar .calendarhead {
    padding: 5px 0 0;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar td.calendarday {
    padding: 0;
    font-size: 80px;
    font-weight: normal;
    line-height: 100%;
}
#calendar td a {
    color: #333;
    text-decoration: none;
}
#calendar td a:hover {
    color: #fff;
    background: #333;
}
#calendar td.calendartitle dd {
    padding: 5px 10px;
    font-size: 10px;
    text-align: left;
    font-weight: normal;
}
#calendar .today {
    font-weight: bold;
    padding: 0;
    font-size: 80px;
    font-weight: bold;
    line-height: 100%;
}
#calendar .sunday,
#calendar .holiday,
#calendar .holiday a:link,
#calendar .holiday a:visited {
    color: #e50003;
}
#calendar .holiday a:hover {
    color: #fff;
    background: #e50003;
}
#calendar .saturday,
#calendar .saturday a:link,
#calendar .saturday a:visited {
    color: #0000ff;
}
#calendar .saturday a:hover {
    color: #fff;
    background: #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;
}

７．再構築

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

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

Comments [0] | Trackbacks [0]

Ajax 月送りカレンダー（MT4版）

August 18,2007 3:33 AM
Tag：[Ajax, Calendar, Customize, MovableType]
Permalink

Movable Type 4 版の Ajax 月送りカレンダーのカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。

MT4 では、MT3 で紹介した「Ajax 月送りカレンダー」とは、アーカイブマッピングの方法が異なっており、「MT4でのカスタマイズ方法が分かりません」というリクエストを頂きましたので、本エントリーにて説明致します。
Ajax 月送りカレンダーの概要は割愛します（「Ajax 月送りカレンダー」をご覧ください）。

ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

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

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

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

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

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

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

管理メニューの「デザイン」→「テンプレート」→「アーカイブテンプレート」→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。

テンプレート新規作成

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

テンプレート名（一番上のテキストフィールド）：カレンダー
ファイルへのリンク：（設定不要）
テンプレートの内容（テキストエリア）：下記のいずれか
注：テキストエリアにペーストする際はテキストエリア右上にある構文強調表示切替を「強調表示なし」を選択してから作業を行ってください。「構文強調表示」の状態でペーストするとテンプレートの内容の改行が失われます。

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

<div class="widget-calendar widget">
<h3 class="widget-header"><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></h3>
<div class="widget-content">
<table summary="<MTArchiveDate format="%Y/%m">">
<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>
</div>
</div>

公開テンプレートの場合

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

設定後は次のような感じになります。

テンプレート作成

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

２．１ブログの文字コードが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 等で文字コードを強制的に指定している場合は未確認です。

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

テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「種類」から「月別」を選択して「追加」をクリック。

アーカイブマッピング追加

これでカレンダーテンプレートが月別アーカイブとして定義され、カレンダー用の「パス」が表示されます。
注：「月別」欄の右側にあるチェックボックスは絶対にチェックしないでください。

アーカイブマッピング追加完了

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

セレクトボックスより「カスタム」を選択

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。

calendar/%y/%m/%i

パス変更

下のようになればアーカイブマッピングの設定完了です。

パス変更完了

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

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注：この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択し、アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

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

アーカイブマッピング

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

日別アーカイブの追加

５．テンプレート修正

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

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をクリックし、<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>

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

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2（またはサイドバー）」をクリックし、カレンダーを表示させたい位置に下記を追加して「保存」をクリック。

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

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

７．再構築

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

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

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

<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" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

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

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

ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
表示されたソースから下記のタグをみつけ、getCalendar() の3番目のパラメータに設定されている URL（赤色）をブラウザに設定して実行

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

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

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

１０．２一度表示され、リロードすると表示されなくなる場合

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

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

これは、管理画面の [設定] - [公開] で「アーカイブの設定」にチェックをつけていて、 [アーカイブURL] の最後に "/" がない場合に発生します。

2007.08.21
２項と４項の「ブログ記事」を「ブログ記事リスト」に修正しました。

2007.11.08
５．２項のタグに一部誤りがありましたので修正致しました。

2008.02.04
typo を修正しました（Wen → Wed）。

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

Comments [93] | Trackbacks [12]

カレンダーの日付リンクのジャンプ先をエントリー・アーカイブに変更する

February 10,2007 1:12 AM
Tag：[Calendar, Customize, MovableType]
Permalink

当サイトで公開している Movale Type のカレンダーでは、日付のアンカーから日別アーカイブにジャンプするようにしていますが、これをエントリー・アーカイブにジャンプするように変更する方法を紹介します。

サンプルのMTタグは <MTCalendar>～</MTCalendar> のみ抜粋しています。

１．変更前のカレンダータグ部分

日付アーカイブにジャンプする仕組みは、MTEntryLink タグの archive_type 属性に "Daily" を指定しているからです（赤色部分）。

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></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>

２．変更方法１

MTEntryLink タグの archive_type 属性を "Daily" から "Individual" に変更します（青色部分）。

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Individual"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>

３．変更方法２

もうひとつは MTEntryLink を属性なしに変更する方法です。

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>

なお、いずれの場合も、カレンダー用テンプレートタグの先頭と末尾に設定している

<MTIfArchiveTypeEnabled archive_type="Daily">
　　　　：
</MTIfArchiveTypeEnabled>

の2行は削除してください。
これは日別アーカイブの設定がされていない場合、その中に記述されたタグの処理を行わない（つまりカレンダーの生成を行わない）ようにするための条件タグです。

エントリー・アーカイブのリンクには MTEntryPermalink を利用する方法もありますが、実験してみたところ正常に動作しないようなので、ここでは対象外としました。

Comments [3] | Trackbacks [0]

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

February 4,2007 12:21 AM
Tag：[Ajax, Calendar, MovableType]
Permalink

「Ajax 月送りカレンダー」の縦型版のカスタマイズを紹介します。下のスクリーンショットは完成例です。

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

これまでに Movable Type の月送り縦型カレンダーを iframe を用いてカスタマイズを試みたのですが、クロスブラウザ問題、つまりブラウザによって表示の崩れが発生し、これを解消できないため、当サイトでは公開を見送ってました。
が、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です）
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記

<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<MTArchivePrevious><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a></MTArchivePrevious>&nbsp;<MTArchiveNext><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a></MTArchiveNext><br />
<$MTArchiveDate format="%Y"$><br />
<$MTArchiveDate format="%m"$>
</caption>
<MTCalendar month="this">
<MTCalendarIfBlank><MTElse><tr><td><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></td></tr></MTElse></MTCalendarIfBlank></MTCalendar></table>

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

なお、アーカイブパス（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>

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

カレンダーを利用したいテンプレート（メインページ／カテゴリー・アーカイブ／日別アーカイブ／エントリーアーカイブ等）の任意の位置下に、カレンダー表示用のタグ（青色部分）を追加します。
ここではサンプルとして、公開テンプレート・固定3カラムの左サイドバーと中央カラムの間に表示する方法を示します。

　　　　　：
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
 
<div id="links-center-box">
<div id="links-center">
<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>
</div>
 
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
　　　　　：

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

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

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

５．CSS修正

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

IE7 の CSS ハック（*:first-child+html）も組み込んでいます。

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    margin-bottom: 3px;
    padding-bottom: 3px;
    font-size: 10px;
    letter-spacing: 0em;
    text-align: center;
    border-bottom: 1px solid #999999;
}
#calendar table {
    margin-left: 5px;
    _margin-left: 0;
    padding: 0;
    border-collapse: collapse;
}
*:first-child+html #calendar table {
    margin-left: 0;
}
#calendar td {
    margin: 0;
    padding: 2px;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.holiday,
.tholiday,
.holiday a:link,
.tholiday a:link {
    color: #e50003;
}
.saturday,
.tsaturday,
.saturday a:link,
.tsaturday a:link {
    color: #0000ff;
}
.tholiday,
.tsaturday,
.today {
    _margin: 0 2px;
    padding: 1px 2px;
    display: block;
    border: 1px solid #444444;
}

６．縦カレンダーをカラムレイアウトに挿入するための修正

当サイトで配布しているテンプレート（3カラム・固定レイアウト）を例に説明します。端的に申し上げますと 4 カラムに変更して、その中の1カラムをカレンダー表示用として利用します。

まず下記の CSS をスタイルシートに追加してください。

.layout-three-column #links-center-box {
    float: left;
    width: 40px;
}
.layout-three-column #links-center {
    padding: 10px 0 0;
    color: #ffffff;
}

追加したカレンダー分の幅（40px）を、全体の幅をひろげるか、中央カラムの幅を少なくすることで帳尻を合わせます。
中央カラム幅を変更しない場合は全体の幅を 40px ひろげます。

.layout-three-column #box {
    width: 890px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

中央カラム幅を変更する場合は中央カラム幅を 40px 少なくします。

.layout-three-column #content {
    float: left;
    width: 438px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

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

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

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

に、例えば青色の

<div id="calendar"><img src="[画像のURL]" /></div>

を追加することで、ページ描画でカレンダーが表示されるまでローディング画像を示すことができます。テキストも表示可能ですが、縦型では横幅に制約があるので画像を表示する方が良いでしょう。

月送りのリンククリック時はローディング画像は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは８項の設定と関連します）。

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

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

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

File Not Found

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

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

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

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

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

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

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

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

ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
表示されたソースから下記のタグをみつけ、そこに記述されている 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 が表示されるという場合は、２項のテンプレートに埋め込んでいるカレンダーアーカイブへのパスが誤っている可能性があります。

また、縦型カレンダーをカラムレイアウトに組み込んでレイアウトが崩れる場合、カラム幅の計算が誤っています。スタイルシートで設定したカラム幅を見直してください。

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

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

Comments [0] | Trackbacks [0]

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

October 11,2006 12:11 AM
Tag：[Ajax, Calendar, Customize, MovableType]
Permalink

「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 で出力されていない

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

ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
表示されたソースから下記のタグをみつけ、そこに記述されている 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 です。

Comments [25] | Trackbacks [4]

Ajax 月送りカレンダー

October 10,2006 12:10 AM
Tag：[Ajax, Calendar, Customize, MovableType]
Permalink

Ajax を利用した Movable Type 月送りカレンダーのカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。

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

週数の変化によって高さが可変、つまりカレンダー下に表示されるアイテムとの間隔が常に一定
月送りのリンクの履歴がブラウザの履歴に残らない

すでにお気づきの方もいらっしゃると思いますが、当サイトでは数ヶ月前から月送りカレンダーを Ajax 化して試験運用してiいます。月送りのリンクをクリックして Ajax 化されたカレンダーを体感してみてください。

注：本カスタマイズでつまづいた場合、「８．トラブルシューティング」をご覧ください。

仕様

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

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 をメインページと同じディレクトリにアップロードしてください。

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

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

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

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

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

<div class="module-calendar module">
<h2 class="module-header"><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></h2>
<div class="calendar">
<table summary="<MTArchiveDate format="%Y/%m">">
<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>
</div>
</div>

公開テンプレートの場合

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

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

２．１ブログの文字コードが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>

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

Ajax 日めくりカレンダー（MT4版）

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

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

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

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

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

５．テンプレート修正

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

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

６．CSS修正

７．再構築

Ajax 月送りカレンダー（MT4版）

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

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

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

公開テンプレートの場合

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

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

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

５．テンプレート修正

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

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

６．CSS修正

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

公開テンプレートの場合

７．再構築

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

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

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

１０．１ 一度も表示されない場合

１０．２ 一度表示され、リロードすると表示されなくなる場合

カレンダーの日付リンクのジャンプ先をエントリー・アーカイブに変更する

１．変更前のカレンダータグ部分

２．変更方法１

３．変更方法２

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

仕様

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

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

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

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

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

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

４．テンプレート修正

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

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

５．CSS修正

６．縦カレンダーをカラムレイアウトに挿入するための修正

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

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

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

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

仕様

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

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

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

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

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

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

４．テンプレート修正

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

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

５．CSS修正

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

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

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

９．その他

Ajax 月送りカレンダー

仕様

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

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

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

公開テンプレートの場合

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

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

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

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

４．テンプレート修正

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

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

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

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

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

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

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

１０．１一度も表示されない場合

１０．２一度表示され、リロードすると表示されなくなる場合

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

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

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

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

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

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

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

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

４．２カレンダー表示部