CSS組版とVivliostyle

以下記事のPDF版です。
https://zenn.dev/tonionagauzzi/articles/ede5dc588f746a

Transcript

1. CSS 組版とVivliostyle Copyright 2022 ACCESS CO., LTD. All rights reserved.
2. はじめに Copyright 2022 ACCESS CO., LTD. All rights reserved.
3. 技術書典12 の頃から興味があったCSS 組版の Vivliostyle CLI と、初学者向けのCreate Book にGW 中 ついに手を出しました！ はじめに Copyright 2022 ACCESS CO., LTD. All rights reserved.
4. せっかくなので、近年とてもお手軽になった Docker+VSCode で執筆ビルド環境を作りました。 はじめに Copyright 2022 ACCESS CO., LTD. All rights reserved.
5. CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.
6. まず組版とは、文章や図などのコンテンツの位置、 ルビ、書体、文字サイズなどを調整して、見栄えのい い紙面を作ることです。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.
7. その上でCSS 組版とは、HTML で書いた原稿をCSS で レイアウトして組版することです。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.
8. 実は、多くの人が無意識に一度はCSS 組版をしてい ます。 たとえばWeb ブラウザで地図をプリントしたけど、 近くに印刷機がないため後で印刷しようと「PDF に保 存」を選んだことありませんか？ それがCSS 組版の原型だったりします。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.
9. 私みたいにガサツなタイプなら、自分のサイトを印 刷してそのまま同人誌としたり、あわよくば書店に 並べてもいいじゃん？なんて思いますが、 もちろん、万人が見慣れており読みやすい本になる ことが理想です。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.
10. そこで、Web ブラウザからそのまま印刷した状態と 見栄えのいい本の状態とのギャップを埋めてくれる のが、 今回紹介するVivliostyle のようなCSS 組版ツールで す。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.
11. 環境 Copyright 2022 ACCESS CO., LTD. All rights reserved.
12. macOS Monterey 12.3.1 Docker Desktop 4.1.1 VSCode 1.66.0 環境 Copyright 2022 ACCESS CO., LTD. All rights reserved.
13. 構築手順 Copyright 2022 ACCESS CO., LTD. All rights reserved.
14. 1. Docker Copyright 2022 ACCESS CO., LTD. All rights reserved.
15. Docker Desktop をインストールして、プロセスを立 ち上げます。 構築 - 1. Docker Copyright 2022 ACCESS CO., LTD. All rights reserved.
16. 2. VSCode Copyright 2022 ACCESS CO., LTD. All rights reserved.
17. VSCode をインストールして、Remote Containers も 入れます。 構築 - 2. VSCode Copyright 2022 ACCESS CO., LTD. All rights reserved.
18. 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.
19. プロジェクトフォルダ 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 ENTRYPOINT ["vivliostyle"] EXPOSE 8080 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.
20. そして、VSCode でプロジェクトフォルダを読み込 み、左下端をタップします。 出た選択肢で Reopen in Container を選択します。 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.
21. そのあとVSCode メニューのターミナル→ 新しいター ミナルでターミナルを立ち上げると、 root@ca9d142301da:/workspaces/vivliostyle-practice# というユーザーと場所になっており、つまりそこは もうDocker コンテナの中です。 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.
22. そこに本のプロジェクトを作ります。 npm create book ./≪ 本の名前 ≫ npm create book の対話入力については省略します が、 vivliostyle-practice の中に ≪ 本の名前 ≫ が作られ ます。 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.
23. コンテナの中に作られたら、ローカル側にも同期さ れます。素晴らしい！ 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.
24. 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.
25. 初期状態の manuscript.md をビルドします。 cd ./≪ 本の名前 ≫ npm run build 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.
26. ここで 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 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.
27. そうならなくても、おそらく以下のエラーにもなり ます。 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. 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.
28. 2 つ目のエラーは package.json の scripts を以下に書 き換えると回避できます。 "scripts": { "build": "vivliostyle build --no-sandbox", "preview": "vivliostyle preview --no-sandbox" }, 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.
29. これで、 vivliostyle-practice/≪ 本の名前 ≫ の中にpdf が出力されると思います。 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.
30. フォントがないと真っ白なので、 Dockerfile の apt-get install -y に fonts-ipaexfont などのフォン ト指定を忘れずに。 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.
31. その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.
32. ここまで来れば、あとはVSCode 上でMarkdown を VFM の記法に従って書いたり、 vivliostyle.config.js をいじったりしつつビルドも 行えます。 その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.
33. 開発環境が不要になったらDocker コンテナごと消せ ばよいので、紙とは別の意味で環境にやさしいです。 その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.
34. Vivliostyle は企業開発なのかと思ってたら一般社団法 人でボランティアのような形で開発運営されている そうです。 その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.
35. Re:VIEW やLaTeX など他手法との比較も少し紹介した いですが、今日はこの辺で。 その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.