TiddlyWiki5のカスタマイズ その１

先日、「スタイリッシュで高機能になったTiddlyWiki5の使い方。」という記事を書いて紹介したTiddlyWiki5ですが、かなり素晴らしく使い込んでいっています。という訳で、今日はカスタマイズネタの記事を書きます。

「他のTiddlerを閉じる」には？

クラッシックでは重宝した「他のTiddlerを閉じる」機能なんですが、TW5ではToolsタブにあるViewの切り替えで対応するようになったみたいです。classicとzoominというビューモードがあるのですが、classicではいつものように開いたタブが縦に並んで表示され、zoominでは現在編集中か最後に使ったTiddlerだけが表示されます。zoominというビューモードが「他のTiddlerを閉じる」のかわりみたいな感じですね。一応tw-close-other-tiddlersというメッセージが最近追加されたので、「他のTiddlerを閉じる」ボタンを作るのは以下の通りすれば簡単にできます。

<$button message="tw-close-other-tiddlers">close others</$button>

ただし、これをどこに置くかというのが問題です。ボタンをTiddlerに設置すると期待通り他のTiddlerが閉じてくれるのですが、ボタンをトップやサイドのツールバーに置くとどのTiddlerが残るかというのが曖昧になります。一番最初に開いたTiddlerが残るようですが、最後に使ったTiddlerが残るようにカスタマイズに挑戦したものの、うまく出来なかったのでzoominビューモードとClassicを切り替えるボタンをトップのツールバーに設置して対応しました。

トップにツールバーを追加。

（追記：ベータ版の途中で仕様が変わったので、記事の内容はそのまま正式版5.1ではおそらく使えません。TonGernerさんの元ネタの記事は最新版に対応していますので、そちらを参照ください。）

トップにツールバーって？と思ったかもしれませんが、TonGernerさんが作ったトップにツールバーを追加するチュートリアルがあります。これを参考に、色々とカスタマイズしてみました。チュートリアルは難しそうですが、実際には必要なTiddlerをドラッグして自分のTW5に次々とインポートするととりあえず同じものが出来ます。そこから必要に応じてカスタマイズします。

私の場合こんな感じになりました。左から「フルスクリーン切り替えボタン」、「サイドバー表示・非表示切り替えボタン」、「ビューモードClassic・Zoomin切り替えボタン」、「すべてのTiddlerを閉じるボタン」ときて、よくみるTiddlerへのリンクやTW5の公式サイトへのリンクなどが続きます。

チュートリアルに従ってトップのツールバーを設置すると$:/TopSideBarというTiddlerを作りますが（正式版ではおそらくAboveStoryというTiddlerがこれに対応します。）、カスタマイズ後にこんな感じになりました。

<div class="tw-page-controls tw-topmenu"> {{$:/Full-Screen-button}}{{$:/Top-toggle-sidebar-button}}{{$:/Top-toggle-view-button}}{{$:/close-all-button}}<$list filter="[tag[concepts]sort[title]]"><$link to={{!!title}}><$view field="title"/></$link>/ </$list> [[OfficialSite|http://five.tiddlywiki.com/]]/ [[TaskList]] </div>

$:/で始まっているTiddlerはシステムTiddlerとなるので、普通に検索窓から検索しても出てこないので、MoreからSystemに行かないと見れません。$:/Top-toggle-sidebar-buttonなどのTiddlerもチュートリアルから自分のTW5にドラッグしてインポートしてきたものです。

Full-Screen-buttonとclose-all-buttonは自分で応用して作ってみました。例えばFull-Screen-buttonは$:/Full-Screen-buttonと$:/images/full-screenという２つのTiddlerからできています。

$:/Full-Screen-button

<$button message="tw-full-screen" class="btn-invisible">{{$:/images/full-screen}}

$:/images/full-screen

<svg viewBox="0 0 512 512" width="22pt" height="22pt" enable-background="new 0 0 512 512"> <path d="M225.874,154.845l79.072,61.602l-33.451,5.631l22.025,44.543l-20.699,10.598l-22.135-45.371 l-24.812,23.182V154.845z M50,63.854v300.109h412V63.854H50z M419.891,321.856H92.109l-0.001-215.893l327.782-0.002V321.856z M366,423.146v25H146.001v-25H196v-33.762h120v33.762H366z"/> </svg>

close-all-buttonの方は$:/close-all-buttonと$:/images/close-all-buttonからできています。

$:/close-all-button

<$button message="tw-close-all-tiddlers" class="btn-invisible">{{$:/images/close-all-button}}</$button>

$:/images/close-all-button

<svg width="20pt" height="20pt" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path d="M256,50C142.229,50,50,142.229,50,256s92.229,206,206,206s206-92.229,206-206S369.771,50,256,50z M334.124,378.545l-77.122-77.117l-77.123,77.127l-41.425-41.449l77.106-77.117l-77.115-77.11l41.448-41.424l77.103,77.092 l77.09-77.102l41.459,41.432l-77.104,77.108l77.113,77.102L334.124,378.545z"/> </svg>

Todoリストをもっと便利に。タスク追加からの経過時間も表示

公式サイトにあるTaskManagementExampleにちょっと手を加えて、タスク追加からの経過時間も表示するようにしてみました。$viewでcreatedの日時をrelativedateとしてフォーマットして表示することでタスク追加時から現在までの経過時間に変換指定ます。

<$list filter="[!has[draft.of]tag[task]!tag[done]sort[created]]"> <$checkbox tag="done"> <$link to={{!!title}}><$view field="title"/> (<$view field="created" format="relativedate"/>)</$link></$checkbox> </$list>

こんな感じです。

などなどクラッシックの時のようにいろいろとカスタマイズして自分の用途に合うようにしていけるのがいいですね。