CSS 組版による文書作成の提案
中西渉

watayan@meigaku.ac.jp

https://watayan.net

名古屋高等学校■ 具体的手順：Vivliostyle■ CSS 組版とは
• HTML+CSS で組版を行う（1999〜）• 『日本語組版処理の要件』1

1. Node.js をインストール（v16 以上）
2. Vivliostyle をインストール
npm -g install @vivliostyle/cli• ソフトウェアはいろいろ 2• Vivliostyle• PDFreactor• Prince• Antennahouse CSS Formatter• Paged.js• Typeset.sh• BFO Publisher

3. vivliostyle.config.js を生成して編集
npx vivliostyle init

• 構造がいくらでも壊せる（まるでフローチャート!）• 悪い手本が多すぎる
LATEX• インストールが大変（TEX Live はかなり楽だが）• エラー対応が難しい• スタイルの変更が難しい（jlreq で楽にはなっているが）HTML• 構造化は自然にできる• デザインは CSS で分離• タグの対応を正しく保てるかが疑問

4. プレビューしたりビルドしたり
npx vivliostyle preview
npx vivliostyle build
3’ md ファイルの先頭に css の指定などを YAML 形式で書き込む（プレビューやビルドでファイル名の指定が必要）
4’ プレビューしたりビルドしたり（ファイル名を指定）
npx vivliostyle preview hoge.md
npx vivliostyle build hoge.md --output hoge.pdf
5. Let’s write!
参考図書 3 やユーザーガイド 4 を頼りに…

• ページのある出力は難しい
Markdown• 構造化は自然にできるもし h%7==4 ならば：表示する("Thu")
そうでなければ：
もし h%7==5 ならば：表示する("Fri")
そうでなければ：
表示する("Sat")

第 6 章 配列
6.1 配列前に，Zeller の公式を使って，日付を入力すると曜日を 0〜6 の数字で表示するプログラムを作った。 これを「Sun」「Mon」…「Sat」と表示したい。
次のようなアルゴリズムでもできるが，決してスマートな方法とはいえない。

• メモを取るには最適

PyPEN では番号付きの変数である配列を使うことができる（番号は 0 から始まる）。これを使うことによって，プログラムがすっきりすることがよくある。たとえばこの曜日のプログラムであれば，
a = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]（中略）表示する(a[h%7])• 出力ツールは?とすればよい。ここでは a[0],a[1],…に順に"Sun","Mon",…を代入している。
たとえば，40 人のクラスで点数入力をするなら次のようにすればいい（[0]*40 というのは，0 を 40 回繰り返した要素を持つ配列を表す）。合計点などの計算も，配列を使うととても楽だ（これは次の項で扱う）。

• 出力のコントロールが難しい

h = …
もし h%7==0 ならば：表示する("Sun")• 方言が多い■ CSS 組版 (Vivliostyle) のいいところ・悪いところ
いいところ• HTML，CSS は Web サイト作りの知識が使える• CSS を統一すれば書式が統一できる• ブラウザのデベロッパーツールでデバッグ可能
悪いところ• ツールごとの方言

a=[0]*40
kを0から39まで1ずつ増やしながら繰り返す：
a[k]に整数を入力する

そうでなければ：
もし h%7==1 ならば：表示する("Mon")
そうでなければ：
もし h%7==2 ならば：表示する("Tue")
そうでなければ：
もし h%7==3 ならば：表示する("Wed")
そうでなければ：［例題：おみくじ］

乱数を用いて「大吉」「吉」「小吉」「凶」「大凶」のどれかがでるようなおみくじのプログラムを作りなさい。余裕があれば，出るメッセージの種類を増やしてみなさい。
22

サイコロはそれぞれの目が の確率で出る。だったら 60 回サイコロを振れば，それぞれの目が 10 回ずつ出るだろうか。60 回くらいなら実際に試してみてもいいのだが，後で 600 回，6000 回ならどうなるかということについても実験してみたい。そうなると手作業で数えるのは大変だ。そこで，サイコロの実物を使うのでなく，プログラムでその状況を作り出して実験してみるとしよう。
このように，実物を使うことが困難であるようなときに，代用品で同じような状況を作って試してみることをシミュレーションという。「シュミレーション」という間違いは非常に恥ずかしいのでしないように。
シミュレーションは必ずしもコンピュータを使うものばかりではない。部屋の模様替えをするときに，家具の配置を適当な縮尺の方眼紙の上で考えるのもシミュレーションだし，車や飛行機の開発現場で部品の模型を風洞に入れて空気の流れを計測するのもそうだ。また，物を使うものばかりではなく，計算で行なうものもある（これについてはコンピュータが活躍する場面も多い）。その意味では数学の文章題や理科の計算問題は，実はシミュレーションの一種でもある。
シミュレーションを行なうためには，問題となる状況から必要な要素を抽出してモデル化を行なう。この場合だと「サイコロは 6 つの目が等確率で出る」「前に出た目は次に出る目に影響を及ぼさない」「回数を重ねても各目の確率は変化しない」などといったことになるだろう。
16［課題：サイコロのシミュレーション］

サイコロを 60 回振って各目が何回ずつ出るかを調べるプログ
ラムを作りなさい。プログラムを簡単にするために，サイコロは 0〜5 の目が出るものとする。
アルゴリズムは次のようになるだろう。2.では繰り返し用の変数が 1 つ必要になることに注意しよう。60 回繰り返すためには「c を 1 から 60 まで 1 ずつ増23

24■ おわりにテキストファイルの復権を!
• 教科書に出てこないのはなぜ• 検索とか簡単だし

Vivliostyle の特徴• Markdown で書ける

■ 参考文献• 細かいところは直に HTML で書ける
• LAT X の記法で数式が書ける（MathML，AsciiMath も可）[1] W3C.
“日本語組版処理の要件”.
https://www.w3.org/TR/jlreq/.

• レンダリングエンジンは Chromium[2] “print-css.rocks”.
https://print-css.rocks.

• フォントが自由（Google Fontsをオンライン利用可能）

E• 日本のコミュニティが開発• フォント埋め込み（PDF/X1–a 形式も可能らしい）• 目次生成可能

6.2 モデル化とシミュレーション• テキストエディタを知らなくていいのか• 出力結果はブラウザに依存

const vivliostyleConfig = {title: 'PyPEN を用いたプログラミング入門',
author: ' わたやん',
language: 'ja',size: 'A5',
theme: 'css/watayan.css',
image: 'ghcr.io/vivliostyle/cli:8.6.0',
entry: ['PyPEN_manual.md',],};
module.exports = vivliostyleConfig;■ 他の文書作成方法に思うこと
ワープロ• WYSIWIG とはいうが…
What you see is what you get. はいいことなのか?
What you see is what you gave. じゃないのか?
• スタイルと内容の分離は現実的か

vivliostyle.config.js（必要な部分だけ）[3] リブロワークス.
“Web 技術で「本」が作れる CSS 組版 Vivliostyle 入門”.
シーアンドアール研究所, 2023.
[4] “Vivliostyle ユーザーガイド”.
https://docs.vivliostyle.org/#/ja/vivliostyle-cli.

2023 年 12 月 26 日：神奈川県高等学校教科研究会 情報部会 実践事例報告会