インストール不要・サーバーレスで動作するブラウザネイティブなメモ帳(Vimモード対応)
(yupkidangju.github.io)重いElectronベースのIDEを起動するのは負担が大きく、クラウドベースのノートアプリはセキュリティ面が気になるため、自分で開発した純粋なローカルWebエディタ WebMemo Pro を紹介します。
ReactやWebpackのようなビルドツールを使わず、純粋な Vanilla HTML/JS/CSS だけでブラウザの限界を試してみた個人プロジェクトです。
[主な技術的特徴]
ネイティブなファイル保存(File System Access API): ブラウザで Ctrl+S を押すと、「名前を付けて保存」ダイアログなしでローカルディスク上の元ファイルを直接上書きします。
完全な Vim モード対応: CodeMirror 6 ベースの Vim エミュレータを搭載しています。興味深い点として、Vim の :w コマンドが実際のローカルファイルシステム保存と連動し、:wq を入力すると保存後にブラウザタブが閉じるよう実装されています。
ローカルタイムマシン(IndexedDB): 5MB の容量制限がある localStorage の代わりに IndexedDB を活用し、GB 単位のオフライン保存が可能です。また、各タブごとに直近 10 件のリビジョンスナップショットをバックグラウンドで自動保管し、データ消失を防ぎます。
Zero-Dependency & オフライン動作: バックエンドサーバーはまったく存在しません。GitHub リポジトリをダウンロードして index.html をダブルクリックするだけで、完全なオフライン状態でもすべての機能が動作します。
そのほかにも、ドラッグ&ドロップでのファイルオープン、Markdown のリアルタイムレンダリング(フローティング TOC 含む)、ミニマップなど、開発者フレンドリーな UX を実装しています。
軽いテキスト編集や Markdown 作成が必要なときに便利に使えると思います。フィードバックやコードレビューはいつでも歓迎です!
デモ: https://yupkidangju.github.io/webmemo/
ソースコード(GitHub): https://github.com/Yupkidangju/webmemo
20件のコメント
いいですね
ありがとうございます!
クローズドソースではあるのですが、100%オフラインのスクラッチボードを作っています: https://zetopad.site/
本当に素晴らしいですね。デザインもとても良いです。期待できるプロジェクトです!
素晴らしいです〜
ありがとうございます!
いいですね
モバイルでヘッダー部分の縦スクロールも防げると良さそうです
コードを追加してこちらでテストしてみたところ、問題はないように見えますが、もし何か問題があればフィードバックをいただければ反映します。
いいですね
ありがとうございます!
いいですね!
短く使ってみて、いくつかフィードバックを残します。
ctrlではなくcmdを主に使うため、Macではコマンドでctrl/cmdの両方を許可するか、cmdのみを許可してもよさそうです(例: ファイル保存 ->ctrl/cmd+s)。確認してみると、いくつかのコマンドはcmdでのみ動作します(例: 元に戻す -cmd-zのみ動作)ctrl/cmd+sの場合、ctrl/cmd+ㄴも同じように受け付ける)ご指摘いただいたフィードバックを反映してみました。もし動作しない点があれば教えていただければ対応してみます。韓国語コマンドのサポートと、Enterキーで改行する問題は同じ原因だったようです..
https://github.com/Yupkidangju/AIHack
https://github.com/Yupkidangju/SheetPicker
ほかのプロジェクトも素晴らしいですね
ありがとうございます! あれはまだみんな開発中のものです。完全に作り上げないとですね!
おお、すごくいいですね~~
ありがとうございます!
うわぁ!
ありがとうございます!
最高だ
ありがとうございます。少しアップデートして、Mermaid のマップや図表もレンダリングできるようにしました!