📑

WSL2上でVivliostyleの環境を整える

2022/09/23に公開

WSL 2

Vivliostyle

tech

WSL2を利用してプレビュー表示が可能なVivliostyle環境を整える手順です。

はじめに

技術書執筆などで使われることの多いVivliostyle。WSL2上ではコア部分は容易に整備できるもののプレビュー環境整備が大変でした。昨今のアップデートで容易にプレビュー環境を動かすことができるようになったので、WSL2上でプレビュー表示が可能なVivliostyle環境を整える手順をまとめました。

前提

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

WSL2のアップデート

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

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

wsl --update

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

wsl --shutdown

Node.jsを導入する

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

まず、コマンドラインで以下を実行して 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の基本的な動作を確認します。

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

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で組版を試してみたいという方の役に立てば幸いです。