単一 HTML ファイル 64k バイトの軽量な Wiki システム Feather Wiki(フェザーウィキ)についてについてまとめています。

2022年5月に初公開のバージョン 1.0.1 が公開されています。

運営者が Feather Wiki で公開しているのは次があります。

🎈 Feather Wiki | 🎈 BALLOON | FU-SEN - English information


目次


公式サイト

ソースのメイン公開は 🎈 Codeberg になっています。
GitHub はミラーで Issues もありますが、報告は Cordberg 側推奨です。


.html ファイルをダウンロードする

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

 Feather Wiki

またはいくつかの種類から選んでダウンロードする事ができます。

 Downloads | Feather Wiki

種類は備わっているエディタが異なります。

  • Dove - WYSIWYG エディタ + Markdown エディタ
  • Finch - WYSIWYG エディタ
  • Chickadee - Markdown エディタ

WYSIWYG エディタ は装飾をアイコンボタンで選択できます。
🎈 Markdown エディタはアイコンボタンがなく、
代わりに画像関連のボタンがテキスト表記で表示されています。
Dove を使用している場合、二つのエディタを切り替えできます。
公式サイトトップページは Dove になっています。

このダウンロードした FeatherWiki_●●.html をブラウザで開いて下さい。


簡単な使い方

サイドバー New Page を選ぶと
「New Page Title」のテキストボックスが表示されるので、タイトルを入力します。
Create で「Edit Page」画面になります。本文以外は次のとおりです。

  • Page Title - タイトル。変更できます。
  • Page Slug - URL 末尾 ?page=●● の ●● 部分。重複不可
  • Page Tags - タグ。「Add Exist Tag」で使用済みのタグを選択できます。
  • Parent - 親ページを選択します。
  • Save - ページを保存します。
  • Cancel - 編集をキャンセルします。
  • Delete - このページを削除します。

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

Wiki Settings は Wiki 全体の設定を行えます。

  • Wiki Title - タイトル。ブラウザのタブやサイドバー上部に表示されます。
  • Wiki Description - 説明。タイトルの下に表示されます。省略可
  • Home Page - URL に ?page=●● がない場合の表示。「All Pages」でページ一覧
  • Page Order - ページの並び、改行気切りで複数ページ指定できます。
  • Custom CSS - デザインを変更したい場合、CSS をここに含めます。
  • Custom JS - 機能を追加できます。(プラグイン)
  • Include Static HTML - で <body> に本文などを含めます。
    これを指定すると検索エンジンで収集されやすくなりますが、
    .html ファイルのサイズがおよそ 2 倍になります。
  • Publish - 公開向け。 で編集関連のボタンを非表示にします。

Import & Overwrite with Other Feather Wiki file は
 アップグレード や Wiki の種類変更に使用できます。

「Existing Images」で Wiki 内でアップロードした画像の管理ができます。

ページを保存・編集・削除した後、サイドバーの Save Wiki で
反映された .html ファイルの保存になります。
必要であれば、.html ファイルの名前を変更して構いません。
また、この .html ファイルをサーバへアップロードして公開できます。


Tiddlyhost で使用する

 Tiddlyhost

Tiddlyhost は 🎈 TiddlyWiki 向けのホスティングサービスですが、
Feather Wiki にも対応しています。Tiddlyhost へ保存できる専用の Feather Wiki です。

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

  • Email - メールアドレス。通知が届くので、まともに使っているアドレスを設定
  • Name - 名前。表示されます。
  • Username - ユーザー名。これは Wiki のサブドメインとは別 です。※
  • Password - パスワード
  • Password confirmation - パスワードをもう一度

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

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

  • Choose a name - サブドメイン.tiddlyhost.com のサブドメインになります。
  • Private -  で非公開。ログインした時のみ表示されます。
  • Hub listed -  で  Tiddlyhost Hub に表示されます。
    不特定多数に公開したい Wiki は  を入れます。
  • Description - 説明。省略可
  • Tags - タグ。省略可

下の Show advanced settings を選択し、「Advanced settings」を表示し、
「TiddlyWiki version」で FeatherWiki を選択します。

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

  •  Setting - 「Create site」と同じ画面になり、変更できます。
  •  Download - .html ファイルをダウンロードします。
    バックアップしたり、他サーバで公開できます。
  •  Link - Wiki を表示します。
  •  Upload - Wiki の .html ファイルをアップロードし、反映します。
    「Download」した TiddlyWiki の復旧、ローカルなどからの移行に使えます。
  •  Delete - 一覧から削除します。

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

「Save Wiki」の代わりに Save Wiki to Server と Save Wiki Locally と表示されます。
Save Wiki to Server で Tiddlyhost の .html ファイルを更新します。


ファイルサイズ

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

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

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


アップグレード

 Upgrading | Feather Wiki

Tiddlyhost を使用している場合は Download を用いて、
.html ファイルをダウンロードして下さい。

従来のバージョンの .html ファイルを開き、Wiki Settings を開いて、
「Include Static HTML」と「Publish」の  を外して保存しておきます。

新しいバージョンの .html ファイルをダウンロード・保存します。
(この時拡張子が .txt になっているので、.html に変更します)

  releases | Codeberg Alamantus/FeatherWiki

.html ファイルを手動でアップロード・デプロイしている場合は次のバージョンです。

  • Dove - WYSIWYG エディタ + Markdown エディタ
  • Finch - WYSIWYG エディタ
  • Chickadee - Markdown エディタ

Tiddlyhost 向けのサーバ保存機能が付加されているのは次のバージョンです。
Wiki 一覧表示で Tern_1.3.1 などと表示されています。

  • Tern - WYSIWYG エディタ + Markdown エディタ
  • Swallow - WYSIWYG エディタ
  • Bluethroat - Markdown エディタ

新しいバージョンの .html ファイルをブラウザで開きます。
サイドバー Wiki Settings より下部にある
Import & Overwrite with Other Feather Wiki file を選択します。
ここでこれまで使用していた Feather Wiki の .html を選択します。
これで Wiki の内容が反映されますので、Save Wiki をして保存します。
その時 Wiki Settings の「Include Static HTML」と「Publish」の  を外していた場合は
 を入れて有効にしてから保存します。
保存した .html ファイルを開き直して、動作を確認して下さい。

Tiddlyhost は Upload でアップグレードを行った .html ファイルを反映して下さい。


Q&A

TiddlyWiki とは何が異なるのですか?

TiddlyWiki はデフォルト状態で 2MB 以上ありますが、
Feather Wiki のデフォルト状態は 0.06MB です。

そのため、画像は WYSIWYG エディタ のアイコンのみで、
基本的にテキスト表記になっていたり、ページ構成も少なくなっています。

TiddlyWiki は 1 画面に複数の Tiddler を表示できますが、
Feather Wiki は普通に投稿のページ単位です。

Markdown を使っていますが、機能しない文法があります。

Feather Wiki の 🎈 Markdown は Snarkdown を採用しています。
Snarkdown は 1k バイトの Markdown パーサーです。

 developit/snarkdown | GitHub

例えば Markdown の文法として、次の制限があります。

  • 水平線 <hr> は --- ( ___ は非対応)
  • 強制改行 <br> は半角空白 2 文字 ( \ は非対応)

※ 上記はそれぞれ HTML タグを用いても機能します。

また、テーブルなどの一部の機能は非対応です。

また、なぜか一部の装飾が機能しないケースがあります。
この場合は HTML タグに変更するのが確実です。

逆に Markdown で存在していない内部リンク [[ページ]] および
[[名前|ページ]] が使用できます。
画像をアップロードした時も URL の代わりに独自のコードを使用します。

外部リンクを入れると新しいタグで開いてしまいます。

Feather Wiki の仕様により、<a href=" から始まるタグに
target="_blank" rel="noopener noreferrer を付与します。
これにより外部リンクは新しいタブ(新しいウインドウ)で開くようになります。

<a href="URL">名前</a>

これは Markdown も含まれます。

[名前](URL)

これを回避したい場合、 <a href=" でなければ付与されないので

<a href='URL'>名前</a>

または

<a href=URL>名前</a>

とすると新しいタブ(ウインドウ)で開く対象から外れます。

Font Awesome を使用できますか?

🎈 Font Awesome | ふうせん🎈 FU-SEN

使用できます。 Wiki Settings 内「Custom CSS」の頭に次を含めて下さい。
6.1.2 がバージョン番号です。

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css");

favicon を設定できますか?

Feather Wiki では favicon を考慮していないようです。
したがって Web ブラウザの仕様により、https://ドメイン/ 内では
https://ドメイン/favicon.ico を参照します。

Tiddlyhost の場合は Wiki の .html ファイルのみなので、
この方法を使用できませんが、
Wiki Settings 内「Custom JS」に次を加えて設定できます。
https://example.net.eu.org/favicon.ico を変更してご利用下さい。

document.head.appendChild(window.html`<link rel="icon" href="https://example.net.eu.org/favicon.ico">`);

日本語表示にできますか?

2022年7月現在、英語表示のみ提供されています。
日本語を含め、他の言語での表示は対応していません。

英語表示ではありますが、ページは日本語で入力できます。

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

 Google 検索 - site:feather.wiki

公式サイトそのものが Feather Wiki で構築されていますが、
各ページを含めて、Google の検索結果に収集されています。
しかも、公式サイトは「Include Static HTML」を使用していません。
つまり Googlebot は JSON データで入っていても正しく収集しますし、
?page=●● 付の URL も一つの検索結果として反映します。

他の検索エンジンクローラは JSON データまで収取していない可能性があるので、
「Include Static HTML」を 有効 にしても良いかもしれません。

Publish を有効にしてファイルを保存してしまいました。編集する事はできますか?

.html ファイルを Web ブラウザで参照した時、
URL 末尾に ?page=s を付けて参照して下さい。
「Wiki Settings」画面になると共に編集関連のボタンも表示されます。
この状態で「Publish」の を外して Update する事で、
編集可能な状態にできます。

現在のバージョンを知る方法は?

Web ブラウザで表示している時、右下の「Powered by Feather Wiki」のうち
Feather Wiki のところにカーソルを当てて下さい。
Version: Dove_1.3.1 などと表示されます。

またはソースを見ます。Minify が適用されているので見にくいですが、
Ctrl+F で検索フォームを表示し、 name=version と入力して下さい。
次のように meta タグが存在してバージョンが記載されています。

<meta name=version content=Chickadee_1.3.1>

別のバージョンへ変更したいのですが?

 アップグレード と同じ方法を用いて、
別のバージョンへ移行する事ができます。

Neocities で公開するとスクリーンショット表示で背景が真っ白になる事があります。

Feather Wiki が JS でデザインを展開する前に
Neocities のキャプチャが発生してしまう事があります。
背景が白い表示は Static HTML の出力なので、
「Include Static HTML」を 有効 にすれば
背景が真っ白でもある程度のテキストは出力された状態になります。

 Neocities screenshots may result in static HTML (black text and white background, no CSS). #62 | Codeberg Alamantus/FeatherWiki Issues

運営者がこの問題を確認した上で報告したところ、
開発者 Alamantus さんが Static HTML を
JavaScript 出力と同じレイアウトで出力する Extension を公開してくれました。
Neocities を使っている人で、正常に表示させたい場合は試してみて下さい。

extensions/search.js をファイル保存し、Custom JS に次を加えて保存します。
. は .html と同じ場所なので、必要に応じて位置を変更して下さい。

document.body.appendChild(html`<script src="./styled-static-save.js"><\/script>`);

ブラウザを再読み込みし、再度ファイルを保存します。
この時「Include Static HTML」は 有効 にしておきます。
(JavaScript を機能した状態で変化した HTML を保存させるので、2 度保存します) Google Chrome だと f12 でデベロッパーツールを起動し、 を選んで、
Disable JavaScript を 有効 にした上来で、 .html を参照します。
これでもデザインが変化なく表示された状態で正常です。
この状態で Neocities へデプロイ(アップロード)して下さい。
数分で正常表示できるスクリーンショットを確認できるでしょう。

この動作が上手く機能しているので、
次のバージョンでこの機能が反映される可能性があります。