「CSS組版 Vivliostyle ユーザーと開発者の集い 2021秋」にて https://vivliostyle.connpass.com/event/227954/ Vivliostyle Viewer で見る： https://vivliostyle.org/viewer/#src=https://github.com/yamasy1549/slides/blob/master/vivliostyle_meetup_20211113/book/index.html&spread=false

1. VivliostyleTheme
開発ガイドラインの公開
CSS組版Vivliostyleユーザーと開発者の集い2021秋
2021.11.13 やましー

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

3. 紹介すること
VivliostyleThemesとは
Themeドキュメントの紹介
仕様
開発チュートリアル
運用ガイドライン
create-vivliostyle-themeの更新情報
今後の予定
はじめに 3

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

5. 公式Themesの紹介
https://github.com/vivliostyle/themes
基本的なスタイルが定義されたCSS≒スタイルテンプレート
Themesを使って作られた本などの例↓
VivliostyleThemesとは 5

6. 公式Themesの紹介
現在は公式Themesが5つ
縦書き小説theme-bunko
スライドtheme-slide
技術書theme-techbook
レポートtheme-academic
横書き小説theme-gutenberg
非公式Themesがいくつか
ゲームのハンドブックdnd5e-
phb
論文関係thesisbulletin
vivliostyle-themeで検索(npmjs)
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
印刷を意識した技術書
小口・ノドの余白調整
ゴシック体
横書き
ソースコードや目次もばっちり
脚注が使える
VivliostyleThemesとは 9

10. レポートスタイル theme-academic
@vivliostyle/theme-academic
学生が書くようなレポート
明朝体
横書き
自動で章・節番号がつく
数式もばっちり
VivliostyleThemesとは 10

11. 横書き小説 theme-gutenberg
@vivliostyle/theme-
gutenberg
スタンダードな横書き小説
（英
語など）
セリフ体
横書き
章の最初の文字は大文字
VivliostyleThemesとは 11

12. Themeドキュメントの紹介
https://vivliostyle.github.io/themes/#/ja/
Themeドキュメントの紹介 12

13. Themeに関するドキュメントを公開
仕様
開発チュートリアル
運用ガイドライン
公式Themeの採用
Themeギャラリー
Themeドキュメントの紹介 13

14. 仕様(1)
Theme名
基本的に自由だが、
なるべく用途を表す用語を含める
変更可能なスタイルに関する用語を避ける
避けるべき例：a4book、
tategakiなど
Themeに含めるべきスタイル
出版物全体のスタイルを含める
例：ページ
（余白、
柱など）
、
見出し、
段落、
数式、
図表ソースコー
ド
（キャプション）
、
脚注、
ルビ
create-vivliostyle-themeの雛形をもとに作ることを推奨
Themeドキュメントの紹介 14

15. 仕様(2)
サンプル原稿が必須
Themeの良さがわかる端的なサンプル
Themeのユーザが出版物を作るとき参考にできそうなもの
SCSSを推奨
Themeのユーザが自由にカスタマイズしやすいように
将来的にはCSS変数
（カスタムプロパティ）
を使えるようにな
る予定だが、
今のところはSCSSで変数などを定義
Themeドキュメントの紹介 15

16. Theme開発チュートリアル
「VivliostyleThemeのつくりかた」
をもとに、
最新の仕様に追従
Themeドキュメントの紹介 16

17. 公式Themeの採用
条件
汎用的で多くのユーザが使うと思われる
デザインと主な用途が、
既存の公式Themeと異なる
Themeの仕様を満たしている
採用方法
pullreq
採用されるとthemesリポジトリのメンテナ権限が与えられる
Themeドキュメントの紹介 17

18. Themeギャラリー
公式Themeと公式でないThemeを画像つきで一覧できる
Themeドキュメントの紹介 18

19. create-vivliostyle-theme
の更新情報
Theme作成のための雛形生成キット
create-vivliostyle-themev0.4.0の更新情報 19

20. 必要な要素のスタイルが定義済み
用途、
好みに合わせて書き換えるだけでOK！
yarn create vivliostyle-theme <name>
create-vivliostyle-themev0.4.0の更新情報 20

21. 今後の予定
今後の予定 21

22. 公開を予定している公式Theme
小説同人誌用Theme
2段組み
縦書き
今後の予定 22

23. CSS組版tipsの公開
もっとCSS組版のサンプルがほしい！ どんなことができるの？
Theme作りにも使えるtipsを(ドキュメント|公式サイト)でまと
めたい
現在参考になる資料
VivliostyleがサポートするCSS機能
VivliostyleCoreのテストケースとそのソース
公式ブログのリリース報告記事
今日の発表者のスライド資料
今後の予定 23

24. まとめ
Themeドキュメントが公開された
create-vivliostyle-themeで作られる雛形がパワーアップした
新しい公式Theme
（小説同人誌）
を公開予定
CSS組版tipsの公開
🖋Happywriting!
おわりに 24