■ローカルで使うファイル一つのTiddlyWiki\n http://kengo.preston-net.com/archives/001951.shtml\n■Teddlywikiのバージョンアップ方法\n http://kengo.preston-net.com/archives/001955.shtml\n■TiddlyWikiの文字のサイズなどを大きくする\n http://kengo.preston-net.com/archives/001962.shtml\n
SPAN#siteTitle{\nfont-family: sans-serif;\n}\n\nDIV#mainMenu{\npadding: 2px;\ntext-align: left;\n}\n\nDIV.title{\nfont-size:large;\nborder: 2px solid #996633;\ncolor: #FFFFFF;\nbackground-color: #996633;\npadding-left: 8px;\npadding-right: 16px;\n}\n\nDIV.body{\nborder:2px solid #996633;\nbackground-color: #f0f0cc;\n}\n\nDIV#titleLine{\npadding: 1em;\n}\n\n.body {\nfont-family: "arial","verdana","sans-serif";\nfont-size:medium;\nfont-weight:normal;\nline-height:100%;\npadding-left:10px;\npadding-right:10px;\npadding-top:10px;\nletter-spacing:1px;\nbackground-color: #FFFFFF;\nborder-color: #CCCCCC;\n}
http://www.tiddlywiki.com/\n
[[目次]] [[はじめに]]
(HSJ.jp) ver.20050714 based on <<version>>
~TiddlyWikiのススメ
皆さんはパソコンを使っている際に、ふとメモをしたくなった際にどうされていますか。\n\n物理的な付箋紙に書いてモニター脇に貼ったり、付箋紙系のソフトを使ったり、いろんなテキストが混在してるデスクトップのテキストファイルを開いたり・・・いろいろやり方はありますよね。\n\nぼく自身あれこれ使ってきて、ファイル保存の手順を踏まなくてもテキストをがんがんメモすることができた[[TOMBO|http://tombo.sourceforge.jp/]] のWindows版を使っていましたが、常駐するソフトウェアが多くなるとタスクバーが鬱陶しいことになるし、階層構造の分類だけではメモ間のつながりが俯瞰できないというジレンマに陥り、結局手書きのメモをクリップで留めながら日々仕事をしていました。\n\nしかし、ある日[[Going My Way|http://kengo.preston-net.com/]]でPushされていたローカルWikiである[[TiddlyWiki|http://www.tiddlywiki.com/]]を試用してみて、「自分の求めていたものがここにある!」って感じでした。\n\n運命を感じましたね。でぃすてぃにー。\n\n基本的にWebブラウザって立ち上がりっぱなしなんですよね(笑)\nしかも常用しているFirefoxの場合、タブ機能があるので、その中でまとめることができるわけで。\nJavaScriptでガリガリ動かすものなのでどうしても足回りは遅くなるけど、Wikiネームによる関連付けやファイル名を意識せず適当なタイトルでページを起こすことができるので、電話のメモをはじめ、ToDoリストのまとめ、リンク集といった個人的なメモを固めることのできる情報ポータルがブラウザひとつで構築できるというのが最大のメリットです。\n更新時刻が逆順に表示され、「超」整理法的なファイリングも実現可能。Wikiネームによる有機的なメモ間の連携など、目を見張るものがあります。\n\nもちろん文字装飾や表組みといったWiki書法も用意されているので、メモへの味付けにも事欠きません。\n\nさらにこのTiddlyWikiが動作するHTMLファイルをFTPなどでアップロードしてしまえば、簡単なWebページがさくっと出来てしまいます(する必要があれば、だけど)。\nオプションでRSS Feed XMLファイルも出力できるできます。\n\n手元にIEかFirefoxがあれば使える、こんな素晴らしいソフト、使わないなんて勿体無いですよ!\n\nじゃ、[[早速使ってみる]]ことにしましょうか。(←「早速使ってみる」をクリックしてください。)\n\n----\n[[目次]] < 1. [[はじめに]] > 2. [[早速使ってみる]]
せっかくなので早速使ってみましょう。\n!ダウンロード\n[[ダウンロードページ|http://www.tiddlywiki.com/#DownloadSoftware]]にアクセスし、 ''__this link__ and selecting 'Save link as...' or 'Save target as...' ''と書かれている部分のthis linkを右クリックして、対象を保存します。\n名前は適当に(標準ではempty.htmlです)。ここではmemo.htmlということにしましょう。\n!!インストール\n先ほどダウンロードしたmemo.htmlを任意のフォルダにコピーします。\nただし置き場所としては(Windows+Firefoxの場合)マイドキュメントやデスクトップなどに配置することができません。全角文字(マルチバイト文字)を含まないフォルダ、例えば{{{C:\sTiddlyWiki}}}などにコピーしましょう。\n!!ブラウザで開く。\nIEやFirefoxといったブラウザで開きます。JavaScript + XML全開のプログラムなので、できれば最新版で使った方がいいような気がします。\n\n開いたら以下のような画面が出てくると思います。\n>''HelloThere''\n>This tiddler doesn't yet exist. Double-click to create it\n>\n>''LatestStuff''\n>This tiddler doesn't yet exist. Double-click to create it\n>\n>''MainFeatures''\n>This tiddler doesn't yet exist. Double-click to create it\n太字のタイトルと「This tiddler doesn't yet exist. Double-click to create it」と書かれた部分が対となり、これをこのソフトでは「tiddler」と呼びます。\nイメージ的に付箋のタイトルと本文みたいなものになるのですが、このタイトルがキーワードとなってリンクを張りまくれるのがWikiたるゆえんです。\n\nちなみにこれら三つのtiddlerは設定により初期表示されているので、あとでカスタマイズしていくことになります。\n\n!!編集する\nでは''HelloThere''と出ているtiddlerを編集することにしましょう。\n\nそこに書かれている通り「This tiddler doesn't yet exist. Double-click to create it」という部分をダブルクリックしますと、入力欄が表示されます。\n\n入力欄はタイトル「HelloThere」と本文部分「Type the text for 'HelloThere' here.」が初期値として入っています。\n本文部分は現在データが存在しないのでデフォルトでこのように出ているだけなので、ここに適当に入力してみましょう。\n>はじめての編集。\n>\n>どんなカンジなのかな?\nそして、Ctrlキーを押しながらEnterキーを押すか、タイトルの右側に出ている「Done」のボタンをクリックすると、表示が切り替わりましたよね?\n\nもう一度、ダブルクリックして、次のような表記を追加してみてください。\n\n{{{[[}}}{{{ほげほげ}}}{{{]]}}}\n\nそうすると__ほげほげ__というリンクができていると思います。これをクリックすると、「ほげほげ」というtiddlerが追加表示されます。ここの編集をする場合もダブルクリック。\n\nこういう形でtiddlerを連鎖させてどんどん書き込みができるというツールがTiddlerWikiなのです。\n\n!!保存する。\nいくらどれだけ気軽に書き込めても保存ができなければ意味がありません。\nというわけで保存しましょう。\n\n方法はいたって簡単。画面右側の「Save Changes」をクリックするだけ。\nそうすると、memo.xmlが保存できましたというメッセージが表示されます。\n\nでは保存ができたので一旦ブラウザを閉じて、もう一度memo.htmlを開いてみてください。\nHelloThereの表示は最初と変わっていますよね?\n\nこの気軽さがTiddlyWikiのウリなのです。\n\n!!ツールバーの機能\ntiddlerのタイトルの右側に表示されるツールバーの一覧です。\nまぁ、単語の意味どおりなんですけどね。\n|>|表示時のツールバー|\n|''close''|このtiddlerを閉じます(非表示にする)|\n|''edit''|このtiddlerを編集します。|\n|''permalink''|puts a link direct to the current tiddler into the address bar\n|''references''|このtiddlerを参照しているtiddlerを一気に表示します。|\n|>|編集時のツールバー|\n|''done''|変更を確定し、表示に切り替えます。|\n|''cancel''|変更をキャンセルし、もとの表示に切り替えます。|\n|''delete''|このtiddlerを削除します(AutoSaveの場合、自動的に消えるので注意!)|\n\n----\n[[目次]] < 1. [[はじめに]] < 2. [[早速使ってみる]] > 3. [[書き方(詳細)]]\n
改行してただ打っているだけでも十分メモ帳として機能するわけですが、''強調したい!''とか''表組みにしたい!''とか色々表現したいこともあると思います。\nとはいえ、''わざわざHTMLを書くのは面倒くさい!''というのが正直なところです。\n\nそこでTiddlyWikiではぱっと見た感じで分かりやすく簡単な表記方法でこういったことを実現しています。\n\nたとえば、太字にする場合は半角の単一引用符を二つ囲み「’’太字にする’’」と書いていると「''太字にする''」という風に表示してくれます。\n\nこういう機能すら面倒な場合はさらっと「こういうことができるんだ」という風に見ていただければよいかと思います。\n必要な時に使うことができれば、いいのですから。\n\nそれでは順を追ってご紹介します。詳しくはここをダブルクリックして、ソースをご覧下さい :)\n\n!文字装飾\n''太字''\n==取消線==\n__下線__\n//斜体//\n2^^3^^=8\na~~ij~~ = -a~~ji~~\n@@ハイライト@@\n@@color(green):着色(ここでは緑)@@\n@@bgcolor(#000000):color(#00FFFF):a背景色の設定もできます。@@\n\n{{{\n <monospacedtext>固定幅な表示</monospacedtext>\n if($hogehoge != ''){\n /*\n ほげほげ\n */\n }\n}}}\n\n!水平線\n文書の区切りを明示する時に。\n----\n\n!通常リスト\n箇条書きなんかに使うやつです。\n* 一段目\n** 階層化もできます。\n** 同一レベルに記述するとこんなかんじ。\n* そして元に戻ります。\n\n!番号リスト\n序数を付けたリストです。\n#item1\n#item2\n##item2.1\n##item2.2\n##item2.3\n#item3\n##item3.1\n###item3.1.1\n###item3.1.2\n\n!見出し\nいわゆる{{{<h2>...</h2>}}}などに相当する見出しです。五段階に対応してます。\n\n!Header 1\n!!Header 2\n!!!Header 3\n!!!!Header 4\n!!!!!Header 5\n\n!外部リンク\n他のサイトへのリンクをする場合、[[Google|http://www.google.com/]]などと記載します。\n\n!画像の埋込み\n[img[Google|http://www.google.co.jp/images/logo_sm.gif]]なんてことも可能です。\n\n同じフォルダにある場合はパス名は不要なようです。\n\n!引用\nJeremyRuston said:\n<<<\nA TiddlyWiki is like a blog because it's divided up into neat little chunks, but it encourages you to read it by hyperlinking rather than sequentially: if you like, a non-linear blog analogue that binds the individual microcontent items into a cohesive whole. I think that TiddlyWiki represents a novel medium for writing, and will promote it's own distinctive WritingStyle. This is the first version of TiddlyWiki and so, as discussed in TiddlyWikiDev, it's bound to be FullOfBugs, have many MissingFeatures and fail to meet all of the DesignGoals. And of course there's NoWarranty, and it might be judged a StupidName.\n<<<\n\n>level 1\n>level 1\n>>level 2\n>>level 2\n>>>level 3\n>>>level 3\n>>level 2\n>level 1\n\n!表組\n|!th1111111111|!th2222222222|\n|>| colspan |\n| rowspan |left|\n|~| right|\n|bgcolor(#a0ffa0):colored| center |\n|caption|c\n\n----\n[[目次]] < 2. [[早速使ってみる]] <3. [[書き方(詳細)]] > 4. [[カスタマイズする]]
初期設定のままではアニメーション表示で重たいし、常用するにはちょっと・・・という状態かもしれません。\nやはり使いやすくするためにカスタマイズする必要があります。\n\n!Options\n画面右側にあるoptionsをクリックすると、設定項目が列挙されます。\n\n!!username\n名前を記述しますWikiWord形式(一続きの英数字の塊でアルファベット大文字が二文字以上あるもの)で記述しろとなっているので、たとえばDonaDonaだとか、DonayamaDonaoといった形式で記述します。\n\n!!SaveBackups\nSave Changesやあとで説明するAutoSaveを実行する際に、バックアップを出力するかどうかを設定します。\nこまめに履歴を取りたい人向けってカンジかな。\n\n!!AutoSave\n編集終了(Done)時に自動的にSave Changesを実行する設定。\n慣れてくると保存忘れしがちなので、設定ONにしましょう。\n\nでも、Doneのたびに保存されるので重たくなります。TPOに併せてOFF/ONするのが吉かも。\n\n!!GenerateAnRssFeed\nRSSフィードを生成する機能を使用するかどうか。\n同じフォルダにゴリゴリとxmlファイルを生成してくれます。\nTiddlyWikiで簡単なWebサイトを作る場合便利でしょうね。\n\n!!SaveEmptyTemplate\nempty.htmlを出力する機能。まぁ通常Offでいいでしょう。\n\n!!RegExpSearch\n検索を正規表現でできるようにするかの設定。正規表現フェチ向け。\nただしJavaScript上での正規表現に限定されますので、注意。\n\n!!CaseSensitiveSearch\n検索時に英文字の大小文字を区別する検索をするようにする設定。\n\n!!EnableAnimations \nアニメーションを有効にする設定。\n最初はすげーって思うけど、すぐに不要になるのでOFFにしましょう(笑)\n\n!特殊なtiddler\n以下に示す名前のtiddlerは特殊な効果を持ちます。\n|SiteTitle|自身のタイトル|\n|SiteSubtitle|タイトルの右側に出るサブタイトル。よく使うTiddlyLinkを突っ込んでおくと便利。|\n|MainMenu|画面左側に出力されるメインメニューの本体。よく使うTiddlyLinkとかメモとかを突っ込む場所かな。|\n|DefaultTiddlers|memo.htmlを開いた際に最初に開かれるTiddlerを指定します。|\n|StyleSheet|デフォルトで持っているスタイルシートに上書きするCSS定義を記述します。|\n\nStyleSheetあたりはカスタマイズし始めるとキリがないのですが、楽しいですよ。\n\n----\n[[目次]] < 3. [[書き方(詳細)]] < 4. [[カスタマイズする]] > 5. [[バージョンアップ手順]]
config.macros.largetext = {};\nconfig.macros.largetext.handler = function(place,macroName,params)\n{\n var e = document.createElement('span');\n e.setAttribute('style','font-size: 72pt;');\n e.appendChild(document.createTextNode(params[0]));\n place.appendChild(e);\n return(e);\n}
この文書を書いた人です。\nしがないIT系何でも屋。\n!連絡先\n*サイト\n**http://hsj.jp/ \n*メール\n**donadona(あっと)gmail(どっと)comです。\n*mixi (SNS)\n**http://mixi.jp/show_friend.pl?id=102587\n*Skype\n**donadona0830
!バージョンアップ手順\n最初のインストールの例に基づき、memo.htmlを使用しているという前提です。\nファイル名は適宜読み替えてください。\n\nまた、バージョンアップで''データが吹っ飛んでもそこは自己責任です''ので、バックアップ取得などを事前にしておきましょう。\n#ブラウザでmemo.htmを開いておきます。現時点での状態を一旦SaveChangesを押して保存しておきます。\n#別のウィンドウ(もしくはタブ)で[[DownloadSoftware|http://www.tiddlywiki.com/#DownloadSoftware]]のページを開き、empty.htmlを「名前をつけて保存」します。\n#保存先指定のダイアログが表示されたら、今使用しているmemo.htmlに対して上書きします。\n#事前にmemo.htmlを表示していたウィンドウに戻り、そのままそこでもう一度SaveChangesを押します。\n#リロードなどを押してページを新しく読み込みます。\n\n以上でバージョンアップ完了です。\n\n----\n[[目次]] < 4. [[カスタマイズする]] < 5. [[バージョンアップ手順]]
# [[はじめに]]\n# [[早速使ってみる]]\n# [[書き方(詳細)]]\n# [[カスタマイズする]]\n# [[バージョンアップ手順]]
#tagsの付与\n#[[Macroを使う]]\n#[[Macroを作る]]
さて、このMacro機能ですが、HTMLファイルを操作しなくてもTiddlyを一つ定義することで追加することができます。\nこの方法でカスタムMacroを追加すると、元のHTMLソースを汚さず改造が出来、またバージョンアップ時にも引き継げるというメリットがあります。\n\nもちろん~JavaScriptの知識やらTiddlyWiki本体内が持つソース解析能力は必須になりますが、その辺はがんばりましょう。\n\n!準備\n\n作るには新しいTiddlyを一つ起こし、tagsにsystemConfigを追加します。\nsystemConfigというtagは前述した通り、ドキュメント読込み時に実行される~JavaScript定義であることを示すものです。\nこれを利用してカスタムMacroを定義するというのがキモです。\n\nここでは作例として文字を大きく表示するテキスト系サイトでありがちな装飾を行うMacroを定義してみたいと思いますので、New Tiddlyから~LargeTextMacroを作成し、tagsにsystemConfigを追加しましょう。\n\n!作成する\n\n先ほど作成した~LargeTextMacroにまず以下のような記述を行います。\n{{{\nconfig.macros.largetext = {};\n}}}\nこれはlargetextというMacroの存在を現状のTiddlyWikiに追加するというものだとお考え下さい。\n\nそして、この後に次のような記述を追加します。\n\n{{{\nconfig.macros.largetext.handler = function(place,macroName,params)\n{\n // function code\n}\n}}}\n\nこのfunction code部分に処理内容を記述することになります。\n一番目の引数は上位にあたるelementを指す(ようです)ものです。\n二番目はMacro名が入ってきます{{{macroName hogehoge}}}の場合、macroNameが入ってくるという寸法です。\n三番目はパラメータの配列が格納されます。{{{macroName hogehoge hugahuga hoehoe}}}という場合、次のように格納されていることになります。\n*params[0] = 'hogehoge'\n*params[1] = 'hugahuga'\n*params[2] = 'hoehoe'\n\n\nではspan要素を新規に作成し、paramというtext nodeをぶらさげてplaceの子要素として宣言する処理を記述します。\n\n{{{\nconfig.macros.largetext.handler = function(place,macroName,params)\n{\n var e = document.createElement('span');\n e.setAttribute('style','font-size: 72pt;');\n e.appendChild(document.createTextNode(params[0]));\n place.appendChild(e);\n return(e);\n}\n}}}\n\nこうして出来たのがこの[[LargeTextMacro]]です。\n\n!実行する。\n\nさて実行してみましょう。\n\n{{{\n<<largetext ほげほげ>>\n}}}\n\n\n\n<<largetext ほげほげ>>\n\n\n\n\n・・・でか過ぎましたね(^^;\n\nちなみにHTMLソースを見れば、presetされているMacroの動作を確認できます。\n例えば、todayについては\n{{{\nconfig.macros.today.handler = function(place)\n{\n createTiddlyElement(place,"span",null,null,(new Date()).toLocaleString());\n}\n}}}\nなんてことをしています。\n書式を変えたい!なんていうときはこういうのに基づいて修正していけばいいわけです。\n\n
TiddlyWikiのバージョン1.2.23からMacroという機能が追加されました。\nMacroってなんやねんといわれても、解説が難しいのでこんな機能が使えるものなのだという感じで考えていただければ・・・と思います(マニュアルではOptionPanelのような「more exotic objects than just text」なものだと言ってますが、笑)。\n\nTiddlerの中で書くとありがたいものとそうでないものがあるので、その辺は皆さんの目で判断してみてください。\n\nなお、全般的に\n{{{\n<<マクロ名(スペース)パラメータ>>\n}}}\nという書式なので、マクロ名・パラメータという記述があれば上記凡例に基づいているとお考え下さい。\n\n!today\n{{{\n<<today>>\n}}}\nって記述すると、「<<today>>」こんな感じに表示されます。\n多分、リロードすると、時分秒あたりが変わってるのではないでしょうか。\n\nまぁ、このMacroはあまり使い道がないと思います…。\nMainMenuやSiteSubtitleなどに仕込んでおくとカレンダー・時計代わりに使えるかもしれませんが。\n\n!Tag popup\n{{{\n<<tag tag名>>\n}}}\nって記述するとこの場合は「features」というtagが振られているTiddlerをポップアップ表示させます。\nここではguidanceを振っているものを出してみましょう。<<tag guidance>>A\n\n!New journal entry\n{{{\n<<newJournal "DD MMM YYYY, hh:mm">>\n}}}\nって記述すると、「<<newJournal "DD MMM YYYY, hh:mm">>」のようなボタンが表示されます。\nクリックすると "DD MMM YYYY, hh:mm" というタイトルのついたTiddlerが生成されます。\n\nこの機能自体は日報・日記的な記述をする運用をしている場合にMainMenuなどにあると便利なMacroと言えます。\n(実際にデフォルトのempty.htmlにはそう記述されていますし)\n\nなお、日付・時刻の記述については次のようなテンプレート定義が去れています。\n* DD - 月の日\n* MMM - 月の文字表記。例えばJulyなど。\n* MM - 月の数値表記。\n* YYYY - 西暦年\n* hh - 時(24時間制だと思う)\n* mm - 分\n\n!Tiddler insertion\n{{{\n<<tiddler TidderName>>\n}}}\nと記述すると、パラメータのTiddlerの内容を埋め込むことが出来ます。\n例えば、ここに目次を埋め込むとこんな感じになります。\n{{{\n<<tiddler 目次>>\n}}}\n<<tiddler 目次>>\nこの「ススメ」においても目次のデータを細分化し、MainMenuの中にも目次の内容が同期しやすいようにしています。\n\nなお、循環参照をすると恐ろしいことになるので、注意しましょう(回避処理は現状搭載されていません)。\n\n!Slider\n{{{\n<<slider tocSlider 目次_入門篇 入門篇の目次 "入門篇の目次の表示・非表示切替">>\n}}}\nと記述すると、<<slider tocSlider 目次_入門篇 入門篇の目次 "入門篇の目次の表示・非表示切替">>というボタンが表示され、クリックするごとに目次の表示トグルがかかります。\nパラメータは4つあります。\n#表示・非表示の状態保存するcookieに使われる名称\n#スライド表示するTiddlerの名前\n#ボタンの表示名\n#ボタンのTooltip\n\n!tabs\n{{{\n<<tabs tocSelect\n入門 "入門篇の目次" 目次_入門篇\n応用 "応用篇の目次" 目次_応用篇\n>>\n}}}\n<<tabs tocSelect\n入門 "All tiddlers" 目次_入門篇\n応用 "Tags in use" 目次_応用篇\n>>\nという感じで展開されます。要素として「tabのラベル▲tabのtoolTip▲展開するTiddler」を列挙することでtabを実現しているというところ。\n\nなかなか、これだけを使用しようとしても難しいのですが。\n\n----\n\nここまでいろいろ紹介してきましたが、実はこのMacroは自作が可能です。\nその辺を次章[[Macroを作る]]で説明いたします。\n
!入門篇\n<<tiddler 目次_入門篇>>\n!応用篇\n<<tiddler 目次_応用篇>>
!!!入門篇\n<<tiddler 目次_入門篇>>\n!!!応用篇\n<<tiddler 目次_応用篇>>\n!!!Appendix\n*[[外部公開Tips]]\n*[[StyleSheet]]例\n*[[参考文献]]\n\n----\n(C)DonaDona 2005