TiddlyMap Plugin


Photo by Cam DiCecca on Unsplash


http://tiddlywiki.com/ に、TiddlyMap Plugin(http://tiddlymap.org/)があります。
同様な機能に関して仕事で触れたことがあるので、しばらく使ってみました。


このプラグインを入れるとMapタブが表示されるようになります。
導入しているPluginはちょっと前のものなので、最新での動作が異なる可能性があります。


本来の使い方ではないのかもしれないですが、Tiddlerの関連付けに使っています。


Nodeの登録

1.Mapで新規のビューの名前を指定し、OKボタンを押下します。ここでは New PC 2017 Configuration としています。新規のビューがMapで表示されます。ここでは空白のマップになります。
Add Node と Add Edgeの2つが表示されます。




2.Add Nodeをクリックします。



3.既存のTiddlerを指定します。ここでは ASUS PRIME X370-PRO を指定し、OKを押下します。



4.Mapに選択したTiddlerが表示されます。



5.同様な手順でToddler AMD Ryzen5 1600X と Corsair DDR3-2666を追加します。




Edgeの登録

1.Tiddlerの関連性を指定します。
Node ASUS PRIME X370-PRO をクリックし AMD Ryzen5 1600X へドラッグします。二つのNode間の関連性を指定する事になります。ここではタイプを connect としていますが、名前は任意です。Add Edgeを押下しても同様な動作となります。




2.NodeASUS PRIME X370-PRO Corsair DDR3-2666間でも同様にタイプconnect で関連付けます。


から


をクリックし、Raster Sizesから50pxを選択します。表示が以下に様に変化します。(グリッド表示になります。)



Map上でNodeを選択すると、ツールバーで Edit Node が使えるようになります。
Edit Nodeを使用するとMap上のスタイルに関する情報を変更可能です。


以下はTiddler AMD Ryzen5 1600X ですが、新しいボタンが追加され、その使用によって他の関連付けられたTiddlerの情報を参照できるようになります。




注意点
この機能はいいのですが、Offline つまり単一のHTMLファイルで使用している場合、マップの作成によってファイルサイズが肥大します。どの程度かまでは調べていないのですが、人によっては気になるかもしれません。



Tiddlerでのアイコン登録
また、今回の例の場合、マップでNodeのアイコン表示をさせています。Tiddlerでアイコン登録していれば、Mapでも同様に表示できますので、Tiddlerでのアイコン登録の手順を記します。

  1. アイコン用画像を準備します。
  2. TiddleyWikiへドラッグしてインポートします。例として画像ファイル名をABC.PNGとします。そのまま登録するとABC.PNGというTiddlerができます。
  3. 新しいTiddlerを準備します。ここではDEFという名前とします。
  4. Tiddlerの編集をし、下部の Add a new fieldでiconを指定し、value field で上記でと黒くしたABC.PNGを指定します。
  5. Tiddler DEFにアイコンとしてABC.PNGが表示されるようになります。