単一 HTML ファイルで動作する個人 Web ノートブック TiddlyWiki（ティドゥリィウィキ）についてまとめています。

ここでは　HTML5 で動作する TiddlyWiki5 で使用する前提で説明しています。
古いバージョンの TiddlyWiki は最新ブラウザで動作しない可能性があり、
ここでは紹介していません。

ページ運営者が実際に TiddlyWiki を使っているのは次のところです。

🎈 ふうせん🎈 FU-SEN メモ - 🎈 Tiddlyhost で公開
🎈 TiddlyWiki 日本語サンプル - 🎈 Tiddlyhost で公開
🎈 TiddlyWiki 日本語化・ふうせん版 - 🎈 Cloudflare Pages＋🎈 EU.org で公開

目次

公式サイト

•  TiddlyWiki - 公式サイト
  • Japanese (Japan) Edition - 日本語版
•  Talk TiddlyWiki - ユーザー向け掲示板
•  TiddlyWiki | Google グループ - 旧コミュニティ
•  Jermolene/TiddlyWiki5 | GitHub - ソース
  • TiddlyWiki5 Developer Discussions - 開発者向け掲示板
•  Twitter - @TiddlyWiki
• Gitter - チャット

TiddlyWIki 関連の公式コミュニティは非常に活発で、他にも非公式で存在します。

関連サイト

オヤジ戦隊ダジャレンジャー さんの TiddlyWiki 情報はかなり豊富です。
最新版も随時反映されていらっしゃいます。

 いつでもどこでもテイクメモ！無料の【TiddlyWiki】活用まとめ | SEの良心

オヤジ戦隊ダジャレンジャー さんとは 🎈 Discord でお話していて、
翻訳作業などの助言支援をいただいています。

.html ファイルのダウンロード

公式サイトから empty.html をダウンロードし、任意の場所に保存します。

 TiddlyWiki  GettingStarted

最初から日本語化されている empty.html はこちらからダウンロードできます。
TiddlyWiki 5.2.3 よりこの公式日本語版でもまともに使えるようになりました。

 Japanese (Japan) Edition | TiddlyWiki

オヤジ戦隊ダジャレンジャー さん公開の TiddlyWiki 日本語版は
横幅を広く表示するようにしてあります。
🎈 Markdown 対応版もあります。ファイルは index.html です。

 ダウンロード | SEの良心

ページ運営者も日本語化した TiddlyWiki を公開しています。
公式版より empty.html から日本語化、🎈 Markdown 対応、
日時表示は 2022-07-22 08:45 表示にしてあります。

🎈 TiddlyWiki 日本語化・ふうせん版

ダウンロードした HTML ファイルのファイル名は自由に変更できます。
サーバへの公開だと index.html になるでしょう。
この HTML ファイルをブラウザで開いて下さい。

簡単な使い方

はじめて TiddlyWiki を開いた時は、GettingStarted が表示されています。

この設定は  で変更できます。

 で新しい Tiddler の作成になります。

Tiddler 右上の  で記事を保存します。 で編集可能です。
編集が終わったところで、赤く表示された   を押すと、
ファイルの保存になります。index.html などにして保存します。

index.html を開いていつでも表示でき、編集できます。
もちろんそのまま Web 公開する事もできます。

Tiddlyhost で使用する

 Tiddlyhost

より手軽な方法として Tiddlyhost を使用する方法があります。
無料で TiddlyWiki の編集・公開が可能です。
プライベート目的にログインする事で表示・編集する事でもできますし、
別の場所で公開する前の編集場所とする事もできます。

Sign up を選択してアカウントを作成します。

※ 一つのアカウントで複数の TiddlyWiki を作成できる仕組みになっています。

サイト一覧になります。なにもないので Create site で TiddlyWiki を作成していきます。
（「Claim Tiddlyspot site」は旧システム Tiddlyspot からの移行です）

Your sites で一覧表示されます。
サブドメイン.tiddlyhost.com を押すと、TiddlyWiki の画面になります。
右に表示されているアイコンは次のとおりです。

Download の .html ファイルは他サーバへ公開できます。
他のサービスへの移行や独自ドメインを使用した公開に使用できます。
逆に .html ファイルを Upload して Tiddlyhost へ移行する事もできます。

Node.js を使用する

静的ファイルとして複数ファイルを生成できたりしますが、
プラグインのインストールは独自の対応が必要です。

 Installing TiddlyWiki on Node.js | TiddlyWiki
 tiddlywiki | npm

Node.js より npm で次をインストールします。

npm install -g tiddlywiki

まず次を実行します。

tiddlywiki 名称 --init server

名称 でフォルダが生成されます。

tiddlywiki 名称 --listen

でブラウザから http://127.0.0.1:8080/ で Tiddlywiki が表示できます。
tiddlywiki.info ファイルがある場所から

tiddlywiki --listen

でも実行可能です。以後 名称 は同様に省略できます。

通常の TiddlyWiki から  で .html ファイルを保存する代わりに

tiddlywiki 名称 --build index

で output 内に index.html が生成されます。

複数の HTML に分割して出力するのは次のコマンドです。
output/static フォルダ内で生成されます。

tiddlywiki 名称 --rendertiddlers '[!is[system]]' $:/core/templates/static.tiddler.html static text/plain
tiddlywiki 名称 --rendertiddler $:/core/templates/static.template.css static/static.css text/plain

ただし日本語タイトルでは URL エンコードを用いたファイル名になります。

まとめて 1 コマンドにする事ができます。

tiddlywiki 名称 --rendertiddlers [!is[system]] $:/core/templates/static.tiddler.html static text/plain --rendertiddler $:/core/templates/static.template.css static/static.css text/plain

TiddyWiki の .html ファイルを読み込んで HTML ファイルを生成する事もできますが、
テーマの CSS ファイルなどは対処が必要になります。

tiddlywiki --load 生成WIKI.html --rendertiddler タイトル ./静的出力.html

Wiki 文法

 WikiText | TiddlyWiki

Wiki 文法は Wiki の種類によって異なります。
TiddlyWiki も独自の Wiki 文法があります。

🎈 Markdown はプラグインを入れる事で使用できますが、
Wiki 文法が優先されるケースや、Wiki 文法を使用する必要がある部分があります。

プラグイン

機能、テーマ、言語ファイルを拡張できます。
 $:/ControlPanel より Plugins を選択、
 Get more plugins からインストールできます。
Node.js からは tiddlywiki.info を編集してインストールできます。

Markdown

🎈 Markdown で表記できるようになります。
メニューに  +  アイコンが増えます。
または「Type/Tiddler の種類:」を text/x-markdown に変更します。

Node.js 使用時は tiddlywiki.info に次を加えます。
plugins があるので、末尾に追加するようになります。

{
    "plugins": [
        "tiddlywiki/markdown"
    ]
}

ja-JP

全体の表示が日本語になります。
ただし、英語のままでも日本語表示は可能なので、必須ではありません。
サイズが大きくなるので、あえて英語のまま使用しても良いでしょう。

プラグインをインストールした後、 ControlPanel/コントロールパネル から
Info/情報 - Basics/基本 内「Hello! Current language/現在の言語」 を
Japanese (Japan) に設定します。これで日本語表示になります。

Node.js 使用時は tiddlywiki.info に次を加えます。
languages がない場合はその項目も追加して下さい。

{
    "languages": [
        "ja-JP"
    ],
}

コミュニティテーマ

 Community Themes | Tiddly Wiki

プラグインライブラリに入っている以外にもテーマが存在しています。
GitHub などでもテーマが見つかるかもしれません。

$:/plugins/製作者/テーマ などで記載されたリンクがありますので、
リング部分を ドラッグ　して、TiddlyWiKi の画面へドロップして下さい。
インポート画面になります。Node.js 使用時も同じ方法です。

ツール

ローカルでまともに使おうとすると保存の度にウインドウ表示されるなど、
使い勝手にいまいちな部分が出てきます。
これを快適にするためのツールも存在します。

Timimi

 Timimi
 ibnishak/Timimi | GitHub

Web ブラウザの拡張機能を用いてファイル保存とバックアップを支援します。
様々な Web ブラウザに対応しています。

単にファイル保存がウインドウ表示されずに上書き保存されるので、
まともに使用するなら、インストールしておくと便利です。
Chrome OS（Chromebook）はバックエンドがないので動作しません。

インストールは若干手間がかかります。

TiddlyDesktop

 TiddlyWiki/TiddlyDesktop

TiddlyWiki 管理者が公開する TiddlyWiki ツール（専用ブラウザ）です。
TiddlwWiki の編集をアプリ起動で行うのに便利です。
Google Chrome の派生元である Chromium ベースになっています。

Windows・macOS などに対応し、メニューは英語表示ですが、 日本語 Wiki も正常に動作します。
実行ファイルは Windows だと nw.exe、macOS は Tiddlywiki です。

デフォルトで下層フォルダにバックアップが生成されます。
無効は Wiki をリストに入れた後、その中に advanced を選択すると
enable backups があります。

ファイルサイズ

Git や Web サービスにより、1 ファイルの容量制限が存在します。
サービスにより 1 ファイル 10MB～100MB 位です。

画像ファイルなどを TiddlyWiki 内に含める事ができますが、（インポート）
ファイルサイズが大きくなるので、TiddlyWiki 外で個別にアップロードし、
URL 形式で表示するようにするのが一つの回避手段です。

また、種類・パートに応じて異なる .html ファイルにし、
ファイルサイズを小さくする回避手段もあります。

アップグレード

TiddlyWiki がバージョンアップした場合は更新作業が必要です。

Tiddlyhost を使用している場合は、一覧右の  Download で
.html ファイルを一旦パソコンに保存して下さい。
下の手順をする前に .html ファイルは念のため
バックアップをとっておいて良いかもしれません。

 TiddlyWiki Upgrade Wizard

この 部分に .html ファイルをドラッグ＆ドロップして下さい。
なお、TiddlyWiki Upgrade Wizard も .html ファイルとして保存して、
オフラインで実行する事もできます。

アップグレードした .html を開き、正常に表示される事を確認します。
その後サーバにアップロード・デプロイして反映して下さい。
Tiddlyhost の場合は一覧の  Upload で .html を反映して下さい。

複数の Wiki ヲアップグレードする場合、
一つ Wiki をアップグレードしてファイルを保存したら、
ブラウザを再読み込みして最初の表示に戻してから、
次の Wiki をアップグレードして下さい。
最後のファイル保存画面で別の Wiki ファイルをインポートすると、
前の Wiki の Tiddler を含めてしまいます。

Q&A

公式サイトの TW とは何ですか？

TW は TiddlyWiki の省略表記です。
また Tiddlyhost の省略表記で TH も使われています。

勝手に他の人から編集される危険性がありますか？

.html ファイルが更新される必要があります。
デフォルトではファイル保存が発生するだけで、更新される恐れはありません。

Tiddlyhost でのファイル更新はログインされる時に限られます。

旧バージョンの TiddlyWiki ではファイル更新動作が備わっていましたが、
セキュリティ対策として、現在の TidddlyWiki5 では備わっていません。

英文が勝手にリンクされてしまいます。改善できますか？

英大文字で開始する英文は Wiki リンク が有効になります。
これを改善する場合は頭文字の左に ~ を付けて下さい。
TiddlyWiki がリンクになる場合、~TiddlyWiki とします。

また、 $:/ControlPanel より Settings/設定 タブにある
「Camel Case Wiki Links/Camel Case Wiki リンク」の
Enable automatic CamelCase linking/自動で CamelCase リンクを有効にします
の を外し一度保存して、TiddlyWiki を再読み込みする事でこの機能が無効になります。
ただし「 $:/ControlPanel」の一部英文表示の頭に ~ が付きます。

編集した後に Internal JavaScript Error が表示されます。

Wiki の状態、場所、関連ツールによっては、
編集すた後に次のエラー表示が発生します。

この表示が出ていても Wiki は正常に更新されています。
このエラー表示を閉じて、
他の Tiddler を編集したり、Wiki を保存したりして下さい。

GitHub・GitLab で使用する便利な方法はありますか？

 $:/ControlPanel より Saving を選ぶと
GitHub Saver および GitLab Saver があります。
直接 Git リポジトリにファイルを保存できます。

設定項目にあるため、リポジトリやアップロード先は保存されますが、
トークンはパスワードフォームのため、保存されません。

表示順を変える方法はありますか？

サイドバーで「Open・表示中」を表示している時は
Tiddler の並び順に表示されますが、
この時 Tiddler をドラッグ＆ドロップする事で並び替えを行えます。

テフォルト Tiddler を[list[$:/StoryList]] にしている時
保存したこの表示が反映されるので、この方法を生かして下さい。

ブラウザのタブなどで表示される画像を変更できますか？

$:/favicon.ico を参照しますので、これを入れます。

予め .ico 画像を用意しておき、このファイルを TiddlyWiki の画面に入れます。
「import/インポート」表示になるので、これを入れて下さい。
表示された .ico をクリックし、タイトルを $:/favicon.ico に変更します。

日時がおかしいのですが、修正できますか？

TiddlyWiki 5.2.2 までに  ja-JP プラグイン を入れた状態で発生します。

検索フォーム横のアイコン  +  を選びます。
「$:/AdvancedSearch」が表示されるので、Hidden/隠し を選び、
$:/language/Tiddler/DateFormat と入力・選択します。

「$:/language/Tiddler/DateFormat」が表示されたら、これを編集します。
フォーマットの例を以下にあげます。

 Set the date and time in Japanese format #6761 | GitHub Jermolene/TiddlyWiki5 Pull Requests

ページ運営者より オヤジ戦隊ダジャレンジャー さんも採用していた
YYYY年MM月DD日(ddd) 0hh:0mm の形式が日本語で有効になるよう
Pull Request を送り、マージされました。
TiddlyWiki 5.2.3 よりプラグイン ja-JP のインストールで
正しく表示されるようになりました。

投稿後の投稿者名を変更したいのですか？

フィールド author で任意に変更ができます。
これはリンクになるので、
タイトルを投稿者名にすると、投稿者紹介ページになります。

TiddlyHost ではデフォルトで TiddlyHost アカウント名 になります。
Wiki 上では変更できるのですが、再度開くと TiddlyHost アカウント名 に戻るため、
変更しないのが無難です。

特定のページにリンクできますか？

URL に末尾に #タイトル とすると、
そのタイトルの Tiddler を表示できます。日本語も動作します。

また、Tiddler の右上 - parmalink/パーマリンク で URL を表示し、
この時クリップボードへのコピーも行われています。

Google などの検索結果に表示されますか？

運営者が確認している感じだと、
デフォルト Tiddler が表示されている状態の本文を
Google は正常に参照し、検索結果に表示します。
そのため、Wiki を作成・更新していれば、
Google はそれを正常に検索結果へ反映していきます。
ただし検索結果は デフォルト Tiddler 状態のみなので、
SEO 的にはあまり期待しない方が良いでしょう。

本文部分は .html ファイル内に JSON データで含まれています。
<body> 内のテキストとしては含まれておらず、
テキストとして存在するのは、作成している Tiddler の一覧になっています。
そのため検索エンジンによっては、Tiddler の一覧が概要・説明文として表示されます。

一般公開できる状態にするのであれば、
次の方法で少しでも参照されやすくなるでしょう。

独自のスタイルシートを適用できますか？

 Using Stylesheets | TiddlyWiki

タグ（タイトルではなく）を $:/tags/Stylesheet 、
Type: を text/css にして、本文に CSS を入れて下さい。
タイトルも $:/tags/Stylesheet にすると、一覧非表示になります。
この CSS はすぐに適用されます。

例えば下のスタイルシートで、背景色を変更します。

body.tc-body {
    background-color: #ddeeff;
}

反映は、これらを追加・更新し、Wiki を保存した後、
一度 .html ファイルを再読み込みして下さい。

下の項目にある $:/tags/RawMarkup に含める事も可能です。

任意の meta タグなどを含める事ができますか？

タグに $:/tags/RawMarkup を使用すると、
</head> 前に任意のコードを追加する事ができます。
タイトルも $:/tags/RawMarkup にして、一覧非表示にできます。
アナリティクスやサイト確認用の <meta> タグをここで含められます。
🎈 Open Graph protocol と Twitter カード も追加できます。

<meta name="description" content="説明">
<link rel="icon" type="image/png" href="https://example.net.eu.org/favicon.png">
<link rel="apple-touch-icon" sizes="256x256" href="https://example.net.eu.org/apple-touch-icon.png">
<meta name="theme-color" content="#ddeeff">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.net.eu.org/ogp.png">
<meta property="og:type" content="website">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明">
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content="https://example.net.eu.org/ogp.png">

CSS を追加する事ができますが、<style> で囲む必要があります。

<style>
body.tc-body {
    background-color: #ddeeff;
}
</style>

JS・CSS などの反映は、これらを追加・更新し、Wiki を保存した後、
一度 .html ファイルを再読み込みして下さい。

サイドバーに任意の表示を追加できますか？

 How to add a new tab to the sidebar | TiddlyWiki
 Adding a table of contents to the sidebar | TiddlyWiki

タグに $:/tags/SideBar として作成します。
この時のタイトルはタブとして表示されます。

翻訳を改善したいです。どうすれば良いですか？

 Translate TiddlyWiki into your language | TiddlyWiki

大きく二つの翻訳方法があります。

次のページで翻訳されていない項目を確認し、翻訳作業も行えます。

 https://tiddlywiki.com/prerelease/editions/translators/

すると項目名の太字が解除されます。
これを保存しても .html ファイルの保存になるだけですが、
ローカルに保存して作業しても良いでしょう。
これは翻訳項目を表示できるようにした TiddlyWiki なので、
実際に動作を確認できます。
この .html ファイルを掲示板などを用いて送って下さい。

もう一つの方法は GitHub リポジトリの言語ファイルを編集する方法です。

 https://github.com/Jermolene/TiddlyWiki5/tree/master/languages

動作を確認する場合は翻訳した .tld および .multids ファイルを
TiddlyWiki にドラッグ＆ドロップして下さい。インポート画面になります。
（この時項目が多いとインポート画面の表示に時間を要します）
インポートにより、翻訳が反映されます。
削除は フィルタ検索 [prefix[$:/language]] で一斉削除可能です。

すでに運用している Wiki では
SiteTitle.tld ・ SiteSubtitle.tld を適用しないで下さい。
適用すると Wiki タイトル・サブタイトルが初期化されてしまいます。

GitHub を扱っている場合は Pull Request して下さい。
そうでなければ、メールや掲示板などを用いて送って下さい。