はじめに

社内ハッカソン2017の記事トップバッターは、コミュニケーションツールチームが担当させていただきます!

チームのメンバーは、「もっと社内スタッフ同士のコミュニケーションを円滑に!」という共通意識のもとに結成された6人です!

そもそもこの点に着目することになった背景として、弊社アップフロンティアには以下のような事情があったりします。

  • アップフロンティアは東京と仙台にオフィスがあり、リモートでのやり取りが必須
  • システム開発部のマネージャーが忙くてなかなか捕まらないので、所在や状況の補足を簡易化したい

これらを解決するため、我々は 外出ホワイトボードのオンライン化 に着手することにしました!

外出ホワイトボードってなに?

外出ホワイトボードとは、弊社の入り口付近にあるホワイトボードです。

使いどころとしては、往訪やランチなどの戻り時間を書いたり、休暇や病欠などを連絡するためのものです。シンプルかつ重要な情報を扱う、とても大切な備品ですね!

一見完璧に見えるこのシステムですが、このホワイトボードには以下のような欠点があります。

  • そもそも休んだら、休んだことを書けない
  • 仙台には伝わらない
  • 仙台メンバーの外出が分からない
  • 書き忘れて外出してしまう

これらの欠点を補うため、今回はこのホワイトボードのオンライン化に着手しました!

オンライン化ってどうなるの?

具体的には、こんなものを作ります

  • ブラウザで確認できる
  • 書き込みを共有できる
  • 定型文やスタンプもある
  • リアルタイムで更新される
  • 身もふたもない言い方をすると「オンラインのペイントアプリ」

具体的な技術情報

6人で話し合った結果、手軽に使えることを考慮して Web 上で実現することになりました。
実装した機能は以下の通りです。

  • ペイント機能
  • スタンプ機能
  • オンライン共有機能

ペイント機能とスタンプ機能は、 HTML5 の canvas を使用して実装し、オンライン共有機能は WebSocket を使用しています。
WebSocket の実装には、socket.io を使用しています。
socket.io を使用するため開発環境は Node.js v7.8.0 です。

ペイント機能

ペイントは、 onload で canvas のインスタンスから、 context インスタンスを取得し、 canvas の mousedown, mousemove, mouseup イベントでパスの操作をしています。

var ctx = canvas.getContext('2d');
canvas.addEventListener('mousedown', function(e){
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
})
canvas.addEventListener('mousemove', function(e){
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
})
canvas.addEventListener('mouseup', function(e){
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.closePath();
})

スタンプ機能

スタンプは、貼り付ける画像を選択後に canvas の mousedown イベントで画像を canvas に貼り付けています。

ctx.drawImage(imagePath);

オンライン共有機能

オンライン共有は、前述した通り socket.io を使用しています。
Socket サーバは、クライアントから送られてきたデータを他のクライアントにそのまま emit するだけになっています。
クライアントは、 Socket サーバから送られてきたデータから canvas の context にイベントに応じた操作を行います。
WebSocket を通じてやりとりされるデータは、以下の様になっており act プロパティでイベントの種類を特定しています。

{
    act: "down",
    x: e.offsetX,
    y: e.offsetY,
    color: ctx.strokeStyle,
    image_name: stampImage
}

完成!

出来上がりは、このようになっています! 複数のブラウザで、見事に情報が共有できましたね!

まとめ

我がチームのオンラインホワイトボード、いかがでしたでしょうか?今回は外出のホワイトボードを題材にしましたが、会議中に東京と仙台で共有すれば、普通のホワイトボードとしても普通に使えると思います。

実質半日程度しか作業時間がなかったため、機能的にはミニマムになっていますが、 UNDO 機能やスタンプ追加など、伸び代はまだまだたくさんありますね!

(機会があれば)これからのバージョンアップにもご期待ください!!!