Vivliostyle 開発者とユーザーの集い 2019-08-31 発表資料2 Vivliostyle view: http://bit.ly/vivuser20190831 Source: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/ja/events/vivliostyle-usermeet20190831

1. Vivliostyleと関連ツールの便利な使い⽅
CSS組版Vivliostyle 開発者とユーザーの集い2019夏
2019-08-31
Vivliostyle ユーザー会
Vivliostyle Foundation
村上真雄@MurakamiShinyu / vivliostyle.org

2. ⽬次
1. はじめに 3
2. Vivliostyle Viewer 5
1. 公開されているVivliostyle Viewer の活⽤ 6
2. GitHub 上のHTML+CSS や EPUB データなどをVivliostyle Viewer で組版表⽰ 7
3. ⾃分のパソコン上のHTML+CSS ファイルをVivliostyle Viewer で組版表⽰ 8
3. vivliostyle-savepdf 10
4. おわりに 13
2

3. はじめに
3

4. ⾃⼰紹介
村上真雄@MurakamiShinyu, Vivliostyle Foundation 代表
1990年ごろ: テキスト整形ツールXTR を開発、公開。
2000年ごろから: Antenna House Formatter（アンテナハウス社
のXML/CSS組版エンジン）の開発に従事。
2014年: Vivliostyleプロジェクト開始、会社設⽴。
2018年: Vivliostyle Foundation（⼀般社団法⼈ビブリオスタイル）設⽴
⇨vivliostyle.org オープンソースプロジェクト再始動。
W3C CSS標準化・⽇本語組版TF、JAGAT XMLパブリッシング研
究会などに関わってきています。
4

5. Vivliostyle Viewer
5

6. 公開されているVivliostyle Viewer の活⽤
Vivliostyle 公式サイトの「サンプル」ページでは、
vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html と
いうURL で公開のVivliostyle Viewer を使っていますが、これは誰
でも利⽤できます。
つまり、インストールしなくてもVivliostyle Viewer を使えます⭐
Vivliostyle Viewer の使い⽅👉 Vivliostyle Viewer ユーザーガイド
6

7. GitHub 上のHTML+CSS やEPUB データな
どをVivliostyle Viewer で組版表⽰
例えば、GitHub 上に公開されているIDPF / EPUB 3 Samples:
github.com/IDPF/epub3-samples で試してみる：
「草枕」(kusamakura-japanese-vertical-writing) の中のひとつの
XHTMLファイル⼀.xhtml をVivliostyle Viewer で組版表⽰
「草枕」EPUB をまるごとVivliostyle Viewer で組版表⽰
⭐GitHub Gist も使えます。例：Vivliostyleちょっと⼊⾨サンプル
ちょっと試すのに、GitHub Gist や JS Bin (jsbin.com) が便利⭐
7

8. ⾃分のパソコン上のHTML+CSS ファイルを
Vivliostyle Viewer で組版表⽰
まず⾃分のパソコンにhttp-server を⼊れます。
インストール：
（その前にまずNode.js がなかったらそれを⼊れる👉 nodejs.org）
npm install -g http-server
8

9. ローカルhttp-server + 公開Vivliostyle Viewer
組版表⽰したいHTML+CSS ファイルが含まれるディレクトリ上で
http-server を次のように起動：
http-server . --cors -o -c-1
これで、http://localhost:8080 がブラウザで開いて、⾃分のパソコン
上のHTML+CSS ファイルが⾒れます。
そのlocalhost 上の組版表⽰したいHTML ファイルのURL を、公
開Vivliostyle Viewer に指定すると、組版表⽰できます。
（http-server に --cors オプションを指定してるので、これが可能
です。-o はブラウザ起動、-c-1 はキャッシュを無効にする指定）
9

10. vivliostyle-savepdf
10

11. vivliostyle-savepdf：
コマンドラインでCSS組版してPDFに保存
以前の名前はviola-savepdf、はるさめ(@spring_raining)さん作
github.com/vivliostyle/vivliostyle-savepdf
Vivliostyle 公式サイトの「ダウンロード」ページにもあります。
11

12. vivliostyle-savepdf のインストールと使い⽅
インストール：（まずNode.js がなかったら⼊れる👉 nodejs.org）
npm install -g vivliostyle-savepdf
使い⽅の例：index.html を組版して、output.pdf に出⼒
savepdf ./index.html
プレビュー表⽰するには：
savepdf --preview ./index.html
そのほかのオプションは：savepdf --help
12

13. Thanks!
13