初心者から見たVivliostyleの可能性とコミュニティへの提言 #vivliostyle / The potential of Vivliostyle from a beginner's perspective and suggestions for the community

CSS組版 Vivliostyle ユーザーと開発者の集い 2020春
https://vivliostyle.connpass.com/event/170939/
での発表資料です。

Transcript

1. 初心者から見たVivliostyleの可能性と コミュニティへの提言 2020.04.04 @kondoyuko CSS組版 Vivliostyle ユーザーと開発者の集い 2020春
2. #vivliostyle 自己紹介 近藤佑子 aka @kondoyuko / ゆうこりん • 所属：株式会社翔泳社 – CodeZine編集部 副編集長 – Developers Summit オーガナイザー – 出版社で働いてますが本づくりは初心者です • 趣味：テクノロジーや自分をハブにしたイベントを 作って遊ぶこと – 近藤佑子誕生祭、スナックゆうこ、Tech Pub、 雑学サミット etc... kondoyuko516 kondoyuko アイコン アー写
3. #vivliostyle 主催する同人サークル「こりん堂」 2019年には、技術書典6、第二十八回文学フリマ東京、技術書典7、 コミックマーケット97（C97）に出展
4. #vivliostyle 主催する同人サークル「こりん堂」 C97で頒布した同人誌（コピー本）の組版にVivliostyleを採用
5. #vivliostyle Vivliostyleで本を作ろう vol.3 に寄稿 https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol3/kondoyuko/index.html
6. #vivliostyle 今日お話したいこと Vivliostyleを初めて触った立場から考える プラットフォームの可能性と課題
7. #vivliostyle 本日のアジェンダ • Vivliostyleとは何かを初心者目線で • Vivliostyleを使おうとした背景 • ぶつかった壁 • Vivliostyleコミュニティへの提言
8. #vivliostyle Vivliostyleとは何かを初心者目線で
9. #vivliostyle Vivliostyleとは • CSS組版で本を作るためのツール – CSS組版：HTML/CSSを用いた紙面デザイン • Vivliostyleとは – オープンソースのCSS組版システム – CSS組版のデファクトスタンダード？
10. #vivliostyle Vivliostyleプロジェクト • 組版されたPDFを生成 – Vivliostyle CLI（HTMLから） – Vivliostyle Pub（Markdownから：開発中） • 組版されたものをWebで閲覧 – Vivliostyle Viewer（HTMLから：ブラウザの印刷機能でPDF取得） https://vivliostyle.org/ja/
11. #vivliostyle Vivliostyleを使おうとした背景
12. #vivliostyle これまでの技術同人誌制作 • Re:VIEW＋CircleCIでPDFの自動ビルド – TechBoosterのテンプレートを利用 • 開発者フレンドリーに本を制作するのが 楽しかった
13. #vivliostyle Re:VIEWでの組版で感じていた課題 • いかにも「Re:VIEWで作った」 ような紙面デザインになる • デザインをいじりたい場合の 直し方が分からない – 特にコラムのデザイン
14. #vivliostyle C97で頒布した本 • 読んで良かった本を紹介 するブックレビュー本 • 紙面イメージは「洋書」 • コピー本として制作 – トンボなどの入稿時の 細かい対応は未経験
15. #vivliostyle なぜVivliostyleを利用しようとしたか • 読み物系なので技術書ライクな紙面にしたくなかった – 制作段階では縦書も視野に入れていた • 何か技術的に新しいチャレンジがしたかった • 短期間で制作ができそうだった • CSSによる見た目の調整が可能だった • サンプルのテンプレートのデザインが好み – 今回は「英語小説」のサンプルを利用
16. #vivliostyle 自分の前提知識 • 簡単なWeb制作ができるHTML/CSSの知識がある • 技術同人サークル主と親交があり、CSS組版や Vivliostyleについて、LTなどで聞いたことがある
17. #vivliostyle ぶつかった壁
18. #vivliostyle kondoyukoとVivliostyle
19. #vivliostyle 制作のタイムライン • 12/22 18時　Vivliostyleの調査開始 （6日間進捗出ず） • 12/28 10時　CSS組版よくわからないと嘆く （村上さんのサポート） • 12/29 17時　書籍の完成
20. #vivliostyle 制作のタイムライン • 12/22 18時　Vivliostyleの調査開始 （6日間進捗出ず） • 12/28 10時　CSS組版よくわからないと嘆く （村上さんのサポート） • 12/29 17時　書籍の完成 ↓ 把握してしまえば非常に素早く制作できるツール
21. #vivliostyle なぜつまづいたのか？ • パパっと本を作るための情報が少ない • サンプルのライセンスや利用方法が難しい
22. #vivliostyle パパっと本を作るための情報が少ない • VivliostyleでGoogle検索 • 「Vivliostyleで本を作ってみた」 的なユーザー目線の情報が少ない • 開発者のディープな情報が目立つ – 検索上位にくる必要はなし？
23. #vivliostyle Vivliostyle Viewerへの印象 • 検索では「Vivliostyle Viewer」の説明が目立つが、 ユーザーはビューワーの情報が知りたいのではなく 書籍制作の方法が知りたい • 「よくわからんけど重要そうなんだな」と思い、ロー カルで環境を作るも、「で、本を作るにはこれからど うしたらいいんだっけ？」と思い、しばらく悩む
24. #vivliostyle 乗り越え方 • ローカルの環境でVivliostyle Viewerで表示させて、い ろいろ触りながら動かすことで理解していった • 別の問題として、当時ドキュメントが、自分がDLした 最新安定版ではなく最新開発版に合わせたものになっ ていて、混乱があったのもある
25. #vivliostyle サンプルのライセンスや利用方法が難しい • サンプルのページを見てみた • 使いたいサンプルがあったが ライセンスの記載がない • 利用してよいにしても、 利用方法が分からない https://vivliostyle.org/ja/samples/
26. #vivliostyle ライセンスについて • ライセンスがよくわからない ので村上真雄さんに質問 • 「Vivliostyleプログラムと同 じAGPLの扱い」とのご回答 をいただく https://twitter.com/MurakamiShinyu/status/ 1210447092440686592
27. #vivliostyle AGPL……!? • AGPLが分からないのでググってみる • Qiita記事*に「AGPL のライセンスの OSS を使う場合 には、すべてをさらけだす覚悟が必要」「現時点で最 強の Copyleft」という記載があり「AGPL 怖い！」 • 「プログラムを改変しても自分で使うだけなら公開の 必要はない」と追加で教えていただく 「オープンソースライセンス、どれなら使っても良いの？？ https://qiita.com/fate_shelled/items/a928709d7610cee
28. #vivliostyle 現在、追加でいただいたライセンスの最新情報 • 以前、VivliostyleはApache 2.0ライセンスで作られ、 サンプルも同ライセンス下にある – 使用、商用利用、改変、複製、公開などが可能 • ユーザーが自由に使えるようにライセンスの見直しが 検討されている
29. #vivliostyle 利用方法が分からない • サンプルのページから、どのようにサンプルを取得す ればいいか分からない • GitHubで、Vivliostyleのドキュメントをホスティング しているリポジトリにアクセスし、そこからZipで取っ てくるしかなさそう？ https://vivliostyle.org/ja/samples/
30. #vivliostyle とはいえスピーディーに制作できた • サンプルを改変したり、 奥付など必要なパーツを 他のサンプルから取って きたりしながらスムーズ に制作 • 詳しくは寄稿記事を参照 https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-gro up-vol3/kondoyuko/index.html
31. #vivliostyle Vivliostyleコミュニティへの提言
32. #vivliostyle Vivliostyleコミュニティがさらに発展するために • 現在、Vivliostyleの仕様や開発者向け情報が多い印象 • 「本を作りたい」というユーザー目線の情報がもっと 増えてほしい＋ユーザーから生まれてほしい – プロダクトとしてはWeb出版を意識するにしても、 今は紙/PDFの本を作る目線の情報発信でよさそう
33. #vivliostyle 参考になりそうな知見 • DevRel（デブレル）：Developer Relationsの略 • DevRel：開発者向け共創マーケティング – OSS発展にも役立つところがありそう • DevRelの「3C」を用いた提案 – Code、Contents、Community https://www.amazon.co.jp/dp/B07X8SD4PP/
34. #vivliostyle Code：ソースコードや技術的リソース • ワンストップなサンプル – 目次、奥付、トンボなどが標準装備されている • メインターゲットとなるユーザーに向けたサンプル – TechBooster/ReVIEW-Templateのような 技術書ライクなサンプル
35. #vivliostyle Contents：ドキュメントやブログ • Getting Started的な内容 – Vivliostyleを用いたベーシックな書籍制作のチュー トリアルがあると良さそう • 制作事例の発信 – 『Vivliostyleで本を作ろう』のメイキングなど • 開発者エクスペリエンスが高いチュートリアル – CI/CDツールとの連携など
36. #vivliostyle Community：コミュニティ • ハンズオン動画の公開 • 関連コミュニティへの参加・登壇 – 技術同人誌、組版、Web標準etc… • ユーザーを巻き込む（今回の私のケースなど）
37. #vivliostyle まとめ
38. #vivliostyle Vivliostyleの可能性 • 短期間で書籍制作ができる • カスタマイズ性が高い • Web制作やデザイナー系、非エンジニアのユーザーも 狙えそう
39. #vivliostyle コミュニティへの提言 • プロダクトセントリックからユーザーセントリックへ • 本を作りたい人目線の情報発信が増えることで、 Vivliostyleで本を作る人が増えることを願っています