Ajax ダイナミック月送りカレンダー

Ajax ダイナミック月送りカレンダー

Posted at September 8,2009 1:23 AM
Tag:[Calendar, Customize, DynamicPublishing, MovableType]

Movable Type 4 以降のバージョンで、ブログ記事が投稿されていない月のカレンダーも含めて月送りができるカレンダーです。リアルタイムカレンダー(本日の日付の装飾)および土・日・休日表示も盛り込まれています。

Ajax ダイナミック月送りカレンダー

このカスタマイズは下記のサイトで紹介されています。これまで月送りカレンダーのカスタマイズは色々行なってきましたが、ブログ記事が投稿されていない月のカレンダーの表示方法が思いつきませんでした。このアイデアは素晴らしいと思います。

ブロッけんJr - Movable Type カレンダー

1.概要

Ajax ダイナミック月送りカレンダーの動作概要を図に示します(図をクリックすれば拡大します)。

動作概要

①:ページを表示します
②:ページに埋め込んだスクリプトで Ajax 呼び出しを行ないます
③:Ajax から呼び出すページ(カレンダー)をダイナミックパブリッシングで起動します
④:ページを呼び出す際に、年月データをクエリーとして与え、プラグインで取得し、テンプレーとに引継ぎます
⑤:取得した年月データを MTCalendar タグの month モディファイアの値として利用し、該当月のカレンダーを生成します
⑥⑦:生成したデータを返却し、最初のページに表示します。表示されたカレンダーの前月・次月のリンクにも同じ仕組みを適用します。前月・次月の算出は、MTArchive 系テンプレートタグではなく、制御系テンプレートタグで計算します。

このような構造にすることで、ブログ記事がない月のカレンダーを含めた月送りが実現できます。

なお、上記の説明でお分かりの通り、このカスタマイズはダイナミックパブリッシングの利用が可能な環境に限ります。

以下、カスタマイズ方法です。

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

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

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

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

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

GetQueryString_0_02.zip

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

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

プラグイン一覧

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

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

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

テンプレート一覧

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

アーカイブマッピング

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

アーカイブマッピング

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

日別アーカイブの追加

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

5.カレンダーテンプレート作成

管理メニューの「デザイン」→「テンプレート」→「インデックステンプレート」→「インデックステンプレートを作成」をクリック。

テンプレート新規作成

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

  • テンプレート名(一番上のテキストフィールド):カレンダー
  • 出力ファイル名: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>
 
<div class="widget-calendar widget">
  <h3 class="widget-header">
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
    <mt:GetVar name="year" />年<mt:GetVar name="month" regex_replace="/0(\d)/","\$1" />月
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
  </h3>
  <div class="widget-content">
    <table summary="<mt:GetVar name="year" />/<mt:GetVar name="month" />">
        <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>
  </div>
</div>

公開テンプレートの場合

<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>
 
<table summary="<mt:GetVar name="year" />/<mt:GetVar name="month" />">
  <caption class="calendarhead">
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
    <mt:GetVar name="year" />年<mt:GetVar name="month" regex_replace="/0(\d)/","\$1" />月
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
  </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>

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

テンプレートの設定

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 カレンダー表示部分の設定

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

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogURL$>calendar.php?date=<MTDate format="%Y%m" $>");
</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.注意事項

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

10.その他

このカスタマイズではインデックステンプレートのみを使用しましたが、ブログ記事のある月はアーカイブテンプレート、そうでない月はインデックステンプレートを利用するという、ハイブリッドな月送りカレンダーについても検討中です。

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

2011.02.05
テンプレートの一部を修正しました。

関連記事
トラックバックURL


トラックバック

Movable Type カレンダー補足 from ブロッけんJr
小粋空間さんで、カレンダーの記事を紹介していただきました。Ajax ダイナミック... [続きを読む]

Tracked on September 8, 2009 9:31 AM
コメント

こんにちは。
ご無沙汰しております。
また、宜しくお願いします。

早速ですが、プラグインをUPロードしたのですがプラグインを認識せず表示されません。原因は、何でしょうか?
宜しくお願いします。

[1] Posted by kankiti : September 12, 2009 2:58 PM

>kankitiさん
こんばんは。
ご質問の件について確認ですが、「プラグインを認識せず表示されません。」は3項の作業の事象でしょうか。
すいませんが、プラグインシステム管理画面の「ツール」→「ログ」で、関連するエラーが表示されていましたらその内容をご連絡ください。
それではよろしくお願い致します。

[2] Posted by yujiro logo : September 12, 2009 10:57 PM

こんばんは。
プラグインの表示の件は、勘違いでして表示されておりました。
申し訳ないです。
ただ、今回のカレンダーが一度も表示されてません。
宜しくご指導お願い致します。

[3] Posted by kankiti : September 13, 2009 10:46 PM

色々弄りましたて File Not Found と言う表示がでています。
前回の部分をみてみると
•カレンダーアーカイブの再構築ができていない
•カレンダーアーカイブページへのパス設定が誤っている
•テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
•カレンダーアーカイブが UTF-8 で出力されていない

と記入されていますがパス・拡張子というのは、どこをみればよろしいですか?

宜しくお願いします。

[4] Posted by kankiti : September 13, 2009 11:35 PM

>kankitiさん
こんばんは。
ご質問の件ですが、まず、インデックステンプレートで新しいダイナミックパブリッシングのテストページを作り、MTBlogURLなど、簡単なテンプレートタグの内容が正常に出力されること(=ダイナミックパブリッシングが正常に動作すること)を確認してください。

ダイナミックパブリッシングが正常に動作できましたら本題に入りますが、本エントリーの手順通りに設定されていれば、ブラウザに下記のURLを入力すればカレンダーが表示されるはずですが、今のところ 404 File Not Found になります。

http://www.dejavuuu.com/calendar.php?date=200909

手順を再確認し、ブラウザに上記のURLを直接指定して表示されるところまで確認してください。
それではよろしくお願い致します。

[5] Posted by yujiro logo : September 13, 2009 11:45 PM

>kankitiさん
こんばんは。
このカスタマイズはこれまでの月送りカレンダーとカスタマイズ方法が異なっています。したがって、

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

はどれも関係ありません。
コメント[4]の回答の作業を行なってください。
それではよろしくお願い致します。

[6] Posted by yujiro logo : September 14, 2009 2:07 AM

はじめまして。
よろしくお願いいたします。
こちらのカスタマイズを利用させていただこうと思いましたが、

build error. : Undefined subroutine &MT::Plugin::GetQueryString::UreDecode called at /home/sites/chicappa.jp/users/URL/web/mt/plugins/PerlDynamic/../../plugins/GetQueryString/GetQueryString.pl line 50.
(URLはローカルサイトパスです。)

と表示されてしまいます。
PerlDynamicというプラグインが表示されていましたので削除してみたりしたのですがうまくいきません。

ご教授願えますでしょうか。

[7] Posted by yuichi : September 16, 2009 6:13 PM

ローカルサイトパスではなくサブドメインでしょうか。
まったくの素人でお恥ずかしい限りでございます。
申し訳ございません。

[8] Posted by yuichi : September 16, 2009 6:17 PM

はじめまして。こちらのカスタマイズを利用させていただこうと思ったのですが、プラグインが認識されません。
MT5を利用しているのですが、MT5には対応されておられますでしょうか?
ログも見たのですが、当方素人に近いためもあり、特に関連するエラーが見あたらず。。
ご教授いただけますでしょうか。

[9] Posted by fuji : December 18, 2009 7:27 PM

>fujiさん
こんばんは。
ご返事遅くなってすいません。
GetQueryStringプラグインはMT5で動作することを確認しました。
それではよろしくお願い致します。

[10] Posted by yujiro logo : December 30, 2009 3:55 AM

GetQueryStringについては、認識されないという人が降りますが、右方も認識されません。

プラグインのディレクトリにアップロードしても、プラグインの管理画面に表示されません。

ログにも何も出力されていません。

恐らくMT5には対応していないのでしょう。

[11] Posted by らくだ : February 11, 2010 5:14 PM

GetQueryStringについてコメントさせていただいた、「らくだ」です。

当方の操作ミスでした。

何度プラグインディレクトリにアップロードしても、プラグインの管理画面に表示されなかったのですが、見ていた管理画面が間違っていました。

恐らく、「表示されない」と言っている他の方も見る画面を間違えているのかと…。

ちなみに、MT5には、
・システムのプラグイン管理画面
・ウェブサイトのプラグイン管理画面
・ブログのプラグイン管理画面
と3つのプラグイン管理画面があります。

私が見ていたのは、ブログの管理画面でした。
(実際に表示されるのはシステムのプラグイン管理画面)

大変失礼いたしました。

[12] Posted by らくだ : February 11, 2010 5:43 PM

>らくださん
こんばんは。
ご連絡ありがとうございました。
とりあえず無事に解決されたようでよかったです。
手順には「システム管理画面」と書いておりますが、表記は見直したいと思います。
ではでは!

[13] Posted by yujiro logo : February 12, 2010 2:04 AM

はじめてご質問させていただきます。
当方MT5で、MT5にあわせた導入サイトなども参考に
こちらの月送りカレンダーを導入させていただきましたが、
一旦表示されたカレンダーが、ページをリロードしたりアーカイブページに移動すると、「File Not Found」となってしまいます。
考えうる対応策をお教えいただけませんか、何卒よろしくお願いします。

[14] Posted by ビズマ : April 28, 2010 7:08 PM

>ビズマさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、サイトのURLをご連絡頂けますでしょうか。
非公開の場合はContactからご連絡ください。

それではよろしくお願い致します。

[15] Posted by yujiro logo : May 2, 2010 4:26 AM

yujiro様、こんにちは。
久しぶりにBlogに取り組もうとしたら、MTが4から5になって驚きました。
それで早速、新しいバージョンで遊ぼうと思ったら、webページを作らないとBlogが作れないみたいな事で、ちょっとショックです。
仕方なくBlog MascotというBlogを作りました。
まずはカレンダーから・・・と思いやり始めたところ、「年」と「月」の表示が両方とも「?」の表示になっていて、どこが変なのかさっぱりわかりません。
MT4の時も四苦八苦したけれども、表示は出ていました。
どこを直せばいいか教えてください。
あと、MT5にはwebページがあったのですが、そちらにはカレンダーなど、MT4で使っていた機能はないのですか?

[16] Posted by tsuduku : August 23, 2010 3:56 PM

>tsudukuさん
こんばんは。
ご質問の件ですが、新しく作成したインデックステンプレート「calendar.php」に次の行が含まれていると思いますが、「年」「月」の部分が、テンプレート編集画面で正しく表示されてますでしょうか。

…前略…
<mt:GetVar name="year" />年<mt:GetVar name="month" />月
…後略…

それではよろしくお願い致します。

[17] Posted by yujiro logo : September 1, 2010 12:32 AM

yujiro様、いまカレンダーのテストをしたのですが、どうやら記事を書かないと年月が表示されないみたいです。
あと9月なのに既に翌月の>が表示されるのは、その事を前提に創られたカレンダーだからなのでしょうか?
素人ですみませんがご教授して頂けますでしょうか?
よろしくお願いいたします。

[18] Posted by tsuduku : September 1, 2010 5:10 PM

yujiro様、追記です。
すみません。今のカレンダーの設定はハイブリッド版・・・のつもりです。
インデックステンプレートにはyujiro様の確認の年月は表記してありました。
あと、記事を書かないとカレンダーの月を更新させたいのであればどのカレンダーを使用したら良いのでしょうか?
自分で決定すべきことなのですが、yujiro様に聞くことをお許しください。

[19] Posted by tsuduku : September 1, 2010 5:21 PM

はじめまして。
当方、この手のものには不慣れななのですが、MT3からやってきたブログをMT5にあげて、カレンダーが表示されないので、どうにかならないかと思い、こちらの「Ajax ダイナミック月送りカレンダー」を参考にやろうとしました。しかし手順5まで進んだ所で、ブログが表示されなくなりました。「500Internal Server Error」です。ブログの管理画面であるダッシュボードにもアクセス出来なくなりました。手順5までにアップしたファイルの削除や、.htaccessの1行削除など自分であれこれ試してはいるのですが、全く復旧の目処がたちません。当方のサーバーはGMOです。まだもがいてみようと思いますが、もし何か対処策などあればご教授いただければと思います。

[20] Posted by https://me.yahoo.co.jp/a/z7.97jlCIKHbR_yhaS9oVrecjA--#4bbf3 logo : March 17, 2013 6:06 PM

すみません。いろいおろと調べて、私が使っているGMOのレンタルサーバーが.htaccessの使用を許可していなかったようで、これをはずすことで、ひとまずもとに戻りました。かなり冷や汗かきましたが、自分でミスして経験になりましたので、もうちょっと頑張ってみようと思います。
お騒がせしてすみませんでした。

[21] Posted by https://me.yahoo.co.jp/a/z7.97jlCIKHbR_yhaS9oVrecjA--#4bbf3 logo : March 17, 2013 8:49 PM
コメントする
greeting

*必須

*必須(非表示)


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

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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