WSL2+DockerでVivliostyleの環境を構築する

2024年8月18日

Q. なんでこんな周りくどいことしているの？
A. 印刷用PDF（PDF/X-1a）形式に変換するにはDocker環境が必要だから

Adobe Acrobat ProなしでグレースケールPDFにすることができます。脱Adobeがはかどりますねぇ……！

環境

Windows 11 Home
WSL2（Microsoft Store版）
Ubuntu 22.04（同上）
Node.js（20.16.0）
Vivliostyle（8.13）

大まかな流れ

WSL2とUbuntuを入れる
Ubuntuログイン・初期設定
rootに移動してNode.js/Dockerインストール
指定ユーザーをDocker権限に入れてUbuntuを再起動
workdirの作成
Gitリポジトリをclone（任意）
Docker実行

詳細

1. WSL2とUbuntuを入れる

Microsoft StoreでWSL2とUbuntuを入れます。適当に検索してインストールすればOKです。

2. Ubuntuログイン・初期設定

Win11 Homeの設定で「コントロールパネル→プログラムと機能→Windowsの機能の有効化または無効化」を開きます。設定窓を開いたら「Linuxサブシステム」と「仮想マシンプラットフォーム」にチェックして再起動。

再起動後、ダウンロードしたUbuntuを起動してユーザー名とパスワードを入力します。

3. rootに移動してNode.js/Dockerインストール

rootに移動し、Node.jsとDockerをインストールします。

Node.js設定

# curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
# echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list

Docker設定

# sudo apt update
# sudo apt install ca-certificates curl
# sudo install -m 0755 -d /etc/apt/keyrings
# sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
# sudo chmod a+r /etc/apt/keyrings/docker.asc

# echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

インストール

※ついでにUbuntuのupgradeを行っています

# sudo apt update && sudo apt upgrade -y
# sudo apt install -y nodejs docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

4. 指定ユーザーをDocker権限に入れる

rootユーザーで実行しない場合、ここで指定ユーザーをDocker権限に入れておきます。今回は2で設定したユーザーをそのまま使うので、ユーザー作成部分は省略します。

# sudo usermod -aG docker <2で作成したユーザー名>

5. 2のユーザーでworkdirディレクトリーの作成

2のユーザーでログインした後、workdirディレクトリを作成します。この時に他のディレクトリ名で行わないこと。7の動作でコケます。

$ mkdir workdir && cd workdir

6. Gitリポジトリをclone(任意)

もしGitで原稿を管理している場合、ここで原稿をcloneします。

$ git clone <リポジトリのURL> && cd <リポジトリ名>

7. Docker起動

$ docker run \
   --env "DISPLAY=${DISPLAY:-:0.0}" \
   --volume /mnt/wslg/.X11-unix/:/tmp/.X11-unix \
   --mount "type=bind,source=$PWD,target=/vivliostyle" \
   --workdir /vivliostyle/ \
   --interactive \
   --tty \
   --rm \
   ghcr.io/vivliostyle/cli:8.13 preview

Vivliostyle cli · GitHub

上記のリンクからVivliostyleのCLIバージョンを調べます。バージョンを確認後、ghcr.io/vivliostyle/cli:8.13の8.13を任意の数字にしてください。

これでプレビューが出たらひとまず完了です。お疲れさまでした。

Ubuntu運用でのコツ

WSLにあるファイルをWindowsのVSCodeで開けない？

できます。VSCodeの「WSL」プラグインを導入した後に、Ubuntu側の原稿ディレクトリで「code .」と実行します。ただ、Ubuntuでのプレビューが乱れることが多いので、Ubuntu側で編集しない方がいい気がします。あくまで印刷用PDFを出力する程度に使用することをおススメします。

preview以外のコマンドを使いたい

$ docker run \
   --env "DISPLAY=${DISPLAY:-:0.0}" \
   --volume /mnt/wslg/.X11-unix/:/tmp/.X11-unix \
   --mount "type=bind,source=$PWD,target=/vivliostyle" \
   --workdir /vivliostyle/ \
   --interactive \
   --tty \
   --rm \
   ghcr.io/vivliostyle/cli:8.13 <コマンド>

一番下の行がコマンドになるので、お好みのコマンドを入力してください。

印刷用PDF（グレースケール）を出力するにはどうすればいい？

$ docker run \
   --env "DISPLAY=${DISPLAY:-:0.0}" \
   --volume /mnt/wslg/.X11-unix/:/tmp/.X11-unix \
   --mount "type=bind,source=$PWD,target=/vivliostyle" \
   --workdir /vivliostyle/ \
   --interactive \
   --tty \
   --rm \
   ghcr.io/vivliostyle/cli:8.13 build --preflight press-ready --preflight-option gray-scale

一番下のコマンドで--preflight press-readyオプションを実行します。この際に--preflight-optionでgray-scaleを設定することで、グレースケールPDF（KのみのPDF）になります。

参考リンク

なぜMastodonインストールサイトがあるかって？Node.jsインストール時にいつもお世話になるからだよ！！！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！