« スタイリッシュで高機能になったTiddlyWiki5の使い方。 | トップページ | TiddlyWiki5のカスタマイズ その2 YATTUKEブログ風詰め合わせテンプレート »

2013年11月30日 (土)

TiddlyWiki5のカスタマイズ その1

先日、「スタイリッシュで高機能になった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に次々とインポートするととりあえず同じものが出来ます。そこから必要に応じてカスタマイズします。

Toptoolbar

私の場合こんな感じになりました。左から「フルスクリーン切り替えボタン」、「サイドバー表示・非表示切り替えボタン」、「ビューモード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という2つの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リストをもっと便利に。タスク追加からの経過時間も表示

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>

こんな感じです。

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

« スタイリッシュで高機能になったTiddlyWiki5の使い方。 | トップページ | TiddlyWiki5のカスタマイズ その2 YATTUKEブログ風詰め合わせテンプレート »

TiddlyWiki」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1169291/54098738

この記事へのトラックバック一覧です: TiddlyWiki5のカスタマイズ その1:

« スタイリッシュで高機能になったTiddlyWiki5の使い方。 | トップページ | TiddlyWiki5のカスタマイズ その2 YATTUKEブログ風詰め合わせテンプレート »

広告欄


やっつけタイムライン

広告欄

はてブ

人目の訪問です。

  • follow us in feedly

    かなり更新が不定期なため、RSSリーダーをオススメします。現在Feedlyに122人登録頂いています。多謝!RSSを表示

    ブログランキング用 にほんブログ村 IT技術ブログ Pythonへ ブログランキングならblogram






    Jenny Mayhem
2017年7月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

IT技術注目記事

無料ブログはココログ