【衝撃】まさかの一枚完結！？HTMLだけで作られた爆速メモアプリ「Nash」が話題に
引用元：https://news.ycombinator.com/item?id=43358914
このシンプルだけどパワフルな属性のおかげで、多くの処理が楽になるんだよね。意外と知らない開発者が多いみたいだけど、結構前からあるんだよ。＜div id=“editor” contenteditable=“true”＞
この一行が、Writely（Google Docsになる前のスタートアップ）のオリジナル実装の9割を占めてたんだよ（ソースは創業者の一人であるオレ）。
残りの9割は、ブラウザごとに独自のバグがあるcontenteditableの実装を、ちゃんと同期させるためのバックエンドコードだったけどね！
こんなシンプルなことが、Google Docsみたいな巨大な産業を創り出すんだから、マジですごいよね。
多くの問題は、ブラウザの同期問題に変換できると思うんだ。
ブラウザ内外で使える、おすすめの同期ライブラリやアプリケーションってある？
OPじゃないけど、この分野の一般的な解決策は、状態をCRDT（conflict-free replicated data types）として表現することだよ。よく使われるブラウザベースのライブラリは、Y.js[0]とAutomerge[1]かな。
[0]:
https://yjs.dev/
[1]:
https://automerge.org/
ちなみに、Rustで同じことをやりたい人向けには、https://crates.io/crates/yrs と https://crates.io/crates/automerge があるよ。
Loro[1]ってのもあるよ。比較的新しいけど最近1.0になったみたい。パフォーマンスもいいし、他のライブラリにはない機能もあるんだって。
[1]:
https://loro.dev/
マジか、リンクありがとー！
Loroには他にないどんな機能があるの？
リッチテキストエディタっぽく見せるために、いろんなトリックやセマンティクスを駆使した、動的なテキストボックスだと思ってた。
＞’動的なテキストボックス’って具体的に何を指してるのかわかんないけど、ただのcontenteditableなdivだったんだよ。僕が関わってから少なくとも2回は完全に書き直されてるみたいで、今は canvasを使って全部JavaScriptで編集とかレイアウトとかレンダリングを’手動’でやってるんだって。
PHPのフォーラムで使われてるテキストエリアみたいなやつ…フォーカスが外れるたびに隠れて、代わりにHTMLベースのレイアウトが表示されるような。あれはゴツゴツしてたけど、Writelyを可能にしたのはあれだと思ってた。ContentEditableを知ってたら、すごく気が楽だっただろうな。IE6は対応してたのかな。
マジすごいよね。2016年ごろは中小企業向けのサイトを色々作っててさ、WPとかで大体できるんだけど、(1)WPのスタイリングがマジめんどいし、メンテしたくない、(2)プラグインとかWPのアップデートに頼りたくない、(3)アクセス権限が違う人が同じページの色んな場所を編集できるようにしたかったんだよね。だから、contenteditableとTinyMCEだけでCMSを自作したんだ。クライアントとかがログインしたら、権限のある場所を編集できるってわけ。編集できる場所は点線で囲って、フォントとか色とかはTinyMCEに保存されるから、HTMLいじらなくてもOK。編集ページに行かなくても、ページ上で直接編集して保存できるから、クライアントは感動してたよ。作ったサイトは5～10年経っても動いてるし、メンテもほぼ不要。
2009年頃、うちの大学がRedDotっていうエンタープライズCMSを導入したんだけど、コンテンツの横に赤い点があって、クリックすると編集できたんだよね。裏側は他のCMSと同じくらいクソだったけど、ユーザーにはマジで好評だった。
へー、RedDotなんて初めて聞いたけど、ユーザーにはウケそうだね。今どきの小さなサイトのオーナーって、レストランとか家具屋とか弁護士とか、外部の販売プラットフォームは持ってるじゃん。だから、時々自分のウェブコンテンツを簡単に編集したいだけなんだよね。俺のCMSは商用化しなかったけど、ホスティング代で年間200ドルくらいもらえれば十分かな。コードはPHP5000行とJavaScriptとCSSが数百行くらい。MySQLでページを読み書きするようにうまく作ってあるんだ。写真のドラッグ&ドロップとかもできるよ。WPみたいな構造じゃなくても、こういうのはできるんだよね。
＞https://thebarkerlounge.com
＞https://vickmanassociates.com
RedDotかー、懐かしいな！
数週間前にcontenteditableのライブデモを作ったよ。HTMLのシンプルだけどパワフルな隠れた機能だよね。
https://news.ycombinator.com/item?id=43179649
これいいね。昔、PDFエディタをHTMLに変換して、一番上のdivにcontenteditable=”true”をぶち込んだらできたよw
俺も同じアイデア試したけど、Firefoxじゃダメだった。PDFのコンテンツが2つ作られちゃうんだよね。1つはテキストで透明度0、もう1つはレンダリングされた画像。表示されるのは後者。だから、contenteditableを有効にしてもカーソルは出るけど、編集しても表示されないんだ。残念。
PDFをHTMLに変換するのに何を使ったの？
「すごいものがあるぞ、それは車輪っていうんだ。結構前からあるんだけどね」みたいな話に聞こえるな。俺は20年前からcontenteditable使ってるけど。ContentEditableはIE 5.5で2000年に初めて導入されて、2007年には主要なブラウザで使えるようになった。
めっちゃいいね。ソース見たらvanilla jsで書いてるんだ。すごいね。最近はライブラリとかフレームワークなしでも、インタラクティブなウェブアプリが作れるんだよね。俺もシンプルなウェブアプリをHTML1枚で作るのが好き。ちょっと前に子供と科学博物館に行って、ストップモーションアニメーターで遊んだんだけど、それと同じようなウェブアプリを作って、子供のラップトップにコピーしてあげたんだ。Reactとbundlerを使ったけど、vanilla jsで書くのがめんどくさかったから。いつかShow HNで公開するかも。
マジでさー、「jQueryなんていらねーよ」って言ってた頃みたいに、「React（とかVueとかSvelteとか、その他もろもろも）なんていらねーよ」って言うべきだよねー。 もちろんデメリットもあるよ。JavaScriptでコード書くハメになるってこと。 ちゃんと学べばいいじゃん。直感で何とかしようとして、言語をちゃんと理解しようとしないから、簡単に解決できるはずのものをモンスターみたいなコードにしちゃうんだよ。 それって何と比較して言ってんの？TypeScript使ってコンパイルすることもできるし、esbuildでバンドルすることもできるじゃん。 Quartoのこういうとこ、マジで好き。スタンドアロンのHTMLファイル作って、人に簡単に共有できるし。 すごいね！ローカルディスクからブラウザで開いた時は自動的に編集モードになって、ウェブサイトに公開されてアクセスされた時（http/httpsかどうかチェック）は普通の読み取り専用モードになるようにしたらどうかな？ コンテンツを編集してローカルに保存できるウェブサイトのアイデア、マジで良いと思う。これは素晴らしいし、このままでいてほしい。 それ、実はWWWの初期のバージョンで意図されていたことなんだよね。 あなたは私のコメントも、現在の読み取り専用モードの仕組みも、マジで理解してないね。 https://rpdillon.net/redbean-tiddlywiki-saver.html を使えば、保存機能もつけて、完全に自己完結したポータブルなものにできるよ。 前に似たようなの作ったことあるんだよね。https://original.littr.me で見れるよ。 ファイルを保存する機能があると嬉しいな。そうすれば、プライベートなブックマークとして使える可能性が広がるよね。 ナイスジョブ！このアイデアについては以前にも議論があって、TiddlyWiki のことが話題になってたよ。https://news.ycombinator.com/item?id=43179649 この分野で俺が気に入ってるのは Feather Wiki かな。https://feather.wiki/ HNに投稿する前に、地元のコミュニティで共有したら、同じ2つの機能について言われたんだよね。俺のプロジェクトでは、名前を”Note”じゃなくて”Page”か”Document”にすればよかったかも。 ブラウザがローカルのウェブアプリをもっとサポートしてくれたらいいのにな。ローカルファイルが簡単に永続ストレージにアクセスできるようになれば、手軽なGUIアプリの可能性が広がると思うんだ。Electronの逆みたいな感じ。 実行ファイルもファイルだよ。 それなら、アクセス権を持ってるのはランタイムってことになるよね。つまり、ユーザーがbashスクリプトを実行してるファイルへのアクセス権があるかどうかによるってこと。 ランタイムやOSもファイルで構成されてるんだよ。 これ、マジでクールじゃん！なんか変な話だけど、ウェブサイトのJSってHTMLの外に書くのが当たり前になっちゃってるから（少なくとも俺はそう）、これ見て最初に思ったのが「HTMLだけでこんなことできるの、マジか！」ってことだったんだよね。で、ソース見たら普通の＜script＞タグの中にJSが書いてあって、「ああ、そういえばこれってアリだったわ」って思い出した。 HTMLってマジで過小評価されてるよね。俺らが毎日見てる画面のほとんど、コードエディタとかもHTMLページじゃん。 VIMがHTMLページだって？それともJetBrainsのエディタがHTMLページをレンダリングしてるってこと？ スレッドの他のコメント見てみて。SOによると開発者の3/4だって。 オタクって呼ばれてもいいけど、開発者の3/4が業界全体の3/4を代表してるわけじゃないと思うんだよね。特にHNの開発者の3/4はね。 ＞Call me a neckbeard, but 3/4 of devs are not representative of え、違うくない？ 最新のstack overflowの開発者アンケートによると、回答者の74%がVSCodeを使ってるらしいよ。かなり安全な発言だと思うけど。 なんか分かるなー。俺も、みんながVSCode使ってるみたいな言い方をされるのが嫌なんだよね。ちょっとムカつくって言うか。（元々の発言があいまいだから、そう理解することもできる。） ごめん、誰かを不快にさせるつもりはなかったんだ。 ごめん、誰かを怒らせるつもりはなかったんだ。わかってるって、謝ることないよ。時々、人って（俺みたいに）何でもないことで腹立てたりするし、誰かを責めるより、なんでそうなっちゃうのか考える方が面白いじゃん？もちろん逆もアリだけど、気をつけてないと自分の怒りを押し付けちゃうからさ。でも、VSCodeの話に戻ろう。 了解！誰かにTypeScriptとかReact使ってるって思われたら、同じ気持ちになるかも(笑) 意見と背景を教えてくれてありがとう。全然違う視点からの意見を聞けて面白いよ。この件について、より深く理解できた。 ＞even if they have taken on a more benign appearance.” Vimに関するジョークだけどさ、俺が子供の頃タイプライターに触れてたせいで、Vimをエディタとして使えないんだよね(笑) めっちゃわかる。俺もタイプライター使ってたし、最初のコンピュータはMac Plusだったし。Vimはマジで異質に感じた。 IntelliJにも色々なWebViewがバンドルされてるはず。 分離性とかバージョン管理を重視するなら、やらない方がいいかもね。でも、”できる”ってことは確か。 提案：編集したのに保存せずにページを閉じようとしたら、警告を出すべき。onbeforeunloadハンドラを追加することを検討して。 このWebページには今、閉じる時に警告が出るようになってるけど、一般的に良い提案だよね。 こういうシンプルなツールって良いよねー。俺も最近、簡単なカスタム「ホームページ」/ダッシュボード作ったんだ。 保存機能も追加したよ。 マジでこれ好き。ローカルで簡単にできる機能をサブスクリプションに閉じ込めるの、マジ勘弁。 おー、懐かしのcontenteditable。 どうもー！ナッシュって名前です。 これってある意味ウイルスみたいでクールじゃね？JSのソースコードを毎回保存するから、そのファイルが他のファイルも作れるんだよ。でも、悪用もできそう。スタンドアロンに悪意のあるスクリプト仕込んで、誰かがターゲットに送るまで発動しないとか… 最近TiddlyWikiでローカルwiki作ろうとして挫折したんだけど、NashのおかげでHTMLファイルを直接書く作業が楽になりそう！ありがとう！ ナイスワーク！ マジですごい。 まさに同じこと言おうと思ってた！これにハマった。もっとちゃんと読んで理解したい。 これマジでいいね！俺も似たようなの作ったことあるんだよねー。もっとシンプルだけど。でも毎日使ってるよ！これ見てみて→ https://tabnotes.page (なんかメモってみて) これ覚えてる！ちょっと使ってた時期あったわ。アイデア最高じゃん。 ローカルストレージに一つのメモだけ？何に使うの？ マジで急いで何かメモしたい時用かな。起動時間ほぼゼロで、パッと新しいタブ開いて考えを書き留めるみたいな。複雑なことしてる時に考えを忘れがちだから、”書き留めるまでの時間”が一番重要なんだよね。 これってTiddlyWiki (https://tiddlywiki.com/) に似てる？ 確かに似たようなアイデアだね。 HTMLの部分はそうかもだけど、TiddlyWikiはアイデア同士を繋げることもできるんだよね。 モバイルSafariで試してみた。 これ結構クールだけど、’Save’と’Share’の違いがよく分かんないんだよね。どっちもただファイルを保存するだけに見える。 Saveはa href (リンク) でdownload属性 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#…) を使ってて、普通のファイルダウンロードが始まるはず。 マジか、こういうの探してたんだよね。でも、バックエンドがローカルストレージだと、自分のreframe[1]に組み込めるからもっと嬉しいな。もっとコメントを表示（1）
普通のJavaScriptとそこそこのスキルがあれば、ほとんど何でもっとクリーンでメンテしやすい方法でできるって。
何十年も他人の作ったもんメンテしてきた経験から言うと、賢い人が作ったアホみたいな設計が一番マシ。
もちろん、上書きする方法（クエリ文字列とか）も必要だし、特定のドメイン（keepworking.github.ioとか）は例外にして編集モードにするのが良いと思うよ。ユーザーが変更できるようにするのがベスト。もっとコメントを表示（2）
確かにElectronでレンダリングされたHTMLページでコーディングしてる人もいるけど、AtomとかVS Codeとかね。でもそれって少数派じゃん。「俺らのコードエディタ」って言い方はちょっと大げさすぎない？
＞According to:
＞https://survey.stackoverflow.co/2024/technology#most-popular…
＞It seems that the order of most used technologies on SO is JS, SQL, HTML, CSS, and only then Python. We skip back to TypeScript and then Bash before finally getting to Java, C#, and C++.”
Stack Overflowのアンケートに自ら参加する人たちが、業界全体を代表してるとは思えないんだよね。
こう書くべきだったね。
＞オタクって呼んでくれてもいいけど、Stack Overflowのアンケートに答えてる開発者の3/4は、業界全体を代表してるわけじゃない。
俺のコードエディタはNeoVimかIntelliJだけど、HTMLページなんて全然関係ないし。
言いたいのは、VSCodeの利用状況を拡大解釈しすぎだってこと。
それにしても、使ってもないソフトウェアのことで、こんな感情が湧いてくるなんて、HTMLの普及に関する何の悪気もない発言からだよ？なんか面白い。
でも、なんでそう感じたのか、マジで知りたいんだよね。VSCodeを使うのが恥ずかしいことだと思われてるのか、それともMicrosoftの製品だから？
PS: 個人的な経験からVSCodeに強いポジティブな偏見があるから、開発者の視点を理解したいんだ。
VSCodeについてはマジで主観的な話で、感情的な反応になっちゃうんだよね。VSCodeが多くの人にとって便利で実用的なツールだってことはわかってる。でも、なんか嫌な感じがするんだよなー。理由はこんな感じ。
ブラウザみたいなもんでテキスト編集するってのが、なんか違う気がするんだよね。豪華客船でレストラン行くためだけに乗るみたいな。
それにMicrosoft製だし。昔のMicrosoftはマジで性格悪かったの覚えてるからね。囲い込みしようとしてたし、Internet Explorerでその片鱗が見えたし。今でこそおとなしくなったけど、信用できないんだよ。
だから、なんか気持ち悪いんだよねー。Microsoftみたいな会社が無料で配ってる、ブラウザみたいなエディタを使うのがさ。（Chromeも同じような理由で好きじゃない。）
だから、ちゃんとしたエディタとかIDEを使いたいんだよね。そういうツールを作るのが目的の人たちが作って、お金払えるやつ。（購入とか寄付で）まとめると、VSCodeは良くできてるけど、使うと気持ち悪いし、同じくらいかそれ以上の代替ツールがあるから、そっちを使うって感じ。
だから、もし誰かが俺がVSCodeを喜んで使ってるみたいなこと言ったら、泥を投げつけられたみたいに感じるんだよね。だから、誤解を解きたいって思うんだ。
ほんと、こういうのって不思議だよね。こういうこと考えると、人がどうやって他人と関わってるのか、ちょっとわかる気がする。
ちょっと自己分析してくれそうだったから、思い切って聞いてみたんだ。説明しにくいことを説明してくれてありがとう！
2007年にMicrosoftに入社した時、Visual StudioにはJavaScriptのシンタックスハイライトすらなかったんだぜ。何年も経ってから、MicrosoftがIBMのEclipse IDEプロジェクトからErich Gammaを雇った時はマジで興奮したな（長くなるから割愛）。VSCodeは元々Monaco editorって名前で、WinJSライブラリの上に作られた、ただのWebコンポーネントだったんだ。それが何年もかけて今の形になったんだよ。
VSCodeが”Microsoft製品”って見方、めっちゃわかるけど、VSCodeは俺にとって数少ない例外なんだよね。理由はさっき言った通り。
＞一見おとなしくなったように見えても”
昔の性格悪いMicrosoftはまだ健在だよ。ただ、その悪い行いが大企業とか政府関係に限定されてるから、表に出にくいんだよね。過去5年のニュースを見てみればわかるよ。
タイプする以外の目的で文字キーを押すのが、マジで変な感じがするんだ。SHIFTキーをタイプライターの文字を大文字と小文字に切り替える物理的なものだと思ってるのかも。
Vimを使いこなしてる人を見ると、すごいなーって思うよ。
でも、思い切って試してみることにしたんだ。今まで学んだことを全部捨てて。今では毎日neovimを使ってるよ。kickstart.nvimのおかげで、毎日のコーディングで使えるようになったんだ。
それに、”ほとんど”って言ってるから、VSCodeの使用状況を推定するのは妥当だと思う。
マジで理解できないのは、JavaScriptですらないものをHTMLに含めて、外部JSでアタッチしたりハイドレートしたりするフレームワークを使ってる人たち。それって最悪じゃん。
俺は完全に逆で、JavaScript至上主義なんだよね。index.html以外に”.html”拡張子のファイルはないし。JavaScriptの中にHTMLも書かない。テンプレートの一部は”.htm”ファイルにして、DOMに追加する前にハイドレートしてる。
https://github.com/rcarmo/onepage-by-specもっとコメントを表示（3）
今、ブラウザだけで動く無料のMarkdownエディタ作ってて、Chromium系ブラウザ限定だけど、新しいfilesystem access APIでローカルファイルを編集できるんだ。
https://zareith.github.io/chillmd/
これが一番シンプルかも。アドレスバーに直接書く:
data:text/html,
ユニコード対応するには、もうちょっと長いURIが必要だけどね。
関連Hacker Newsディスカッション:
https://news.ycombinator.com/item?id=6005295
https://news.ycombinator.com/item?id=5135194
https://nashkabbara.com
あと、これTOCに便利だよ。
https://codepen.io/cgurski/pen/qBrNrPo
Webstrates(webstrates.net)って研究プロトタイプを作ってて、最近ローカル版のMyWebstrates(https://github.com/Webstrates/MyWebstrates)を作ったんだ。
NashのHTMLをMyWebstratesにコピーしたら、ちゃんと動いたよ。リアルタイムコラボもできるよ！
後でちゃんと勉強しよ。
これはスタンドアロンのHTMLファイルってところに重点を置いてると思う。
同じように、WebTorrentとSTUNサーバー使ってP2PアプリをスタンドアロンHTMLファイルで配布することもできるよね。少なくとも昔はできたはず。スタンドアロンHTMLファイルが本格的なアプリになるってこと。
単語をハイライトしてフォントのコントロールを使うと、ハイライトされたままになっててほしいんだけどなー。
あと、ボールドとかイタリックみたいな書式をもう一度選択しても解除できないみたい。
ShareはNavigator.share (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/s…) を使ってて、ブラウザに”共有”メニューがあればそれが開くはず。
新しいタブ開くたびに、そこそこイケてるテキストエディタでメモとか取りたいじゃん？
[1] https://reframe.canine.sh/czhu12
