« 月間移動可能なカレンダーを修正 | Main | 新年前にcopyright表示を修正 »

2008年12月23日

月間移動可能なカレンダー2008

この記事を読むのに 約15分30秒 かかります

2008年も終わりに近づこうとしているけれど、この間設定を変更したカレンダーがMovable Type 4.23で動作することが確認できたので、以下にまとめておこう。
2004年に記載したカレンダーとの違いは以下のとおり。

2004版

  • 月間移動可能
  • 未来月を表示しない
これに対して、2008版は、以下の機能を追加改良。

2008版

  • 土日祝日修飾
    土日祝日を判定、class属性の出力を追加した。
    MTcalendarColor - 休日表示カレンダープラグインを使用している。
    休日表示カレンダープラグインでは、Perlのモジュール、Date::Japanese::Holidayと、Calendar::Japanese::Holidayが必要。
  • 本日日付修飾
    本日日付にclass属性を追加。実際には再構築日付であって、日次(cron)で再構築することでhtmlを書き換え。日次の再構築には、mt-rebuild.plを使用している。
  • ブラウザに履歴を残さない
    単純にJavaScriptのreplaceで遷移するようにした。
  • iframeをJavaScriptで
    見かけ上はvalidにできる。これについては、JQuery iFrame Pluginを使用。

以下、それぞれについて記載する。

1.カレンダー用のcssのインデックステンプレート作成

カレンダー用のcssのインデックスのテンプレートを作成する。
名前は「スタイルシート カレンダー」
出力ファイル名は「calstyle.css」
公開は「手動」にして、この画面で再構築をかけなければ、再構築されないようにしておく。
テンプレートの内容は、以下のとおり。

@charset "<mt:PublishCharset />";
body {
	margin:0px 0px 0px 0px;
	background-color: #FFF;
}
.calendar {
	font-size: x-small;
	text-align:left;
	text-transform:lowercase;
}
.calendarhead { 
	color:#111;
	font-size:small;
	padding:2px;
	text-align:center;
	background:#ddd;
}
.holidaytitle { color:#F00; }
.saturdaytitle { color:#00F; }
.holidaycolor { background-color:#FDD; }
.saturdaycolor { background-color:#DDF; }
.oddcolcolor { }
.evencolcolor { }
.calendariftoday {
	display: block;
	border: 1px solid #000;
}

2.休日表示カレンダープラグインのための準備

休日表示カレンダープラグインを使用するために、Perlのモジュール、Date::Japanese::Holidayと、Calendar::Japanese::Holidayがない場合は、使えるようにする必要がある。
自分の環境で使用できるかどうかの調べ方は、休日表示カレンダープラグインのエントリにもサーバーアナライザー - futomi's CGI Cafeを使用する方法が記載されているが、自分はコマンドが使用できる環境なので、コマンドで調べた。

/usr/bin/find `/usr/local/bin/perl -e 'print join(" ", @INC)'` -type f -name "*.pm"

調べたところ、Date::Japanese::Holidayはインストールされていたので、Calendar::Japanese::Holidayをインストールをすることに。
祝日は法改正によって変更することがあるので、祝日が変われば、適時バージョンアップが必要。

自分はXREAで、以下のパスに格納することにした。
/virtual/xxxxxx/pm
（xxxxxxはアカウント名。）
権限がある場合はCPANで直接インストール可能。

XREAでCPANモジュールをユーザディレクトリにインストールする方法を参考にインストールした。

以下のtempは一時的なディレクトリ、pmはモジュール格納先を示す。

cd ~
mkdir temp
mkdir pm
cd temp
wget http://search.cpan.org/CPAN/authors/id/K/KZ/KZTOMITA/Calendar-Japanese-Holiday-0.03.tar.gz
tar zxvf Calendar-Japanese-Holiday-0.03.tar.gz
cd Calendar-Japanese-Holiday-0.03

perl Makefile.PL INSTALL_BASE=~/pm
make
make install

これで、Perlモジュールのインストールは完了。
成功したときには、

cd ~
rm -fr temp

で、一時ディレクトリを削除。

3.休日表示カレンダープラグイン

休日表示カレンダープラグイン2より、プラグインをダウンロードする。
このとき、2.でモジュールをインストールした場合は、JCalendarColor.plに次の1行を追加して、インストールしたpmが参照できるようにする。

use lib '/virtual/xxxxxx/pm/lib/perl5/';

先頭20行を表示させた結果が以下のとおり。

# JCalendarColor - A Plugin for Movable Type Open Source
#
# Release 2.30
# July 29, 2008
#
# Copyright (c) 2004-2008 nlog(n)
package MT::Plugin::JCalendarColor;
use strict;
use lib '/virtual/xxxxxx/pm/lib/perl5/';
use Calendar::Japanese::Holiday qw(isHoliday);
use Date::Calc qw(Day_of_Week);
use MT::Util qw(offset_time_list);
use MT::Template::Context;
@MT::Plugin::JCalendarColor::ISA = qw(MT::Plugin);
use vars qw($VERSION);
$VERSION = '2.30';
my $name = 'JCalendarColor';

これを通常のMTプラグイン同様に格納する。

4.MTのカレンダーアーカイブテンプレートの作成

カレンダーアーカイブのテンプレートを作成する。
テンプレートの種類は「アーカイブテンプレート」。
アーカイブテンプレートの種類は「ブログ記事リスト」。
テンプレート名：calendar
ファイルへのリンクは空欄のまま。
アーカイブマッピングは、種類を「月別」とし、以下のようにする。
calendar/%y%m.html

テンプレートの定義内容は以下のとおり。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="robots" content="noindex,follow" />
<title><$MTBlogName$></title>
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site-6999.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>calstyle.css" type="text/css" />
</head>
<body>
<div align="center" class="calendar">
<table width="170" border="0" cellspacing="2" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="javascript:location.replace('<MTBlogURL>calendar/<MTArchiveDate format="%Y%m">.html')" title="&laquo; <MTArchiveDate format="%B %Y">" onmouseover="window.status='<MTArchiveDate format="%B %Y">'; return true" onmouseout="window.status='';return true">&laquo;</a>
</MTArchivePrevious>

<$MTArchiveDate format="%B %Y"$>
	
<MTArchiveNext>
<a href="javascript:location.replace('<MTBlogURL>calendar/<MTArchiveDate format="%Y%m">.html')" title="&raquo; <MTArchiveDate format="%B %Y">" onmouseover="window.status='<MTArchiveDate format="%B %Y">'; return true" onmouseout="window.status='';return true">&raquo;</a>
</MTArchiveNext>
</caption>
	
<tr height="20">
<th abbr="Sunday" align="center"><span class="calendar holidaytitle">日</span></th>
<th abbr="Monday" align="center"><span class="calendar">月</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">火</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">水</span></th>
<th abbr="Thursday" align="center"><span class="calendar">木</span></th>
<th abbr="Friday" align="center"><span class="calendar">金</span></th>
<th abbr="Saturday" align="center"><span class="calendar saturdaytitle">土</span></th>
</tr>
	
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
	
<td align="center" class="<MTCalendarIfToday>calendariftoday<MTElse>calendarifnottoday</MTElse></MTCalendarIfToday> <$MTCalendarColor holidaycolor="holidaycolor" saturdaycolor="saturdaycolor" oddcolcolor="oddcolcolor" evencolcolor="evencolcolor"$>">
<span class="calendar">
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<$MTCalendarDay$>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span>
</td>
	
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div> 
	
</body>
</html>

再構築することで、http://ブログのURL/calendar/200812.html 等のカレンダー表示用のhtmlファイルが出力される。
これをブラウザから確認すること。

5.cronでの日次再構築

以下のようなシェルでmt-rebuild.plを起動している。

#!/bin/sh
cd /virtual/xxxxxx/public_html/yyyyyy
perl ./mt-rebuild.pl -mode='archive' -archive_type='Monthly' -blog_id=1 -template='calendar'

最初のcdはmt-rebuild.plの格納先。
ただし、mt-rebuild.plは古く、注意書きとして、

NOTE: This tool was written over 4 years ago and is in need of a refresh. It does not (yet) support a number of the new options found in MT4. Publishing all index templates is not supported. Custom archive types have not been tested.

とある。

6.カレンダーの表示部分へiframeの埋め込み

カレンダーの表示部分へ、カレンダー表示用のスクリプトの呼び出しを埋め込む。
cal.cgiをカレンダーディレクトリへ設置する。
スクリプト中の$urlは、各環境にあわせて変更する。

以下、呼び出しテンプレートの例として。

<mt:ifArchiveTypeEnabled archive_type="Daily">
<dd class="side" id="calendar">
<iframe name="cal-iframe" src="<MTBlogURL>calendar/cal.cgi" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" width="170" height="160"></iframe>
</dd>
</mt:ifArchiveTypeEnabled>

JQuery iFrame Pluginで表示する場合は、

<mt:ifArchiveTypeEnabled archive_type="Daily">
<dd class="side" id="calendar">
<a href="<MTBlogURL>calendar/cal.cgi" class="iframe w:170 h:160">loading...</a>
</dd>
</mt:ifArchiveTypeEnabled>

<2010.07.29 修正>
カレンダーアーカイブのテンプレートの誤りを修正。

Tag :

Posted by BB at 2008/12/23 18:52
Category : Movable Type

 
Related Posts Plugin for WordPress, Blogger...

この記事を読んだ人が読んだ他の記事

去年の今頃に書かれた記事