カテゴリー別 Ajax 月送りカレンダー（MT4版）: 小粋空間

Top ＞ Movable Type ＞カスタマイズ＞カレンダー＞カテゴリー別 Ajax 月送りカレンダー（MT4版）

カテゴリー別 Ajax 月送りカレンダー（MT4版）

Posted at July 15,2008 2:22 AM
Tag：[Ajax, Calendar, Customize, MovableType]

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

これまでの月送りカレンダーは、ブログ全体のブログ記事を対象にしたものでしたが、本カスタマイズではカテゴリー別にカレンダーを表示するようにアレンジしたものです。通常の Ajax 月送りカレンダーのカスタマイズ方法は「Ajax 月送りカレンダー（MT4版）」をご覧ください。

きめ細かい制御ができていませんが、とりあえずβ版ということで公開します。このカスタマイズは Movable Type 4.2 で動作を確認していますが、4.1 でも大丈夫と思います。

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

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

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

prototype.js（"Download the latest version" のリンクをクリック）
ajaxCalendar.js（本カスタマイズ専用です）
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

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

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

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

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

テンプレート新規作成

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

テンプレート名（一番上のテキストフィールド）：カテゴリ別カレンダー
ファイルへのリンク：（設定不要）
テンプレートの内容（テキストエリア）：下記

<table summary="<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<mt:ArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<mt:BlogArchiveURL />calendar/<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m/%i">');">&#65308;</a>
</mt:ArchivePrevious>
<mt:ArchiveDate format="%B %Y" /> 
<mt:ArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<mt:BlogArchiveURL />calendar/<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m/%i">');" >&#65310;</a>
</mt:ArchiveNext>
</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:CategoryLabel setvar="category_label">
<mt:Calendar category="$category_label" month="this">
<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>

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

テンプレート作成

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

２．１ブログの文字コードが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/%-c/%y/%m/%i

パス変更

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

パス変更完了

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

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

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。4.2以降の「既定のブログ」では、「ブログ記事リスト」という名前のテンプレートがないので、「月別ブログ記事リスト」を選択してください。それもない場合は、月別アーカイブ用のテンプレートを選択してください。

テンプレート一覧

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

アーカイブマッピング

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

アーカイブマッピング

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

日別アーカイブの追加

５．テンプレート修正

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

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

<mt:if name="module_category_archives">
<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>
</mt:if>

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

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

<mt:if name="module_category_archives">
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<mt:BlogArchiveURL />", "<mt:BlogID />", "<mt:BlogArchiveURL /><mt:Entries lastn="1" sort_order="descend">calendar/<mt:SubCategoryPath />/<mt:EntryDate format="%Y/%m/"  /></mt:Entries>");
</script>
</mt:if>

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

７．再構築

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

2008.11.11
３項のパスが誤っていたので修正しました。また、「Ajax 月送りカレンダー（MT4版）」へのリンクを追加しました。

2007.03.02
日別アーカイブ追加の説明を修正しました。

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

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

すみません、今ごろ、こちらのページに気づきました。

それで、こちらに記載の方法でしてみたのですが、やはりカレンダーが表示されません。

3.の関連づけですが、「calendar/%y/%m/%i」を入れるとありますが、
画像では「calendar/%-c/%y/%m/%i」になっています。
どちらが正しいのでしょうか。

4.ですが、「デザイン」→「テンプレート」→「アーカイブテンプレート」→
「ブログ記事リスト」を選択……とありますが、テンプレート名は任意でよかったでしょうか。

5.1と5.2ですが、
～
これではさむと、ページソースからカレンダー表示部分がまるまる消えてしまいます。

どちらにしても、表示されないんですが。

ご指導をよろしくお願い致します。

[1] Posted by liliru : November 11, 2008 8:51 AM

＞liliruさん
こんにちは。
ご利用ありがとうございます。
ご質問の件について、このエントリーのカスタマイズでは、カレンダーはカテゴリーアーカイブでしか表示されないので、申し訳ありませんがMT4用にエントリーした「Ajax 月送りカレンダー（MT4版）」を参考に再度設定を行って頂けますでしょうか（過去の記事から新しい記事へのリンクができてなくてすいません）。
それではよろしくお願い致します。

[2] Posted by yujiro

: November 11, 2008 10:32 AM

はじめまして、いつもお世話になっています。
こちらで書いてあるとおりしたところ、
日付アーカイブ「Monthly20090201000000」の再構築中にエラーが発生しました: テンプレート「カレンダー」の再構築中にエラーが発生しました: タグでエラーがありました: MTSubCategoryPathはcategoryのコンテキスト外部では利用できません。
というエラーが出ました。
これは公開テンプレートじゃないからでしょうか？

また、ブログ記事リストのアーカイブマッピング部分ですが、
カテゴリ-月別　のところにチェックボックスがありません（ver.4.23です。）
これは動作に影響ないんでしょうか？

[3] Posted by ataro : March 2, 2009 7:46 AM

＞ataroさん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですが、多分、４項の作業で、日別アーカイブをアーカイブマッピングしたテンプレートが、２項のテンプレートを指定しているように思われます。
４項の説明を修正しましたので、設定した日別のアーカイブマッピングを削除して、再度４項の作業を行ってください。
それではよろしくお願い致します。

[4] Posted by yujiro

: March 2, 2009 11:04 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

Now loading...

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