はじめに
社内ハッカソン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 機能やスタンプ追加など、伸び代はまだまだたくさんありますね!
(機会があれば)これからのバージョンアップにもご期待ください!!!
ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。
興味がある!一緒に働いてみたい!という方は下記よりご応募お待ちしております。
採用情報をみる