org-mode 製ブログの改良 (10): WebGL 🪩, Uniorg

Jun 24, 2026

blog

背景

ブログ生成の vibe coding シリーズです。

変更

WebGL 🪩

このブログでミラーボール (ディスコボール) が回るようになりました:

2026-06-22-disco-ball.webp
Figure 1: ついに……!

上方の灯りは、オーロラを参考画像として生成してもらいました。画像認識が強いですね。

普及性のため、 WebGPU ではなく WebGL で描画しています。 GPU が検出できない場合は非表示となります。

Uniorg

ビルドに Emacs を使うのをやめ、 TypeScript 製の org パーサである Uniorg に移行しました。 Emacs の起動を待つ必要が無くなったため、ビルドを高速化できました。

一点のみ PR を送りましたが、 battle-tested なパーサだったように思います。 Regex のコンパイルはキャッシュした方が良いかも。

主な構文のテスト (test, KaTeXKaTeX)

Golden/snapshot テストもありますが、一応この記事でマークアップの変換結果を確認しておきます。

Inline KaTeXKaTeX,

F=mx¨\mathcal{F} = m \ddot{\mathbb{x}}

Figure 2: Block KaTeXKaTeX
2026-06-17-lighthouse.webp
Figure 3: Lighthouse の結果
2026-06-17-lighthouse.webp
Figure 4: width 250 px (ATTR_HTML)

GitHub - toyboot4e/toyboot4e.github.io: My devlog based on Org filesMy devlog based on Org files. Contribute to toyboot4e/toyboot4e.github.io development by creating an account on GitHub.GitHub

Nani翻訳の技術的な話Zenn

build.el:L923-L925toyboot4e/toyboot4e.github.io @ c0b6bea
(defun my-org-html-publish-to-html (plist filename pub-dir)
  "Publish an org file to HTML, using the FILENAME as the output directory.
Skips `#+DRAFT:'-flagged files unless this is a `--draft' build."

./og-preview.html

#+TITLE: =org-mode= 製ブログの改良 (10): Uniorg
#+DATE: <2026-06-24 Wed>
#+FILETAGS: :blog:
Listing 1: org-mode highlight test, KaTeXKaTeX (TODO: re-impl)
// Diff
+ const f = () => 42;
+ const g = () => 42; // 1
abc;
  • 1 coderef
The document must allow coderef # 1
Listing 2: coderef
  • 1 coderef

Hardbreak
paragraph

Hardbreak list:

  • A
    B
                             .|          /
                               !        /
                             .l    __/_
                               !   /  / \
                               ! /.   / _ノ  \
                             .l │.   /(● )(●)    俺が見えるか!
                             .| │  /  (__人__)
                               ! │. /    ` ⌒´ノ
                               ! │ /         }
                               | ノ./ヾ.ヘ     }
                         ..=ィ゙ニ| /、;i;i;ヾヘ  _ノ
               .       : :イ/{ / ̄ヾ}l!;i;i;iLc、>
               .       / '/,ム{ ∧  }ー-,-、《;i〈
               .       !:.,'〃´ハ{/  ハ::〃,=ヾミ;i
               .       :.:{/' 〃゙ヽ__ノヽi/´   }\
               .       :.:|!、/  ヽ::Y::/{  r、/ム .\
               .       !:.!ム    ヽj::ノ{   | ,';i;iム   ヽ.
               .       Ⅵマ\  _ ヽ';i乂__.ソ;i;i;i;i|     丶
               .       トj0l|Y´\{ }  Y;i;i;i;i;i;i;i;i;i;iト,     \
               .       `!0j;iト、  ヾ__.人;i;i;i;i;i;i;i;i;i;i;{         \
               .       〈ソ,∧ \  「 ! Y;i;i;i;i;i;i;i;i;iム
               .        j、;i;i;、  \___丿;i;i;i;i;i;i;i;i;i;iム
               .       /.:::∨;i;i`i.、___ノ;i\;i;i;i;i;i;i;i;i;i;i;iム
               .       ::::::::.∨;i;i|:;i;i;i;i;i;i;i;i;\;i;i;i;i;i;i;i;i;i;ム
               .       、_:::::::∨;i|:;i;i;i;i;i;i;i;i;i;i;i;丶:;i;i;i;i;i;i;i;ム
               .       ::ーニ=イ};i:!:;i;i;i;i;i;i;i;i;i;i;i;i;i;i\:;i;i;i;i;i;i;i〉
               .       ヽ:::::::::ノ;i:!:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i\:;i;i;/
               .        ヽ/;i;i:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i\:〉
               .       ../;i;i;i;i;i:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;\
               .       ,ゝ;i;i;i;i;i;i:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i/  丶
               .       i;i;i;i;i;i;i;i;i:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;/    \
               .       i;i;i;i;i;i;i;i;i:!:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i∧
               .       i;i;i;i;i;i;i;i;i:!:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i/. ム
               .       i;i;i;i;i;i;i;i;i:l:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i//マ___
               .       、i;i;i;i;i;i;i;i:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;}/イ;;;;;;;;;`!
               .       ';i;i;i;i;i;i;i;i:l:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;iム.;;;;;;;;;;;;;;;;;〉

まとめ

背景で 🪩 が回るようになりました。馬鹿げているほど良いですが、すこしシリアスに見えるかもしれません。

org-mode 製ブログが TypeScript 製になりました。ビルド時間が 4.2s から 1.6s まで短縮した他、 JSX で HTML を生成できるなど、メリットが大きいです。