« エントリを部分的に折りたたむ(v0.2) | メイン | bind9をjailで動かす »

[ MovableType ] 先人に学ぶ~カレンダーを月めくりに~

Googleすると、きままにポロポロさんのこのページがわりと参照されてるっぽいけど、iframeってトコに抵抗が。
仕方が無いのでPHPかJavaScriptで何とか...と思ったら、きままにポロポロさんが参考にしたdiving to ...さんがAjax版を用意されていた。
らっきー、ということで手を合わせて「頂きます」。

以下、設置メモ。

  1. 月別のアーカイブテンプレートを作成。
    カレンダー部の実ファイルになるテンプレートを作成する。

    [手順]
    1. メイン・メニュー > (BLOG名) > テンプレート を開く。
    2. 「新しいアーカイブ・テンプレートを作る」をクリック。
    3. 「テンプレートの名前」は参照元に習って"AjaxCalendar"と入力。
    4. 「このテンプレートにリンクするファイル」は空欄のまま。
    5. 「テンプレートの中身」はは以下を記述。
      ただし、カレンダーからのリンク先を日別のアーカイブにするなど、カレンダー部分のテンプレートを編集している場合は、同様の修正を行うこと。


      <table summary="投稿されたエントリーへのリンク付き月間カレンダー">
      <caption>
      <MTArchivePrevious>
      <a href="#" onclick="calendarInit('<MTArchiveDate format="%Y">',
      '<MTArchiveDate format="%m">');">&laquo;</a>
      </MTArchivePrevious>

      <$MTArchiveDate format="%Y / %m"$>

      <MTArchiveNext>
      <a href="#" onclick="calendarInit('<MTArchiveDate format="%Y">',
      '<MTArchiveDate format="%m">');">&raquo;</a>
      </MTArchiveNext>
      </caption>
      <tr>
      <th abbr="日曜日">S</th>
      <th abbr="月曜日">M</th>
      <th abbr="火曜日">T</th>
      <th abbr="水曜日">W</th>
      <th abbr="木曜日">T</th>
      <th abbr="金曜日">F</th>
      <th abbr="土曜日">S</th>
      </tr>

      <MTCalendar month="this">
      <MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

      <td><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
      </MTCalendar>

      </table>

  2. 作成したテンプレートをアーカイブに関連付ける。

    [手順]
    1. メイン・メニュー > (BLOG名) > 設定 > アーカイブ を開く。
    2. 「新しく、テンプレートとアーカイブを関連付ける。」の「アーカイブの種類」に"月別"を選択。
    3. 同じく「テンプレート」に"AjaxCalendar"を選択。
    4. 「追加」ボタンを押す。

  3. 上で関連付けしたアーカイブとして出力されるカレンダーモジュールの出力先・ファイル名を指定する。
    参照元の説明にはこの手順がないので、(デフォルトで作成される)月ごとのアーカイブファイルとして作成してしまう。
    従来の月ごとのアーカイブが不要であればこの手順は飛ばしても良い。

    [手順]
    1. メイン・メニュー > (BLOG名) > 設定 > アーカイブ を開く。
    2. 「アーカイブ」の"AjaxCalendar"テンプレートの「アーカイブ・ファイルのテンプレート」に任意の出力先・ファイル名を指定。
      例)archiveディレクトリ配下の年月のパスにファイル名を"calendar.html"として出力する場合
      <$MTArchiveDate format="%Y/%m/"$>calendar.html
    3. 「変更を保存」ボタンを押す。

  4. カレンダーを操作するJavaScriptファイルを配置する。
    ここでは、MovableTypeのインストール先(WebからはWeblogのトップに見えるディレクトリ)に"ajaxcalendar2.js"として配置することにする。

    [手順]
    1. 以下のJavaScriptの"xmlHttp.open"で対象にしているカレンダーモジュールの入力元を、上で指定したカレンダーモジュールの出力先・ファイル名に編集する。
      例)archiveディレクトリ配下の年月のパスにファイル名を"calendar.html"として出力するようにした場合
      xmlHttp.open('GET', "/mt/archives/" + year + "_" + month + ".html");

      xmlHttp.open('GET', "/mt/archives/" + year + "/" + month + "calendar.html"


      function showCalendar(xmlHttp) {
      return function() {
      if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      if (xmlHttp.responseText) {
      var calendarElement = document.getElementById('calendar')
      calendarElement.innerHTML = xmlHttp.responseText;
      } else {
      alert("failed");
      }
      }
      }
      }

      function calendarInit(year, month)
      {
      var xmlHttp = getXmlHttpObject();
      xmlHttp.onreadystatechange = new showCalendar(xmlHttp);
      xmlHttp.open('GET', "/mt/archives/" + year + "_" + month + ".html");
      xmlHttp.send(null);
      return false;
      }

      function getXmlHttpObject() {
      var xmlhttp;
      /*@cc_on
      @if (@_jscript_version >= 5)
      try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
      xmlhttp = false;
      }
      }
      @else
      xmlhttp = false;
      @end @*/
      if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
      try {
      xmlhttp = new XMLHttpRequest();
      // xmlhttp.overrideMimeType("text/xml");
      } catch (e) {
      xmlhttp = false;
      }
      }
      return xmlhttp;
      }


    2. 編集したJavaScriptを"ajaxcalendar2.js"として、FTPするなりして配置する。ファイルのパーミッションはWebサーバが触れれば良い(実行権は不要)。

  5. カレンダーを表示するテンプレートを、月めくり対応に編集する。

    [手順]
    1. メイン・メニュー > (BLOG名) > テンプレート を開く。
    2. 「メインページ」など、カレンダーを表示したい全てのテンプレートのHTMLのヘッダ部分に以下を追加。
      <script type="text/javascript" src="<$MTBlogURL$>ajaxcalendar2.js"></script>
      上記例はJavaScriptファイルの入力元としてMovableTypeのインストール先を絶対指定しているので、必要に応じて上記の"<$MTBlogURL$>"をJavaScriptファイルの配置位置に変更する。
    3. 上で対象にしたカレンダーを表示したい全てのテンプレートの<body>タグを以下に変更。
      <body onload="calendarInit('<$MTDate format="%Y"$>', '<$MTDate format="%m"$>');">
      すでにbodyタグにonloadを指定している場合は、HTMLのヘッダ部分に以下に追加し、bodyタグのonloadを削除する。
      <script language="JavaScript">
      window.onload=WindowOnLoadHandler;

      function WindowOnLoadHandler() {
      (もともとonloadで呼び出していた処理)
      calendarInit('<$MTDate format="%Y"$>', '<$MTDate format="%m"$>
      }
      </script>
    4. 上で対象にしたカレンダーを表示したい全てのテンプレートのカレンダーを表示したい部分を、以下の例のように<div id="calendar">タグと</div>タグでくくる。
      なお、「メインページ」テンプレートのカレンダー部分は、デフォルトで<div id="calendar">でくくられているようなので、既にそうなっていたらこの手順は飛ばす。
      また、ここで紹介する方法に対応していないブラウザのために、もともとあるカレンダー部分は削除せず残しておく。
      <div id="calendar">
      (カレンダー部分)
      </div>

  6. 再構築する。

かっこいいんだけど、ブラウザの[戻る]ボタンで、めくったカレンダーが元に戻っちゃうのが難点かも。

投稿者 Kobito : 2005年04月28日 02:21

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

トラックバックはご自由にどうぞ。報告は不要です。

http://kobito.dnsalias.com/kobito/mt/mt-application/mt-tb.cgi/11

このエントリーへのコメント

Cool stuff. Keep up the good work. I finished the 6th ball: http://johnedithnotes.blogspot.com/2005/10/slatecom.html , 1 small clove garlic

投稿者 Juan Freeman : 2005年10月10日 23:03

コメントしてください

ご感想など残してもらえると励みになります




保存しますか?