Zenn
🔖

Vivliostyle CLIのCreate Book環境をDocker+VSCodeで作った

2022/05/08に公開
Vivliostyle
createbook
css組版
tech

はじめに

技術書典12の頃から興味があったCSS組版のVivliostyle CLIと、初学者向けのCreate BookにGW中ついに手を出しました！
せっかくなので、近年とてもお手軽になったDocker+VSCodeで執筆ビルド環境を作りました。

CSS組版とは

まず組版とは、文章や図などのコンテンツの位置、ルビ、書体、文字サイズなどを調整して、見栄えのいい紙面を作ることです。
その上でCSS組版とは、HTMLで書いた原稿をCSSでレイアウトして組版することです。

実は、多くの人が無意識に一度はCSS組版をしています。
たとえばWebブラウザで地図をプリントしたけど、近くに印刷機がないため後で印刷しようと「PDFに保存」を選んだことありませんか？
それがCSS組版の原型だったりします。

私みたいにガサツなタイプなら、自分のサイトを印刷してそのまま同人誌としたり、あわよくば書店に並べてもいいじゃん？なんて思いますが、もちろん、万人が見慣れており読みやすい本になることが理想です。
そこで、Webブラウザからそのまま印刷した状態と見栄えのいい本の状態とのギャップを埋めてくれるのが、今回紹介するVivliostyleのようなCSS組版ツールです。

環境

  • macOS Monterey 12.3.1
  • Docker Desktop 4.1.1
  • VSCode 1.66.0

構築手順

1. Docker

Docker Desktopをインストールして、プロセスを立ち上げます。

2. VSCode

VSCodeをインストールして、Remote Containersも入れます。

3. プロジェクト作成

プロジェクトフォルダvivliostyle-practiceを作り、中にDockerfileを配置します。

FROM node:18-slim

RUN apt-get update
RUN apt-get install -y libgtk-3.0 libnss3 libdrm-dev libgbm-dev libasound2 fonts-ipaexfont
RUN npm init --yes
RUN npm install -g @vivliostyle/cli
RUN yarn add @vivliostyle/theme-bunko

WORKDIR /workspaces
VOLUME /workspaces

#以下は対話式なので成功しない
#RUN npm create book ./≪本の名前≫
#RUN cd ./≪本の名前≫
#RUN npm run build

ENTRYPOINT ["vivliostyle"]
EXPOSE 8080

そして、VSCodeでプロジェクトフォルダを読み込み、左下端をタップします。

出た選択肢でReopen in Containerを選択します。
そのあとVSCodeメニューのターミナル→新しいターミナルでターミナルを立ち上げると、

root@ca9d142301da:/workspaces/vivliostyle-practice#

というユーザーと場所になっており、つまりそこはもうDockerコンテナの中です。
そこに本のプロジェクトを作ります。

npm create book ./≪本の名前≫

npm create bookの対話入力については省略しますが、vivliostyle-practiceの中に≪本の名前≫が作られます。
コンテナの中に作られたら、ローカル側にも同期されます。素晴らしい！

3. お試しビルド

cd ./≪本の名前≫
npm run build

ここでDockerfileに書いたapt-get install -yの1行がないと、以下のエラーになります。

/usr/local/lib/node_modules/@vivliostyle/cli/node_modules/puppeteer-core/
.local-chromium/linux-982053/chrome-linux/chrome: 
error while loading shared libraries: libgobject-2.0.so.0: 
cannot open shared object file: No such file or directory

そうならなくても、おそらく以下のエラーにもなります。

✖ Error: Failed to launch the browser process!
[1591:1591:0508/044027.396221:ERROR:zygote_host_impl_linux.cc(90)] 
Running as root without --no-sandbox is not supported.
See https://crbug.com/638180.

2つ目のエラーはpackage.jsonのscriptsを以下に書き換えると回避できます。

"scripts": {
  "build": "vivliostyle build --no-sandbox",
  "preview": "vivliostyle preview --no-sandbox"
},

これで、vivliostyle-practice/≪本の名前≫の中にpdfが出力されると思います。

フォントがないと真っ白なので、Dockerfileのapt-get install -yにfonts-ipaexfontなどのフォント指定を忘れずに。

その後

ここまで来れば、あとはVSCode上でMarkdownをVFMの記法に従って書いたり、vivliostyle.config.jsをいじったりしつつビルドも行えます。
開発環境が不要になったらDockerコンテナごと消せばよいので、紙とは別の意味で環境にやさしいです。

Vivliostyleは企業開発なのかと思ってたら一般社団法人でボランティアのような形で開発運営されているそうです。このような興味深いフレームワークを提供してくださりありがとうございます！

Re:VIEWやLaTeXなど他手法との比較も少し紹介したいですが、今日はこの辺で。

Discussion