TiddlyWikiカスタマイズ・個人的メモ

今更ながら、TiddlyWikiをはじめる。

チーム内のナレッジ共有用に、「メンテナンスが楽で設置サーバ種別を問わないものを設置してくれ」というリクエストがあった。

適当なWikiでも設置しようと考えていたところ、隣のチームでも利用しているローカル環境でも動作するTiddlyWikiを紹介され試用してみることにした。

TiddlyWikiは、JavaScriptで動作しPerlやPHP,rubyやApache等、Webブラウザ以外の動作環境を必要としない。

つまり、ファイルサーバ（個人で使うのであればローカルドライブでもUSBメモリ等でもよい）にWikiの構成ファイル（HTML1個）を置いておくだけで、即時にWikiシステムの利用が可能となるのだ。

記事単位での排他制御はできない為、多人数での同時編集には向かない（編集内容がロストする恐れがある）が、記事の追加の頻度を考えると、今回の用途においてはこの仕様でも問題なかろう。

ちなみに検索すると、排他制御を実装しているプラグインを見つけた。これを利用することで、前述のような心配は極力減らすことができるだろう。

TiddlyWikiに関するドキュメントだが、日本語の解説サイトがすでにいくつも公開されているので、一般的な使い方・またカスタマイズ方法を含め使用方法に困ることはないかと思う。

以下、いまさらまとめる必要性も低いと思うが、個人的にわかりにくかった部分や、カスタマイズ部分を中心に自分自身への備忘録のために記録しておく。

誤解していたこと等

存在と名前自体は、大分前から知っていたが他のwikiに比べて、機能面で劣ったりローカル環境でしか利用できないのでは？と考えていた。

改めて利用してみると、その快適さと高機能っぷりに正直驚いた。設置が容易であるという以外の面でも十分におススメできるWikiシステムであるし、設定にさえ留意すれば、一般公開のCMSとしても十分に利用できるんではないかな。

実際に、TiddlyWikiの情報を配信しているサイトは、TiddlyWikiで運用しているところも少なくない。

その１：最初に確認すること

TiddlyWikiでは内部でトリッキーな事をして変更内容を保存している為、設定いかんでは保存ができない事象が発生する。本格的な編集に入る前にブラウザにて変更内容が保存されることを確認しておくこと。

保存できない場合は、下記のサイト等を参考にされたし。自分の周辺の環境では、Firefoxでは問題なく動作しているが、IEの一部環境の場合はCIFS上で開いた場合であっても保存できない場合が発生している。

TiddlyWiki 日本語化プラグイン配布サイト(WindowsXP SP2問題)

その２：まずは必要なプラグインの取り込み

必要なプラグイン等を取り込んだ上で、空のTiddlyWikiを保存しておくとよい。新たな用途で別のTiddlyWikiを使う場合であったり、設定用のTiddlyをいじりたおしておかしくした場合の復旧に使える。

プラグインを含め外部のTiddlyWikiからのTiddly取り込みに関しては、日本語化プラグインのサイトのインストール方法に、詳しく記載されているので、それを参考にして導入するとよい。
TiddlyWiki 日本語化プラグイン配布サイト(インストール)

個人的にインストール済みプラグイン

• HoverMenu (tw.lewcid.org)
• HoverMenuPlugin (tw.lewcid.org)
• TagCloudPlugin(www.tiddlytools.com)
• TiddlerListMacro (jackparke.googlepages.com/jtw.html)

( )内は入手元、取り込みにて指定してやるとよい。中身は、ホバーメニューの実装、タグクラウドを表示、記事リストの拡張プラグインである。

その３：特別なTiddlerを押さえておき、基本的な設定をする

他のWikiシステムでも同様だが、特殊な用途に用いる既定ページがあるので覚えておくとよい。

通常は隠しページとなっているので、右側のバー（日本語化後）より「その他」→「隠し」から表示するか、Tiddler名等を指定して表示する必要がある。

適当なページ名（help-page等）をつけて、自分専用のメモ等を（たとえば以下のように）を保存しておくのも手である。

[[タイトルの変更|SiteTitle]]
[[タイトル副題の変更|SiteSubtitle]]
[[ブラウザのタイトルバーに表示される名前を変更|WindowTitle]]
[[WikiのURLを設定|SiteUrl]]
[[左サイドバーの内容を変更する|MainMenu]]
[[起動時に表示するページの設定|DefaultTiddlers]]
[[その他の詳細設定|AdvancedOptions]]
[[追加のスタイルシートを指定|StyleSheet]]

その４：画面のカスタマイズ

デフォルトのテーマでも十分に運用できると思うが、オリジナリティ（笑）の主張と、ほんの少しの視認性向上の為に、以下のようなカスタマイズを実施してある。

htmlファイルのフォルダ配下にimgフォルダを作成し、ti.pngという名前でアイコンファイルを保存し、記事の頭に表示させてある。

tiddler:StyleSheet

.title {
background-image: url(img/ti.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 70px;
padding-top:32px;
padding-bottom:16px;
margin-bottom: 32px;
margin-top: 24px;
}

その５：ファイルサーバ上のファイルへのリンク

IEとFireFoxでは、挙動がちがうためにクリックボードのUNCパスをIE、FireFox用のリンクに展開するプログラムを作成して利用している。bookmarkletでやろうとしたら勝手にデコードされて、うまくリンクが動かなかった。Delphiのソースなので汎用性ないけど、気にしないこと。

Firefox系は、file://///ファイルパスでリンクがはれたが、IE系はUNCパスをデコードしないでそのまま記述するとうまく動作するようだ。理由はよくわからんが試行錯誤の結果、わかった。

file:project1.dpr

program Project1;
{$APPTYPE CONSOLE}
uses
  SysUtils,Clipbrd;
var
    cp,wkstr,wkstr2:string;
  begin
    cp := clipboard.astext;
    wkstr := '!!!詳細資料（クリックでファイルサーバのディレクトリが開きます）'+#13;
    wkstr := wkstr + '[img[img/ie_ico.png]][[IE利用ユーザー|'+cp+']]';
    wkstr2:= cp;;
    wkstr2 := stringreplace(wkstr2,'\','/',[rfReplaceAll]);
    wkstr := wkstr + ' [img[img/ff_ico.png]] [[Firefox利用ユーザ|'+'file:///'+wkstr2+']]';
    Clipboard.AsText := wkstr;
 end.

その６：hovermenuをカスタマイズする

スクロールしても常時、定位置に表示されるホバーメニューは、hovermenupluginをインストールすることで利用可能だ。

よく使うマクロをhovermenuに登録しておくと使い勝手がよくなると思うが、デフォルトの設定ではメニューの位置や表示内容に著しく制限があるので、これをカスタマイズする。

hovermenu自体の挙動の変更は、hovermenupluginを編集し、hovermenuの内容自体はhovermenuを編集することで可能。

まずは表示をカスタマイズするために、hovermenupluginを編集する。まずは、デフォルトは右端に表示なので好みにあわせて変更する。右寄せ、左寄せ、マージンを指定。

tiddler:hovermenuplugin

/***
HoverMenu configuration settings
***/
//{{{
config.hoverMenu.settings={
               align: 'left',    //align menu to right or left side of screen, possible values are 'right' and 'left'
               x: 16,              // horizontal distance of menu from side of screen, increase to your liking.
               y: 250            //vertical distance of menu from top of screen at start, increase or decrease to your liking
               };
//}}}

CSS設定を以下のように変更する（横にサイズを拡大）

tiddler:hovermenuplugin

setStylesheet(
"#hoverMenu .imgLink, #hoverMenu .imgLink:hover {border:none; padding:0px; float:center; margin-bottom:2px; margin-top:0px;}\n"+
"#hoverMenu  .button, #hoverMenu  .tiddlyLink {border:none; font-weight:bold; background:#333344; color:#FFF; padding:0 5px; float:right; margin-bottom:4px; opacity:0.8}\n"+
"#hoverMenu .button:hover, #hoverMenu .tiddlyLink:hover {font-weight:bold; border:none; color:#fff; background:#ffbf00; padding:0 5px; float:right; margin-bottom:4px;}\n"+
"#hoverMenu .button {width:120px; text-align:center}"+
"#hoverMenu { position:absolute; width:120px;}\n"+
"\n","hoverMenuStyles");

上記のようにカスタマイズした上で、以下のようにhovermenuを設定した。

tiddler:hovermenu

<pre>
<<search>>

<<top>><<renameButton 画面上部へ>>
<<permaview>>
<<newTiddler text:{{store.getTiddlerText("ArticleTemplate")}}>>
<<toggleSideBar>><<renameButton サイドバーON/OFF>>
<<closeAll>>
<<saveChanges>>
</pre>

その７：新規作成時のテンプレートを指定

テンプレートとなるTiddlerを作成し、新規作成のリンク用のマクロで指定する。

hovermenuや、通常のMainMenuの中に書いてもいいし、右のサイドバーの中（SideBarOptions）に書いてもよいかもしれない。

tiddler:SideBarOptions

<<newTiddler text:{{store.getTiddlerText("ArticleTemplate")}}>>

以上。

この記事に関連するエントリはまだ存在しません