Miro風ホワイトボードOSS "ourboard"

ホワイトボード、オンライン共同作業ツールとして有名なWebサービスとしてMiroがあります。
Miroは便利なんですが、自分たちの開発環境に建てられたらなぁと思い似たようなOSSがないかとずっと探していました。
ついに先日ourboardというソフトを見つけてまさに探していたものに近かったので、概要とインストール方法について紹介します。

概要

ourboardはraimohanskaさんのgithubリポジトリで開発され、MITライセンスで公開されています。
デモページも公開されていて、何ができるのかはそちらを見ていただくのがわかりやすいと思います。

できることは大きなホワイボードの上に付箋やテキストを置いたり、エリアを区切ったり、オブジェクト同士を曲線で結んだりです。
他にドラッグアンドドロップで画像や動画をホワイトボード上に置くこともできます。

作成したボードはリンクを共有することで他の人もアクセスできます。
Miroのように他の人のポインタも見えるようになっています。

図形ツールやペンツールのようなものは現段階ではありませんが、オンラインで議論する際には十分な機能がそろっているのではないかと思います。
その他、Google認証と連携させてボードごとにアクセスポリシーを設定させることもできます。ただし、GUIはまだ存在せず、REST APIでの操作が必要となります。

インストール

インストール方法について説明していきます。

環境

• Ubuntu 20.04
• node v15.14.0
• Docker version 20.10.7

注意

• ourboardはnode 15以上を要求してきます。
• CentOS 7でやったらGLIBC 2.18 not foundが出ました

依存ライブラリのインストール

node

こちらの記事 などを参考にnodeを入れていきます。

$ sudo apt install -y nodejs npm
$ sudo npm install n -g
$ sudo n 15.14.0
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l
$ sudo npm install -g yarn

docker, docker-compose

公式の手順に従い、dockerとdocker-composeを入れていきます。

https://docs.docker.com/engine/install/ubuntu/
https://docs.docker.com/compose/install/

$ sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
$ echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io

docker composeのインストール
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose

dockerグループに追加
$ sudo gpasswd -a ${USER} docker 

その後グループの追加を適用させるため、ログインしなおします

ourboardのインストールと起動

リポジトリのクローン
$ git clone https://github.com/raimohanska/ourboard
$ cd ourboard

環境変数の設定
$ export WS_HOST_DEFAULT=[host]:[port] # 接続に使うhostとportを指定
$ export WS_HOST_LOCAL=[host]:[port]   # 接続に使うhostとportを指定
$ export WS_PROTOCOL=ws  # https接続できるならwss
$ yarn install
$ yarn start:dev
1337ポートで起動

これで http://[host]:1337 でourboardにアクセスできるようになります。

yarn start:devで起動するとdocker-composeでPostgreSQLコンテナの立ち上げと、アプリがdevモードで起動します

ビルドしたものでスタートさせるためには、DBを別に起動した後、yarn buildしてyarn startします。
start:devでできたコンテナをそのまま使うことができます。

$ docker ps -a
CONTAINER ID   IMAGE         COMMAND                  CREATED       STATUS                   PORTS                                         NAMES
9ce56927117f   postgres:12   "docker-entrypoint.s…"   4 hours ago   Up 8 minutes             0.0.0.0:13338->5432/tcp, :::13338->5432/tcp   ourboard_db_1

ourboard_db_1 のcontainer idを指定してコンテナをスタート
$ docker start 9ce56927117f
$ yarn build
$ yarn start

これで同様 http://[host]:1337 でアクセスできます。

その他

起動するポートを変える

• 環境変数PORTの指定と、HOSTの指定を変える

$ export PORT=8080
$ export WS_HOST_DEFAULT=[host]:${PORT}
$ export WS_HOST_LOCAL=[host]:${PORT}

google認証と連携する

frontend/.env, backend/.envの両方にGOOGLE_API_KEYとGOOGLE_CLIENT_ID環境変数を設定する必要があります。

下記ページなどを参考にOAuthクライアントIDを作成。クライアントIDをGOOGLE_CLIENT_IDに、クライアントシークレットをGOOGLE_API_KEY に設定します。
https://cloud.google.com/endpoints/docs/frameworks/java/creating-client-ids?hl=ja#web-client