読む・考える・書くを、ひとつのアプリで行う。

2026.03 – 個人制作。企画・設計・検証を担当。実装には AI エージェントを活用。

黒い机に置かれた付箋付きの論文の束、情報カード、万年筆、開いたノート
生成した画像によるイメージです。
cogni-storage のホーム画面思いつきをカードで育てる画面

cogni-storage

トップへ戻る

思いつきをカードで貯めて、育てる。

研究では、思いつき・読んだ文献・書きかけの論文が別々の場所に散らばりがちです。そこで思いつきをカード(Ideas)として貯め、確からしさを書き添えて育てる画面を中心に置きました。

研究テーマ・執筆中の論文・読んだ文献もここから行き来でき、発表スライドの生成まで同じアプリで扱えます。

Claude Code と連携し、文献の取り込み・翻訳・整理を半自動で進められます。見た目は黒とクリームを基調にしたレトロな配色でそろえました。

Ideas の画面
Ideas 思いつきをカードで育てる
Themes の画面
Themes 研究テーマの管理
Papers の画面
Papers 執筆中の論文
Readings の画面
Readings 文献の記録

通信が切れても、書き続けられる。

画面は常に端末内のデータから表示し、サーバー(Supabase)とは変わった分だけをやり取りします。つながると別の端末に追いつきます。

公開デモは実際の画面を使っています。研究資料と記録は架空の見本に置き換え、変更はこの端末内にだけ保存します。

cogni-storage の路線図アプリの画面から IndexedDB と送信待ちの列を通って Supabase へ行き、ほかの端末へ差分が届く。依頼は Supabase を通して Claude Code に届き、返答が画面へ戻る。研究メモは git に残り、ビルドのときにアプリへ入る。研究メモMarkdown で書くgit追記の履歴を残すアプリの画面IndexedDB画面はここから表示送信待ちの列古い変更はまとめるSupabase4 つの表Claude Code依頼を受けて処理する返答は画面へ届く通し番号前回の続きから取るほかの端末
cogni-storage の路線図アプリの画面から IndexedDB と送信待ちの列を通って Supabase へ行き、ほかの端末へ差分が届く。依頼は Supabase を通して Claude Code に届き、返答が画面へ戻る。研究メモは git に残り、ビルドのときにアプリへ入る。研究メモMarkdown で書くgit追記の履歴を残すアプリの画面IndexedDB画面はここから表示送信待ちの列古い変更はまとめるSupabase4 つの表Claude Code依頼を受けて処理する返答は画面へ届く通し番号前回の続きから取るほかの端末
依頼は Supabase を通して Claude Code に届きます。研究メモは git に残り、ビルドのときにアプリへ入ります。

作りの要点

端末の時計に頼らない同期
差分はサーバーが振る通し番号をしおりにして取ります。端末の時計のずれに依存せず、前回取得した続きから変更を受け取る構成です。
項目ごとに新しい方を残す
同じ記録を 2 台で直したときは、項目ごとに新しい方を残します。
アプリから AI に頼む
アプリが依頼をデータベースに書くと、Claude Code が受け取って処理します。返答はリアルタイムで画面に届きます。
研究の記録を git に残す
研究のメモは Markdown で書き、ビルドのときにアプリへ取り込みます。Claude Code が追記した履歴は git にそのまま残ります。
4
同期する表(Ideas・Themes・Papers・Readings)
10本
AI エージェントの手順書
画面
React 19 TypeScript Vite 7 react-markdown
保存と同期
IndexedDB(idb) Supabase Realtime
配布
PWA(vite-plugin-pwa)
AI 連携
Claude Code