最近、マルチタスクになることが多いことから、ToDo管理をすることにしました。
何かローカルで動くToDo管理ツールがないかを探したところ、Obsidianのプラグインである obsidian-kanban がありました。
https://github.com/obsidian-community/obsidian-kanban
これでしばらく運用してみたところ、次のようなことを感じました。
- 少しカスタマイズしたくなった
- いつ終わったかを記録したい
- 月単位でタスクをアーカイブしたい
- プラグインのメンテナンスが落ち着いている
- 最終リリースが2024/5/31
- リポジトリのREADMEにも「The Kanban plugin is looking for new maintainers.」と書かれている
ToDoの状況をmarkdownで管理するというアーキテクチャは好みだったことから、Obsidianの他のプラグインを探すことも考えました。
しかし、今ならAIとともに作れそうと感じてAIとともに作ってみたことから、メモを残します。
目次
環境
- mac
- Obsidian
- Claude Code 2.1.195
- Opus 4.8 high
機能について
obsidian-kanban プラグインのソースコードを確認したところ、自分の使い方としてはオーバースペックのように感じました。
そこで、機能をすべて再現するのではなく、次のような、自分のほしい必要最低限の機能に絞ったプラグインを作ることにしました。
- レーンは固定
- カードの追加と削除は可能
- カードには作成日と完了日をもたせる
- カードのレーン間移動はドラッグアンドドロップ
- アーカイブは、完了レーンのカードのみ可能
- デザインは最小限
技術スタックについて
せっかくなので、自分の知っている技術スタックで作るのではなく、今まで使ったことがなかったり、最近目にする技術スタックを採用しました。
一方、CIまわりは、自作のRailroadsプラグインのものをベースに、今回の要件に合わせて調整しました。
https://github.com/thinkAmi/railroads
なお、ToDoのデータをmarkdownで管理するというアーキテクチャは、 obsidian-kanbanと同じです。
このアーキテクチャの場合、ローカルデータが吹っ飛んだときは問題が発生しそうですが、タスクの詳細な内容については別のところに記載していることから、今回は問題ないと判断しました。
プラグインの技術基盤
obsidian-kanbanではPreactを使っていました。
今回機能を絞ったところ、obsidian-kanbanのようなPreactではなく、Svelteでも作れそうでした。
そこで、obsidian-kanbanをフォークして機能を追加するのではなく、Svelteでイチから作ることにしました。
Svelteだと、ドラッグアンドドロップのライブラリ svelte-dnd-action があるので採用しやすかったです。
https://github.com/isaacHagoel/svelte-dnd-action
OxlintやOxfmtによるLint・Format
AIに任せることもあり、
- Oxlint
- Oxfmt
を導入しました。
Vitestとfast-checkによるテスト
テストランナーとして Vitest を採用しました。
また、今回、markdownの処理を自作のパーサーで行っています。そのため、事例ベーステストに加え、プロパティベーステストでもテストを書きたくなりました。
JS/TSの場合、プロパティベーステストは fast-check 一択のように見えたことから、今回は fast-check を導入しています。
jmid/pbt-frameworks: An overview of property-based testing functionality
ちなみに、プロパティベーステストを導入したことで、分岐カバレッジが上がりました。
CIでのビルド、配布、テスト実行
Obsidianプラグインを作る場合、 main.js と manifest.json の2つは、最低限配布する必要があります。今回、それに加えてスタイルを適用する styles.css も配布します。
一方、プラグインの最低動作バージョンを示す versions.json はリポジトリに用意しますが、配布までは行いません。
今回はGitHub Actionsを使い、GitHubのReleaseでそれら3つのファイルを配布できるようにしています。
あとは、プラグインのバージョンを上げる作業やリリース向けの作業については、Claude CodeのAIスキルとして用意しました。
また、CIでは typecheck や lint 、テストも行うようにしています。
スクリーンショット
全体のビューはこんな感じです。各カラムの一番下でカードを追加できます。
カード単位での削除も可能です。
DONEレーンのみ、DONEにあるカードを一括でアーカイブできます。アーカイブ時は年月ごとにカードを振り分けます。
データはmarkdownとして保存しています。そのため、markdownファイルとして開くと次のように見えます。
おわりに
自分の欲しかったToDo管理ツールを作れました。
また、以下の点も良かったです。
- Obsidianのプラグインを作るには何が必要なのかを学べた
- 1つのmarkdownファイルでToDoリストを管理しているため、AIに分析させるのも容易になった
- 今まで使ったことのない技術スタックのソースコードが入手できた
使っていて気になるところが出てきたら、順次改善していこうと思います。
ソースコード
GitHubに上げています。
https://github.com/thinkAmi-sandbox/obsidian-kanban-flow
