嗜好化するToDo管理 — Appendix: ToDo管理ツールデモ

こんにちは、パレイド思想部です。

「嗜好化するToDo管理」連載が全20回で完結しました。連載の中で繰り返し述べてきたのは、実際に動くものを見ながら改善するというバイブコーディングの思想です。

しかし、記事を読むだけでは「動くもの」は伝わりません。そこで、HigherSelfのデモサイトを公開することにしました。

なぜデモサイトなのか

HigherSelfはElectronアプリです。通常、Electronアプリを試すにはインストーラーをダウンロードして実行する必要があります。これでは「ちょっと見てみたい」という人にとって敷居が高すぎます。

一方、HigherSelfのUI層は本質的にHTML + CSS + JavaScriptです。Electronのネイティブ機能（ファイルシステム、通知、トレイアイコンなど）をスタブに差し替えれば、ブラウザ上で動作するデモ版を作れます。

データの永続化はインメモリに、AI機能はプレースホルダに、ファイル操作はダミー応答に。機能は制限されますが、UIとUXの思想は伝わります。

デモサイトは以下のファイルで構成されています。

demo_shim.js がデモの要です。ElectronのIPC通信をインメモリのデータストアに置き換え、ファイル読み書き、通知、ウィンドウ操作などをブラウザ上で模倣します。AI関連の設定はプレースホルダが入っており、実際のLLM呼び出しは行いません。

デモサイトでは、HigherSelfの以下の要素を体験できます。

逆に、以下はデモでは動作しません。

下の埋め込みで、HigherSelfのデモをそのまま操作できます。タスクの追加や完了、ダッシュボードの切り替えなど、基本的なUI操作を試してみてください。データはインメモリなので、ページをリロードすると初期状態に戻ります。

HigherSelfはデスクトップ向けElectronアプリのため、PC・タブレットでの閲覧を推奨します。スマートフォンでは横スクロールが発生し、操作が困難です。

別タブで開く場合はこちら: HigherSelf デモ

「動くものを見せる」ことの価値は、連載を書く中で痛感しました。文章でどれだけUI/UXを説明しても、実際に触れるものにはかないません。

Electronアプリを静的HTMLデモに変換するアプローチは、同じ構成のプロジェクトであれば応用可能です。ネイティブ機能のスタブを用意するコストは、インストーラーの配布やメンテナンスに比べれば軽量です。

「嗜好化するToDo管理」の思想が、デモを通じて少しでも伝われば幸いです。