Sep 24, 2005

キーワードを元にエントリのbasenameを設定する

MT 3.2をざらっと見ていて気がついたのが、mt-static/js/の下に格納されているJavascriptのライブラリ群。MTではあまり使われていないみたいなので本来TypePad用に作られたもののような気がしなくもないですが、妙に便利そうなツールが揃っているみたいです。ドキュメントもないのでよく分かりませんけれども。

このエントリーでは、このライブラリを利用して、エントリー編集画面において、「タイトル」ではなく、「キーワード」を元に「ベースのファイル名」を設定できるようにするHackを考えてみます。

ここで述べている方法は、個別エントリーアーカイブのファイル名を「<$MTEntryKeywords dirify="1"$>.html」のように設定するのとは根本的に異なり、エントリーが持つbasenameフィールドをキーワードから生成するというものです。この方法で生成されたbasenameはブログ内でUniqueであることが保証されます。またエントリーを再編集してキーワードを変更してもbasenameには反映されないので注意してください。

まず、準備作業から始めます。MTDIRにexttmplというディレクトリ、その中にexttmpl/cmsというディレクトリを作り、tmpl/cms/edit_entry.tmplをexttmpl/cmsにコピーしておきます。

次にexttmpl/cms/edit_entry.tmplに以下のパッチを当てておきます。このパッチはエントリー編集画面の「キーワード」入力欄を、別のテンプレート(keywords_noac.tmpl)を使って生成するように変更するものです。

--- tmpl/cms/edit_entry.tmpl	Sat Sep 10 11:14:14 2005
+++ exttmpl/cms/edit_entry.tmpl	Sat Sep 24 01:26:30 2005
@@ -393,10 +393,7 @@
 </TMPL_IF>
 
 <TMPL_IF NAME=DISP_PREFS_SHOW_KEYWORDS>
-<div class="field">
-<label for="keywords"><MT_TRANS phrase="Keywords"></label> <a href="#" onclick="return openManual('entries', 'keywords')" class="help">?</a><br />
-<textarea class="full-width" name="keywords" id="keywords" tabindex="6" cols="72" rows="2"><TMPL_VAR NAME=KEYWORDS ESCAPE=HTML></textarea>
-</div>
+<TMPL_INCLUDE NAME="keywords_noac.tmpl">
 </TMPL_IF>
 
 </div>

exttmpl/cms/keywords_noac.tmplというファイルを作り、内容を以下のようにします。

<div class="field">
<label for="keywords"><MT_TRANS phrase="Keywords"></label> <a href="#" onclick="return openManual('entries', 'keywords')" class="help">?</a><br />
<input class="full-width" name="keywords" id="keywords" tabindex="6" value="<TMPL_VAR NAME=KEYWORDS ESCAPE=HTML>" maxlength="255" autocomplete="off" />
</div>

ここまでの作業ができたら、mt-config.cgiに以下の行を加えます。

AltTemplatePath ./exttmpl

これでエントリー編集画面がexttmpl/cms/edit_entry.tmplを使って生成されるようになります。上記の通りの作業を行うと、「キーワード」入力欄がtextareaではなく、inputフィールドとして生成されるはずです。

さて、ここまでが準備段階。本題を始めましょう。

exttmpl/cms/keywords_noac_base.tmplというファイルを作り、内容を以下のようにします。赤字で示されているのは、keywords_noac.tmplから追加された部分です。

<script type="text/javascript">
function basenameHandler(evt) {
    if (!orig_basename) {
	var el = evt.target || evt.srcElement;
        var dirified = dirify(el.value);
        dirified = dirified.substring(0, <TMPL_VAR NAME=BASENAME_LIMIT>);
        var trimmed = dirified.match(/^(.*[^_])/);
        if (trimmed)
            setElementValue('basename', trimmed[0]);
        else
            setElementValue('basename', '');
    }
    return true;
}
function keywordsInitHandler() {
    TC.attachEvent('keywords', 'change', basenameHandler);
    TC.attachEvent('keywords', 'keyup', basenameHandler);
    getByID('title').onchange = function() {};
}
TC.attachLoadEvent(keywordsInitHandler);
</script>
<div class="field">
<label for="keywords"><MT_TRANS phrase="Keywords"></label> <a href="#" onclick="return openManual('entries', 'keywords')" class="help">?</a><br />
<input class="full-width" name="keywords" id="keywords" tabindex="6" value="<TMPL_VAR NAME=KEYWORDS ESCAPE=HTML>" maxlength="255" autocomplete="off" />
</div>

次にこのテンプレートを読み込むようにexttmpl/cms/edit_entry.tmplを変更しましょう。

<TMPL_INCLUDE NAME="keywords_noac.tmpl">
<TMPL_INCLUDE NAME="keywords_noac_base.tmpl">

これで、「キーワード」欄に応じて「ベースのファイル名」が変更されるようになり、また「タイトル」を変更しても「ベースのファイル名」は変更されないようになります。

最後に、keywords_noac_base.tmplに追加したJavascriptコード部分について説明しておきます。

basenameHandlerという関数は、イベントハンドラであり、イベントの発生した要素の値(input要素ならその入力内容)を元にベースネームを生成し、「ベースのファイル名」の値を設定します。

keywordsInitHandlerという関数は、初期化時に呼び出されるハンドラであり、"keywords"というidを持つ要素のonchangeイベント、onkeyupイベントに上で述べたbasenameHandlerイベントハンドラを登録しています。また、"title"というidを持つ要素のonchangeイベントハンドラを空にしています。

最後のTC.attachLoadEvent(keywordsInitHandler);という部分は、ドキュメントのロード後呼び出される初期化ハンドラとして、上で述べたkeywordsInitHandlerを登録しています。

このようにMT 3.2では、簡単にテンプレートに機能を追加・変更することができるようになっています。特にテンプレートに記述されるHTML部分(表現)とJavascript部分(意味)が直交している点が重要です。上の例では、Javascriptがなくても機能しますし、あればbasenameを設定するように機能させることもできますし、他のことを記述すればもっと異なる意味を持たせることもできるわけです。

ちなみにMT 3.2に付属しているJavascriptライブラリを利用すると、キーワードの入力をオートコンプリートする機能の追加も容易に行えます。こちらの方法に関しては別エントリーで説明する予定です。

About Me

My Photo

つくばで働く研究者

Total Pageviews

Amazon

Copyright 2012 Ogawa::Buzz | Powered by Blogger
Design by Web2feel | Blogger Template by NewBloggerThemes.com