カテゴリー「TiddlyWiki」の19件の記事

2014年10月11日 (土)

Tiddlywiki5の安定版5.1シリーズが正式にリリース!使い方・基本

TiddlyWiki5とは

TiddlyWiki5はブラウザ内で自分用のメモを画像つきで書いたり、関連したメモをまとめたりするのに便利なツールです。WikitextというMarkDownに似た感じのマークアップ言語でもって簡単に見栄えの良いメモを書けるのが特徴です。

一つのHTMLファイルとそれに埋め込まれたjavascriptでできているので、オフラインでも使える自分専用のウィキサイトといった感じです。ブラウザ内でメモを取るという意味で、Evernoteと用途がかぶりますが、クラウドじゃないのでデータを自分のPCにおいておけて、暗号化もできるので、セキュリティ的にも利点があります。

安定版の5.1シリーズがリリース

いまではTiddlyWikiクラッシックと呼ばれる前バージョンもまだまだ現役で使われていますが、HTML5の技術を使って位置から作りなおしたTiddlyWiki5が開発中でしたが、長いベータテストを経て2014年の9月20日あたりにようやく正式安定版の5.1シリーズがリリースされました。(すぐにマイナーなアップデートがあったので、執筆時では5.1.2が最新版です)

これで、内部の仕様が固まったということなので、これからのアップデートは下位互換を保った形になります。

つまり、テーマ(スキン)やプラグインの制作者が、仕様変更を恐れずに安心して制作できる環境が整ったということで、いろいろとサードパーティからのツールが増えてくると思います。ユーザーにしても、アップデートが簡単になるはずなので、ようやくみんなにおすすめ出来る状態になりました。

インストールの方法

インストールといってもタダのHTMLファイルなのでダウンロードしてくればいいんですが、どっからダウンロードするかが、多少ややこしいかもしれません。

TiddlyWiki5の公式サイトへ行き、HelloThereの下にあるTiddlerのGetting startedをスクロールして、緑色のDownload Enptyというのをクリックして、好きなところへ保存してください。それだけです。保存先をDropboxとかにすると便利です。

Tw5_download

オンラインアップグレード(アップデート)の方法

当ブログではベータ版のときから使用感をレポートしていたので、TW5をもう使い始めている人もいると思います。そ言ういう場合は、TiddlyWiki5の公式サイトから、右の検索窓にUpgradingと打ち込んでUpgradingのTiddlerを出します。するといくつか方法が書いてありますが、多分簡単なのはオンラインアップデートです。

  1. 書いてある通りhttp://tiddlywiki.com/upgrade.htmlに行き
  2. 表示されたページに自分のTiddlyWiki5のファイルをマウスでドラック・ドロップします。
  3. 次のページで、必要なタイドラーにチェックしてから、上の方の「Upgrade」のボタンを押して、
  4. 次のページで、Save upgraded TiddlyWiki fileをクリックして、別名で保存します。

この方法だと、$マークから始まるシステムタイドラーがやたらあって、これをアンチェックするのがめんどかったりします。

個別のTiddlerを手作業でインポートする方法

もし、インポートするTiddlerがあんまりない場合は、手作業で欲しいのだけ新しいファイルにドラッグする方が簡単かもしれません。

その場合、最新版のEmptyファイルをダウンロードして、この最新のTiddlyWiki5のファイルと、古いTiddlyWiki5のファイルを同時に開いて、古いTiddlyWiki5から新しい方へTiddlerをドラッグします。ドラッグの仕方は、右のmoreのタブからallを選んで、欲しいTiddlerのタイトルを掴んで新しいTiddlyWiki5の方へドロップします。$:/ImportのTiddlerでキャンセルかインポートか確認されるので、Importボタンで確認してください。

TWクラッシックからの新機能は?

TiddlyWiki5ではいろいろとデザインや機能が変更・追加されています。

スタイリッシュで高機能になったTiddlyWiki5の使い方。にTWクラッシックからの変更点など基本的なことは書いたのでそちらを見てもらって、ここではこれらの変更に加えて、正式版がでる直前に追加されたKaTeX Pluginというプラグインについて紹介します。

これはTiddlyWiki5に標準でついてくるプラグインなので、Emptyをダウンロードしてきてすぐにきれいな数式の表示がTexのシンタックスで表現できます。

http://tiddlywiki.com/plugins/tiddlywiki/katex/にある用例を見てもらうとわかると思いますが、$$サインでTexを囲ってやるだけで簡単です。

TiddlyWikiクラッシックの方ではMathJax Pluginというのがありましたが、KaTeX は速さが売りの新しいTexライブラリで、公式サイトの下の方でMathJaxとの比較がありますが、KaTeX は明らかに速いのがわかります。TiddlyWiki5でもMathJax Pluginをつかえますが、両方使った結果、体感的にもKaTeXが速かったです。

保存の仕方とFirefoxのおすすめ。

いろいろと編集した後に、右側の保存ボタンが赤くなっているときには、まだ保存されていない変更があるという状態なので、ブラウザを閉じる前にしっかりと保存しましょう。

Chromeの場合、ブラウザのセキュリティのポリシーによってコンピュータ上のファイルを書き換えることが出来ないようになっていますので、ダウンロードしてファイルを上書きすることで保存になります。このとき、ブラウザのアドレスバーからファイルの場所をクリックボードにコピーしてから、保存ボタンを押して、ファイルダイアログのファイル名にそのままペーストしてやると、ファイルを探すのが省けて簡単です。

しかし、こまめに保存したい場合はこの方法では辛いです。実はFirefoxを使うと保存が自動で行われるようにできるFirefoxのアドインがありますので、TiddlywikiにはFirefoxがおすすめです。

最新版のFirefoxは、こちらでダウンロードできます。

Firefoxをダウンロードしたら、アドイン「TiddlyFox extension for Firefox」を追加します。再起動して、FirefoxでTiddlywikiファイルを開きます。ダイアログで、このファイルの変更を許可するか聞いて来るので許可します。これで、Tiddlerを編集した後、自動で保存されるようになりますし、手動で保存ボタンを押した時もダウンロードではなく、ファイルの上書きで、あっという間に保存されます。保存を自動化にするか手動にするかは右の歯車のアイコンからControl Panelへ行き、SettingタブのAutosaveから設定します。

他にもFirefoxはプライバシー保護に関するアドオンが充実しているのが、Chromeに勝るアドバンテージです。Googleはユーザーの行動を追跡して、最適な広告を表示するために、クッキーとjavascriptに強く依存しているので、ユーザーが信用するサイトだけでクッキーとjavascriptを許可するようなことが可能なFirefoxに対抗するためにChromeを作りました。

私は「RequestPolicy 」というアドオンでjavascriptを信用できるサイトのみに手動で許可しています。

という訳でTiddlywiki5にはFirefoxがおすすめです。

豆知識

マイクロ(µ)とかのギリシャ文字やコピーライトの文字(©)などはHTMLで規定されているSymbolがそのまま使えます。便利な表はこちら

µ でマイクロ

© でコピーライト

予定

今まで書いてきた記事は、ベータ版でしか関係ないことも多いので暇を見て基本的な使い方、便利な使い方、カスタマイズ等改めて記事にしていこうかなと思います。

それまでは、古い記事も多少は参考になると思いますので、こちらを参照ください。

英語ですが、TW5 Magickというサイトがいろいろとコツがまとまっているので、おすすめです。

2014年8月14日 (木)

TiddlyWiki for Scholarsがやたらっカッコいい件。

Tw_for_scholar

tiddlywikiのGoogle groupsのスレッドにあったTiddlyWiki for Scholarsというのがすごいです。Tiddlerの下にくっつけられるウィジットがなんか強力そうだし、とてもスタイリッシュでかっこいい!!

アルファプレビューということで、empty版の配布はまだされていないですが、もうすぐリリースになると思われます。

2014/08/14の段階ではTiddlyWikiのバージョンは5.0.13-betaですが、TiddlyWiki 5.0.14-betaがリリースされると自動アップデート機能が追加される予定なので、製作者のAlberto Molinaさんは、その機能を使ってempty版をつくる予定だそうですので、使いはじめるのはちょっとまった方がいいですね。

おや、TiddlyWiki 5.0.14-betaが執筆中にリリースになりました!ただバグが早くも見つかったので、5.0.15-betaが24時間以内にリリースされる予定ですが。。いづれにしろ、数日中にTiddlyWiki for Scholarsのempty版の配布があると思われます。

Tiddlerの下にくっつけられるウィジットでは、コメントつけたり、関連した情報をいろいろと貼っつけることができるようで、なんか凄そうなんですが、ちゃんと試していないのでどうやって使いこなすのかわかりません。

empty版の配布がもうすぐなので、それから試してみますね。楽しみ。

追記) 2014/08/17日曜日にTiddlyWiki for Scholarsベータ版がリリースになりました。TiddlyWiki 5.0.14-betaを元にしているようです。同じ日にTiddlyWiki 5.0.15-betaへのアップデートもメーリングリストでは予告されてますが、それは待たないでリリースになったようですね。

下の方のHow toのところにある緑色のDownloadボタンからダウンロードできます。あとは自分のTiddlersをインポートすればいいですね。

使いこなすまで時間が掛かりそうですが、面白そうです!

2014年8月13日 (水)

TiddlyWikiでOrdered ListとUnordered Listsをネストして混ぜる

TiddlyWikiの公式サイトにあるLists in WikiTextに大体説明されていますが、Ordered Listの中にUnordered Listsをネストして持つことができるのか、ちょっとわからなかったのですが、#と*を使ってできるようです。

公式サイトではUnordered Listsの中にOrdered Listをネストしています。

* To do today
*# Eat
* To get someone else to do
*# This
*# That
*## And the other

とすると

  • To do today
    1. Eat
  • To get someone else to do
    1. This
    2. That
      1. And the other

となります。

なので#と*を入れ替えて、

# To do today
#* Eat
# To get someone else to do
#* This
#* That
#** And the other

とすると

  1. To do today
    • Eat
  2. To get someone else to do
    • This
    • That
      • And the other

となりました。

2014年7月 2日 (水)

Tiddlywiki5でfaviconを設定してみる。

5.0.0-alpha.17からしばらくアップデートしていなかったTiddlywiki5を今日最新版の5.0.13-betaにアップデートしてみました。

$で始まるシステムタイドラーが、もはや互換性がないので普通にファイルからのimport機能をつかうとレイアウトが乱れてしまうので、手作業でRecentのタブを開いて必要なTiddlersだけドラッグしてコピーしてしまいました。正式版が出るまではデザインとかプラグインとか色々とカスタマイズしてもアップデートしたら使えないということが多いので、ほどほどにしたほうがいいですね。

さて、私はTiddlyWikiのタブをPinしてたたんで常駐させることが多いんですが、そうすると他のタブと区別するにはファビコンに頼るとこになるので、ちゃんと設定してみました。いつのバージョンから可能になったのかは知りませんが、簡単に設定できるようになってますね。

やり方

Tw5_favicon

  • $:/favicon.icoをMoreタブのSystemから開いて削除。
  • 好きな画像のファイル(真四角なのがいいです)をTiddlywiki5のページにドラッグして、上の緑のバーにドロップする。私はicoファイルを使いましたが、pngでもなんでもサポートされている画像ファイルなら大丈夫と思います。
  • できたTiddlerの名前を$:/favicon.icoにする。
  • ✓ボタンを押して、内容の編集に行き、サイズを16x16に変更する。
  • リロード

簡単ですね。

2013年12月 2日 (月)

TiddlyWiki5のカスタマイズ その3 アルファ版でのコアのアップデート

またまた、EverNoteよりも柔軟性が高いウィキスクラップブックTiddlerWiki5についての人柱情報です。

昨日までの記事ではアルファ版のversion 5.0.0-alpha.15をもとにカスタマイズしていたのですが、公式サイトではバージョンがversion 5.0.0-alpha.17になっていました。使い始めて一週間も経ってないのに二回もバージョンが上がっているので開発スピードが早いですね。

さて、早速人柱として「TW5詰め込みテンプレート」のTW5コアのバージョンを上げて見ましたが、いくつかトラブルがあったので書いておきます。

バージョンアップデート自体は簡単で、公式サイトから最新版をダウンロードして、Toolsからインポートでalpha15の「TW5詰め込みテンプレート」からTiddlerをインポートします。これで、普通のTiddlerはすべてインポートされていい感じですが、いくつかの設定が失われました。具体的にはdefault tiddlerの設定と、テーマの設定全般、$:/で始まるシステムTiddlerが失われました。

システムTiddlerについては、不具合を避けるために必要な措置でしょうがありません。TWクラッシックではコアのバージョンを上げる機能があり簡単に出来ましたが、TW5でもいずれ実装されるでしょう。ただし、これはベータテストが終わって正式版のリリースまでは仕様が固まらないため実装されないでしょう。

という訳で、正式版がリリースされるまではアップデートは色々とトラブルがあると思いますが、対策としては、(1)正式版までアップデートしない、(2)当ブログYattsukeBlogがアップデートしたテンプレートをリリースするのを待ち、それを使って通常のTiddlerをインポートする、(3)人柱になる。などがあると思います。

アルファ版17以降でのトップのツールバーの設置

という訳で、トップのツールバーはシステムTiddlerで実装されているので消えてしまいましたが、以下の手順で復活しました。

TonGernerさんによるToolbar in top menuを参考に設置したトップのツールバーですが、これの実装はちょっとハッキッシュな感じで、$:/core/ui/PageTemplateに{{$:/TopSideBar}}がプレースホルダーとしてあるのを利用しています。ところが、アルファ版17では記述がなくなってしまったため同じ方法が使えません。

アルファ版17の$:/core/ui/PageTemplateを眺めてみると$:/tags/PageTemplateというタグが付いたTiddlerをフィルターしているようなので試しに$:/TopSideBarに$:/tags/PageTemplateのタグを追加してみたらあっさりと設置されました。コアのTiddlerは編集できませんが、このように$:/tags/PageTemplateを追加することで間接的にページのレイアウトを柔軟に変更できるようになったみたいです。これはいいですね。

アルファ版16のリリースノートには

The page building blocks are now driven by the system tag $:/tags/PageTemplate $:/TopSideBar and $:/LeftSideBar are no longer specially treated; use the new tag instead

とあったので、16からの変更だったようで、リリースノートちゃんと読んでいれば苦労せずにすんだ話でした。。

テンプレートとは言いつつも機能紹介のために沢山Tiddlerを詰め込んだため、実際にこれをつかって自分のメモ用TW5をアップデートしたら消すものがいっぱいあったのでこれはいかんなぁということでできるだけまっさらなemptyと詰め合わせのdemoの2つにわけました。

「TW5詰め込みテンプレートデモ用」のダウンロード

「TW5詰め込みテンプレートまっさら版」のダウンロード

2013年12月 1日 (日)

TiddlyWiki5のカスタマイズ その2 YATTUKEブログ風詰め合わせテンプレート

Ybtemplate_2

最近、「スタイリッシュで高機能になったTiddlyWiki5の使い方。」という記事を書いて紹介したTiddlyWiki5のカスタマイズネタの記事第2弾です。TiddlerWiki5EverNoteよりも柔軟性が高いウィキスクラップブックです。 その壱はこちらからご覧ください。

まずは、アナウンスメントです。ここまで色々と使い方やカスタマイズの仕方を紹介してきましたが、ぶっちゃけ説明だけではわかりにくいと思うので、使ってみるのが一番ということで、今までのカスタマイズをまとめて詰め込んだTW5のテンプレート(上)を制作しました。ご自由にお使いください。

「TW5詰め込みテンプレート」のダウンロード

ダウンロードにはこちらのリンクから右クリックから保存してください。FirefoxとTiddlyFoxアドオンでの使用をおすすめします。

テーマ(スキン)のカスタマイズ

前回テーマ(スキン)はStarlightをちょっといじって使っていると書きましたが、いまいちカスタマイズの自由度が限られているので、どうしたものかと思っていたのですが、CSSをちょっと知っていればシステムTiddlerの$:/boot/boot.cssを編集して、ある程度力技でカスタマイズ可能ということを発見しました。

例えばサブタイトルa non-linear personal web notebookのところのフォントの色が背景に近すぎてよく見えません。白を基調としたデザインの一部としてはいいんですが、もっとグレイ系にしたら本当に見難くなってしまいました。

ブラウザのデバッグ機能をつかってサブタイトルの要素のクラス名をみるとtw-subtitleだとわかるので、どこでもいいので$:/boot/boot.cssに

.tw-subtitle {
    color:#111; 
}

と書き加えます。そして、セーブしてリロードすると色が変わると思います。こんな感じで変更したい要素を見つけてCSSでスタイルを変更すれば多分かなりカスタマイズ可能だと思います。

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>

こんな感じです。

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

2013年11月29日 (金)

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

Tw5

当ブログは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にインポート完了です。この作業が難しかったらウィンドウを2つ開いてしまえば簡単です。

テーマ(スキン)の切り替え

デフォルトのテーマは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のカスタマイズ その壱へ続く。

2012年12月16日 (日)

Firefox15以降、Tiddlywikiが保存できない。

Dropboxなどに入れておくと、クラウド上に個人用のウィキページとして、いろいろなメモや、URLを画像つきでまとめておけるTiddlywikiは当ブログではおすすめしてきましたが、Firefoxのサポートフォーラムを読む限り、Firefoxのバージョン15からセキュリティの強化ということで、ファイルシステムにアクセスするのができなくなったようです。
すでに解決法も同じページに書いてあって、”TiddlyFox extension for Firefox”というAddonを使用するといいらしいです。

使い方は、インストールするだけで、あとはTiddlywikiのファイルをブラウザで開くと、自動的に保存できるようにするか聞いてくるダイアログがでるので、OKと答えればいいだけです。

2010年12月19日 (日)

TiddlyWikiでプラグイン導入の仕方。

TiddlyWikiにプラグイン導入するのは一度やると簡単なんだけど、ちょっとわかりにくい。拡張性が売りなTiddlyWikiだと思うのでプラグインを使わないと真価を発揮しないとおもう。というわけで、まずは簡単なカレンダーの導入から。

http://www.tiddlytools.com/


Step1
一番上のメニューからImportを押して,上のURL(http://www.tiddlytools.com/)を入力する。で,下のOpenを押す。

Plugin_step1_2


Step2
利用可能なPluginのリストがでてくるのでCalendarのを選んで,下まで行ってクリックして次へ。つぎの画面ではただDoneをクリック。

Plugin_step2_2





Plugin_step3_2


Step3
Testとして右のリストからNew Tiddlerを選んで,これを編集して<<calendar thismonth>>と入力してdoneを押して編集終了する。

うまくいけば,カレンダーが出てくるはず。

Plugin_step4_3

 

他にも非常にたくさんのプラグインがあるのでカレンダーなどのプラグインが山のようにあるEric Shulmanさんのページを訪ねていろいろ欲しい物を物色すると吉。あとはTiddlyWikiおすすめPlug-inも参考に。

ちなにみ、GettingStartedからMainMenuを開いて、<<calendar thismonth>>を好きなところに置くと左のメニュー内にカレンダーができるのでいつでも見えるようになる。

広告欄


やっつけタイムライン

広告欄

はてブ

人目の訪問です。

  • follow us in feedly

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

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






    Jenny Mayhem
2017年2月
      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        

Amazon

IT技術注目記事

無料ブログはココログ