言葉や文字ではどうしてもうまく説明・理解できなくても、図を描けば一発で伝わる・理解できることはよくあります。そこで今回は、リモートでの打ち合わせ時にも使えるウェブブラウザー上で動くホワイトボードサービスを構築してみましょう。
よみがえったSpacedeck Open
今回紹介するSpacedeck Open は、もともとドイツのSpacedeck社が作っていたオンラインコラボレーションサービスのコードがベースになっています。サービス自体が2018年にビジネスを終了したのに伴い、GitHub上にそのコードが公開されていた もののほぼ放置状態でした。2020年4月になって元の開発者の一人であるLukas F. Hartmannが立ち上げた会社によって開発を再開することになり、ここ1ヶ月ほどで一気にブラッシュアップが進んだのです。
機能自体はかなりシンプルです。「 お絵描きツール」として考えた場合は、足りないものがたくさんあります。あくまで「ちょっとした図を描く」程度のツールだと思っておきましょう。
具体的には次のような機能を備えています。
ホワイトボードとしての基本機能
四角・円・六角形などの基本図形の描画
直線・フリーハンド・矢印の線の描画
図形の拡大・縮小
図形・ストロークの色、ストロークの太さの変更
日本語を含む文字の描画、サイズ・色・フォント・装飾の変更
画像・動画・PDF・動画などのメディアのアップロード
オブジェクトの整列・削除・保護
Alt+ドラッグによるオブジェクトの複製
Ctrl-Zによるアンドゥなどのショートカットキー
アカウント管理機能
ユーザーの追加・削除
メールによる他のユーザーの招待
その他の機能
複数のホワイトボードの作成
グルーピング機能
ゲストアクセス機能
レスポンシブデザイン
また、次の機能は未実装です。
多言語化には対応しているものの日本語は未実装
ホワイトボードのインポート・エクスポート
繰り返しになりますが、再開されたばかりの若いソフトウェアということもあって、機能的にはまだまだ足りてない部分がたくさんあります。「 取り急ぎホワイトボードっぽいサービスが必要になった」「 でも社内的な事情から制約からオンプレミスで運用したい」場合の回避策のひとつ、ぐらいに考えておくと良いでしょう[1] 。
[1] 他の選択肢としてWBO も存在します。こちらもJitsi Meetへの組み込みが提案される など、それなりの品質にはなっているようです。Spacedeckに比べると操作性はWBOに軍配があがる感じだったのですが、WBOは1360x768ぐらいの画面サイズだとツール類が表示しきれずうまく動かないケースがありました。
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": "support@example.org",
"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/」です。
図1 トップページではまず「Sign Up」を押してアカウントを作る
図2 メールアドレス・パスワード・表示名を入力。最後は設定ファイルに記述した「invite_code
」を入力
前述のとおりinvite_code
を知っている人だけがアカウントを作れる仕組みです。
図3 「 Create Space」で新しいホワイトボードを作成
ホワイトボードは「スペース」という単位で管理されます。ユーザーごとに任意のスペースを作成できますし、スペースをグルーピングすることも可能です。
図4 画面左にツールバー
画面左のツールバーからオブジェクトを選択すると、ホワイトボードに描画できます。拡大・縮小・移動も可能です。どちらかというとInkscapeのようなベクター画像を描画するツールだと考えておきましょう。このため「消しゴム」機能はありません。
ちなみに次のようなショートカットキーも利用できます。
Del/Backspace:選択したオブジェクトの削除
Ctrl-Z:アンドゥ
Shit-Ctrl-Z:リドゥ
Ctrl-A:全体を選択
+/-:拡大/縮小
カーソルキー:選択したオブジェクトの移動(Shiftを付けると大きく移動)
スペースキー:選択ツールの有効化
図5 オブジェクトプロパティは画面右から操作
オブジェクトを選択するとそのオブジェクトのプロパティを編集するツールバーが画面右に表示されます。ここからパスや塗りつぶしの色を指定したり、フォントのサイズや装飾を変更できます。
「More」からはオブジェクトの削除やロックなども指定可能です。
図6 オブジェクトの位置関係を指定するLayout
Layoutはオブジェクト同士の位置関係を設定します。ラベルが付いていないので若干わかりにくいのですが、左上から順番に次のような機能を持っています。
選択したオブジェクトを前面に移動
選択したオブジェクトを背面に移動
左揃え
右揃え
上揃え
下揃え
水平方向の中央揃え
垂直方向の中央揃え
水平方向のオブジェクトの中央線が等間隔になるよう配置
垂直方向のオブジェクトの中央線が等間隔になるよう配置
水平方向にオブジェクトの間隔が同じになるよう配置
垂直方向のオブジェクトの間隔が同じになるよう配置
選択したオブジェクトの自動整列
図7 文字列オブジェクト特有のAlign
文字列オブジェクトのみはAlignというメニューが別途用意されています。
これは文字列オブジェクトに対して、テキストラベルをどう配置するかを設定します。たとえば一番左のアイコンだと、テキストラベルをオブジェクトに対して左寄せで表示しますし、一番右のアイコンなら下寄せで表示します。これらふたつを組み合わせれば文字列オブジェクトに対して左下に寄せることが可能です。
図8 ホワイトボードの共有
左のツールバーから「Share」を選択すると、ホワイトボードを共有するためのオプションが表示されます。共有方法は次の2種類です。
URLを連絡(アカウントなしでもアクセス可能)
メンバーとして招待(アカウントが必要)
図9 メディアファイルのアップロード
Mediaを選択すると任意のファイルをアップロードできます。ただし、ホワイトボードとしてサポートしているかどうかはホスト(やコンテナ)にインストールされているソフトウェア次第です。
アップロードしたメディアはそのままデータとしてサーバーに保存されます。画像であればホワイトボード上に表示されますし、動画であればブラウザーがサポートしていれば再生も可能です。PDFなら表紙がオブジェクトとして表示され、クリックするとそのファイルに移動します。
図10 スペース一覧の画面
ツールバーの一番上をクリックするとスペース一覧画面に戻ります。スペース一覧画面からはスペースの名前の変更や削除が可能です。
図11 モバイルブラウザーからのアクセス
レスポンシブデザインに対応しているのでモバイルブラウザーからでもアクセスはできます。ただし、あまり使い勝手はよくありませんでした。他の人が説明する際のビューワー程度に考えておきましょう。
今どきのリモートミーティングツールなら画面共有の代替として、ホワイトボード機能を兼ね備えていることが一般的です。しかしながらJitsi Meetなどホワイトボードを持っていないツールを使う際には、一般的なサービスとは別に自分で構築することも考えてみてはいかがでしょうか。