Obsidianをbiidamaで公開する

作成 2026-09-13更新 2026-10-22

#雑録 #Obsidian #biidama

biidamaとは

biidamaは、自作ツール一覧にもある通り、Obsidian保管庫からフロントマターに publish: true が設定されているページだけを静的HTMLとして公開するツールです。

Pythonというプログラム言語で書かれており、以下で公開されています。

https://github.com/naoki-wjm/biidama

gitがわかるならcloneして README.md に従えば一通りさわれると思います。

わーさんはこれをlolipopで使っていますが、あらかじめlolipopにSSHできるようにしておくのが前提です。

つまり全く初心者向けじゃない！　酷い！！

まあ、元々個人用だから汎用性はない……

biidamaの利点

多分創作向け

以下の機能が妙に創作向けに充実気味な可能性があります。

ルビ機能

青空文庫形式で、例えば｜和条門《わじょうもん》|尚樹《なおき》と打てば、縦線が全角だろうが半角だろうが和条門(わじょうもん)尚樹(なおき)とルビが振られます。縦線無しの漢字《ルビ》方式にも対応。

前のページ、次のページを指定する機能

フロントマターにて、前のページを prev: "[[前のページ]]"（次のページは逆引き）で指定できます。next: "[[次のページ]]" も同じように受けます。両方書いて食い違う時は警告して、それぞれ書いた方を残します。

ネタバレ防止ボタン

Callout というObsidianの機能を使って折りたたみ > [!warning]- を指定すると、 <details> になり、開閉で隠されます。

以下、ネタバレあるかも

こんな感じ。

テーマ切り替えボタン

これは static/style.css 内で色が調整できますが、自動・ライト・ダークのモードとゴシック体・明朝体の切り替えボタンが右上にあります。

ライトボックス機能

いわゆるギャラリー機能です。![[画像.png]]を入れるとObsidian内で画像を表示できますが、biidamaでは更に幾つかの追加指定をしながら画像をサイト内に表示できます。

Obsidianでは幅の指定ができますが、縦のみ指定する方法や、画像拡大時にタイトルを表示させる方法も混ぜ込めます。気になったら配布場所の README.md を読んでいただけたら。

また、オプションでwebpによるサムネイル表示（サイトの読み込みを軽くする意図があります）も可能です。

他メディア表示機能

指定されたメディアフォルダをそのまま出力し、![[オーディオ.mp3]]・![[動画.mp4]] は <audio>・<video>タグに変換します。

プレイリスト機能

Obsidian内でmp3を

HTML

<div class="playlist">  
<audio controls src="1曲目.mp3" data-title="タイトル" data-artist="作者"></audio>  
<audio controls src="2曲目.mp3" data-title="タイトル" data-artist="作者"></audio>  
</div>

と埋め込んでいく作業は必要になりますが、シャッフル・リピート機能付きのプレイリスト表示が可能です。

一般にも嬉しいかも

パンくず機能

上部と下部にあります。記事一覧に戻るのに便利そうかなって。

更新履歴機能

トップページ下部に自動で載り、もう少し見るためのページも生成されます。数（0含む）は設定ファイルから指定が可能です。

タグ一覧機能

タグ毎にページが生成され、一覧のページも見ることができます。

wikilink対応

Obsidianの記法で内部リンクが貼れます。

脚注ポップアップ（2026/10/22追記）

Obsidianの記法で脚注を作成すると、JavaScript有効時¹に左の例のようにポップアップした脚注が見られます。
無効時でもページ下部の脚注に飛べますし、ページ下部から戻るリンクもあります。

また、同じ注を何度でも呼び出すことができ、番号は本文に出た順に振り直されるのも特徴だと、実装係のクロードコードさんが力説していました（わーさんは他の脚注を使ったことがないので「へーほーふーん」でした）

この脚注ポップアップはiPhoneでもポップアップすることが確認されています。中にコードボックスや画像も入れられるそうですが、流石にそれを試したことはない……。

軌道に乗れば普段の更新はコマンド1行

記事編集にも反応するほどの完全自動ではないけれど、明示的にGOサインを出せばアップするところまで含めてかなり自動。

比較的依存少なめ

biidamaツール本体の更新が面倒なので、頻繁に更新しなくて済むよう、使っているPythonの部品も少なめだと思います。

RSS対応（2026/09/22追記）

地味に好きな人は好きだと思われる……？

sitemap.xml対応（2026/09/22追記）

上記に同じく。

特定フォルダのサイト内バックリンク（2026/09/22追記）

これも上に同じく。

「どこかのページへ」というランダム記事ボタン（2026/09/22追記）

設定次第ではありますが、特定のフォルダの中身だけランダムとかも設定できます。当サイトでは雑記と雑録とLLM Wikiしかランダムで飛ぶ範囲に入れていません。

実際の公開手順

下準備するもの

Obsidian vault

これを公開するのだから、そりゃ必要。

SSHでファイルたちを送り付けて公開する先

わーさんはlolipopでSSH設定しました。なくてもまあ組み立て止まりの状態にもできるので、FTPソフトなどで転送するのもありかも？

Python

biidamaを動かすプログラム言語。ライブラリという部品がいっぱいあちこちで配布されており、それらを組み合わせることでとても便利な処理を行える。

biidama入手後は依存（任意のプログラムを動かすのに必要なライブラリは、一般に依存と呼ばれるらしい）を落としてくる必要もある。

必要な記載・設定や手順

Obsidian記事

フロントマターに publish: true をつけること。

config.local.yml

config.example.yml の例を見ながら作成。サイトを組み立てるのに必要な設定が集まっています。

biidama build -c config.local.yml

サイトを組み立てるだけならこの設定ファイルと上記コマンドで試せますので、そこからFTPソフトなどで転送するのもありです。

.env

.env.example の例を見ながら作成。サイトを転送するのに必要な設定はこちら。

biidama publish -c config.local.yml --dry-run

変更のあったファイルだけが転送されるのですが、上記にて、どのファイルが実際に転送される予定かを、転送せずに確認することができます。

実際に転送するには以下です。

biidama publish -c config.local.yml

終わりに

そんなわけで、駆け足ではありましたが、biidamaの解説でした。如何でしたでしょうか？

細かい導入方法や機能などの詳細は、以下の配布場所にて、 README.md をご覧ください。