Tweet
Tweet

Slide 1

Slide 1 text

CSS 組版とVivliostyle Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 2

Slide 2 text

はじめに Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 3

Slide 3 text

技術書典12 の頃から興味があったCSS 組版の Vivliostyle CLI と、初学者向けのCreate Book にGW 中 ついに手を出しました！ はじめに Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 4

Slide 4 text

せっかくなので、近年とてもお手軽になった Docker+VSCode で執筆ビルド環境を作りました。 はじめに Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 5

Slide 5 text

CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 6

Slide 6 text

まず組版とは、文章や図などのコンテンツの位置、 ルビ、書体、文字サイズなどを調整して、見栄えのい い紙面を作ることです。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 7

Slide 7 text

その上でCSS 組版とは、HTML で書いた原稿をCSS で レイアウトして組版することです。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

私みたいにガサツなタイプなら、自分のサイトを印 刷してそのまま同人誌としたり、あわよくば書店に 並べてもいいじゃん？なんて思いますが、 もちろん、万人が見慣れており読みやすい本になる ことが理想です。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 10

Slide 10 text

そこで、Web ブラウザからそのまま印刷した状態と 見栄えのいい本の状態とのギャップを埋めてくれる のが、 今回紹介するVivliostyle のようなCSS 組版ツールで す。 CSS 組版とは Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 11

Slide 11 text

環境 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 12

Slide 12 text

macOS Monterey 12.3.1 Docker Desktop 4.1.1 VSCode 1.66.0 環境 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 13

Slide 13 text

構築手順 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 14

Slide 14 text

1. Docker Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 15

Slide 15 text

Docker Desktop をインストールして、プロセスを立 ち上げます。 構築 - 1. Docker Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 16

Slide 16 text

2. VSCode Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 17

Slide 17 text

VSCode をインストールして、Remote Containers も 入れます。 構築 - 2. VSCode Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 18

Slide 18 text

3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 19

Slide 19 text

プロジェクトフォルダ 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.

Slide 20

Slide 20 text

そして、VSCode でプロジェクトフォルダを読み込 み、左下端をタップします。 出た選択肢で Reopen in Container を選択します。 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 21

Slide 21 text

そのあとVSCode メニューのターミナル→ 新しいター ミナルでターミナルを立ち上げると、 root@ca9d142301da:/workspaces/vivliostyle-practice# というユーザーと場所になっており、つまりそこは もうDocker コンテナの中です。 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 22

Slide 22 text

そこに本のプロジェクトを作ります。 npm create book ./≪ 本の名前 ≫ npm create book の対話入力については省略します が、 vivliostyle-practice の中に ≪ 本の名前 ≫ が作られ ます。 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 23

Slide 23 text

コンテナの中に作られたら、ローカル側にも同期さ れます。素晴らしい！ 構築 - 3. プロジェクト作成 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 24

Slide 24 text

4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 25

Slide 25 text

初期状態の manuscript.md をビルドします。 cd ./≪ 本の名前 ≫ npm run build 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 26

Slide 26 text

ここで 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.

Slide 27

Slide 27 text

そうならなくても、おそらく以下のエラーにもなり ます。 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.

Slide 28

Slide 28 text

2 つ目のエラーは package.json の scripts を以下に書 き換えると回避できます。 "scripts": { "build": "vivliostyle build --no-sandbox", "preview": "vivliostyle preview --no-sandbox" }, 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 29

Slide 29 text

これで、 vivliostyle-practice/≪ 本の名前 ≫ の中にpdf が出力されると思います。 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 30

Slide 30 text

フォントがないと真っ白なので、 Dockerfile の apt-get install -y に fonts-ipaexfont などのフォン ト指定を忘れずに。 構築 - 4. お試しビルド Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 31

Slide 31 text

その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 32

Slide 32 text

ここまで来れば、あとはVSCode 上でMarkdown を VFM の記法に従って書いたり、 vivliostyle.config.js をいじったりしつつビルドも 行えます。 その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 33

Slide 33 text

開発環境が不要になったらDocker コンテナごと消せ ばよいので、紙とは別の意味で環境にやさしいです。 その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 34

Slide 34 text

Vivliostyle は企業開発なのかと思ってたら一般社団法 人でボランティアのような形で開発運営されている そうです。 その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.

Slide 35

Slide 35 text

Re:VIEW やLaTeX など他手法との比較も少し紹介した いですが、今日はこの辺で。 その後 Copyright 2022 ACCESS CO., LTD. All rights reserved.