第828回　デザインコラボレーションツールであるPenpotをUbuntuにインストールする

この国において一定の世代以上の特定の趣味を持つか業界に所属していた経験のある人は、高い割合で息をするようにHTML/CSSを書けるという噂があります。HTMLの登場から30年以上が経過し、今では現代的な生活にはなくてはならない存在になりました。その結果HML/CSSを書ける人、さらにはHTML/CSS等を用いてUI/UXを作り込み、バックエンドとの連携を行える人は、これまで以上に重要な人材と言えるでしょう。

そのような人材に活躍してもらう上で、避けては通れない壁が「デザイナーと開発者の殴り合い」です[1]。今回は、デザイナーと開発者により効率よく殴り合ってもらうコラボレーションツールである「Penpot」を紹介しましょう。より直接的な表現をすると、PenpotはFigma/Adobe XD/Sketch等のFLOSS（Free/Libre Open Source Software）版です。

ウェブベースのデザインコラボレーションツール「Penpot」

Penpotは「オープンソース」で「ウェブベース」のデザインコラボレーションツールです。デザイナーや開発者は、ウェブブラウザーからPenpotにログインし、共同で編集しながらウェブやアプリケーションのデザイン、画面遷移に関わるワイヤーフレームワークの作成、コメントの追加ができます。またそのデザイン結果はHTMLやCSSとして表示されるので、コーディングする側もそれをコピー＆ペーストするだけでデザイナーが期待されるレイアウトを再現できるのです。

似たようなツールはすでにプロプライエタリなサービスとしてたくさん存在します。その先鞭をつけたのは2010年ごろに登場したSketchでしょう。こちらはMac専用のアプリケーションでしたが、よりマルチプラットフォームに対応したものとして2016年前後に相次いでに登場したFigmaやAdobe XDが広く使われるようになります。それに対してPenpotが公に登場するのは2021年ごろと少し後発の存在です。

ちなみに2022年にはAdobeによるFigmaの買収がアナウンスされ、次の年にはAdobe XDの販売が終了しました。結果的にAdobeはFigmaの買収を断念することになりますが、この話の流れでよりオープンなPenpotが注目されるようになったのです。そして2023年1月にはベータ扱いから脱出し、2024年の4月には2.0へとメジャーアップグレードされるなど、Penpotは順調な進化を遂げています。

Penpotの販売モデルは、いわゆるオープンソースなウェブサービスとほぼ同じです。セルフホストすれば無償で利用できます。またPenpotが提供するSaaSもほとんど制約のないFreeプランが存在し、PremiumやEnterpriseでサポートサービスやエンタープライズ向けの機能を提供しているようです。ユーザー単位の料金ではない点が最近ではあまり見ない形でしょうか。いずれにせよ少し試したいだけであれば、SaaSでFreeプランを使うことをおすすめします[2]。

さて今回はセルフホストでPenpotを使う方法を紹介します。セルフホストするメリットとしては、データを自分がコントロールできる範囲内でとどめて置けること、挙動やログを管理できること、手持ちの高速なマシンを活用できること、Penpotの開発に積極的に参加できることぐらいでしょう。

必要なものはUbuntuとDocker Composeだけ

PenpotはDocker Composeを用いたデプロイ方法を推奨しています。特にパブリッククラウド上にDockerインスタンスを立ち上げるシステムであるElestioの利用を推奨しているようですが、今回は普通にDockerを使ってインストールします。ちなみに手作業でインストールすることももちろん可能です。ただし、Penpotの構成図を見てもらうとわかるとおりそれなりに手間がかかりそうな構成ではあります[3]。

よって必要なものは次の通りです。

そこそこの性能をもったPC：4コア4スレッドのCPUと8GiBのメモリを備えた5-6世代前のIntel PCでもそれなりに動く
Ubuntu：今回はUbuntu 24.04 LTSのサーバー版を使用する。もちろんDockerが動けばUbuntuである必要はない
Docker：Debianパッケージ版のdocker.ioパッケージでも大丈夫
HTTPS接続：HTTP接続でも動くことは動くが、HTTPS接続でないとクリップボードへのコピーなどが動作しない

やっかいなのは「HTTPS接続」が必要な点でしょうか。ローカルで運用しようとなると、Let's Encryptの利用には手間がかかりますし、自己署名証明書を作って管理するのとどちらが面倒かは悩むところです。リバースプロキシーを使ってHTTPS化されたマシンを経由すれば問題ないので、もし対外的にHTTPSを提供しているプロキシーがあるのであればそこから経由するのはひとつの手です。

さっそくインストールしていきましょう。Docker環境は好みの方法で用意してください。ここではUbuntu 24.04 LTSのLXDインスタンスの上に、Dockerパッケージをインストールすることにします。

$ lxc launch ubuntu:24.04 penpot
$ lxc exec penpot -- apt -U -y full-upgrade
$ lxc config set penpot security.nesting true
$ lxc restart penpot
$ lxc exec penpot -- apt install -y docker.io docker-compose-v2
$ lxc exec penpot -- adduser ubuntu docker
# sudo -i -u ubuntu
$ lxc shell penpot

Debian版のdocker.ioの場合、「⁠docker compose」（⁠composeサブコマンド）は別パッケージになっています。よって「docker compose」コマンドを使いたければ、docker-compose-v2パッケージもインストールしておいてください。またLXD内部のubuntuユーザーがsudoなしにdockerコマンドを使えるように、dockerグループに追加しています。

ここから先はLXDインスタンスの中での作業になります。もちろん普通のUbuntuでも手順は同じです。

まずはdocker-compose.yamlファイルをPenpotのリポジトリダウンロードします。

$ curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

本来はここで「docker compose」を実行したいところです。しかしながらHTTP接続だとアカウントの作成できない問題が存在するため、docker-compose.yamlを次のように調整します。

修正前：
- PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification enable-smtp enable-prepl-server
修正後：
- PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification enable-smtp enable-prepl-server disable-secure-session-cookies

抜粋だと少しわかりにくいかもしれません。「⁠penpot-backend」の「environment」にある「PENPOT_FLAGS」の末尾に「disable-secure-session-cookies」を追加しています。

最低限必要な設定は終わったのであとはサービスを起動するだけです。

$ docker compose -p penpot -f docker-compose.yaml up -d
[+] Running 54/54
（中略）
[+] Running 6/9
 ⠴ Network penpot_penpot                Created
 ⠼ Volume "penpot_penpot_postgres_v15"  Created
 ⠼ Volume "penpot_penpot_assets"        Created
 ✔ Container penpot-penpot-mailcatch-1  Started
 ✔ Container penpot-penpot-exporter-1   Started
 ✔ Container penpot-penpot-postgres-1   Started
 ✔ Container penpot-penpot-redis-1      Started
 ✔ Container penpot-penpot-backend-1    Started
 ✔ Container penpot-penpot-frontend-1   Started

6個のコンテナーが起動しています。このうち「penpot-frontend」に該当するものが「9001番ポート」で待ち受けています。

ubuntu@penpot:~$ docker compose -p penpot ps
NAME                        IMAGE                       COMMAND                  SERVICE            CREATED          STATUS          PORTS
penpot-penpot-backend-1     penpotapp/backend:latest    "/bin/bash run.sh"       penpot-backend     50 seconds ago   Up 49 seconds
penpot-penpot-exporter-1    penpotapp/exporter:latest   "node app.js"            penpot-exporter    50 seconds ago   Up 49 seconds
penpot-penpot-frontend-1    penpotapp/frontend:latest   "/bin/bash /entrypoi…"   penpot-frontend    50 seconds ago   Up 49 seconds   0.0.0.0:9001->80/tcp, :::9001->80/tcp
penpot-penpot-mailcatch-1   sj26/mailcatcher:latest     "mailcatcher --foreg…"   penpot-mailcatch   50 seconds ago   Up 50 seconds   1025/tcp, 0.0.0.0:1080->1080/tcp, :::1080->1080/tcp
penpot-penpot-postgres-1    postgres:15                 "docker-entrypoint.s…"   penpot-postgres    50 seconds ago   Up 50 seconds   5432/tcp
penpot-penpot-redis-1       redis:7                     "docker-entrypoint.s…"   penpot-redis       50 seconds ago   Up 49 seconds   6379/tcp

それでは実際に「http://LXDインスタンスのIPアドレス:9001」にアクセスしてみましょう。

Penpotの初期設定

Penpotはマルチユーザーに対応したソフトウェアですので、最初にアカウントを作成します。ログイン画面が表示されたら右下の「Create an account」を選択しましょう。

Penpotのユーザー名にはメールアドレス形式で入力してください。本来はこのメールアドレスの妥当性を検証します。しかしながら、先ほど変更したdocker-compose.yamlのPENPOT_FLAGSには「disable-email-verification」オプションが設定されています。つまりアカウントは作れるものの、メールアドレスの検証は無効化されている状態です。

よって適当なメールアドレスを入力してアカウントを作成しても問題ありません。

このあと「Check your email」の画面が表示されるかもしれません。PENPOT_FLAGSに「disable-email-verification」オプションが設定されていれば、「⁠penpot」のロゴボタンを押すだけでログイン済みのトップ画面に遷移するはずです。

ちなみに「disable-registration」を設定すれば、アカウントの登録自体も無効化できます。個人で使うなら完全に無効化してしまうのもひとつの手でしょう。アカウント作成UIを無効化した場合でも、次のようなコマンドでアカウントを作成可能です。

$ docker exec -ti penpot-penpot-backend-1 python3 manage.py create-profile
Email: [email protected]
Fullname: Mitsuya Shibata
Password:
Created: [email protected] / 26bc6714-31fb-80b8-8004-e5999936a518

Penpotではページ単位でデザインを記述し、複数のページがまとまったデザインファイルで管理します。さらに複数のデザインファイルをまとめたものを「Project」と呼びます。「⁠Projects」には管理している「Project」や「Draft（Projectには所属しないデザインファイル⁠）⁠」などが表示され、新規のProjectを作成できるわけです。

またインターネット上で公開されているデザインファイルは「ライブラリ」と呼ばれ、下部の「Libraries & Templates」からかんたんにインポートできます。

UIの設定は右下のアカウントをクリックして「Your account」を選択しましょう。ここの「Settings」を選択すればUIを日本語に変更できます。ただし現在のPenpotは日本語対応が進んでおらず、UIの大半は英語のままです。

さて、真っ白なキャンバスから始めてもいいのですが、試しに適当なLibrariesをインポートしてどんなことができるか試してみると良いでしょう。このあたりはもともとFigmaなどを使っているのであれば勘所はわかるはずです。

作成したファイルはDockerボリューム内部に保存されます。もしファイルとして保存したければ、左上にある縦三点のアイコンをクリックし「File」から以下の項目のいずれかを選んでください。

Penpotファイル（.penpot）をダウンロード
標準形式（.svg+json）でダウンロード
PDFでエクスポート

「Penpotファイル」はPenpot独自のバイナリフォーマットです。単一のファイルに変換し、別のPenpotインスタンスへと取り込みたい場合に便利な仕組みとなります。「⁠標準形式」はただのJSONとSVGファイルを固めたzipファイルです。Penpotにはバージョン管理の概念がありません。よってもしgitなどでバージョン管理したい場合は、標準形式のファイルを展開して管理するという方法もあるようです。

「PDF」はPageの中に「Board」等が存在する場合にのみ、エクスポート可能です。それぞれのページがBoardの領域に割り当てられたPDFが生成されます。ただしSVGと違って、デザイン結果が完全に同じであることは保証されていない点に注意が必要です。

Penpotの管理

Penpotには「管理用UI」は実装されていません[4]。また「管理者アカウント」という概念も存在しません。管理者はドキュメントを参考に、docker-compose.yamlを更新するかmanage.pyスクリプトを実行することになります[5]。

設定を変更したらサービスを立ち上げ直しましょう。

$ docker compose -p penpot down
$ docker compose -p penpot -f docker-compose.yaml up -d

ちなみに、最新版に更新するにはpullするだけです。

$ docker compose -p penpot down
$ docker compose -p penpot pull
$ docker compose -p penpot -f docker-compose.yaml up -d

PenpotのデータはDocker Volumeの中にすべて保存されています。Penpotが提供するdocker-compose.yamlをそのまま使う場合は、次の2個のVolumeが存在することになります。

volumes:
  penpot_postgres_v15:
  penpot_assets:
  # penpot_traefik:
  # penpot_minio:

もしPenpotのバックアップを取得したい場合は、このVolumeの中のファイルを保存するしか方法はないようです。

「クリエイター向けのツール」はオフィス系のツールとともに、デスクトップLinuxの歴史において常にキラーアプリケーションになりうる存在でした。Photoshopに対するGIMP、Illustratorに対するInkscape、Maya/3ds Maxに対するBlender、Painter/SAIに対するKrita等々、広く使われるようになったかどうかに問わず枚挙にいとまがありません。

今回紹介したPenpotもそのような「クリエイター向けのツール」です。今あげたスタンドアローンなアプリケーションに比べるとウェブサービス的なソフトウェアであること、ウェブやUI/UXのデザインを行うユーザーでない限りあまり使う機会はないことなど特殊な要因はありますが、ぜひ他のツールと同じように長く広く使われるソフトウェアになることを願ってやみません。