こんにちは。

個人開発でWebアプリなどを作っているものです。

この度、開発中のリアルタイムに書き込み中のメッセージが表示される掲示板「NEAR」にお絵かき機能を追加しました。

NEARはこちら

今回は、お絵かき機能（ホワイトボード機能）を追加した理由と開発の舞台裏を、ソースコードとともにご紹介します。リアルタイム掲示板の「NEAR」に、ただ文字を書き込むだけでなく、思いついたアイデアをササッとイラストで共有できる――そんなワクワクする機能をつけたい！という思いから、このお絵かき機能を開発しました。

なぜお絵かき機能を追加しようと思ったのか

テキストベースのコミュニケーションは便利ですが、時に図やイラストを使った方が手っ取り早いときがあります。たとえば「細かいニュアンスをパッと絵で伝えたい！」とか、「ゆるキャラのラフをスケッチして見せたい！」なんて場面です。

そんなときに、いちいち外部ツールで絵を描いてアップロードするのは面倒。そこで、掲示板自体にホワイトボードを用意してしまおう！というわけです。

実装の流れ

1. Canvasエレメントの配置

まずはHTMLに canvas タグを用意して、JavaScriptで描画できるようにします。

2. リアルタイムで送信

描画中にもイベントが走るたびにホワイトボードの内容（Base64形式の画像データ）をサーバーに送信し、他のユーザーがどんな絵を描いているのかをリアルタイムに見られるようにしました。（負荷がすごそうｗ）

3. ホワイトボードの表示/非表示の切り替え

通常のテキスト・チャットと同時に使うために、ボタン一つでホワイトボードを表示/非表示にできるようにし、使い勝手の良いUIを目指しました。

ソースコードの一部

以下に、ホワイトボードをセットアップする箇所のコードを少しだけご紹介します。

index.htmlの一部 (.js

function setupWhiteboard() {
  const categoryCanvas = document.getElementById('categoryWhiteboardCanvas');
  const threadCanvas = document.getElementById('threadWhiteboardCanvas');
  const categoryControls = document.getElementById('categoryWhiteboardControls');
  const threadControls = document.getElementById('threadWhiteboardControls');
  const categoryButton = document.getElementById('categoryWhiteboardButton');
  const threadButton = document.getElementById('threadWhiteboardButton');
  const categoryMessageInput = document.getElementById('messageInput');
  const threadMessageInput = document.getElementById('threadMessageInput');

  // 要素が存在しない場合は早期リターン（エラーを防ぐため）
  if (!categoryCanvas || !threadCanvas || !categoryControls || !threadControls ||
      !categoryButton || !threadButton || !categoryMessageInput || !threadMessageInput) {
    console.error('Some whiteboard elements are missing');
    return;
  }

  // 初期状態で非表示に
  categoryCanvas.style.display = 'none';
  threadCanvas.style.display = 'none';
  categoryControls.style.display = 'none';
  threadControls.style.display = 'none';

  // カテゴリビューとスレッドビューのホワイトボードを初期化
  setupWhiteboardInstance('category');
  setupWhiteboardInstance('thread');

  // カラーピッカーとブラシサイズの変更イベントをセット
  const categoryColorPicker = document.getElementById('categoryColorPicker');
  if (categoryColorPicker) {
    categoryColorPicker.addEventListener('change', (e) => {
      const ctx = categoryCanvas.getContext('2d');
      ctx.strokeStyle = e.target.value;
    });
  }
  // ... (残りも同様にthreadCanvasに対して設定)
}

この関数が「ホワイトボードをセットアップする」作業の中心部分です。使用するHTML要素が正しく存在するかどうかをチェックしたうえで、初期状態を非表示にし、色やブラシサイズを管理するためのイベントリスナーをセットアップしています。

実際の使い心地

ホワイトボードボタンを押すと、テキスト入力欄の上にキャンバスが表示され、マウスでお絵かきが可能になります。突然思いついたアイデアをサラッと描いて共有するのはもちろん、ちょっとした図やマインドマップをかんたんに共有できるのが便利かな？
スレッド内での話題に、「この部分ってどういうこと？」なんて話になると、ぱっと図解して見せられます！

まとめ

リアルタイム掲示板にお絵かき機能を足すだけで、コミュニケーションの幅が一気に広がります。テキストオンリーではカバーしきれない情報を共有したり、リアルタイムで相手に表示されるので、どんな絵ができるかな？という楽しみ方など、自由に使ってください。

ちなみに開発中によく出たエラーは要素が未定義のまま呼ばれることが多かったことです。

今後はスタンプ機能や、描画のアニメーション再生機能なども追加して、もっと楽しく気軽に使えるサービスにしていきたいと思っています！

それでは＾＾