TiddlyWikiをカスタマイズする

TiddlyWiki

前回の続き。TiddlyWikiの大きな利点の一つとして、カスタマイズの自由度の高さがあります。スタイルシートを書き換えてレイアウトを変更することや、JavaScriptを追加してプログラムの動作を修正することができます。
ここまではTiddlyWikiがHTMLとして書かれているので当然といえば当然なんですが、実はこれらの要素をHTMLファイルを直接編集しないで、ブラウザ上で変更することができます。こうすることで、元のソースには一切触れずに修正が行えるので、本体のバージョンアップにも対応できる（upgrade-proof）カスタマイズを行うことができるというわけです。

TiddlyWikiのカスタマイズ方法には大きく分けて「Special tiddlerを編集する」、「JavaScriptを編集する」の2種類があります。以降ではそれぞれの方法について、Revision 1.2.32を前提に簡単に説明します。

Special tiddler

Special tiddlerとは、特殊な役割を持ったtiddler（記事）です。メニューやヘッダなど、TiddlyWikiで表示される要素のほとんどはtiddlerで置き換え可能になっています。また、StyleSheetという名前のtiddlerでスタイルシートの編集もできます。スタイルシートはTiddlyWikiのHTMLに埋め込まれたスタイルシートを上書きする形でプロパティを定義するので、HTMLに埋め込まれたスタイルシートを参考にしながら書いていく感じです。

JavaScript

TiddlyWikiにはtiddlerに書いたJavaScriptを読み込む機能があります。

"systemConfig"タグを付けたtiddlerを作成し、JavaScriptを記述し保存します。次回にTiddlyWikiのファイルをブラウザで読み込んだときに、そのtiddlerに書いたJavaScriptが読み込まれます。

この機構を利用したものとしてマクロがあります。マクロはJavaScriptで定義され、tiddler内に記述すると、そのtiddlerを表示する際に実行、展開されるので、動的に内容が変わるtiddlerなどを作ることができます。TiddlyWikiにはユーザが定義するマクロの他に、あらかじめ定義されたマクロが用意されていて、機能の一部はマクロとして書かれています。

試しにちょっとしたマクロを作ってみました。記録されたtiddlerの数を表示するマクロです。新しいtiddlerを作成、"systemConfig"タグを付けて、以下のコードを貼り付けて下さい。*1

config.macros.tiddlercounter = {};
config.macros.tiddlercounter.handler = function( place,macroName,params )
{
	var counter = 0;
	for ( var i in store.tiddlers )
	{
		counter++;
	}
	createTiddlyElement( place,"span",null,null,counter );
}

ファイルを保存し、リロードした後で、適当なtiddlerに

<<tiddlercounter>>

と書くことで、そこにtiddlerの数を表示します。メニュー（MainMenu）なんかに記述しておくとけっこう便利です。

こんな感じで、TiddlyWikiのカスタマイズ性は非常に高いので、気に入らない部分を直したい、機能を追加したいなど、いろいろな要求に応えることができます。ハッキリ言ってめちゃくちゃ楽しいです。他にもマクロをいくつか書いたので、時間があるときに紹介します。

*1:このマクロはTiddlyWiki 2.0.x以上では動作しません。2.0版はこちらを参照してください。