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

by kondoyuko

Slide 1

Slide 1 text

初心者から見たVivliostyleの可能性とコミュニティへの提言 2020.04.04 @kondoyuko CSS組版 Vivliostyle ユーザーと開発者の集い 2020春

Slide 2

Slide 2 text

#vivliostyle 自己紹介近藤佑子 aka @kondoyuko / ゆうこりん • 所属：株式会社翔泳社 – CodeZine編集部副編集長 – Developers Summit オーガナイザー – 出版社で働いてますが本づくりは初心者です • 趣味：テクノロジーや自分をハブにしたイベントを作って遊ぶこと – 近藤佑子誕生祭、スナックゆうこ、Tech Pub、雑学サミット etc... kondoyuko516 kondoyuko アイコンアー写

Slide 3

Slide 3 text

#vivliostyle 主催する同人サークル「こりん堂」 2019年には、技術書典6、第二十八回文学フリマ東京、技術書典7、コミックマーケット97（C97）に出展

Slide 4

Slide 4 text

#vivliostyle 主催する同人サークル「こりん堂」 C97で頒布した同人誌（コピー本）の組版にVivliostyleを採用

Slide 5

Slide 5 text

#vivliostyle Vivliostyleで本を作ろう vol.3 に寄稿 https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol3/kondoyuko/index.html

Slide 6

Slide 6 text

#vivliostyle 今日お話したいこと Vivliostyleを初めて触った立場から考えるプラットフォームの可能性と課題

Slide 7

Slide 7 text

#vivliostyle 本日のアジェンダ • Vivliostyleとは何かを初心者目線で • Vivliostyleを使おうとした背景 • ぶつかった壁 • Vivliostyleコミュニティへの提言

Slide 8

Slide 8 text

#vivliostyle Vivliostyleとは何かを初心者目線で

Slide 9

Slide 9 text

#vivliostyle Vivliostyleとは • CSS組版で本を作るためのツール – CSS組版：HTML/CSSを用いた紙面デザイン • Vivliostyleとは – オープンソースのCSS組版システム – CSS組版のデファクトスタンダード？

Slide 10

Slide 10 text

#vivliostyle Vivliostyleプロジェクト • 組版されたPDFを生成 – Vivliostyle CLI（HTMLから） – Vivliostyle Pub（Markdownから：開発中） • 組版されたものをWebで閲覧 – Vivliostyle Viewer（HTMLから：ブラウザの印刷機能でPDF取得） https://vivliostyle.org/ja/

Slide 11

Slide 11 text

#vivliostyle Vivliostyleを使おうとした背景

Slide 12

Slide 12 text

#vivliostyle これまでの技術同人誌制作 • Re:VIEW＋CircleCIでPDFの自動ビルド – TechBoosterのテンプレートを利用 • 開発者フレンドリーに本を制作するのが楽しかった

Slide 13

Slide 13 text

#vivliostyle Re:VIEWでの組版で感じていた課題 • いかにも「Re:VIEWで作った」ような紙面デザインになる • デザインをいじりたい場合の直し方が分からない – 特にコラムのデザイン

Slide 14

Slide 14 text

#vivliostyle C97で頒布した本 • 読んで良かった本を紹介するブックレビュー本 • 紙面イメージは「洋書」 • コピー本として制作 – トンボなどの入稿時の細かい対応は未経験

Slide 15

Slide 15 text

#vivliostyle なぜVivliostyleを利用しようとしたか • 読み物系なので技術書ライクな紙面にしたくなかった – 制作段階では縦書も視野に入れていた • 何か技術的に新しいチャレンジがしたかった • 短期間で制作ができそうだった • CSSによる見た目の調整が可能だった • サンプルのテンプレートのデザインが好み – 今回は「英語小説」のサンプルを利用

Slide 16

Slide 16 text

#vivliostyle 自分の前提知識 • 簡単なWeb制作ができるHTML/CSSの知識がある • 技術同人サークル主と親交があり、CSS組版や Vivliostyleについて、LTなどで聞いたことがある

Slide 17

Slide 17 text

#vivliostyle ぶつかった壁

Slide 18

Slide 18 text

#vivliostyle kondoyukoとVivliostyle

Slide 19

Slide 19 text

#vivliostyle 制作のタイムライン • 12/22 18時　Vivliostyleの調査開始（6日間進捗出ず） • 12/28 10時　CSS組版よくわからないと嘆く（村上さんのサポート） • 12/29 17時　書籍の完成

Slide 20

Slide 20 text

#vivliostyle 制作のタイムライン • 12/22 18時　Vivliostyleの調査開始（6日間進捗出ず） • 12/28 10時　CSS組版よくわからないと嘆く（村上さんのサポート） • 12/29 17時　書籍の完成 ↓ 把握してしまえば非常に素早く制作できるツール

Slide 21

Slide 21 text

#vivliostyle なぜつまづいたのか？ • パパっと本を作るための情報が少ない • サンプルのライセンスや利用方法が難しい

Slide 22

Slide 22 text

#vivliostyle パパっと本を作るための情報が少ない • VivliostyleでGoogle検索 • 「Vivliostyleで本を作ってみた」的なユーザー目線の情報が少ない • 開発者のディープな情報が目立つ – 検索上位にくる必要はなし？

Slide 23

Slide 23 text

#vivliostyle Vivliostyle Viewerへの印象 • 検索では「Vivliostyle Viewer」の説明が目立つが、ユーザーはビューワーの情報が知りたいのではなく書籍制作の方法が知りたい • 「よくわからんけど重要そうなんだな」と思い、ローカルで環境を作るも、「で、本を作るにはこれからどうしたらいいんだっけ？」と思い、しばらく悩む

Slide 24

Slide 24 text

#vivliostyle 乗り越え方 • ローカルの環境でVivliostyle Viewerで表示させて、いろいろ触りながら動かすことで理解していった • 別の問題として、当時ドキュメントが、自分がDLした最新安定版ではなく最新開発版に合わせたものになっていて、混乱があったのもある

Slide 25

Slide 25 text

#vivliostyle サンプルのライセンスや利用方法が難しい • サンプルのページを見てみた • 使いたいサンプルがあったがライセンスの記載がない • 利用してよいにしても、利用方法が分からない https://vivliostyle.org/ja/samples/

Slide 26

Slide 26 text

#vivliostyle ライセンスについて • ライセンスがよくわからないので村上真雄さんに質問 • 「Vivliostyleプログラムと同じAGPLの扱い」とのご回答をいただく https://twitter.com/MurakamiShinyu/status/ 1210447092440686592

Slide 27

Slide 27 text

#vivliostyle AGPL……!? • AGPLが分からないのでググってみる • Qiita記事*に「AGPL のライセンスの OSS を使う場合には、すべてをさらけだす覚悟が必要」「現時点で最強の Copyleft」という記載があり「AGPL 怖い！」 • 「プログラムを改変しても自分で使うだけなら公開の必要はない」と追加で教えていただく「オープンソースライセンス、どれなら使っても良いの？？ https://qiita.com/fate_shelled/items/a928709d7610cee

Slide 28

Slide 28 text

#vivliostyle 現在、追加でいただいたライセンスの最新情報 • 以前、VivliostyleはApache 2.0ライセンスで作られ、サンプルも同ライセンス下にある – 使用、商用利用、改変、複製、公開などが可能 • ユーザーが自由に使えるようにライセンスの見直しが検討されている

Slide 29

Slide 29 text

#vivliostyle 利用方法が分からない • サンプルのページから、どのようにサンプルを取得すればいいか分からない • GitHubで、Vivliostyleのドキュメントをホスティングしているリポジトリにアクセスし、そこからZipで取ってくるしかなさそう？ https://vivliostyle.org/ja/samples/

Slide 30

Slide 30 text

#vivliostyle とはいえスピーディーに制作できた • サンプルを改変したり、奥付など必要なパーツを他のサンプルから取ってきたりしながらスムーズに制作 • 詳しくは寄稿記事を参照 https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-gro up-vol3/kondoyuko/index.html

Slide 31

Slide 31 text

#vivliostyle Vivliostyleコミュニティへの提言

Slide 32

Slide 32 text

#vivliostyle Vivliostyleコミュニティがさらに発展するために • 現在、Vivliostyleの仕様や開発者向け情報が多い印象 • 「本を作りたい」というユーザー目線の情報がもっと増えてほしい＋ユーザーから生まれてほしい – プロダクトとしてはWeb出版を意識するにしても、今は紙/PDFの本を作る目線の情報発信でよさそう

Slide 33

Slide 33 text

#vivliostyle 参考になりそうな知見 • DevRel（デブレル）：Developer Relationsの略 • DevRel：開発者向け共創マーケティング – OSS発展にも役立つところがありそう • DevRelの「3C」を用いた提案 – Code、Contents、Community https://www.amazon.co.jp/dp/B07X8SD4PP/

Slide 34

Slide 34 text

#vivliostyle Code：ソースコードや技術的リソース • ワンストップなサンプル – 目次、奥付、トンボなどが標準装備されている • メインターゲットとなるユーザーに向けたサンプル – TechBooster/ReVIEW-Templateのような技術書ライクなサンプル

Slide 35

Slide 35 text

#vivliostyle Contents：ドキュメントやブログ • Getting Started的な内容 – Vivliostyleを用いたベーシックな書籍制作のチュートリアルがあると良さそう • 制作事例の発信 – 『Vivliostyleで本を作ろう』のメイキングなど • 開発者エクスペリエンスが高いチュートリアル – CI/CDツールとの連携など

Slide 36

Slide 36 text

#vivliostyle Community：コミュニティ • ハンズオン動画の公開 • 関連コミュニティへの参加・登壇 – 技術同人誌、組版、Web標準etc… • ユーザーを巻き込む（今回の私のケースなど）

Slide 37

Slide 37 text

#vivliostyle まとめ

Slide 38

Slide 38 text

#vivliostyle Vivliostyleの可能性 • 短期間で書籍制作ができる • カスタマイズ性が高い • Web制作やデザイナー系、非エンジニアのユーザーも狙えそう

Slide 39

Slide 39 text

#vivliostyle コミュニティへの提言 • プロダクトセントリックからユーザーセントリックへ • 本を作りたい人目線の情報発信が増えることで、 Vivliostyleで本を作る人が増えることを願っています