Vivliostyleの公式テーマをカスタマイズして、ゆめみ大技林 '22のテーマを作った

2022/12/18に開催された2022年12月-Vivliostyle開発者会議で登壇した際の資料。
https://vivliostyle.connpass.com/event/269454/

Transcript

1. Vivliostyle
   
   
   
   
   '22
   2022 12 -Vivliostyle
   

   2022/12/18
   
   
   macneko_ayu
   

   View Slide

2. 
   
   Twitter: @macneko_ayu
   
   
   iOS
   
   
   iOS DTP
   
   
   PEAKS
   iOS 3
   
   
   

   View Slide

3. View Slide

4. 
   
   
   
   Zenn Vivliostyle
   '22
   

   View Slide

5. View Slide

6. 22
   iOS
   13
   
   
   Vivliostyle
   22
   https://techbookfest.org/product/
   9
   g
   7
   iLPz
   8
   dzmL
   2
   QrrbedbxG?productVariantID=gfsBNShXyWyxHiubY
   2
   f
   1
   m
   7
   

   View Slide

7. View Slide

8. 
   
   
   
   1
   C
   
   
   Markdown
   
   
   
   CSS
   

   View Slide

9. tech-book B
   5
   A
   5
   
   
   
   
   
   
   
   
   
   etc.
   

   View Slide

10. A
    5
    
    
    
    
    
    
    
    

    View Slide

11. _variables.scss A
    5
    

    View Slide

12. _variables.scss
    
    
    InDesign
    CSS
    

    View Slide

13. _variables.scss
    
    
    

    View Slide

14. 
    
    _media.scss _counter.scss
    

    View Slide

15. _base.scss 0.2em
    

    View Slide

16. pre
    CSS
    
    
    https://lab.syncer.jp/Web/CSS/Snippet/
    1 1
    /
    
    
    URL
    FIX
    

    View Slide

17. 1
    C
    1C PDF
    1C
    
    
    
    
    _variables.scss
    

    View Slide

18. 1
    C
    _variables.scss
    
    
    _variables.scss if
    $print-mode 1C 4C
    

    View Slide

19. 1
    C
    

    View Slide

20. Markdown
    
    
    Markdown
    _base.scss CSS
    
    
    https://vivliostyle.org/ja/tutorials/con
    fi
    gure-page-text/
    #%E
    3
    %
    83
    %
    9
    A%E
    3
    %
    83
    %BC%E
    3
    %
    82
    %B
    8
    %E
    3
    %
    8 1
    %AE
    %E
    5
    %A
    7
    %
    8
    B%E
    3
    %
    81
    %BE%E
    3
    %
    82
    %
    8
    B%E
    5
    %
    81
    %B
    4
    

    View Slide

21. Markdown
    
    
    

    View Slide

22. Vivliostyle Vol.
    5
    
    
    
    https://docs.vivliostyle.org/#/ja/create-
    book#%E
    5
    %A
    5
    %A
    5
    %E
    4
    %BB%
    98
    %E
    3
    %
    8
    1
    %AE%E
    8
    %BF%BD%E
    5
    %
    8
    A%A
    0
    
    Vivliostyle Vol.
    5
    
    https://vivliostyle.org/ja/samples/
    #:~:text=Vivliostyle%
    2 0
    %E
    3
    %
    81
    %A
    7
    %E
    6
    %
    9
    C%AC%E
    3
    %
    8 2
    %
    9 2
    %E
    4
    %BD%
    9
    C%E
    3
    %
    8 2
    %
    8
    D%E
    3
    %
    81
    %
    86
    %
    2 0
    Vol.
    5
    

    View Slide

23. Markdown
    

    View Slide

24. _theme_common.scss
    
    
    

    View Slide

25. CSS
    
    
    Vivliostyle: PDF
    CSS
    
    
    https://zenn.dev/sky_y/articles/markdown-
    advent-
    2
    0 20
    -
    vivliostyle
    4
    #%E
    3
    %
    8
    3
    %
    86
    %E
    3
    %
    8
    3
    %BC%E
    3
    %
    8 3
    %
    9
    E%
    E
    3
    %
    82
    %
    92
    %E
    3
    %
    82
    %B
    3
    %E
    3
    %
    83
    %
    9
    4
    %E
    3
    %
    8 3
    %BC%E
    3
    %
    8 1
    %
    9 7
    %E
    3
    %
    81
    %A
    6
    css%E
    3
    %
    8
    2
    %
    92
    %E
    8
    %BF%BD
    %E
    8
    %A
    8
    %
    9
    8
    %E
    3
    %
    8
    1
    %
    9 9
    %E
    3
    %
    8 2
    %
    8
    B
    

    View Slide

26. CSS
    _base.scss CSS
    
    
    Markdown
    HTML
    

    View Slide

27. CSS
    CSS
    
    
    

    View Slide

28. 
    
    
    
    
    
    
    https://zenn.dev/macneko/articles/
    06
    aec
    1
    3
    8
    a
    3 57
    b
    9
    #%E
    7
    %AB%A
    0
    %E
    3
    %
    82
    %BF%E
    3
    %
    8
    2
    %A
    4
    %E
    3
    %
    8 3
    %
    8 8
    %E
    3
    %
    8
    3
    %AB%E
    3
    %
    81
    %AB%E
    9
    %A
    3
    %BE%E
    3
    %
    82
    %
    8
    A%E
    3
    %
    82
    %
    92
    %E
    3
    %
    81
    %
    84
    %E
    3
    %
    82
    %
    8
    C%E
    3
    %
    8 2
    %
    8
    B
    

    View Slide

29. View Slide

30. 
    
    
    Vivliostyle
    
    
    CSS
    
    
    

    View Slide

31. 
    
    Class
    

    View Slide

32. Vivliostyle
    
    
    
    
    
    Vivliostyle
    
    
    FIX
    

    View Slide

33. CSS
    HTML HTML
    
    
    

    View Slide

34. View Slide

35. 22
    
    
    Vivliostyle
    
    
    
    
    Vivliostyle
    

    View Slide

36. View Slide