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

ここでは HTML5 で動作する TiddlyWiki5 で使用する前提で説明しています。
古いバージョンの TiddlyWiki は触れていません。
TiddlyWiki で検索すると古いバージョンの情報も多いのでご注意下さい。

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

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

目次

公式サイト

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

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

関連サイト

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

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

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

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

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

 TiddlyWiki  GettingStarted

オヤジ戦隊ダジャレンジャー さん公開の 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 の編集・公開が可能です。
プライベート目的にログインする事で表示・編集する事でもできますし、
別の場所で公開する前の編集場所とする事もできます。

サーバは アメリカ Dreamhost の VPS を使っているようです。
Wiki の表示で若干待たされますが、
まともに使うと Google などの検索結果は良い状態にできるかもしれません。

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

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

サイト一覧になります。なにもないので Create site で TiddlyWiki を作成していきます。
また Create from template で Template 指定された TiddlyWiki を複製して
新規作成する事ができます。
（「Claim Tiddlyspot site」は旧システム Tiddlyspot からの移行です）

なお、この時に次のリンクで、 🎈 TiddlyWiki 日本語化・ふうせん版 をテンプレートにして、
Wiki を新規作成する事ができます。最初から日本語表示になります。
Explore の一覧からは ja-jp です。（ japan タグなどで見つけられます）
この Clone を選択します。

 Clone site | Tiddlyhost

Show advanced settings には
「Make this site available as a template for others to clone.」などがあります。
これを用いて、Wiki を複製できるテンプレート化する事ができます。

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

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

 How to: TiddlyWiki on NodeJS + nginx proxy + LetsEncrypt | Talk TiddlyWiki

VPS やインスタンスを稼働させているサーバで
node.js の TiddlyWiki をサーバ起動し、
nginx のプロキシサーバで一般公開させる手順が紹介されています。

通常の 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 使用時も同じ方法です。

ツール

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

TiddlyDesktop

 TiddlyWiki/TiddlyDesktop

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

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

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

TW Receiver

 sendwheel/tw-receiver | GitHub

PHP が動作するサーバで TiddlyWiki を保存・バックアップできるようにします。
レンタルサーバで TiddlyWiki を使用する場合に使えそうです。

TiddlyWiki in the Sky using Dropbox

 TiddlyWiki in the Sky using Dropbox
 twcloud/dropbox | GitHub

Dropbox に入れている TiddlyWiki を読み込んで表示・編集できます。更新も可能です。

Full Dropbox Access の場合は Dropbox フォルダ全体を表示します。、
Apps Folder ccess の場合は Dropbox フォルダ の アプリ 内に
TW5 in the Sky (Arlen22) フォルダが作られますので、
ここに TiddlyWiki の .html ファイルを入れて下さい。

.html ファイルを選択すると読み込まれ、TiddlyWiki が表示されます。
あとはいるものように使用するだけです。
Wiki の保存で Dropbox でのファイルも更新されます。

ファイルサイズ

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 アカウント名 に戻ります。
Tiddlyhost の Manage Account より Username は省略できるため、
ここを空白にする事で TiddlyWiki の author も空白で投稿できるようになります。

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

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

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

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

 Google 検索結果 - site:tiddlyhost.com

 Tiddlyhost のドメイン .tiddlyhost.com の検索結果です。
Tiddlyhost の多くが TiddlyWiki で運用されていますが、
Google はこれらの Wiki を正しく検索結果に表示しています。

 Google 検索結果 - site:balloonvendor.tiddlyhost.com

そのうち 🎈 ふうせん🎈 FU-SEN メモ を検索したところ、
多くの Tiddler があっても検索結果は一つだけです。
これはパーマリンクが  区切りになっているため、
Google はそのページ内に記載されていると認識しています。

したがってデフォルト状態のままだとデフォルト Tiddler の表示を
Google が概要として表示する事を期待できます。
（JSON データで入っていても現在の Google は正しくテキストを収集します）

🎈 ふうせん🎈 FU-SEN 📒 メモ は次の  meta タグ を付加しているので、
この説明書きを Google が認識して表示しています。

<meta name="description" content="説明">

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

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

 Using Stylesheets | TiddlyWiki

タグ（タイトルではなく）を $:/tags/Stylesheet 、
Type: を text/css にして、本文に CSS を入れて下さい。
タイトルも $:/tags/Stylesheet にすると、一覧非表示になります。
この CSS は設定した直後からすぐ適用されます。
Wiki 読み込み時は全体の CSS・JS を読み込んだ後になります。

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

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

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

下の項目にある $:/tags/RawMarkup に含める事も可能です。
ただしこの場合は Wiki を読み込みはじめてすぐに適用されるため、
 読み込み中画面 にも適用されます。
一方テーマはその後に適用されるため、一部は上書きされて反映されないため、
$:/tags/Stylesheet に記載すべき CSS も存在します。

任意の 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: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 として作成します。
この時のタイトルはタブとして表示されます。

Wiki 表示前の読み込み中画面はどのように作成すれば良いですか？

TiddlyWiki 5.1.20 より $:/SplashScreen が追加されています。
例えば次のように作成します。
<div class="tc-remove-when-wiki-loaded">～</div> 内に CSS・HTML を構築し、
タグに $:/tags/RawMarkupWikified/TopBody を追加、
Tiddler の種類に text/vnd.tiddlywiki を選択して下さい。

\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
\rules only filteredtranscludeinline transcludeinline macrocallinline
<div class="tc-remove-when-wiki-loaded">
<style scoped>
.tc-splash {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.tc-splash-text {
  font-size: 21px;
}
</style>

<div class="tc-splash">
<div class="tc-splash-text">読み込み中……</div>
</div>
</div>

</div>

光回線と Web ブラウザ・バージョンにより、
この動作をせずに表示するように見えますが、
モバイル回線だったり、離れた場所からの参照では表示されるようになるので、
まともに使用する時は考慮しておくと良いでしょう。

他の人に見られたくない Wiki を作成する事はできますか？

複数環境から参照するだけでなく、編集も行いたい場合は  Tiddlyhost がすすめです。
Private を にする事で、ログインした時だけ参照できるページになります。

表示ができれば良い場合は、Wiki にパスワードを設定する事ができます。
Tools/ツール の中に set password/パスワードの設定 があります
パスワードを設定すると clear password/パスワードの解除 に変化するので、
この状態で Wiki を保存して下さい。Wiki を参照するとパスワード入力画面になります。

TiddlyWiki の機能を用いず、Web サーバの BASIC 認証を用いる方法もあります。

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

 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 して下さい。
そうでなければ、メールや掲示板などを用いて送って下さい。