HTML帳票 / Frontend Study Group in Sannin 3rd

第3回フロントエンド勉強会 in 山陰で HTML帳票について発表した際の狭く浅い資料。資料中のサンプルコードは下記にある。
https://github.com/hidakatsuya/html-chohyo

Transcript

1. HTMLாථ
   ୈ3ճϑϩϯτΤϯυษڧձ in দߐ
   Katsuya Hidaka
   
   @hidakatsuya
   

   View Slide

2. View Slide

3. View Slide

4. ாථϚϯΒ͘͠

   ϑϩϯτΤϯυͬΆ͍
   ாථͷ࿩Λͯ͠Έ·͢
   

   View Slide

5. PDFாථ
   • αʔόʔαΠυ
   
   • ྫ͑͹ Ruby ͩͱ
   
   • Thinreports, Prawn
   
   • wkhtmltopdf, WickedPDF
   

   View Slide

6. HTMLாථ
   • ϑϩϯτΤϯυͷٕज़ͰாථΛ࡞੒͢Δ
   
   • ϒϥ΢βͷҹ࡮ػೳͰҹ࡮͢Δ
   

   View Slide

7. ாථػೳͷཁ݅
   • ඞཁͳσβΠϯΛදݱͰ͖Δ
   
   • ਖ਼͘͠ҹ࡮Ͱ͖Δ
   
   • ҹ࡮ΛίϯτϩʔϧͰ͖Δ
   
   • ༻ࢴαΠζɺ༨നͳͲ
   
   • ্ه͕े෼ͳϒϥ΢βͰ࣮ݱͰ͖Δ
   

   View Slide

8. ඞཁͳσβΠϯΛදݱͰ͖Δ
   • HTML, CSS, JavaScript, ը૾(SVG) ͰͳΜͱͰ΋ͳΔ
   
   • 1pxະຬͷܩઢ͸දݱͰ͖ͳ͍
   
   • ҹ࡮΋Ͱ͖ͳ͍
   

   View Slide

9. ਖ਼͘͠ҹ࡮Ͱ͖Δ
   • ϒϥ΢β/؀ڥʹΑͬͯද͕ࣔҟͳΔ৔߹͕͋Δ
   
   • ϑΥϯτपΓ͸ WebϑΥϯτΛ࢖͏ͱྑͦ͞͏
   
   • എܠ͸σϑΥϧτͰҹ࡮͞Εͳ͍
   
   • ϢʔβʹΑͬͯઃఆͷ༗ޮԽ͕ඞཁ
   
   • -webkit-print-color-adjust Ͱڧ੍తʹ༗ޮʹ͸Ͱ͖Δ
   

   View Slide

10. ҹ࡮ΛίϯτϩʔϧͰ͖Δ
    • ாථͷ༻ࢴαΠζͰͦͷ··ҹ࡮Ͱ͖Δʁ
    
    • Chrome ͸ҹ࡮࣌ʹ༻ࢴͷαΠζͰҹ࡮Ͱ͖Δɻૉ੖Β͍͠
    
    • Firefox/Safari ͸μϝɻϓϦϯλͷσϑΥϧτ༻ࢴʹͳΔͬΆ
    ͍ɻIE/Edge ͸Έͯͳ͍
    
    • ҹ࡮࣌ʹ༨ܭͳ৘ใ͕ҹࣈ͞Εͳ͍ʁʢϔομʔͱ͔ʣ
    
    • Chrome/Firefox ͸ @page Ͱ margin:0 ʹ͢Ε͹OK
    
    • Safari ͸μϝɻIE/Edge ͸Έͯͳ͍
    

    View Slide

11. ࣮ࡍʹΈͯΈ·͠ΐ͏
    ͜ͷͱ͖࢖༻ͨ͠ίʔυ͸Լهʹஔ͍ͯ͋Γ·͢
    https://github.com/hidakatsuya/html-chohyo
    

    View Slide

12. cognitom/paper-css
    • ࢓૊Έ͸͜ͷϥΠϒϥϦͱ΄
    ͱΜͲಉͩ͡ͱࢥ͏ɻ࢖͍ํ
    ΋͍͍ͩͨಉ͡
    
    • ͋Β͔ͨ࡞Γऴ͑ͨͱ͜ΖͰ
    ͜ΕΛݟ͚ͭͯઈ๬ͨ͠…
    
    • Έͳ͞Μ͸ͪ͜ΒΛ࢖͍·͠ΐ
    ͏ɻ࢖͍΍ͦ͢͏
    

    View Slide

13. ͦͷଞͷݒ೦ࣄ߲
    • 1ϖʔδʹऩ·Βͳ͍৔߹ͷվϖʔδ
    
    • ঺հͨ͠ํ๏Ͱ͸ᷓΕͨ಺༰͸ҹ࡮͞Εͳ͍
    
    • JavaScript Ͱߴ͞Λܭࢉͯ͠ sheet Λ͍͍ײ͡ʹ͢Δ... ͳͲͷ޻෉͕ඞཁ
    
    • ϔομʔ/ϑολʔɺϖʔδ൪߸ͷ࣮ݱ
    
    • ͳΜͱͰ΋ͳΔͱࢥ͏ɻ position: fixed ͱ͔΋࢖͑Δ
    
    • ෳ਺༻ࢴαΠζͷࠞࡏ
    
    • Ͱ͖ͳ͍ɻҰ൪େ͖͍༻ࢴαΠζʹ߹͏ʁ
    
    • େྔϖʔδͷ৔߹ͷϨϯμϦϯάύϑΥʔϚϯε
    
    • ҹ࡮͢Δʹ͸࣮ࡍʹϨϯμϦϯά͞Ε͍ͯͳ͍ͱ͍͚ͳ͍
    
    • ਺ඦϖʔδͳͲͷ৔߹ɺϓϨϏϡʔͷ޻෉͕ඞཁʢεΫϩʔϧ࣌΍ҹ࡮࣮ߦ࣌ͷϩʔυॲཧͱ͔ʣ
    

    View Slide

14. ࢀߟʹ͍ͨ͠Ζ͍Ζ
    • ͦΖͦΖਅ໘໨ʹɺHTMLͰாථΛඳ͘࿩Λ͠Α͏͔/
    Qiita

    https://qiita.com/cognitom/items/d39d5f19054c8c8fd592
    
    • paper-css/Github

    https://github.com/cognitom/paper-css
    
    • Paged Media/w3c

    https://drafts.csswg.org/css-page-3/ (ඇެࣜ೔ຊޠ༁)
    

    View Slide

15. ·ͱΊ
    • ͋Δఔ౓ͷ੍໿Λڐ༰Ͱ͖ΔͳΒे෼࢖͑ͦ͏ͱ͜Ζ·Ͱ
    དྷ͍ͯΔͱࢥ͏
    
    • Electron ΞϓϦͰ͸ϒϥ΢βͷҧ͍ʹӨڹ͞Εͳ͍ͷͰྑ
    ͍બ୒ࢶ͔΋͠Εͳ͍
    
    • ҹ࡮Ͱ͖Δ͔΋ؚΊͯະௐࠪ
    
    • ॳΊͯ CSS Paged Media ΛͪΌΜͱಡΜ͕ͩ໘ന͔ͬͨ

    https://drafts.csswg.org/css-page-3/ (ඇެࣜ೔ຊޠ༁)
    

    View Slide