CMS Memory Core

Demo

実際に利用できます。

https://xxxxx.vercel.app

「過去が未来に活き続ける世界。」

概要

ローカルファースト型メモ管理アプリ。 過去の情報・経験・思考を、検索可能な知識資産として蓄積し、 未来の判断や創作に再利用できる状態にすることを目的とする。

記録 → ユーザー自身によるタグ付け・評価 → 検索 → 再利用

設計思想

• 記録に意味を与えるのは利用者自身であることを尊重し、AIによる自動要約・自動分類には頼らない
• データはユーザー自身が所有する
• サーバー保存を必要としない
• 検索可能な知識資産として蓄積する
• 複雑な管理を要求せず、シンプルに使い続けられることを重視する。 継続して記録することで、情報が長期的な資産になっていく

技術構成

• Next.js（App Router）
• TypeScript
• IndexedDB（ローカル保存）
• PWA（インストール対応）
• Service Worker（オフライン対応）
• 外部通信なし（サーバーへの送信を行わないローカルファースト設計）

データ保存

すべてブラウザ内のIndexedDBに保存される。サーバーへの送信は一切ない。

メモは、この端末（ブラウザ）を使える人であれば閲覧できる状態にあります。 共有のパソコンなどで利用する場合はご注意ください。

このアプリのメモは端末内（ブラウザ）の保存領域に保存されています。ブラウザの サイトデータ削除、端末の初期化、ブラウザ環境の変更などを行うと、保存した メモが失われる場合があります。大切な記録は定期的にバックアップしてください。

バックアップ／復元

JSON形式でユーザー自身が管理する（エクスポート／インポート対応）。 formatVersion によってファイル形式をバージョン管理しており、 将来の仕様変更が入っても過去のバックアップファイルを読み込めるようにしてある。

セットアップ

npm install
npm run dev

http://localhost:3000 にアクセスすると一覧画面が開きます。npm run devは 通常の開発確認用で、Service Workerは動作しない。

PWAのインストール・Service Worker・オフライン動作を確認する場合は、 本番ビルドで起動する必要がある（Service Workerはproduction環境でのみ 有効になるため）。

npm run build
npm run start

使い方

ヘッダーは左＝ロゴ、中央＝常時検索窓、右＝操作メニュー（一覧／＋メモを書く／検索）の3分割。 常時検索窓はどの画面からでも使え、今見ているメモから関連する過去メモをすぐ探せるようにするためのもの。 スマホ幅では検索窓が2行目に自然に折り返す。

一覧画面の上部には「＋ メモを書く」ボタンを大きく配置してあり、 初めて使う人でもメモ作成の入り口がすぐ分かるようにしてある。

1. 「＋ メモを書く」からメモを書く（タイトル・本文は必須、ユーザータグ・あとで役立つ評価は任意）。 「あとで役立つ」はその場で高/中/低/未評価を選んでもよいし、未評価のまま保存して 詳細画面から後で再評価してもよい。保存すると一覧画面（新しい順の先頭）に移動し、 保存されたことがすぐ分かる
2. ユーザータグはスペース・カンマ区切りで複数入力できる （例：読書 学習 問題解決 → #読書 #学習 #問題解決 の3タグ）
3. 「メモを書く」画面の入力欄の近くには「最近使ったタグ」の履歴（専用表示）が表示され、 クリックで追加できる（最大20件・最近使った順、削除操作は不要で古いものから自然に履歴から外れる。 ブラウザ標準の入力補完は無効化してあり、候補はこの専用表示のみ）。 タグ履歴はあくまで「入力の手間を減らす補助」という役割のため、詳細画面には表示しない （詳細画面は、そのメモに今設定されているタグだけを見せる）
4. 「一覧」タブは全件を並び替えて眺めるための画面（記録を見る場所） （新しい順・古い順・あとで役立つ順）。タイトル・ユーザータグ・ 「あとで役立つ」評価・作成日時のみを表示する。 あとで役立つ順では 高→中→低→未評価 の順に並び、未評価のメモも消えずに末尾へ表示される
5. 「検索」タブ（過去の資産を探す場所）は、キーワード未入力時は 最近のメモを新しい順で一覧表示し、入力するとタイトル・本文・ユーザータグを絞り込む。 検索結果自体も一覧タブと同じ4種類（新しい順・古い順・あとで役立つ順・更新順）で並び替えられる。 ヘッダーの常時検索窓からも同じ画面に飛べる。 検索は全角/半角・大文字/小文字の表記ゆれを吸収する （例：CMS cms ＣＭＳ ｃｍｓ はすべて同じ結果になる）
6. カードをクリックすると詳細画面へ（一覧・検索のどちらから開いても同じ）。ここで
   • 「あとで役立つ」（高/中/低/未評価）を自分で設定・変更できる
   • 「ユーザータグ」は、今設定されているタグの表示・削除と、複数タグ入力での追加ができる （タグ履歴の候補表示はここには出さない。履歴を使いたい場合は「メモを書く」画面で）
   • 本文を全文で確認できる（途中で切り取られることはない）
   • タイトル・本文は作成後に編集できない。書いた時点の記録をそのまま残し、 後からタグや「あとで役立つ」評価といった整理情報を育てていく、という考え方による
   • 「メモ管理」セクションから、不要になったメモを削除できる。「削除」ボタンを押すと 確認画面が表示され、「削除する」を選んだ場合のみそのメモ1件だけが削除される （他のメモには影響しない）。削除後は一覧画面に戻る
7. 一覧画面のカードそのものにも「削除」ボタンがあり、確認後にそのカードだけを その場で削除できる（詳細画面を開かなくてよい。一覧画面に留まったまま更新される）

タグのクリック時の挙動は画面の役割に応じて分けている。 「メモを書く」画面ではタグ履歴クリックで入力欄に追加（入力補助）、 一覧画面・詳細画面ではタグをクリックすると、そのタグが付いたメモを 「検索」画面で絞り込んで表示できる。

一覧画面の「バックアップ」ボタンから、全メモをJSONファイルとして いつでも端末にダウンロードできる（IndexedDBを読み取るだけで、既存データは変更しない）。 ボタンを押すとまず確認画面が表示され、保存される内容（メモ・タグ・あとで役立つ評価）と 「このファイルはCMSに読み込んで復元するためのデータであること」を説明する。 「実行する」を選ぶと実際にダウンロードされ、完了後は件数・ファイル名に加えて 「このJSONファイルは通常のメモファイルではなく、将来CMSに読み込むことで復元できるデータであること」 「外部には送信されないこと」を説明するメッセージが表示される。

隣の「復元」ボタンからは、そのバックアップJSONファイルを選んで読み込める。 ファイルを選ぶとすぐには復元されず、まず現在のデータと比較したうえで 「バックアップ日時」「バックアップの件数」「新しく追加されるメモの件数」 「内容が変更されるメモの件数」だけを表示する（対象メモの一覧表示はしない）。 「復元する」を選んだ場合のみ実際に反映される。復元は追加・更新のみを行い、 現在のメモを削除することは一切ない（バックアップに無い現在のメモはそのまま残る）。 formatVersion の無い古い形式のバックアップファイルも自動判定して読み込める。

PWAとしてのインストール・オフライン利用

Chrome等の対応ブラウザからアクセスすると、アドレスバーやメニューから 「アプリをインストール」を選べる。インストールすると、ブラウザのタブではなく 独立したアプリのウィンドウとして起動できるようになる（スマホではホーム画面に、 PCではスタートメニューやアプリ一覧に追加され、そこから直接起動できる）。

一度読み込んだ状態であれば、オフラインでも利用できる。メモの作成・表示・検索・ 編集可能な項目（タグ・あとで役立つ評価）の変更・削除・バックアップ／復元は、 いずれも端末内（IndexedDB）の処理だけで完結するため、ネットワーク接続を 必要としない。ただし、一度も読み込んでいないページやメモ（オフラインより前に 一度も開いたことがない詳細画面など）は、オフライン時には表示できない場合がある。

ディレクトリ構成

cms-memory-core/
├── lib/
│   ├── localDb.ts  # IndexedDBデータアクセス層（取得・作成・更新・削除・検索・バックアップ／復元）
│   └── utils.ts    # 共通処理（タグのパース、検索文字列の正規化、入力制限の検証など）
└── app/
    ├── page.tsx                 # 一覧（並び替えて眺める画面・メモ作成導線・バックアップ／復元）
    ├── search/page.tsx          # 検索（キーワードで探す専用画面）
    ├── inbox/page.tsx           # メモを書く画面
    ├── notes/[id]/page.tsx      # メモ詳細
    └── components/
        ├── NoteCard.tsx         # 一覧・検索で共通のメモカード
        └── HeaderSearch.tsx     # どの画面でも使える常時検索窓

データの正式な仕様（データモデル・IndexedDBの物理設計・JSONバックアップ形式）は SPEC-v1.md を参照。

ライセンス

本リポジトリ自体のライセンスは特に設定していません（個人開発のプロトタイプのため、 現時点では著作権はすべて作者に帰属します）。内部ではNext.js・React等の オープンソースソフトウェアを利用しており、それぞれ元のライセンス （MITなど利用制限の少ないライセンス）に従います。

今後の拡張方針

• 関連記憶検索：メモ保存時にベクトル化し、コサイン類似度で「過去の似た経験・思考」を検索できるようにする
• 創作支援：複数メモを選択して、ユーザー自身の意図に沿って組み合わせるモード

lib/localDb.ts にIndexedDBアクセスを閉じ込めているのは、これらの拡張を追加する際に 既存のUIコードへの影響を最小限にするため。

開発記録

CMS Memory Coreは、CMSの思想設計・設計形成を経て、約4日間で実装・公開した個人開発プロジェクトです。

開発では、AIにコードを書かせるだけではなく、人間が設計・価値判断を行い、AIを設計整理・レビュー・実装支援として活用しました。

開発プロセスや設計時の意思決定については、noteにまとめています。

note: https://note.com/kangaeruhito_145/n/nf0da5133b0ee