Tagwired folksonomy with suggest.js on MT 3.2
なんか近頃、Movable Type に良い意味でも悪い意味でも枯れた終焉ムードが漂っているように感じていますが、それは気にせずに快適なタグ付けのためにカスタマイズしますね。
これまで、エントリ編集ページで過去に付けたタグの入力補完を実現するために actb.js というライブラリを利用していました。とても良いライブラリで、最近でも定期的にメンテナンスされてバージョンを重ねています。
ですが、同じく入力補完ライブラリの suggest.js という和製のものに興味がありまして、こちらは Prototype JavaScript Framework で書かれています。前に一度試してみたのですが、まだ複数キーワードには対応しておらず、タグの入力補完では使い物になりませんでした。それが先日、より洗練されて version 1.1 では複数キーワードにも対応したというので、再び試してみました。
なお同じような例として、MT 3.2 に標準で同梱されているライブラリでタグの入力をオートコンプリートする方法が ogawa さんによって紹介されています。
まず suggest.js の公式サイトを参考に、suggest.js と prototype.js を入手し、適当な場所に設置します。
Suggest のために、過去に付けた全てのタグを JavaScript の配列に出力する次のインデックステンプレートを作ります。ここでは出力ファイル名を tags-array.js としています。
var tags = [<MTTags glue=",">
'<MTTag encode_js="1">'</MTTags>
];
管理システムのテンプレート†1をカスタマイズします。直接書き換えるのではなく、代替のテンプレートを作ってそれを編集します。代替のテンプレートを使うためには mt-config.cgi に次の設定を追記します。
AltTemplatePath ./exttmpl
テンプレート tmpl/cms/edit_entry.tmpl を代替テンプレートとして exttmpl/cms/edit_entry.tmpl にコピーして、キーワード編集部分を次のように変更します。suggest.js と prototype.js、前述のテンプレートで出力した tags-array.js の場所をここで指定します。
<TMPL_IF NAME=DISP_PREFS_SHOW_KEYWORDS>
<script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>prototype"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>suggest"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>tags-array"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
var kwd = $('keywords');
var ol = document.createElement('ol');
ol.setAttribute('id', 'tag-suggest');
kwd.parentNode.appendChild(ol, kwd.nextSibling);
kwd.setAttribute('autocomplete', 'off');
new IncSearch.SuggestTag('keywords', 'tag-suggest', tags, {
dispMax: 10,
highlight: true,
listTagName: 'li',
dispAllKey: true,
delim: ';'
});
});
</script>
<style type="text/css">
#tag-suggest {
position: absolute;
background-color: rgb(239, 239, 239);
border: 1px solid rgb(191, 191, 223);
font-size: 90%;
width: 20em;
}
#tag-suggest li {
margin: 0;
padding: 0 .2em;
width: 19.6em;
overflow: hidden;
white-space: nowrap;
}
#tag-suggest li.select {
color: rgb(239, 239, 239);
background-color: rgb(31, 31, 47);
}
#tag-suggest li.over {
background-color: rgb(191, 191, 223);
}
</style>
<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>
<label for="keywords"><MT_TRANS phrase="Tags"></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" />
</div>
</TMPL_IF>
suggest.js は複数キーワードの区切りに空白 ( 半角スペース ) を前提としているので、例えば "Movable Type" などのようにキーワードに空白を含めたい場合、これでは利用できません。公式サイトには説明がないのですが IncSearch.SuggestTag.prototype.delim を上書きすると区切り文字を変更することができます。ここではこれを "Version 1.2 からは ;" に上書きします。delim オプションが正式に利用できるので、ここで区切り文字を指定します。ここでは ";" としています。
ミスがなければ、これでエントリ編集画面でタグの入力補完ができるようになります。
キーバインドは↑と↓かマウスで補完候補を選択したら Tab か Enter またはクリックで確定だと思います。また、dispAllKey オプションを有効にした場合、何も入力しない状態の Ctrl+↓で全補完候補を表示できます。
候補の表示数など詳細な設定や、見た目を調整するスタイルシートなどは suggest.js 公式サイトを参考にしながら、好みに応じて変更します。
気のせいか、具合が良いような気がします。
Suggest.js 1.2 に合わせて一部内容を添削しました。
- †1
tmpl/- タグ
- folksonomy
- JavaScript
- Movable Type
- prototype.js
- templates
- 公開日時
- 2006-03-13T00:43:03+09:00 @696
- 更新日時
- 2006-04-09T04:38:46+09:00 @860
- Permalink URI & TrackBack URL
- http://blog.drry.jp/2006/03/13/suggest-js
コメント ( 2 )
はじめまして。こちらの記事を参考に設置してみたのですが上手く可動しません。
候補メニューが出てこないのです。tags-array.jsテンプレート作成やmt-config.cgiの修正、edit_entry.tmplへのパッチは問題ないと思いますが、suggest.jsなどの設置場所と場所の指定の部分が良く理解出来ず怪しいと疑っています。ちなみにprototype.jsは以下のようにしました。
<script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>prototype.js"></script>
初心者的な質問で申し訳ございませんがアドバイスお願いいたします。
どうも。
suggest.js, prototype.js, tags-array.js は、それぞれ任意の場所に自由に設置することができます。
例えば KYO さんの MT が http://example.com/mt/ で公開されているすると、"
<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>" の部分は変換されてhttp://example.com/mt/になるので、suggest.js など 3 つのファイルを設置した場所に応じて、適切に書き換えてください。パッチ部分で追加した 3 つの script 要素で指定している
prototype,suggest,tags-arrayはそれぞれ拡張子.jsを付けます。ファイル名も特にこれでなければならない理由はないので、自由に変更することも可能です。例えばprototype.jsは好みに応じてprototype-1.4.0.jsにすることもできます。もしまだ不明な点があれば、またコメントください。では。