第622回　Spacedeckでホワイトボードを共有する

言葉や文字ではどうしてもうまく説明・理解できなくても、図を描けば一発で伝わる・理解できることはよくあります。そこで今回は、リモートでの打ち合わせ時にも使えるウェブブラウザー上で動くホワイトボードサービスを構築してみましょう。

よみがえったSpacedeck Open

今回紹介するSpacedeck Openは、もともとドイツのSpacedeck社が作っていたオンラインコラボレーションサービスのコードがベースになっています。サービス自体が2018年にビジネスを終了したのに伴い、GitHub上にそのコードが公開されていたもののほぼ放置状態でした。2020年4月になって元の開発者の一人であるLukas F. Hartmannが立ち上げた会社によって開発を再開することになり、ここ1ヶ月ほどで一気にブラッシュアップが進んだのです。

機能自体はかなりシンプルです。「⁠お絵描きツール」として考えた場合は、足りないものがたくさんあります。あくまで「ちょっとした図を描く」程度のツールだと思っておきましょう。

具体的には次のような機能を備えています。

ホワイトボードとしての基本機能

四角・円・六角形などの基本図形の描画
直線・フリーハンド・矢印の線の描画
図形の拡大・縮小
図形・ストロークの色、ストロークの太さの変更
日本語を含む文字の描画、サイズ・色・フォント・装飾の変更
画像・動画・PDF・動画などのメディアのアップロード
オブジェクトの整列・削除・保護
Alt+ドラッグによるオブジェクトの複製
Ctrl-Zによるアンドゥなどのショートカットキー

アカウント管理機能

ユーザーの追加・削除
メールによる他のユーザーの招待

その他の機能

複数のホワイトボードの作成
グルーピング機能
ゲストアクセス機能
レスポンシブデザイン

また、次の機能は未実装です。

多言語化には対応しているものの日本語は未実装
ホワイトボードのインポート・エクスポート

繰り返しになりますが、再開されたばかりの若いソフトウェアということもあって、機能的にはまだまだ足りてない部分がたくさんあります。「⁠取り急ぎホワイトボードっぽいサービスが必要になった」「⁠でも社内的な事情から制約からオンプレミスで運用したい」場合の回避策のひとつ、ぐらいに考えておくと良いでしょう[1]⁠。

DockerでSpacedeckを試す

Spacedeck自体はNode.js製のソフトウェアです。しかしながらnpm用にパッケージが公開されているわけでも、Ubuntu/Debianリポジトリにパッケージが用意されているわけでもないため、ソースコードをダウンロードするところから始めなくてはなりません。また、描画のためにGraphicsmagickが必要です。さらに動画やPDFをホワイトボードに添付するならffmpegやghostscriptも必要になります。

幸いなことにDockerfileとdocker-compose.ymlファイルは用意されているので、それを使うことにしましょう。ちなみにDockerHubにSpacedeckのコンテナイメージが存在しますが、これはだいぶ古いものですので使用しないほうが良いでしょう。

まずはDockerをインストールするところから始めます。今回はUbuntu 20.04 LTS上で動かすことを想定し、DockerはUbuntuのリポジトリにある19.03.8をインストールします。ちなみにもしLXD上でDockerを動かすなら、あらかじめ次のように設定しておいてください。

$ lxc config set spacedeck security.nesting true
$ lxc config set spacedeck security.privileged yes
$ lxc restart spacedeck

Dockerと一緒にdocker-composeもインストールしておきましょう。

$ sudo apt install docker.io docker-compose git

次にソースコードをダウンロードします。

$ git clone https://github.com/spacedeck/spacedeck-open.git
$ cd spacedeck-open

残念なことに開発再開以降、いまだ正式リリースは行われていません。タグも開発再開前に打たれたものがひとつだけです。今回はデフォルトブランチにもなっているmntブランチの最新版をそのまま使うことにします。

基本的な設定はconfig/default.jsonで行います。

{
  "team_name": "My Open Spacedeck",
  "contact_email": "[email protected]",

  "endpoint": "http://localhost:9666",
  "invite_code": "top-sekrit",

  "storage_region": "eu-central-1",

  "storage_bucket": "my_spacedeck_bucket",
  "storage_cdn": "/storage",
  "storage_local_path": "./storage",
  "storage_local_db": "./database.sqlite",

  "redis_mock": true,
  "mongodb_host": "localhost",
  "redis_host": "localhost",

  "google_access" : "",
  "google_secret" : "",
  "admin_pass": "very_secret_admin_password",
  "phantom_api_secret": "very_secret_phantom_password",

  "mail_provider": "smtp",
  "mail_smtp_host": "your.smtp.host",
  "mail_smtp_port": 465,
  "mail_smtp_secure": true,
  "mail_smtp_require_tls": true,
  "mail_smtp_user": "your.smtp.user",
  "mail_smtp_pass": "your.secret.smtp.password"
}

このうち最低限変更が必要なのは、mail_providerだけです。

ストレージ関連の設定はAWS S3へのアクセスが必要そうに見えますが、storage_local_pathを指定している場合はそのローカルディレクトリをmock-aws-s3によってS3っぽく使います。よってお試しならこのままでも問題ありません。ちなみにこのディレクトリは、ホワイトボードにアップロードしたメディアファイルの保管に使われます。

描画データそのものはstorage_local_dbに保存されます。名前のとおりSQLite3形式のデータベースファイルです。

google_accessやadmin_passは過去の遺物であり現時点では使われていません。実際にシークレット情報となるのはSMTPの他にはinvite_codeだけです。これはアカウントを作る際に、アカウント作成権限があるかどうかを判断するために使われます。インターネットに公開するサイトにする予定であれば、この設定は変更しておきましょう。

mail_providerはホワイトボードへのメール経由の招待、各ユーザーへの通知、パスワードを忘れた時の対応などメールが必要な処理で使われます。本格的に運用するなら適切なSMTPサーバーを設定しておきましょう。ちなみにmail_providerに「console」と入力しておけば、メールを送る代わりにログに送るはずだった情報を記録してくれます。テスト目的であれば、とりあえずconsoleを入れておくのも良いでしょう。

もうひとつ変更が必要なのは、docker-compose.ymlファイルです。

version: "2.0"

services:
  spacedeck:
    build: .
    container_name: spacedeck
    ports:
      - "9666:9666"
    volumes:
      - /absolute/path/to/storage:/app/storage
      - /absolute/path/to/database.sqlite:/app/database.sqlite

こちらも変更が必要なのはvolumesフィールドの部分のみです。ここには先程のconfig/default.jsonのstorage_local_pathとstorage_local_dbの絶対パスを入力します。ただし初回起動時はデータベースを作る必要があるため、まずはvolumesを空にして起動しなくてはなりません。そうしないと、Docker Volumeの都合で空のディレクトリが作られてしまいます。

というわけで、まずは次のように記述しておいてください。

version: "2.0"

services:
  spacedeck:
    build: .
    container_name: spacedeck
    ports:
      - "9666:9666"
    #volumes:
    #  - /absolute/path/to/storage:/app/storage
    #  - /absolute/path/to/database.sqlite:/app/database.sqlite

この状態で一度サービスを起動してみましょう。

$ mkdir storage
$ sudo docker-compose -f docker-compose.yml up -d --build
$ sudo docker cp spacedeck:/app/database.sqlite .
$ sudo docker-compose -f docker-compose.yml stop

初回実行時はDockerイメージを構築するところから始まるため、それなりに時間はかかるはずです。これでデータベースファイルが作成されました。

$ file database.sqlite
database.sqlite: SQLite 3.x database, last written using SQLite version 3031001

ちなみにイメージには諸々インストールされるため、それなりのサイズになります。

$ docker images
REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE
spacedeck-open_spacedeck   latest              ceaec4245b4e        24 hours ago        1.17GB
node                       10-alpine3.11       6bf4087f2679        4 days ago          83.8MB

今度はデータベースファイルもローカルのファイルを使うよう設定を変更します。

version: "2.0"

services:
  spacedeck:
    build: .
    container_name: spacedeck
    ports:
      - "9666:9666"
    volumes:
      - （storageディレクトリへのパス）:/app/storage
      - （database.sqliteへのパス）:/app/database.sqlite

最後に再びコンテナを起動しましょう。

$ sudo docker-compose -f docker-compose.yml up -d

これで準備ができました。

初回アクセスとスペースの作成と基本的な使い方

docker-compose.ymlにあるようにコンテナが動いているマシンの9666番ポートにウェブブラウザーからアクセスしてください。ローカルで動かしているのなら「http://localhost:9666/」です。

前述のとおりinvite_codeを知っている人だけがアカウントを作れる仕組みです。

ホワイトボードは「スペース」という単位で管理されます。ユーザーごとに任意のスペースを作成できますし、スペースをグルーピングすることも可能です。

画面左のツールバーからオブジェクトを選択すると、ホワイトボードに描画できます。拡大・縮小・移動も可能です。どちらかというとInkscapeのようなベクター画像を描画するツールだと考えておきましょう。このため「消しゴム」機能はありません。

ちなみに次のようなショートカットキーも利用できます。

Del/Backspace：選択したオブジェクトの削除
Ctrl-Z：アンドゥ
Shit-Ctrl-Z：リドゥ
Ctrl-A：全体を選択
+/-：拡大/縮小
カーソルキー：選択したオブジェクトの移動（Shiftを付けると大きく移動）
スペースキー：選択ツールの有効化

オブジェクトを選択するとそのオブジェクトのプロパティを編集するツールバーが画面右に表示されます。ここからパスや塗りつぶしの色を指定したり、フォントのサイズや装飾を変更できます。

「More」からはオブジェクトの削除やロックなども指定可能です。

Layoutはオブジェクト同士の位置関係を設定します。ラベルが付いていないので若干わかりにくいのですが、左上から順番に次のような機能を持っています。

選択したオブジェクトを前面に移動
選択したオブジェクトを背面に移動
左揃え
右揃え
上揃え
下揃え
水平方向の中央揃え
垂直方向の中央揃え
水平方向のオブジェクトの中央線が等間隔になるよう配置
垂直方向のオブジェクトの中央線が等間隔になるよう配置
水平方向にオブジェクトの間隔が同じになるよう配置
垂直方向のオブジェクトの間隔が同じになるよう配置
選択したオブジェクトの自動整列

文字列オブジェクトのみはAlignというメニューが別途用意されています。

これは文字列オブジェクトに対して、テキストラベルをどう配置するかを設定します。たとえば一番左のアイコンだと、テキストラベルをオブジェクトに対して左寄せで表示しますし、一番右のアイコンなら下寄せで表示します。これらふたつを組み合わせれば文字列オブジェクトに対して左下に寄せることが可能です。

左のツールバーから「Share」を選択すると、ホワイトボードを共有するためのオプションが表示されます。共有方法は次の2種類です。

URLを連絡（アカウントなしでもアクセス可能）
メンバーとして招待（アカウントが必要）

Mediaを選択すると任意のファイルをアップロードできます。ただし、ホワイトボードとしてサポートしているかどうかはホスト（やコンテナ）にインストールされているソフトウェア次第です。

アップロードしたメディアはそのままデータとしてサーバーに保存されます。画像であればホワイトボード上に表示されますし、動画であればブラウザーがサポートしていれば再生も可能です。PDFなら表紙がオブジェクトとして表示され、クリックするとそのファイルに移動します。

ツールバーの一番上をクリックするとスペース一覧画面に戻ります。スペース一覧画面からはスペースの名前の変更や削除が可能です。

レスポンシブデザインに対応しているのでモバイルブラウザーからでもアクセスはできます。ただし、あまり使い勝手はよくありませんでした。他の人が説明する際のビューワー程度に考えておきましょう。

今どきのリモートミーティングツールなら画面共有の代替として、ホワイトボード機能を兼ね備えていることが一般的です。しかしながらJitsi Meetなどホワイトボードを持っていないツールを使う際には、一般的なサービスとは別に自分で構築することも考えてみてはいかがでしょうか。