OSSのオンラインホワイトボードツールをサクッと試してみた -

OSSのオンラインホワイトボードツールをサクッと試してみた

2021.05.28

こんにちは。イノベーション本部の野村です。

最近オンラインミーティングの機会が増えましたが、その際使いたい機能の一つに
オンラインホワイトボードがあるかと思います。
世の中には既に様々なオンラインホワイトボードツールが提供されていますが、
今回はオープンソースのツール「whitebophir 」を試してみたのでご紹介したいと思います。

環境&前提

※ローカルPCにDockerとHeroku CLIがインストールされていることを前提とします

Windows10
Docker 20.10.5
Heroku CLI 7.47.11

ローカル環境の構築&起動

まずはローカルPCで試してみます。
Dockerイメージが提供されているので簡単に立ち上げることができるようになっています。
（もちろんgithubからリポジトリをcloneしてビルドすることも可能です）

$ cd 適当なディレクトリ
$ mkdir wbo-boards
$ chown -R 1000:1000 wbo-boards
$ docker run -it --publish 5001:8080 --volume "$(pwd)/wbo-boards:/opt/app/server-data" lovasoa/wbo:latest

イメージがpullされた後にコンテナが起動しサーバーが立ち上がるのでブラウザでlocalhost:5001にアクセスしてみると
下記のようなトップ画面が表示されます。

blog20210507_img01

基本的に名前で管理しているようなので、一番下の「ボードの名前」のテキストボックスに
例えば"sample01"と入力してGoボタンを押すと、左側のアイコンと共に真っ白なボードが表示されます。

blog20210507_img02

先ほど入力した名前でURLが管理されていて(ドメイン名/boards/sample01)、
URLを知っている人どうしでボードの共有ができるようになります。

使い方

他のホワイトボードツールとだいたい同じような機能が揃っていて直感的に使えますが、
一部の機能は同じアイコンをクリックすることで機能を切り替えるようになっています。

blog20210507_gif01

アイコン	機能	ショートカット
ペン / 修正液	書く / 消す	P
直線固定 / フリー	16段階の角度で直線を引く / フリーに直線を引く	L
矩形 / 正方形	矩形を書く / 正方形を書く	R
楕円 / サークル	楕円を書く / 円を書く	C
テキスト	テキストを入力する	T
消去	書いたオブジェクトを消去する	E
グリッド	背景のグリッド表示　なし / 格子 / ドット	G
拡大・縮小	クリックで拡大、シフトを押しながらクリックで縮小	Z
色	オブジェクトの色を選択	0~9
サイズ	オブジェクトのサイズを選択	–
透明度	オブジェクトの透明度を選択	–

保存は自動で行われ、保存されたボードはトップページの下にRecent Boardsとして表示されるので、
次回からはそのリンクからボードを開いて編集を再開することができます。

ちなみにホワイトボードの内容は最初に作成した"wbo-boards"というフォルダにJsonファイルとして保存されます。

Webへデプロイ

次にWeb上にデプロイして試してみます。
今回はサクッと試してみたかったのでHerokuへデプロイしました。
（実利用にはストレージの永続化等が必要です）

まず、Heroku CLIを利用してHerokuにloginします。（アカウントがない場合は事前に作成しておきます）

$ heroku login

次に、HerokuのContainer Registryにloginします。

$ heroku container:login

Herokuにアプリを作成します。

$ heroku create <app>（アプリ名）

HerokuのContainer RegistryにwhitebophirのDockerイメージをpushします。

$ docker tag <image> registry.heroku.com/<app>/web
$ docker push registry.heroku.com/<app>/web

イメージをリリースします。

$ heroku container:release web -a <app>

HerokuでURLを確認しブラウザで開くとwhitebophirのTop画面が表示されます。

blog20210507_img03

ブラウザを２つ立ち上げて確認してみます。

blog20210507_gif02

左側のボードに書き込んでいますが、
ほぼタイムラグもなく右側のボードに編集内容が共有されていることが確認できました。

まとめ

以上簡単ですが、今回はオープンソースのオンラインホワイトボードツール「whitebophir」を試してみました。
オープンソースのツールなので、いろいろ手を加えたり、自前のサーバーを用意したりと
自由度はかなり高いと思います。

数あるオンラインホワイトボードツールの選択肢の一つとして、いかがでしょうか？

TOPに戻る

ENGINEER BLOG