MTでAjax!!〜XMLHttpRequestでMovableTypeの各エントリーにメニューを読み込ませる〜

Road to me..では各エントリー、カテゴリー、マンスリーアーカイブにトップページと同じメニューを付けています。しかしながら過去のアーカイブは「すべて再構築」を実行するまでは「Recent Entries」などが古いままになっていました。(応急処置として毎晩「すべて再構築」を実行するスクリプトを実行していました...)

この状況を打開するために、今日はAjaxの勉強をかねてXMLHttpRequestを使って外部ファイル(menu.html)に書き出したメニューを各アーカイブで読み込むJavaScriptを書いてみました。

ajax_menu.js
(Safariでの文字化けにも対応済。ただしMacIEでは実行不可。)

入門 Ajax
入門 Ajax高橋 登史朗

ソフトバンククリエイティブ 2005-11-15
売り上げランキング : 65,811

Amazonで詳しく見る
by G-Tools
AJAX Webアプリケーション アイデアブック Ajax 実装のための基礎テクニック 詳解RSS~RSSを利用したサービスの理論と実践 JavaScript & DHTMLクックブック―Webエキスパート必携テクニック集 Googleマップ+Ajaxで自分の地図をつくる本  Google Maps API徹底活用


使い方は以下の通り。

  1. 新しいインデックステンプレートを作成&保存
    テンプレート名:MenuTemplate
    出力ファイル名:menu.html => http://your.blog.domain/menu.htmlにメニューHTMLを書き出す
  2. メインページ(index)テンプレートからメニュー部分のソースをMenuTemplateにコピー
  3. MenuTemplateを再構築
  4. 各アーカイブテンプレートのメニューを書き出したい場所に下記を埋込
    <script src="<$MTBlogURL$>ajax_menu.js"></script>
    <div id="menu"></div>
  5. すべて再構築

ただしMacIEで実行不可能なので、メインページテンプレートではメニューは直に記述したままにしておいた方が無難でしょう。あと、MenuTemplate内に埋め込まれたJavaScriptは実行されないので注意が必要です。

参考URL
[ajax] Safari の responseText で UTF-8 コード文字化け回避
Atsushi's Homepage 〜 Ajax で作ってみる

1 trackbacks in legacy system
2006年08月18日 XMLHttpRequest - XMLHttpRequest

【Ajax】prototype.jsのXMLHttpRequest Opera 9's XMLHttpRequest #2 d.aql - XML...