WebAssemblyで作った「お絵描きチャット」開発秘話

詳細情報

集会名 個人開発集会
日時 2023年08月03日 22:00 - 22:30
テーマ お絵描きチャットを作った話
発表者 たむらひろし
発表資料 リンク ファイル

発表のハイライト

  • 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でのバズを機に、多くのユーザーに利用されるようになった「えんぴつチャット」ですが、さらなる改善と発展が期待されます。

スライド資料

個人開発集会の他の発表もチェック!

いいプロンプトの極意はチーム開発スキルにアリ!~LLMとの対話で広がる個人開発の可能性~

P2Pで作る異世界:fogさんのVRChat個人開発集会発表内容を徹底解説!

UnityプロジェクトをGitで管理して開発効率を爆上げ!バージョン管理で開発の悩みを解決

パチンコで稼ぐってホント?パチプロのひねりさんが語る、稼ぎ方と収支の秘密!

VRChat個人開発集会で聞いた!認証機能を分離してアプリ開発を効率化する方法

最強のWeb開発環境を求めて:GPT Engineerの活用と課題