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