スタイリッシュで高機能になったTiddlyWiki5の使い方。

当ブログはTiddlyWikiについては色々と書いてきましたが、次期バージョンのTiddlyWiki5の開発がかなり進んでいるようです。

正式なリリースの前にはアルファ・ベータテストというのをするのですが、アルファテストというのは開発者達でテストする内部テストで、それが終わるとベータテストで外部の少人数の一般のユーザーに使ってもらって問題がないか確認します。

This is TiddlyWiki5 version 5.0.0-alpha.15. It is drawing to the end of the alpha phase, meaning it is almost ready for everyday use.

とアナウンスされていますので、そろそろ普通の人が使っても大丈夫なほど仕様が固まって完成度が上がってきたということですね。半年まえくらいにはまだまだまだかなぁと思っていたので、開発ペースが上がっているみたいですね。

今日、試しにつかってみたんですが、なかなかいい！です。まえのTiddlyWikiはTiddlyWikiクラッシックと呼んで新しいのはTW5と略したりするみたいですが、クラッシックのときは画像の埋め込みにはプラグインを使わないといろいろ面倒だったのですが、TiddlyWiki5では超簡単になりました。あとは、TiddlyWikiをToDo管理に使う人も多かったですが、これもプラグインなしでとってもエレガントにこなします。あとは画面がHTML5で描写されているのでフェイドイン・フェイド・アウトなど多用していてカッコイイです。あとはクラッシックにもあったか定かでないですが、TiddlerFiltersという機能が非常に強力で素晴らしいです。これを使うとダイナミックなコンテンツの管理が可能になります（下記参照）。また、暗号化もできるようです。以下に、もう少し突っ込んで個々の改善点・変更点を紹介します。

基本：Tiddlerの編集

検索窓の上の+アイコンで新しいTiddlerの追加をします。Tiddler右上のペンのアイコンで編集を開始。編集が終わったらチェックマーク（レ）のアイコンで編集を終了します。マルバツのアイコンは編集内容の破棄になります。ゴミ箱はTiddlerの削除です。タグの追加も上のプルダウンメニューから簡単にできます。TypeというのはイメージやMarkdown（要プラグイン）、WikiTextなどの種類のことでデフォルトはWikiTextなので変更することは少ないでしょう。Add a new fieldのところは高度なことに必要で普段は使わないと思います。

画像の埋め込み

TW5はスクリーンショットなどのイメージをつかった覚書を書くのにとっても向いているとおもいます。TiddlyWiki5ではイメージファイルやベクター形式の画像ファイル（SVG）もサポートされて、画像の埋め込みがドラッグ＆ドロップで簡単に出来てしまうのです。さらにTranclusionという機能がありまして、これを使うとドラッグ＆ドロップでTiddlyWiki5にTiddlerとして保存しておいた画像を簡単に他のTiddlerに埋め込むことができるのです。TranclusionとはあるTiddlerから他のTiddlerを参照したときに不必要な情報を排斥する仕組みのことのようですが、実例を示さないとワケガワカラナイヨですね。

Tranclusionを使った楽ちんな画像埋め込み方の手順

という訳で、実例です。

• 画像ファイルをTiddlyWiki5の上の緑のバーのところにドラッグ＆ドロップすると新しく画像ファイルのTiddlerができる（この時点でリンクではなく画像データがTiddlerに埋め込まれているので画像ファイルがどこにあるかは忘れていいのがいいですね）。
• 他のTiddlerから画像が埋め込まれているTiddlerの名前で、二重のカーリブラケットで{{Koala.jpg}}という感じで参照する。

これだけです。画像が埋め込まれているTiddlerの名前は元のファイル名から自動で付けられますが、変更しても構わないので、短く覚えやすい名前に変えてしまうと参照しやすいですね。

もちろんローカルファイルを直接パスで指定するこれまでの方法も使えます。その場合も{{ファイルパス}}です。

TiddlerFiltersを使ったダイナミックなコンテンツの活用

公式サイトのToDo管理の例を挙げて説明します。

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

こうすることで$listというタグで囲まれた部分に条件に合うTiddlerが箇条書きリストになります。filter=の部分がTiddlerFiltersです。この例では!has[draft.of]で下書き（編集中のTiddlerのことかな？）を除外し、tag[task]でtaskというタグが付いたTiddlerに絞込した上で、さらに!tag[done]でdoneというタグが付いたTiddlerを除外し、最後にsort[created]で作成された時間順に並べ替えしています。さらにこれを$checkboxで挟むことで箇条書きがチェックリストにしています。$checkboxのtag="done"の部分でユーザーが実際にボックスをチェックしたときに該当するTiddlerにdoneというタグを送っています。これでタスクが完了状態になっちゃうのです。

Tiddler内にタブをもつ

これはTab macroをつかって条件に合うTiddlerをタブとしてTiddlerとして表示する方法ですが、デモを見るのが早いです。ここにデモがあります。二行ほどのマクロでこれです、すごいですね～。

Chrome vs Firefox vs iPad/iPhone?

クラッシックの時はChromeのサポートは結構ダメだった気がしますが、Firefoxでばっかり使っていたのでよくわかりません。TW5ではChromeでも使えるようですが、ダウンロードして上書きするという手順らしいです。検索窓上の保存（ダウンロード）アイコンで保存します。

Firefoxの場合、保存にはクラッシック同様にTiddlyFoxというアドオンが必要です。当方はFirefoxでクラッシックを使っていたのでそのまま使い回しで大丈夫でした。

iPad/iPhoneも一応サポートになったようですが、TWEditというのが必要だそうです。アップル製品もってないのでテストしていません。

CodeMirrorやMarkdownなどの機能を付加するプラグイン

TW5ではプラグインのインポートやTiddlerのインポートもドラッグ＆ドロップで可能です。

プラグインにはデフォルトのWikiTextではなくMarkdownのWikiシンタックスを使えるMarkdownプラグインやCodeMirrorを利用した高機能なエディターでTiddlerの編集ができるCodeMirrorプラグインがあります。これらのプラグインは公式サイトのFeaturesのところに紹介されてます。

ただし、Markdownは今のところマクロやTiddlerFiltersなどがデフォルトのWikiTextでしか出来ないようなので、既存のMarkdownの文書をインポートするときくらいしか使い道がないかもしれません。

インポートの仕方は、例えばCodeMirrorのプラグインのページを開いて、HelloThereのTiddler内にある$:/plugins/tiddlywiki/codemirrorというリンクをマウスでドラックして、自分のTW5のタブまで持っていきます。タブが切り替わったらページ内にドロップして、自分のTW5にインポート完了です。この作業が難しかったらウィンドウを２つ開いてしまえば簡単です。

テーマ（スキン）の切り替え

デフォルトのテーマはSnow Whiteといって白雪姫のように真っ白なテーマで、ちょっと眩しいのでグレイ系のカッコイイテーマはないものかとおもい探してみましたが、まだあまりないようですね。しかし、Bob Robisonさんが作ったテーマがいくつ公式にリンクされていますが、その中でStarlightというテーマがいい感じです。GitHubのTW5の最新版のコードには彼のテーマが含まれているみたいなので、次期バージョンからは同梱されるのではないかと思いますが、いまのアルファ15版で使いたい場合は自分でインポートする必要があります。

私はStarlightを多少カスタマイズして使っています。といっても追加したテーマのカスタマイズは現段階では出来ないようなのでSnow Whiteのテーマを変更して、それをベースにしているStarlightを間接的に変更する形になります。

テーマの切り替えは右のToolsのタブからCurrent themeのところで選びます。Snow Whiteのカスタマイズは検索窓の上の歯車のアイコンからTheme Tweaksで行います。Starlightの方はこれをベースに変更を加えているのでいくつかの設定はStarlightによって上書きされて変更できないです。

CloseAll（すべて閉じる）はどこ？

右のOpenタブで現在開いているTiddlerの一覧がでますが、一番下のTiddlerのちょっと下までマウスを持って行くとClose allのボタンが現れます。デフォルトのテーマではちょっと見にくいです。

などなどクラッシックを使っていたらわりと簡単に使いはじめることができると思います。

TiddlyWiki5のカスタマイズ　その壱へ続く。