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

初心者から見た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/
での発表資料です。

D1379d198d492b4ef4ecad0b59910bb6?s=128

kondoyuko

April 04, 2020
Tweet

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で本を作る人が増えることを願っています