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

HTML帳票 / Frontend Study Group in Sannin 3rd

HTML帳票 / Frontend Study Group in Sannin 3rd

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

Katsuya Hidaka

December 10, 2017
Tweet

More Decks by Katsuya Hidaka

Other Decks in Technology

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