nextcloud-logo-white-transparent

1. はじめに

Nextcloudには、Whiteboardアプリがあります。
昔からベクトルデータのお絵かき系のホワイトボードは幾つか種類があります。
現行バージョンで使えるのは以下です。

その他にもありますが、現行メンテナンスバージョン(version 32,31)対象外なので割愛します。

2. Nextcloud Whiteboardの特徴

Nextcloud Whiteboardが最初にリリースされたのは2024年9月で1年ほど前になります。
以下のような特徴があります。

2-1. 特徴（機能面）

  • 無限キャンバス：1つのファイル内で際限なくスケッチや図表を追加可能。多数ユーザーの同時編集にも対応
  • 手書き風の描画体験(Excalidrawベース）：手描きツール/図形(長方形・菱形・円)/テキスト/矢印・線のバインド(オブジェクトに吸着・ラベル付け)/フレームでのグルーピング等
  • メディアと埋め込み：画像のドラッグ&ドロップ、動画やWebオブジェクトの埋め込みに対応
  • ライブラリ：自作の図形・オブジェクトを個人ライブラリに保存、Excalidrawライブラリのアイテムも利用可
  • 書式設定：線色・塗りつぶし・不透明度・太さ・フォント(手書き/通常/コード)・整列などを調整可能
  • エクスポート/共有：ボード全体や個別オブジェクトをJPG/SVGで出力、クリップボードコピーにも対応。Nextcloudの共有UIからパスワードや有効期限を設定して社内外へ共有可能
  • 録画機能：プレゼンテーションの録画や操作録画を行えるので、どういう議論でそうなったか？と言った途中経過も後から見直すことができます。
  • ファイル履歴：Nextcloudのファイルバージョニング機能により途中のファイルは自動的に保存されます。あとから復元することも容易です。

2-2. Nextcloudとの統合

  • Files連携：Filesの「＋」メニューからホワイトボードを新規作成・保存。通常ファイル同様に扱える
  • Talk連携：通話中のチャット添付メニューから即時にホワイトボードを起動・共同編集。プレゼン(レーザーポインタ)やリアルタイム共同作業が可能。テンプレート選択も可

3. 提供形態

  • エンタープライズのUltimateティアに含まれます
    (導入はお問い合わせください)

4. 代表的ユースケース

  • ブレインストーミング、戦略マップ、ワークフローの可視化、授業・研修でのインタラクティブ説明、会議中の共同設計・レビュー等

5. セットアップ方法

セットアップ方法は以下の3段階です。

  1. WebSocketサーバーをDockerコンテナで動かす
  2. NextcloudのnginxにWebSocket接続設定を追加
  3. WhiteboardアプリをNextcloudに導入して、設定

以下のような環境であることを前提とします。

  • NextcloudサーバーとWhiteboard用のWebSocketサーバーは別サーバーで構築(/etc/hostsを調整すれば同一サーバーでも可)
    • Nextcloudサーバーのホスト名：ncloud.example.jp
    • WebSocketサーバーのホスト名：wboard.example.jp
    • 相互にpingができるようにhostsに書いておく
  • OSはどちらも、Ubuntu 24.04 LTS x86_64バージョン(arm64でも動くと思われる)
    • Nextcloudサーバーのサーバーリソース：2vCPU(x86_64)/2GB
    • WebSocketサーバーのサーバーリソース：2vCPU(x86_64)/2GB
  • Nextcloudのバージョン：Nextcloud Hub 25 Autumn (32.0.1)
  • Whiteboardアプリのバージョン：1.4.0
  • Whiteboard用のWebSocketサーバーのコンテナイメージのバージョン：1.4.0
    • WebSocketサーバーのポート番号：3002
    • Dockerのバージョン：28.5.1

■構成図

せっかくなので構成図をWhiteboardで書いてみました。

それでは構築に入りましょう。

5-1. WebSocketサーバーをDockerコンテナで動かす

図の右側のWhiteboardサーバーを動かします。Dockerコンテナで動かすのが楽なので、Dockerをインストールしてください。参考：Ubuntu | Docker Docs

Whiteboard用のDocker Composeファイルを入れる場所を作成します。

mkdir -p ~/src/whiteboard/

docker-compose.yamlファイルを以下の内容で作成します。
JWT_SECRET_KEYの値には、Nextcloud側のアプリと接続時に認証すると為のパスワードを入れます。十分に長い32桁程度の文字列を入れましょう。後ほどNextcloud側のアプリで利用します

services:
  nextcloud-whiteboard-server:
    image: ghcr.io/nextcloud-releases/whiteboard:stable
    ports:
      - "3002:3002"
    environment:
      NEXTCLOUD_URL: https://wboard.example.jp
      JWT_SECRET_KEY: some-strong-password-example
    restart: unless-stopped

docker compose up -dでコンテナを起動します。

docker compose up -d

最初は、-d 無しで起動し、接続できたら -d 付きで起動しなおすのがいいでしょう。
以下のようなログが出力されていれば、正常に起動しています。

5-2. NextcloudのnginxにWebSocket接続設定を追加

次にnginx.confに設定を追加します。
これを設定しない方法もありますが、通信をTLSで暗号化したいのでNextcloudのnginxをProxyにしてWebSocketサーバーを公開し、WebSocketサーバーは外から直接接続できないようにします。

nginx.confを修正して、server { }の中に以下の設定を入れます。

    location /whiteboard/ {
        proxy_pass http://wboard.example.jp:3002/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

修正したら、nginxの設定を確認して、再起動しておきます。

sudo nginx -T
sudo systemctl restart nginx

5-3. WhiteboardアプリをNextcloudに導入して、設定

最後にNextcloudにwhiteboardアプリを導入して、設定画面から設定します。
アプリは、「アプリバンドル」＞「教育向けバンドル」＞「Whiteboard」を選択し、「ダウンロードして有効にする」をクリックします。

有効になったら管理画面に「ホワイトボード」というメニューが追加されます。
WebSocket Server URLにWebSocketサーバーのURLを入力して、共有秘密鍵の部分には「JWT_SECRET_KEYの値」を入れて「設定を保存」をクリックします。

赤のバーが緑のバーに変化すればOKです。

6. 使い方

6-1. ホワイトボードの作成

新しくホワイトボードを作成するには、「新規作成」から「新規ホワイトボード」をクリックしてください。

ファイル名指定ダイアログが出るので、任意のファイル名を入力して、「作成」をクリック

テンプレートを指定して、「作成」をクリック。ここでは、「Flowchart」を選択してみます。

6-2. 図形の編集画面

以下のような画面が出て、編集ができるようになります。
図形を選択すると左側にメニューが出て図形の設定を変更できます。
右下の電波マークはオンライン接続状態を表します。赤になっていたら接続できていません。接続設定を確認してください。

6-3. URL共有して、共同作業で編集

ここまでであれば、単なるお絵かきサーバーでしかないわけですが、Nextcloudを使っているメリットはもう少し別の所にあります。このホワイトボードを共有して、複数人で編集することが可能です。
右上の「…」をクリックして、「サイドバーを開く」をクリックします。

そうするとNextcloudの見慣れた共有サイドバーが開きます。
ここから、内部利用者に共有してもいいですし、外部共有でURLを発行することも可能です。

下記のアニメーションGIFは、左上からEdge、右上がFirefox、左下がChromeで、右下がChromeシークレットで同じホワイトボードを開いています。「新しいホワイトボード名」の共有元はEdgeです。右上のFirefoxはユーザー間共有し、左下のChromeはURL共有で書き込み禁止、右下のChromeはURL共有で書き込み許可にしています。

さらにiPad Airで書き込み許可のURL共有を開いて、Apple Penで書き込んでみました。
時々ちょっと引っかかりますが、それ以外はスムーズに書き込みできました。

7. まとめ

MiroやCanva、Figma、LucidChart、日本だとCacoo等のオンラインホワイトボードが花盛りの時代ですが、Jamboardのようにサービス終了してしまうと使えなくなってしまうリスクがあります。

データをローカルに持っておけるのは、いろんな意味で安心です。
大規模な利用でのテストはできていないのでパフォーマンス的な課題未確認ですが、レスポンスよく動いていたのでオンプレ利用も快適に使えるのではないかと思います。

Tags: ,

Related Articles