記事2026/07/22

自分のサイトにエディタもくっつけてしまう

 今月リニューアルしたばかりのこのサイトには色々と機能をくっつけようと思っていて、そのひとつが記事エディタである。どこにもリンクを貼っていないので皆さんが辿り着けるようにはなっていないが、普通にサイトの一部として公開状態にしている(仮に見つかっても別に困らない)。


執筆支援ページ

 サイトの記事データというのはmdファイルでできており、このところは、しばらくObsidianを使ったのち、自分でバイブコーディングで作ったBlog Editor(仮)を使っていた。
 mdファイルという普通の形式のファイルなのになぜわざわざエディタを自作したのかといえば、ダブルブラケットのWikiリンクに適切なサジェスト機能を設けたい、フロントマターの入力を簡単にしたいなどの理由がある。Obsidianのカスタマイズでもそのような機械的な要素は実現可能なのだが、諸々の理由でObsidianではなく書き物専用の別のエディタを欲していた。
 しかしながら、そのような「痒いところに手が届く」ための自作の機構というのは柔軟性に限界がある。ちょっと調整が必要となるといちいちコードの書き換えが発生するし、複雑だと自分でやるのが億劫で生成AIに毎度頼むことになったりする。この一連がなんとなく「重い」のである。完璧に柔軟な汎用性を実装するには設計における自分のプログラマーレベルが足りないし、どっちにしてもコーディングそのものは生成AIにやらせることになり、資源の浪費甚だしく気が引けてくる。

 さてこのサイトである。これはLumeというジェネレータで生成しているという話は先日書いたが、LumeはHTMLのデザインがものすごくやりやすい。Lumeそのものの理解にいくらかClaudeの力を借りる必要は生じたが、わかってしまえば設計はAIに頼る必要がない。記法が簡単なので、やりたいことがあるなら自分で書いた方が速いのである。
 ありがたいのが、記事全体のデータを扱うメソッドが用意されていることだ。それにより、こういう記事を引っ張り出したい、こういうタグを列挙したい、というようなことが簡単に書ける。
 また、スクリプトを組み込む場合それは明確に「部品」であり、処理を生成AIに書いてもらうにしても、CLIを使ってプロジェクト全体を読み込んでやるということは必要なく、ちょっとしたチャットでその都度小さいコードを書いてもらうだけで済む。

 で、そもそもの話、「Wikiリンクのサジェスト」や「フロントマターの自動入力」はなぜ必要なのか。
 サジェストが欲しいのはCosenseのように既存のページの候補をシュッと出してほしいからだが、それをWikiリンク記述時にエディタ内で実現する必要というのは実はない。検索した結果をWikiリンク形式で取得できればいいだけだ。しかし別ツールを立ち上げるのは遠すぎる。同じ画面内で完結する近さである必要がある。
 フロントマターについては、ページの種類ごとに必要なプロパティが若干違っているために、それぞれ何を埋めなくてはならないかに迷わないようにしたいということと、ファイル名とIDを作成日時(文章を書き始めた日時)で決めているので、それを自動で生成してほしいというのがある。NotionやObsidianが頭にあったのでああいうUIを作っていたのだが、実際のところ別にそこまでする必要はなく、ボタンを押したらテキストが生成されてmdファイルにコピペすればいいという程度でよかった。

 ということで、自分のサイトのページのひとつとしてエディタ機能を作ってしまうことにした。
 エディタといっても、フロントマターを生成するボタンとテキストエリアがあり、テキストエリアの内容を一時的にlocalStorageに保存する機能があり、検索とタグなどの一覧があるというだけだ。テキストエディタとしての機能は「入力できる」以外に無い。置換などが必要なら、一通り書いた後にちゃんとしたテキストエディタに場所を移してmdファイルを作成し然るべき処理をすればいい。
 ブログを更新するだけならこれで十分なのだった。専用エディタの改良を考えたりコードを管理したりする手間から解放されて実にスッキリした。何よりバイブコーディングのエディタ作りより自分のサイトを自分の手で改造していくほうが楽しい。

現時点の機能一覧

  • 記事の種類に応じたフロントマター生成機能(クリック時の日時でidが作られる)
  • textareaのlocalStorage保存(自動)、呼出
  • 自分用の記事検索(上部の検索バーとは異なる仕組みのもの)
    • 検索結果は右クリックでWikiリンクをtextareaに追記できる
  • 用語一覧
  • 用語のタグ一覧
  • 茶の間のタグ一覧
  • タグを付けていない茶の間記事一覧(いずれ適切なタグを見出して付けて回るため)

 なお今後改良などがあった場合はnora/自分のサイト上にエディタも構築してしまう - 自作ツールづくりwikiに書いていく。