実験ノート：ツェッテルカステン （Zettelkasten）システムをvibe coding with Claude 4 Sonnet
Claude Hackathon 2025 in Tokyoでお題としたのは、Markdown Editor。「Markdownを書くだけで、言語知識が即座に評価可能・再利用可能なアプリに変わる」ってのがうりで、生成AI向けのプロンプト生成及び回答の組み込み機能を含めて、結構面白い仕組みだったと思う（まだゆっくり改良中）。
このアイデアの整理とか言語化とかは、京大式カードみたいな整理法ともリンクする。vibe codingで再現とかもしてみた。
これらの整理法とかアイデア創出、言語化の仕組の一つに、ツェッテルカステン （Zettelkasten）ってのがある。
ツェッテルカステン （Zettelkasten）とは、社会学者のニクラス・ルーマン（Niklas Luhmann）が用いたことで有名な情報管理システム。手書きしたメモを効率的に整理・関連付けし、学びやアイディアの大量アウトプットを可能にする仕組みです。
そうか、ルーマンの発明か。確かに彼は多作、その仕組みはツェッテルカステン （Zettelkasten）にあったのかもしれない。
Obsidianとの相性も良いみたいで、こちらで実践してみるのも手かもしれない。
といっても、なかなか老人に新しい技（ツェッテルカステン）を教えるのはつらいもの。。
そこで（どこで）、vibe coding。
Claude 4 Sonnetでツェッテルカステンをvibe coding
Zettelkastenの知識管理法にインスパイヤされた、知識管理アプリを作りたい。vibe codingでできるようなまずはMVP(htmlアプリ）を作ってみたいが、その仕様書を検討してほしい。
出てきた仕様書はこちら、
ノートを作り、編集機能、そしてリンク、リンクにはリンク検出という機能もある、あとは検索と発見このあたりは楽しそう
UIはとてもシンプル。データ構造もシンプル。
アーティファクトの生成
結構コンパクトな仕様ができたので、アーティファクトをサンプルとして作ってもらった。
Phase1から3までをMVPとしてhtmlアプリとして作ってほしい。
バグ取りしながら、３ショットぐらいでできたのがこちら。
ヘルプを押すと、簡単なインストラクションが出てくる。
リンクの作成
ゼッテルを入力して、タグをつけることができる。そして他のゼッテルとのリンクは、"[[ゼッテルID]]"と直書きするとリンクが貼れて、逆リンクも生成される。
このようなゼッテルができる。
ゼッテルIDの挿入は、左ペインでIDをコピーして、ペーストすればできるようにした。
感想
その他、JSONへの保存・読みこみ機能をつけたり、バグを直しているうちに、あっというまにV35になってしまった。やっぱりClaude、最初のアーティファクトはよくできるが、それからの微調整がつらい。
ここまでの成果物をここに供養する。
https://claude.ai/public/artifacts/392126b1-c970-4c50-9c8c-264c5bb8d103
