Memoca

Notion 風のブロックエディタを備えた、ローカルファーストのメモ PWA。

Web ブラウザ、ホーム画面に追加した iOS / Android の PWA、Mac・Windows のデスクトップ版で同じメモを扱えます。 オフラインでも読み書きでき、オンラインに戻ると自動で同期します。

作品説明資料と動作紹介動画は docs/portfolio/ にあります（PORTFOLIO.md ／ memoca-demo.mp4）。 公開中: **https://memoca-app.vercel.app**（Google アカウントで誰でも登録して試せます）

主な機能

機能	概要
フォルダ	無制限の階層。パソコンではドラッグ&ドロップ、スマートフォンではメニューから移動
ブロックエディタ	見出し・リスト・チェックリスト・トグル・コード・引用・表・数式・図など
画像 / 動画	画像は端末側で WebP に圧縮し、貼ったあとでトリミングも可能。動画はアップロードと URL 埋め込みの両対応
即席メモ	Inbox にワンタップで書き捨て、後から整理
ロック	端末側で暗号化する E2EE。パスワード / Face ID・Touch ID / リカバリーキーで解除
ゴミ箱	ソフト削除と復元。保持期間を過ぎたものは自動で完全削除
検索	フォルダ名・メモ名に加えて本文も検索。表記ゆれを吸収し、読み（やっきょく→薬局）でも探せます。⌘K でも開く
同期	複数端末でリアルタイム同期。オフライン中の編集も競合せずマージ

技術スタック

• フロントエンド: Next.js 16（App Router / Turbopack）, React 19, TypeScript, Tailwind CSS v4, shadcn/ui
• エディタ: BlockNote + Yjs（CRDT）
• バックエンド: Convex（データベース / ファイル / リアルタイム / cron）
• 認証: Better Auth on Convex（Google ログイン）
• ローカル保存: Dexie（IndexedDB）
• PWA: Serwist
• 暗号: WebCrypto（AES-256-GCM / HKDF）, Argon2id（hash-wasm）, WebAuthn PRF

詳しい設計と実装計画は docs/PLAN.md、公開の手順は docs/DEPLOY.md にあります。容量対策とデスクトップ版の即席メモの計画は docs/STORAGE-AND-DESKTOP.md です。デスクトップ版（Mac・Windows）の入れ方と使い方は docs/DESKTOP.md にあります。

実装の状況

公開中: https://memoca-app.vercel.app

パソコンのブラウザと、iPhone のホーム画面に追加した状態の両方で動作を確認済みのもの。

• フォルダの作成・改名・入れ子・移動（パソコンはドラッグ&ドロップ）
• ブロックエディタ（Markdown ショートカット、日本語 UI、スマートフォン用のブロック操作バー）
• 画像の自動圧縮つきアップロード（512px の PNG 78KB が WebP 約 5KB に）
• 即席メモ（共有パラメータからの取り込みを含む）
• ロック（金庫の作成、リカバリーキーの提示、メモのロック、再読み込み後の解除）
• Face ID でのロック解除。iOS のホーム画面アプリでも動作します
• ゴミ箱への移動と復元、完全削除
• 本文を含む検索、⌘K のコマンドパレット
• 読みでの検索。「薬局」を「やっきょく」で見つけられます（設定から有効化）
• オフラインでの作成・編集と、復帰後に別端末へ届くこと
• ホーム画面への追加と、追加後のオフライン利用
• 登録上限、招待コード、1 人あたりの容量

細かい部分はまだ未完成で、今後も改修を続ける予定です。 デスクトップ版（Mac・Windows）は Releases で配布しています（入れ方は docs/DESKTOP.md）。

まだ入っていないもの。

• 他の人とのメモの共有・共同編集。
• iOS の共有シートからの直接取り込み（iOS が Web の共有先に対応していないため、 設定画面にショートカットアプリを使う方法を載せています）。

開発

pnpm install

# Convex をこのパソコンの中だけで動かします（アカウント登録は不要）
CONVEX_AGENT_MODE=anonymous pnpm dev:convex

# 別のターミナルで
pnpm dev          # http://localhost:3100

初回だけ、ローカルの Convex に設定を入れます。

npx convex env set BETTER_AUTH_SECRET "$(openssl rand -base64 32)"
npx convex env set SITE_URL http://localhost:3100
npx convex env set ALLOW_PASSWORD_AUTH true   # ローカルとテストのログイン用
npx convex env set MAX_USERS 100000           # テストが作るアカウント用

ALLOW_PASSWORD_AUTH はメールとパスワードでのログインを有効にします。 Google ログインの設定なしで開発と自動テストを回すためのもので、本番では設定しません。

コマンド	内容
pnpm dev	開発サーバー
pnpm dev:convex	Convex 開発デプロイの監視
pnpm build	本番ビルド
pnpm typecheck	型チェック
pnpm lint	ESLint
pnpm test	単体テスト（Vitest）
pnpm e2e	E2E テスト（Playwright。Convex と開発サーバーを起動しておく）
pnpm format	Prettier

必要な環境変数は .env.example を参照してください。

ライセンス

Copyright (C) 2026 mocaluna0117

GNU General Public License v3.0（GPL-3.0）。

メモの段組み（列）に、GPL-3.0 で公開されている BlockNote の段組み（@blocknote/xl-multi-column）を使うため、2026-10-02 に MIT から変えました。それより前に MIT で公開した版は、MIT のままです。