【ハッカソン 2017】コミュニケーションツールチーム

はじめに

社内ハッカソン2017の記事トップバッターは、コミュニケーションツールチームが担当させていただきます！ チームのメンバーは、「もっと社内スタッフ同士のコミュニケーションを円滑に！」という共通意識のもとに結成された６人です！ そもそもこの点に着目することになった背景として、弊社アップフロンティアには以下のような事情があったりします。

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

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

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

外出ホワイトボードとは、弊社の入り口付近にあるホワイトボードです。 使いどころとしては、往訪やランチなどの戻り時間を書いたり、休暇や病欠などを連絡するためのものです。シンプルかつ重要な情報を扱う、とても大切な備品ですね！

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

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

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

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

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

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

具体的な技術情報

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 機能やスタンプ追加など、伸び代はまだまだたくさんありますね！ （機会があれば）これからのバージョンアップにもご期待ください!!!