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

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

最近オンラインミーティングの機会が増えましたが、その際使いたい機能の一つに
オンラインホワイトボードがあるかと思います。
世の中には既に様々なオンラインホワイトボードツールが提供されていますが、
今回はオープンソースのツール 「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にアクセスしてみると
下記のようなトップ画面が表示されます。

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

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

使い方

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

保存は自動で行われ、保存されたボードはトップページの下に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画面が表示されます。

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

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

まとめ

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

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