Tasfer: 2Dキャンバス上に描画されるテキストエディタ

Tasfer: 2Dキャンバス上に描画されるテキストエディタ

Web上でテキストエディタに入力する際、多くの場合、contentEditableと呼ばれるものを使用しています。これは、ページの特定の部分を編集可能とマークできる古いブラウザAPIで、その後はブラウザが処理を引き継ぎます。ほとんどのリッチテキストエディタは、多かれ少なかれこのAPIの上に構築されています。

もしあなたがエディタを構築しようとしたことがあるなら、その苦労はご存知でしょう。扱いが難しいだけでなく、奇妙な挙動でいっぱいです。Enterキーを押した後のHTMLの見た目はブラウザが決めてしまいます。ブラウザごとに少しずつ異なります。選択範囲が飛び回ったり、ペーストするとゴミが入ってきたりします。そして、あなたが望むものを構築するよりも、ブラウザが行ったことを修正するのに多くの時間を費やすことになります。

そこで私は、少しクレイジーなことをしました。すべてを捨てて、HTML5キャンバス上に自分で描画することにしたのです。

すべての文字を描画する

Tasferでは、画面上の表示をブラウザが決めることはありません。エディタ自身が決めています。すべての文字、カーソル、選択範囲、改行、アラビア語のような右から左へのテキスト、これらすべてを私が書いたコードが測定し、2Dキャンバス上にペイントします。

キーボードだけは、私が置き換えることができませんでした。入力、自動修正、アラビア語や中国語の入力メソッドは、ブラウザがそれを実際のテキストフィールドへの入力だと認識している場合にのみ機能します。そのため、小さく隠された入力フィールドがキーストロークを受け取り、エディタがそこから処理を引き継ぎます。ブラウザはそれを聞いていますが、描画は行いません。

これは大変な作業のように聞こえるでしょうし、実際大変です。しかし、これにより、エディタはデスクトップでもスマートフォンでも、すべてのブラウザで同じように見え、同じように動作します。なぜなら、ピクセルを担当しているのが他ならぬエディタ自身だからです。

最初に取った回り道

これは私が普段あまり話さない部分です。私はキャンバスから始めたわけではありません。最初はWebGLとWebGPUから始めました。ゲームエンジンのようにGPU上でテキストをレンダリングできると思ったからです。

TrueTypeフォントファイルを手作業で解析し、グリフのアウトラインをGPUが描画できるものに変換しようと多くの時間を費やしました。多くのことを学びました。しかし、実際に完成させたものは多くありませんでした。ある時点で、2Dキャンバスで十分であり、十分高速であると認め、先に進みました。

2025年のクリスマス

その後、2025年末のクリスマス休暇中に、Claudeや他のLLMがどれほど進化しているかに気づきました。「関数を書いてくれる」レベルではなく、このプロジェクトのような大きくて複雑なものに対しても実際に役立つレベルになっていました。

そこで、それらを集中的に使用したところ、開発速度は劇的に変化しました。「いつかできたらいいな」リストに入れていたことが、1週間で実現し始めました。

サーバーなし、アカウントなし

人々が無思考に書いたものをすべて企業のサーバーに渡してしまうことに、私は常々嫌悪感を抱いていました。メモ、計画、プライベートなものなどです。そのため、Tasferをビジネスにするか、誠実さを保つかの選択を迫られたとき、商業的なアイデアはすぐに捨てました。

代わりに、Tasferはローカルファーストです。あなたのドキュメントはあなたのデバイス上に保存されます。サインアップもクラウドコピーもありません。

これにより、共同編集が難しい部分となりました。サーバーが「実際の」ドキュメントを保持していない場合、どうすれば2人のユーザーが同時に同じページを編集できるのでしょうか？その答えはCRDT（Conflict-free Replicated Data Type）です。これは、すべての編集が操作であり、どのような順序でマージしても、すべてのデバイスで同じ結果になるデータ構造です。私はそのロジックを自分で実装し、ピアはWebRTC経由で直接、暗号化して編集を送信します。

明確にしておくと、小さなサーバーは2つのデバイスがお互いを見つけるのを助けるために使用され、何も保存しません。その後、ピアは直接通信します。ネットワークが直接接続をブロックした場合にのみ、トラフィックはリレーを経由しますが、これは暗号化されているため、リレーは読み取れないデータを渡すだけです。あなたのドキュメントがサーバー上に保存されることは決してありません。

成長し続けた

最初はテキストエディタとして始まりました。次に数式が必要になったので、LaTeXレンダラーを書き、それもキャンバス上に描画するようにしました。次にコードブロックとシンタックスハイライト。その後テーブル。そしてカレンダー、なぜならタスクをメモの横に置きたかったからです。現在、Web、macOS、Windows、Linux、iOS、Androidで動作します。

私は自分の仕事、特に数式を書くために毎日それを使用しています。それが私にとって最高のテストです。何かでイライラしたら、それが修正されます。

［画像: Tasferでの講義ノート。数式、チェックボックス、すべての文字がキャンバス上に描画されている。］

オープンソース、SDK付き

Tasferは現在オープンソースであり、2つのライセンスの下で提供されています。

• アプリケーションはコピーレフトのAGPLライセンスです。フォークしたりホストしたりする場合、変更を共有する必要があります。
• エディタエンジンはMITライセンスです。商用利用か否かにかかわらず、あなたの製品に無償で組み込むことができます。

エンジンは独立したパッケージとしてSDKを備えているため、独自のアプリにキャンバスエディタを組み込みたい場合、私が経験したような苦労をする必要はありません。ドキュメントはtasfer.app/docsにあり、コードはgithub.com/tasferlabs/tasferにあります。

ブラウザでtasfer.appから試すことができ、インストールは不要です。もしあなたがcontentEditableと格闘して敗北した経験があるなら、ぜひお話を聞かせてください。