Save 37% off PRO during our Black Friday Sale! »

HTML帳票 / Frontend Study Group in Sannin 3rd

Bb364a1f9214f4a8d77a944d23679154?s=47 Katsuya Hidaka
December 10, 2017

HTML帳票 / Frontend Study Group in Sannin 3rd

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

Bb364a1f9214f4a8d77a944d23679154?s=128

Katsuya Hidaka

December 10, 2017
Tweet

Transcript

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

  2. None
  3. None
  4. ாථϚϯΒ͘͠
 ϑϩϯτΤϯυͬΆ͍ ாථͷ࿩Λͯ͠Έ·͢

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

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

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

    ্ه͕े෼ͳϒϥ΢βͰ࣮ݱͰ͖Δ
  8. ඞཁͳσβΠϯΛදݱͰ͖Δ • HTML, CSS, JavaScript, ը૾(SVG) ͰͳΜͱͰ΋ͳΔ • 1pxະຬͷܩઢ͸දݱͰ͖ͳ͍ •

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

    • -webkit-print-color-adjust Ͱڧ੍తʹ༗ޮʹ͸Ͱ͖Δ
  10. ҹ࡮ΛίϯτϩʔϧͰ͖Δ • ாථͷ༻ࢴαΠζͰͦͷ··ҹ࡮Ͱ͖Δʁ • Chrome ͸ҹ࡮࣌ʹ༻ࢴͷαΠζͰҹ࡮Ͱ͖Δɻૉ੖Β͍͠ • Firefox/Safari ͸μϝɻϓϦϯλͷσϑΥϧτ༻ࢴʹͳΔͬΆ ͍ɻIE/Edge

    ͸Έͯͳ͍ • ҹ࡮࣌ʹ༨ܭͳ৘ใ͕ҹࣈ͞Εͳ͍ʁʢϔομʔͱ͔ʣ • Chrome/Firefox ͸ @page Ͱ margin:0 ʹ͢Ε͹OK • Safari ͸μϝɻIE/Edge ͸Έͯͳ͍
  11. ࣮ࡍʹΈͯΈ·͠ΐ͏ ͜ͷͱ͖࢖༻ͨ͠ίʔυ͸Լهʹஔ͍ͯ͋Γ·͢ https://github.com/hidakatsuya/html-chohyo

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

    ͏ɻ࢖͍΍ͦ͢͏
  13. ͦͷଞͷݒ೦ࣄ߲ • 1ϖʔδʹऩ·Βͳ͍৔߹ͷվϖʔδ • ঺հͨ͠ํ๏Ͱ͸ᷓΕͨ಺༰͸ҹ࡮͞Εͳ͍ • JavaScript Ͱߴ͞Λܭࢉͯ͠ sheet Λ͍͍ײ͡ʹ͢Δ...

    ͳͲͷ޻෉͕ඞཁ • ϔομʔ/ϑολʔɺϖʔδ൪߸ͷ࣮ݱ • ͳΜͱͰ΋ͳΔͱࢥ͏ɻ position: fixed ͱ͔΋࢖͑Δ • ෳ਺༻ࢴαΠζͷࠞࡏ • Ͱ͖ͳ͍ɻҰ൪େ͖͍༻ࢴαΠζʹ߹͏ʁ • େྔϖʔδͷ৔߹ͷϨϯμϦϯάύϑΥʔϚϯε • ҹ࡮͢Δʹ͸࣮ࡍʹϨϯμϦϯά͞Ε͍ͯͳ͍ͱ͍͚ͳ͍ • ਺ඦϖʔδͳͲͷ৔߹ɺϓϨϏϡʔͷ޻෉͕ඞཁʢεΫϩʔϧ࣌΍ҹ࡮࣮ߦ࣌ͷϩʔυॲཧͱ͔ʣ
  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/ (ඇެࣜ೔ຊޠ༁)
  15. ·ͱΊ • ͋Δఔ౓ͷ੍໿Λڐ༰Ͱ͖ΔͳΒे෼࢖͑ͦ͏ͱ͜Ζ·Ͱ དྷ͍ͯΔͱࢥ͏ • Electron ΞϓϦͰ͸ϒϥ΢βͷҧ͍ʹӨڹ͞Εͳ͍ͷͰྑ ͍બ୒ࢶ͔΋͠Εͳ͍ • ҹ࡮Ͱ͖Δ͔΋ؚΊͯະௐࠪ

    • ॳΊͯ CSS Paged Media ΛͪΌΜͱಡΜ͕ͩ໘ന͔ͬͨ
 https://drafts.csswg.org/css-page-3/ (ඇެࣜ೔ຊޠ༁)