Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS組版おもしろい!

3d1621a44968b7b2f7cf8907b3a3645b?s=47 at_grandpa
September 03, 2018

 CSS組版おもしろい!

技術同人誌再販Night★#2 #技術書典 #夏コミの技術書が集合&LT
https://techbook-and-ethanol.connpass.com/event/92807/

で発表したLT資料です。

3d1621a44968b7b2f7cf8907b3a3645b?s=128

at_grandpa

September 03, 2018
Tweet

Transcript

  1. CSS組版おもしろい! 2018.09.03 @at_grandpa 技術同人誌再販Night★#2

  2. @at_grandpa

  3. 圧倒亭グランパのブログ

  4. 技術書典4にて頒布 おかげさまで完売しました ※本日、頒布しています “におうコードの問題集 booth (pdf|冊子)”
 で検索

  5. 執筆環境、どうしていますか?

  6. ✔ Re:VIEW ? ✔ Word ? ✔ Google Docs ?

    ✔ Gitbook ?
 ✔ 手書き ?
  7. 技術書典4の執筆環境 ✔ Re:VIEW
  - Docker上でpdfのbuild  - github管理できる  - textlintなどの校正ツールを使える  -

    ciを回せる   - textlint   - 使用コードのテスト
  8. 実際のpdf

  9. が!

  10. 問題集っぽくない!

  11. こういうことしたい Chapter1 におうコードの問題集 におうコードの問題集 ここが重要! 問題1 コラム • コラム •

    class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr
  12. こういうことしたい Chapter1 におうコードの問題集 におうコードの問題集 ここが重要! 問題1 コラム • コラム •

    class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい
  13. こういうことしたい Chapter1 におうコードの問題集 におうコードの問題集 ここが重要! 問題1 コラム • コラム •

    class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい 見出しをカッコよくしたい
  14. こういうことしたい Chapter1 におうコードの問題集 におうコードの問題集 ここが重要! 問題1 コラム • コラム •

    class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい 見出しをカッコよくしたい 問題集っぽくしたい
  15. こういうことしたい Chapter1 におうコードの問題集 におうコードの問題集 ここが重要! 問題1 コラム • コラム •

    class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい 見出しをカッコよくしたい 問題集っぽくしたい 箇条書きの アイコンを いい感じに したい
  16. こういうことしたい Chapter1 におうコードの問題集 におうコードの問題集 ここが重要! 問題1 コラム • コラム •

    class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい 見出しをカッコよくしたい 問題集っぽくしたい 箇条書きの アイコンを いい感じに したい コラムとかも楽しげにしたい
  17. こういうことしたい Chapter1 におうコードの問題集 におうコードの問題集 ここが重要! 問題1 コラム • コラム •

    class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい 見出しをカッコよくしたい 問題集っぽくしたい 箇条書きの アイコンを いい感じに したい コラムとかも楽しげにしたい コードも綺麗に表示したい
  18. とにかくいい感じにしたい

  19. そこで

  20. Re:VIEW + CSS組版

  21. Re:VIEW + CSS組版 ✔ Re:VIEWのいいとこそのまま  - github管理できる  - textlintなどの校正ツールを使える  -

    ciを回せる ✔ CSSの自由度で組版  - Webレイアウトのように組版  - Chrome Dev Tools で微調整
  22. Re:VIEW + CSS組版 ✔ わかめさんのリポジトリ  - github → vvakame/review-css-typesetting  -

    整いつつある ✔ 簡単に構築できるようにした  - make と docker さえあれば OK  - コマンド1つでpdf出力  - コマンド1つでブラウザで確認  - ci回せる
  23. Re:VIEW + CSS組版 http://at-grandpa.hatenablog.jp/entry/2018/08/20/121043 詳しくはブログで! [Re:VIEW CSS組版 簡単] で検索

  24. None
  25. None
  26. デモ (時間があれば) LT後も、興味がある方は気軽にお声掛けください

  27. まとめ ✔ Re:VIEW+CSS組版を簡単に!  - コマンドひとつで pdf & ブラウザ確認 ✔ CSS組版広まって欲しい

     - デザイン豊富な同人誌が増えるのでは?
  28. 技術書典5で会いましょう