「CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋」にて https://vivliostyle.connpass.com/event/ Vivliostyle Viewer で見る： https://vivliostyle.org/viewer/#src=https://raw.githubusercontent.com/yamasy1549/slides/master/vivliostyle_meetup_20201024/.vivliostyle/artifacts/index.html&bookMode=true&spread=false

1. スピーディーな本作りと
カスタマイズ可能な本作りのための
VivliostyleThemesプロジェクト
CSS組版Vivliostyleユーザーと開発者の集い2020秋
2020.10.24 やましー

2. やましー@yamasy1549
スパイスカレーづくりが趣味の学⽣🍛
プログラミング⾔語かるたをつくった
Vivliostyleを応援する者
Vivliostyleを使って卒論を書いた
VivliostyleThemesに関わっている
VivliostyleThemes 2

3. VivliostyleThemesとは
"スピーディー"な本づくりと"カスタマイズ可能"な本づくり
VivliostyleThemes 3

4. Themesがめざす2つのこと
①スピーディー
構造化された⽂章を書けば、スタイル（⾒た⽬）を意識せずにい
い感じの本ができる
さまざまなスタイルを適⽤できる→ワンソース・マルチユース
②カスタマイズ可能
ユーザーが⾃由にスタイルを編集できる
Themesを通してスタイルのカスタマイズ⽅法が統⼀されている
VivliostyleThemes 4

5. 公式Themesの紹介
https://github.com/vivliostyle/themes
基本的なスタイルが定義されたCSS≒スタイルテンプレート
Themesを使って作られた本などの例↓
『Vivliostyleで本を作ろうVol.4』 このスライド！
VivliostyleThemes 5

6. 公式Themesの紹介
現在は公式Themesが4つ
⽂庫theme-bunko
スライドtheme-slide
技術書theme-techbook
レポートtheme-academic
さらに増えます
段組みレポート
欧⽂⽂庫
論⽂
etc... 段組みレポートの例
VivliostyleThemes 6

7. ⽂庫本スタイル theme-bunko
@vivliostyle/theme-bunko
スタンダードな⽂庫本
明朝体
縦書き
ルビもOK
縦中横もばっちり
VivliostyleThemes 7

8. スライドスタイル theme-slide
@vivliostyle/theme-slide
この資料のようなスライド
ゴシック体
横書き
表紙ページはスタイルが変わる
⻘背景
中央寄せ
ページ番号⾮表⽰
VivliostyleThemes 8

9. 技術書スタイル theme-teckbook
@vivliostyle/theme-techbook
印刷を意識した技術書
⼩⼝・ノドの余⽩調整
ゴシック体
横書き
ソースコードや⽬次もばっちり
脚注が使える
SCSSで書かれているのでカス
タマイズしやすい
VivliostyleThemes 9

10. レポートスタイル theme-academic
@vivliostyle/theme-academic
学⽣が書くようなレポート
明朝体
横書き
⾃動で章・節番号がつく
数式もばっちり
SCSSで書かれているのでカス
タマイズしやすい
VivliostyleThemes 10

11. Themesを使って最速本づくり
VivliostyleThemes 11

12. Themesを使って最速本づくり
CreateBookを通して使う
CreateBookで同⼈誌を作ろう！
チュートリアルガイド
FAQ:テーマをカスタマイズするには
本づくりの流れ
1. Themesからテーマを選択
2. VFMで原稿を執筆
3.カスタマイズ⽤スタイルを定義
4. $ vivliostyle build
5. PDFとHTMLができる！
./my_book/
├── manuscripts/ (原稿)
│ ├── cover.md
│ ├── chapter01.md
│ └── chapter02.md
├── my_theme/ (カスタマイズ)
│ ├── package.json
│ └── theme.css
├── node_modules/
├── package.json
├── vivliostyle.config.js
└── .vivliostyle
VivliostyleThemes 12

13. これからのThemes
"もっとスピーディー"に、"もっとカスタマイズ可能"に
VivliostyleThemes 13

14. もっとスピーディー
Themesの種類を増やす
[themes#17]学術⽤のマルチカラム可能なテーマtheme-academic-
twocolumnを作る
[themes#16]欧⽂⽤テーマtheme-gutenbergを作る
論⽂！？ 請求書！？ 新聞！？
issueで提案できます😃
ニッチなものでも⼤丈夫！
既存Themesの問題点・改善案もお待ちしています
pullreq⼤歓迎💻
新しい⽤途のThemesは公式Themesとして採⽤したい
VivliostyleThemes 14

15. もっとカスタマイズ可能
原稿ファイルごとに異なるCSSを指定できるように
[themes#9]Howtocustomizethestyleofthemes?
よく使う設定項⽬はCSSを書かなくても設定できるように
[themes#19]テーマに共通して、ユーザ指定可能なパラメータを洗い出す
[vivliostyle-cli#76]CLIにSCSSのトランスパイル機能を含める
ページサイズ・フォントサイズ・⾏間など
将来的にはVivliostylePubで、CSSの知識がなくてもGUI
で設定できるようにしたい
issueで提案できます😃
VivliostyleThemes 15

16. VivliostyleThemesまとめ
"スピーディー"な本づくりと"カスタマイズ可能"な本づくり
CreateBookを通してThemes（テンプレート）を使う
CSSを書いてThemesを上書きできる
これからやっていくこと
まずはThemesの種類を増やす
CSSを書かなくてもカスタマイズできる仕組みを整える
issueで提案できます😃
🖋 Happywriting!
VivliostyleThemes 16