WebAssemblyで作った「お絵描きチャット」開発秘話
詳細情報
発表のハイライト
- WebAssembly(Wasm)を用いて、多人数同時編集に対応したお絵描きチャット「えんぴつチャット」を開発
- 複数人での同時編集におけるUndo/Redo機能の実装に工夫が必要
- サーバーとの通信による描画遅延を、投機的な描画で解決
- Twitterでバズり、想定外のアクセスにサーバーが悲鳴を上げた
なぜお絵描きチャットを開発したのか？
たむらひろしさんは、以前からWindows用のペイントツールやWebブラウザで動作するお絵描きアプリを個人開発されていました。その経験から、多人数で同時に絵を描けるチャットサービス「お絵描きチャット」に興味を持ち、開発をスタートしたそうです。
お絵描きチャットは、複数のユーザーが同じキャンバスに同時に絵を描いて遊べるサービスです。2000年代初頭にインターネットで流行し、近年では「MagicalDraw」などが有名ですね。
しかし、お絵描きチャットは一般的なペイントツールとは大きく異なります。
お絵描きチャットの大きな特徴
- サーバーを介して動作する：個々の端末ではなく、サーバー上でキャンバスが管理されるため、複数人で同時編集が可能になります。
- 複数ユーザーからの描画操作の同時発生：複数のユーザーが同時に描画すると、サーバー側で描画順序を管理する必要があります。
- サーバーでの一元管理が必須：描画内容を管理するため、サーバー側で一元管理する必要があります。
「えんぴつチャット」のすごい機能と仕組み
たむらひろしさんが開発した「えんぴつチャット」は、最大8名で同時編集、最大40名の閲覧が可能なサービスです。
「えんぴつチャット」の仕様
- キャンバスサイズはA3 600dpi相当の巨大なビットマップ
- 色数は256色
- レイヤー機能は無し
- Apple Pencilなどのスタイラスペンに対応
- Undo/Redo機能搭載
これらの機能を実現するために、たむらさんはWebAssembly(Wasm)を採用しました。
WebAssembly(Wasm)採用で実現した高速処理と省メモリ
Wasmは、C/C++などの言語で記述されたコードをWebブラウザ上で実行できる技術です。
たむらさんは、以前開発したペイントツールのC言語ソースコードをWasmにコンパイルすることで、「えんぴつチャット」のクライアントサイドとサーバーサイドの処理に流用しました。
Wasmを採用したことで、以下のメリットがありました。
- 高速動作：Wasmはネイティブコードに近い速度で実行できるため、描画処理を高速に行うことができます。
- 省メモリ：Wasmはメモリ消費量が少なく、サーバーの負荷を抑えることができます。
- バイナリサイズが小さい：Wasmはコンパクトなバイナリサイズで配布できるため、ユーザーのダウンロード時間を短縮できます。
複数人での描画とUndo/Redoの難しさ
複数人で同時編集を行う場合、Undo/Redo機能の実装は非常に複雑になります。
Undo/Redoの挙動
- 描画領域が重なっていない場合：各ユーザーは自由にUndo/Redoを行うことができます。
- 描画領域が重なっている場合：後から描いたユーザーがUndoすると、先に描いたユーザーの描画も消えてしまうことがあります。
- 複数ユーザーが同時に描画した場合：Undo/Redoが不可能になる場合があります。
たむらさんは、これらの問題を解決するために、描画順序を管理する工夫を凝らしました。
描画レスポンスの工夫
複数ユーザーが同時に描画を行うと、サーバーとの通信に時間がかかり、描画が遅れてしまうという問題が発生します。
描画レスポンスの問題点
- サーバーとの通信待ちが発生
- 描画が遅れてしまう
描画レスポンスの解決策
たむらさんは、投機的な描画という手法でこの問題を解決しました。
- 自分の描画は、サーバーからの確認を待たずに、先に描画してしまう。
- サーバーから確認の返答を受け、描画内容に矛盾が生じた場合は、投機的に描画した部分をキャンセルする。
これにより、ユーザーは描画の遅延を感じることなく、スムーズに絵を描くことができます。
公開後の反響と課題
「えんぴつチャット」は2021年から公開され、当初は数人程度の利用でしたが、2022年4月にTwitterでバズり、想定外のアクセスが集中しました。
公開後の反響
- Twitterでバズり、多くのユーザーに利用された。
- 想定外のアクセスにより、サーバーがダウンする事態が発生した。
- バグが多数発見された。
この経験から、たむらさんは、サーバーの負荷対策やバグ修正など、さらなる改善が必要だと感じています。
まとめ
たむらひろしさんが開発した「えんぴつチャット」は、WebAssembly(Wasm)を活用することで、多人数同時編集に対応した、高速で省メモリなサービスを実現しました。複数人での描画とUndo/Redo機能の実装には、多くの工夫が必要でしたが、たむらさんは投機的な描画など、独自のアイデアで課題を解決しました。
Twitterでのバズを機に、多くのユーザーに利用されるようになった「えんぴつチャット」ですが、さらなる改善と発展が期待されます。