Ogawa::Memoranda

まず、準備作業から始めます。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ライブラリを利用すると、キーワードの入力をオートコンプリートする機能の追加も容易に行えます。こちらの方法に関しては別エントリーで説明する予定です。