📑

WSL2上でVivliostyleの環境を整える

2022/09/23に公開約2,300字

VivliostyleはGUI関連の都合でWSL上では動かしにくかったのですが、最近のWSL2のアップデートで容易にGUIを動かすことができるようになり、以前のような導入の手間なくプレビュー表示までできるようになりました。今回はこのWSL2のアップデートを利用してプレビュー表示が可能なVivliostyle環境を整える手順をまとめました。

前提

  • OSがWindows11(バージョン21H2以上)である
  • WSL2がインストール済みである

WSL2のアップデート

Vivliostyleではcliからプレビューを実行する時にXServerが必要になるため、WSL2上でGUIを動かす仕組み(WSLg)を有効化する必要があります。

https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/gui-apps

今のタイミング(2022/09/23以降)でWSL2を新規インストールした場合は特に対応は必要ありません。すでにWSL2がインストール済みで有効化する場合にはWSLのアップデートが必要です。PowerShellを管理者権限で開き、以下のコマンドでアップデートします。

wsl --update

アップデート後、WSLを再起動します。

wsl --shutdown

Node.jsを導入する

VivliostyleはNode.js(バージョン12以上)で動作するので、以下を参考にWSL2上でNode.jsをインストールします。

https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl

まず、コマンドラインで以下を実行して nvm をインストールします。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

インストール完了後、以下を実行して動作確認します。バージョン情報が表示されればOKです。

nvm --version

次に、Node.jsをインストールします(ここではNode.jsの現在の安定版LTSリリースをインストールしています)。

nvm install --lts

インストール完了後、環境の状況を確認します。バージョン情報が表示されればOKです。

node --version

Vivliostyleの動作に必要なライブラリを導入する

以下の通りライブラリを導入します。このとき必要に応じてフォントも導入しておきます。今回はIPAのフォントを導入することにします。

sudo apt-get update && \
sudo apt-get install -y \
libgtk-3.0 libnss3 libdrm-dev libgbm-dev libasound2 fonts-ipaexfont

インストールが正常終了後、ここまでで動作できるようになっているはずです。

動作確認

以下を参考に実際にVivliostyleの基本的な動作を確認します。

https://vivliostyle.org/ja/tutorials/create-publications/

任意のディレクトリで以下のコマンドを実行し、動作確認用のプロジェクトを作成します。

npm create book mybook

作成後、プロジェクトのディレクトリに移動します。

cd mybook

PDFの作成確認

以下のコマンドを実行してPDFを作成してみます。

npm run build

以下のように表示され、mybook.pdf が出力されれば成功です。

> mybook@0.0.0 build
> vivliostyle build

✔ manuscript.md {吾輩|わがはい}は猫である。
✔ manuscript.md {吾輩|わがはい}は猫である。
◠ Building PDF
mybook.pdf has been created.
🎉 Built successfully.

プレビュー表示の確認

以下のコマンドを実行するとプレビュー画面が表示できます。

npm run preview

正常に動作すると以下のようなログが表示された後、WSL2上でブラウザが開いてプレビュー画面が表示されます。

> mybook@0.0.0 preview
> vivliostyle preview

🚀 Up and running ([ctrl+c] to quit)

終わりに

WSL2上でプレビュー表示が可能なVivliostyle環境を整える手順をまとめました。以前はWSL上でGUIアプリを動かすのはなかなか面倒な手順が必要でしたが、かなり楽にできるようになりましたね。Windowsで組版を試してみたいという方の役に立てば幸いです。

Discussion

ログインするとコメントできます