ブラウザで動作し、すべての内容をURLに保存するミニマリストなテキストエディタ

 (github.com/antonmedv)
3 ポイント 投稿者 GN⁺ 2025-12-25 | 1件のコメント | WhatsAppで共有
  • ブラウザ内で動作し、すべてのテキストをURLハッシュに保存する軽量テキストエディタ
  • 入力内容はdeflate圧縮によってURLの長さを短縮し、バックエンドサーバーなしで完全なクライアントサイド動作を実現
  • 自動保存（500ms遅延）、ダークモード、モバイル対応など基本的な便利機能を搭載
  • 文書タイトルを# Titleで指定したり、<article>タグにstyle属性を追加してURLに一緒に保存可能
  • URLを共有するだけで文書を渡せるため、簡単なメモやコードスニペットの共有に便利

概要

  • textarea.myは、ブラウザ上で完全に動作するミニマリストなテキストエディタ
    • すべてのデータはURLハッシュに保存されるため、別途サーバーやデータベースは不要
    • JavaScript製で、インストール不要ですぐに使える

主な機能

  • テキスト圧縮（Compression magic）

    • 入力したテキストをdeflateアルゴリズムで圧縮し、URL長を最小化
    • およそ500文字前後のURLで長いノートも共有可能

  • URLベースの保存と共有

    • 作成した内容がURLハッシュに含まれるため、そのリンクをコピーして共有できる
    • サーバー保存なしでもリンクだけで文書を復元可能

  • 自動保存とダークモード

    • 入力後500ms遅延の自動保存機能を提供
    • システムのカラーモード設定を認識してダークモードを自動適用

  • モバイルフレンドリーなインターフェース

    • スマートフォンでも同じ機能で文書を作成可能
    • レスポンシブデザインで移動中の利用にも適している

  • バックエンド不要の構成

    • 「Zero servers were harmed」という文句どおりの完全なクライアントベースアプリ
    • サーバー負荷や個人情報保存の問題がない

使い方

  • textarea.my にアクセスしてすぐに入力可能
  • 入力するほどURLが長くなることを確認できる
  • URLをコピーして他の人と共有できる

高度なヒント（Pro tips）

  • 文書の最初の行に# Titleを入力するとページタイトルとして設定
  • データはlocalStorageとURLの両方に保存され、二重に保持される
  • 開発者ツールで<article>タグにstyle属性を追加すると、そのスタイルもURLに一緒に保存される

サンプルリンク

  • フョードル・ドストエフスキーのCrime and Punishmentのサンプル文書を用意
  • ChatGPTが書いたAn Ode to Comic Sansのサンプル文書を用意

技術的特徴

  • JavaScriptベースで構築
  • サーバーリクエストなしでURLハッシュとlocalStorageだけでデータを管理
  • シンプルな構造によりセキュリティリスクを最小化し、高速な読み込み速度を実現

結論

  • textarea.myは、サーバーレス環境で動作する超軽量テキストエディタであり、
    URL共有だけで文書の保存と受け渡しが可能なユニークなアプローチを提供する
  • 開発者やデザイナーが簡単なアイデアの記録、コードメモ、テスト文書の作成に活用するのに適したツール

関連記事

1件のコメント

 
GN⁺ 2025-12-25
Hacker Newsのコメント

  • 面白いことに、自分もほぼ同じものを作ったことがある。ただし地図用だった
    地図の上に絵を描いて、相手が自分の位置を見られるようにリンクを共有する方法が必要だった
    スクリーンショットに注釈を付けるのは最初の問題は解決するが、2つ目は解決できない
    そこでVibeエンジニアリングっぽい感じで自分で実装した。特定目的のための「即席アプリ」のような発想
    バックエンドなしでも安くホスティングできるので、無料で公開できる
    MapDrawデモリンク

    • ものすごくいい！ 今ちょうど旅行計画を立てるのに使っている
      テキスト注釈も追加できる？ それと削除ボタンが全消去ではなく、最後の図形だけ消すか選択削除できると嬉しい
    • 「Vibe engineered」という表現がすごく面白い。vibe codingはいいけど、それをエンジニアリングと呼ぶのが笑える :D
    • ページの応答性が、今まで使ったどの地図アプリよりもはるかにいい
    • 本当にすごい！ バグ報告を1つすると、地図を移動するときは描画が滑らかについてくるのに、拡大・縮小のときはアニメーションが終わってから描画が動く
    • 本当に素晴らしいプロジェクトだ

  • 今朝、似たようなものを作っていた
    base64文字列でreplaceを使う代わりに、.toBase64({ alphabet: "base64url" }) と fromBase64({ alphabet: "base64url" }) を使うともっときれい
    MDNドキュメント参照

  • 仕様によるとURLは少なくとも8,000文字まで可能
    主要ブラウザは64,000文字以上、Chromeは2MBまで対応している
    RFC9110 セクション 4.1-5, StackOverflow参照, Chromiumドキュメント

    • Chromeは2MB、Firefoxは1MB、WebKitは制限なし
      ちなみにCrime and Punishment全文リンクもURLで可能
    • 監視産業がutm-trackerやキャンペーンIDのようなものをさらに追加するために、URLをどんどん長くしている気がする
      InstagramやYouTubeの共有リンクを見ると、数百文字の追跡パラメータが付いている
    • ちなみに文字(character)とオクテット(octet)は別物。URI-safe ASCIIに変換されていないなら、1文字=1バイトではないことに注意

  • なぜデータをURLに保存して膨らませるのか分からない。localStorageに保存すれば十分では？

  • 以前、スプレッドシートで似たようなものを作ったことがある
    入力欄でタブ移動してリロードしないと動かなかった
    サンプルリンク
    全体のコードは約130行だった
    さらに多くの例

  • こうしたURLベース共有方式を簡単に実装できる小さなJSフレームワークを作った
    lost.js GitHubリンク

  • プライバシーの観点ではこのアプローチが気に入っている
    だから自分の kraa.io エディタにもURL保存オプションを追加しようかと考えている

    • ただし privacy の面では、textarea.my には追跡スクリプトが含まれている
      Cloudflare beaconコードが挿入されているので注意が必要
    • それなら、ローカルのネイティブテキストエディタを使うよりプライバシー面で優れている点はあるのだろうか？

  • 以前、ギターのタブ譜用に似たものを作った
    tabviewer.app 参照
    URLが長くなりすぎる問題は短縮URLサービスで解決した

  • 素晴らしいプロジェクトだが、「Crime and Punishment」を読み込んだら自分のモバイルブラウザがクラッシュした
    URLがそこまでの「罰」に耐えるようには設計されていないようだ

  • 宣伝すると、自分も似たようなものを作ったけれど誰も気に留めなかった
    Buffertab GitHubリンク

    • 音声入力機能が興味深い。OpenAI APIの代わりにWhisper wasmを使うことは考えなかったのか気になる