Sep 26, 2005

MT 3.2 + Tagwire Pluginでタグ入力をオートコンプリートする

このエントリーではMT 3.2に追加されたJavascriptライブラリのひとつ、tc/autocomplete.jsを使って、Tagwire Pluginのタグの入力をアシストしてみます。ここで説明するのは、drry @->Weblog - Movable Type 3.17-ja and customized interface with application templatesで紹介されているAuto-complete Control(actb.js)を利用するのと同様に、タグの入力をオートコンプリートする方法です。actb.jsの方がtc/autocomplete.jsよりリッチな機能を提供しますが、後者はMT 3.2に標準的に含まれ、また前者より機能が限られているので軽快に動作するというメリットがあります。

Ogawa::Buzz: キーワードを元にエントリのbasenameを設定するの前半、準備段階までの作業が完了しているものとします。

まずはじめに、全タグを格納した配列を生成するJavaScriptファイルを作るためのインデックステンプレートを追加します。「出力ファイル名」は仮にtags.js、「テンプレートの内容」は以下の通り入力して、保存(と再構築)しておきます。

var customarray = [ <MTTags glue=",">'<$MTTag$>'</MTTags> ];
変数名がcustomarrayなのは歴史的事情に因ります。また、Tagwire PluginではなくTags Pluginを使用している場合にはそれにしたがってしかるべくテンプレートを設定しておけば、以下の設定を流用することができます。

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

<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>js/tc/autocomplete.js"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>tags.js"></script>
<script type="text/javascript">
var keywordsAutoComplete;
function keywordsInitHandler() {
    getByID('keywords').parentNode.innerHTML += '<div id="keywords_completion"></div>';
    keywordsAutoComplete = new TC.AutoComplete('keywords', customarray);
}
TC.attachLoadEvent(keywordsInitHandler);
</script>
<style type="text/css">
#keywords_completion { position: absolute; z-index: 1; background: #FFF; border: 1px solid; padding: 2px; }
.complete-none { }
.complete-highlight { font-weight: bold; }
</style>
<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>

うまくいけば(?)、冒頭の画面のように「キーワード」入力欄で登録済みのタグによるオートコンプリート機能が使えるようになります。

このHackで重要なポイントは、Ogawa::Buzz: キーワードを元にエントリのbasenameを設定すると同様、Javascriptによるわずかなコード(とスタイルシート)追加だけでオートコンプリートが実現できる、という点です。したがって、例えば両方の拡張を合成するのも容易に実現できます。

このあたりのテンプレートをまとめて固めたものを置いておきますので、興味のあるかたはさらに道を究めてみてはいかがでしょう。

keywords_tmpl.zip

About Me

My Photo

つくばで働く研究者

Total Pageviews

Amazon

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