TopMovable Typeカスタマイズカレンダー > 2009年12月
2009年12月 1日

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

December 1,2009 1:55 AM
Tag:[, , ]
Permalink

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

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

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

イメージ

1.スクリプトのダウンロード・アップロード

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

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

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

2.プラグインのダウンロード・アップロード

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

GetQueryString_0_02.zip

ダウンロードしたアーカイブを展開し、中にある GetQueryString フォルダを plugins ディレクトリにアップロードします。

アップロード後、システム管理画面の「ツール」→「プラグイン」で GetQueryString が表示されていればOKです。

プラグイン一覧

3.日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。

テンプレート一覧

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

アーカイブマッピング

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

アーカイブマッピング

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

日別アーカイブの追加

再構築アイコンをクリックして、日別アーカイブページを生成してください。

4.カレンダーテンプレート作成(ダイナミックパブリッシング用)

ダイナミックパブリッシング対応のカレンダーを作成します。管理メニューの「デザイン」→「テンプレート」→「インデックステンプレート」→「インデックステンプレートを作成」をクリック。

テンプレート新規作成

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

  • テンプレート名(一番上のテキストフィールド):カレンダー
  • 出力ファイル名: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>

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

テンプレートの設定

5.カレンダーテンプレート作成(スタティックパブリッシング用)

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

  • テンプレート名:カレンダー(名称は何でも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」を設定してください。「公開」は「スタティック」のままにしてください。

テンプレートの設定

6.テンプレート修正

6.1 外部ファイルのインクルード

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

6.2 カレンダー表示部分の設定

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

<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 によってこの部分にカレンダーが表示されます。

修正した「カレンダー」ウィジェットを利用していない場合は、ブログ管理画面の「デザイン」→「ウィジェット」をクリック、さらに利用しているウィジェットセットをクリックし、「インストール済み」にドラッグして「変更を保存」をクリックしてください。

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

8.再構築

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

9.注意事項

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

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

2010.09.24
5項にアーカイブマッピングの画像を追加しました。

2011.02.04
GetQueryStringのバージョンを0.02にアップしました。

Comments [40] | Trackbacks [3]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3