Railsでつくる 画像アップロード 2017 #railsdm /rails_developers_meetup6_image_upload

816bbae7565a32c965dd895b74dcf5b0?s=47 matsuhisa
October 19, 2017

Railsでつくる 画像アップロード 2017 #railsdm /rails_developers_meetup6_image_upload

816bbae7565a32c965dd895b74dcf5b0?s=128

matsuhisa

October 19, 2017
Tweet

Transcript

  1. 3BJMTͰͭ͘Δ ը૾Ξοϓϩʔυ גࣜձࣾΈΜͳͷ΢ΣσΟϯά দٱߒ৳

  2. w גࣜձࣾΈΜͳͷ΢ΣσΟϯά
 ΢ΣϒΞϓϦέʔγϣϯΤϯδχΞ w 5XJUUFSɿ!LBNPOFHJ w IUUQXXXqJDLSDPNQIPUPTNBUTVIJTB দٱɹߒ৳

  3. "HFOEB ͖͔͚ͬ ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ ·ͱΊ 3BJMTͰͭ͘Δը૾Ξοϓϩʔυ

  4. "HFOEB ͖͔͚ͬ ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ ·ͱΊ 3BJMTͰͭ͘Δը૾Ξοϓϩʔυ

  5. ͖͔͚ͬ w 1FSMͷಠࣗϑϨʔϜϫʔΫ ʢ.PCB4J'ʣ͔Β3BJMTʹҠߦத w ʮը૾ʯΞοϓϩʔυػೳͷҠߦ ͕ඞཁ w ޱίϛɺඅ༻໌ࡉը૾ɺࣸਅͳ Ͳ

    w 3BJMTͰը૾Ξοϓϩʔυͬͯ࡞ͬ ͨ͜ͱ͚͋ͬͨͬʁ αʔϏεͷ3BJMTҠߦͷܭը
  6. ͖͔͚ͬ w ՖՇՖ໇ʢϢʔβʣ͕ར༻͢Δશը໘਺ʹରͯ͠໿͙Β͍ɻ
 ը૾͋ΓͷϑΥʔϜ͸ɺશը໘਺ʹରͯ͠໿͙Β͍ w ը૾͋ΓͷϑΥʔϜΛ࡞Γ௚ͨ͠هԱ͕ͳ͍ʢ͜ͷ೥͙Β͍ʣ w ը૾͋ΓͷϑΥʔϜΛ৽نͰ࡞ͬͨهԱ͕ͳ͍ ϑΥʔϜΛ࡞Δػձ͸ଟ͘ͳ͍

  7. ͖͔͚ͬ w 3BJMT͔Βඪ४ʹͳΔHFN w ೥݄೔ʹ%))͕౜ಥʹʜ w ΋͏ɺ$MPVE4UPSBHF͸౰ͨΓલͩΑͶɺͱ͍͏ࢥ͍Λײ͡Δ w ฐࣾ΋ɺ4ʢ"84ʣΛར༻த w

    ($1ʢ(PPHMF$MPVE1MBUGPSNʣʹ͸ը૾ͷϦαΠζػೳ͕͋Δ͠ɺ ഑৴΋OHJOYΛ௨ͯ͠ϦαΠζ͠ͳͯ͘΋͍͍͔΋͠Εͳ͍ "DUJWF4UPSBHFͷొ৔
  8. ͖͔͚ͬ w ੲ࡞ͬͨͷ͸ɺ1$޲͚ͩͬͨɻεϚʔτϑΥϯͩͱԿ͕՝୊ͩΖ͏ʁ w ϑΝΠϧ͋ͨΓͷϑΝΠϧ༰ྔɻʙ.#͙Β͍ w ը໘αΠζ΋QYӽ͕͑͋Δ w ωοτϫʔΫճઢͷߟྀɻςετͷ࣌ʹɺ(ճઢͰࢼͯ͠Δʁ w

    Ճ޻πʔϧͰՃ޻͞ΕͨϑΝΠϧ΋Ξοϓϩʔυ͞ΕΔ w ʮΠϯελө͑ʯΛૂͬͨࣸਅ΋૿͍͑ͯͦ͏ εϚʔτϑΥϯ࣌୅ͷϑΝΠϧΞοϓϩʔυ
  9. ͖͔͚ͬ w εϚʔτϑΥϯͰͷը૾ΞοϓϩʔυΛ࡞ͬͨ͜ͱ͕ͳ͍ͷͰ஌Γ͍ͨ w 3BJMT΁ͷγεςϜҠߦ΋͋ΔͷͰௐ΂͓͖͍ͯͨ w ࠷ऴతʹɺHFNΛ࢖͏ͱͯ͠΋ɺͲΜͳࣄ͕ى͖ͯΔ͔஌Γ͍ͨ w $MPVE4UPSBHFશ෦Ͱ͸ͳͯ͘΋ɺ4ͰͷϑΝΠϧΞοϓϩʔυΛࢼ͠ ͍ͨ

    ͖͔͚ͬͷ·ͱΊ
  10. ͖͔͚ͬ ͖͔͚ͬͷ·ͱΊ Ϗδωεཁ݅ ػձ 3BJMT  Ϋϥ΢υ εϚʔτϑΥϯ ࣗ਎ͷܦݧෆ଍ ςΫϊϩδʔͷมԽ

  11. "HFOEB ͖͔͚ͬ ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ ·ͱΊ 3BJMTͰͭ͘Δը૾Ξοϓϩʔυ

  12. ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ w ը૾ϑΝΠϧͷWBMJEBUF w ը૾ͷछྨɺϑΝΠϧ༰ྔ w ը૾ʹ·ͭΘΔϞσϧͷWBMJEBUF w ը૾ͷઆ໌ςΩετɺλά෇͚ w

    ެ։ɺඇެ։ w ηΩϡϦςΟʔʹؔ͢Δ͜ͱ ը૾Ξοϓϩʔυࣗମ
  13. ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ w Ͳ͏΍ͬͯࢀরͤ͞Δ͔ʁ w ϦαΠζ͸͍ͭ͢ΔʁΞοϓϩʔυ࣌ʁࢀরͷ࣌ʁ w Ξοϓϩʔυ࣌ͩͱΞοϓϩʔυͷ͕࣌ؒ૿͑Δ w ࢀরͷ࣌ͩͱճ໨ͷϦαΠζ͸Ͳ͏ͳΔʁ w

    ϦαΠζ͸ࣗࣾʁαʔϏεΛར༻͢Δʁ w *NBHF'MVYʢ͘͞ΒΠϯλʔωοτʣͳͲ ը૾ͷࢀর
  14. ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ w ࠓ·Ͱ͋Ε͹αʔϏεӡӦΛ͍ͯ͠Δαʔόʔ্ w ΞϓϦέʔγϣϯαʔόʔͱ͔ʁετϨʔδαʔόʔͱ͔ʁ w Ϋϥ΢υετϨʔδΛར༻͢Δ͜ͱ͕૿͑ͨ w "84ɺ($1ɺ"[VSFͳͲ ը૾ϑΝΠϧͷஔ͖৔ॴ

  15. ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ มΘΒͳ͍ϙΠϯτɺมԽͨ͠ϙΠϯτ ϑΝΠϧ Ξοϓϩʔυ ը૾ͷࢀর Ϋϥ΢υ ετϨʔδ ैདྷͱ͋·ΓมԽͳ͠ ೥

  16. "HFOEB ͖͔͚ͬ ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ ·ͱΊ 3BJMTͰͭ͘Δը૾Ξοϓϩʔυ

  17. 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ ΫοΫύου

  18. 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ w Ξοϓϩʔυ͢ΔͱϓϨϏϡʔ͞ΕΔ w Ξοϓϩʔυ͠ͳ͕Βೖྗ͕Ͱ͖Δ w ॻ͖͔͚Ͱ΋ࣗಈͰԼॻ͖ͱͯ͠อଘ͞Ε͍ͯΔɻը૾΋ɻ w ະެ։ͷϨγϐͷը૾΋63-͕Θ͔Ε͹ΞΫηεͰ͖Δ ΫοΫύου

  19. 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ FTB

  20. 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ w Ξοϓϩʔυ͞ΕͨΒɺ.BSLEPXOܗࣜͰૠೖ͞ΕΔ w Ξοϓϩʔυ͠ͳ͕Βೖྗ͕Մೳ w ϓϨϏϡʔػೳ͕ผͰ͋ΔͷͰɺͦ͜ͰϓϨϏϡʔʹͳΔ w 1$ͩͱ w

    υϥοΫˍυϩοϓͰϑΝΠϧΞοϓϩʔυ͕࢝·Δ w ෳ਺ͷϑΝΠϧΛಉ࣌ʹΞοϓϩʔυͰ͖Δ FTB
  21. 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ ؾʹͳͬͨϙΠϯτ ϓϨϏϡʔ υϥοά
  υϩοϓ ඇಉظ ैདྷͱ͋·ΓมԽͳ͠ ೥ʁ

  22. "HFOEB ͖͔͚ͬ ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ ·ͱΊ 3BJMTͰͭ͘Δը૾Ξοϓϩʔυ

  23. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w 3BJMT͔Βಋೖ w MPDBMUSVFʹ͠ͳ͍ͱࠓ·ͰͷΑ͏ͳಈ࡞͠ͳ͍ͷͰযͬͨʜ GPSN@XJUI = form_with model: @images,

    url: confirm_images_path, local: true do |f| - if @images.errors.any? %h2= "#{pluralize(@images.errors.count, "error")} saved:" %ul - @images.errors.full_messages.each do |message| %li= message
  24. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w .BDͰ͋Ε͹ɺCSFXͰΠϯετʔϧՄೳ w ඞཁͳHFN͸Լهͷ௨Γ )FBEMFTTCSPXTFS brew install chromedriver ChromeDriver

    2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b) group :development, :test do gem 'capybara' gem 'selenium-webdriver' end
  25. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ )FBEMFTTCSPXTFS require 'capybara' require 'capybara/dsl' require 'selenium-webdriver' Capybara.register_driver :selenium

    do |app| Capybara::Selenium::Driver.new(app, browser: :chrome, desired_capabilities: Selenium::WebDriver::Remote::Capabilities.chrome( chrome_options: { args: %w(headless disable-gpu window-size=1680,1050), }, ) ) end
  26. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w ೥Ͱ΋มΘΒͳ͍ w Ұ෦ͷίϯςϯπͰɺ֬ೝը໘Λແ͕ͨ͘͠਺஋ͷมԽ͸ͳͦ͞͏ ը໘ભҠ ೖྗ ֬ೝ ׬ྃ

  27. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w "DUJPO%JTQBUDI)UUQ6QMPBEFE'JMFͷ͜ͱΛ๨Ε͕ͪ w ςΩετ΍਺஋ͳͲଘࡏҎ֎Λ๨Ε͕ͪʜ w 7BMJEBUF͕࣠ʹͳΔ w ը૾ϑΝΠϧࣗମʢϑΝΠϧ༰ྔɺछྨͳͲʣ w

    ը૾ͱඥͮ͘৘ใʢը૾ͷઆ໌ͱ͔ʣ w ϑΥʔϜΦϒδΣΫτͰॲཧ͢Δͱྑͦ͞͏ w ʮGPSNPCKFDUΛ࢖ͬͯΈΑ͏ϝυϐΞ։ൃऀϒϩάʯʢ!XJMMOFUʣ 4UFQ̍ɿQVCMJDʹը૾Ξοϓϩʔυ
  28. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w 4ʹ͍ͭͯ஌Δඞཁ͕͋Δ w ೝূʹ͍ͭͯͷཧղɻDSFEFOUJBMTɺ*".ͳͲ w όέοτࣗମͷΞΫηε੍ޚ w ϋϚΓ·ͨ͠ʜ w

    ςετͰ͸΢ΣϒϞοΫʹ͍ͭͯ஌Δඞཁ͕͋Δ w 4ʹςετͰΞοϓϩʔυ͸ͨ͘͠ͳ͍ʢ΍ͬͯͨʜʣ 4UFQɿ4ʹը૾Ξοϓϩʔυ
  29. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w ϑΝΠϧΞοϓϩʔυʹ࣌ؒ ͕͔͔Δؾ͕͢Δ w αʔόʔܦ༝Ͱɺ4Ξοϓ ϩʔυ͍ͯ͠Δ 4UFQɿ໰୊ൃੜʁ IUUQEPDTBXTBNB[PODPNKB@KQ"NB[PO4MBUFTUEFW6TJOH)5511045IUNM

  30. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w 4ʹ͸+BWB4DSJQU͔ΒͰ΋ΞοϓϩʔυͰ͖Δํ๏͕͋Δ w ($1"[VSFʹ΋͋ΔʢΈ͍͚ͨͩΕͲࢼ͍ͯ͠ͳ͍ʣ w ྲྀΕ w +BWB4DSJQUͰɺϑΝΠϧʹ͍ͭͯ৘ใΛऔಘ w

    αʔόʔଆʹ1PTUͯ͠4ʹඞཁͳҰ࣌తͳೝূ৘ใΛฦ͢ w +BWB4DSJQUͰೝূ৘ใΛར༻ͯ͠4ʹ1PTU w $BMM#BDLΛར༻ͯ͠ॲཧ 4UFQɿμΠϨΫτΞοϓϩʔυʢ4ʣ
  31. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w ͭͷϑΝΠϧΛΞοϓ͢Δͷ͸Ͱ͖ͨ w NVMUJQMFΛར༻ͯ͠ΈΔͱɺඇಉظॲཧΛߟ͑Δඞཁ͕ग़ͯ͘Δ w K2VFSZͰ%FGFSSFE1SPNJTFΛ࢖͏ 4UFQɿෳ਺ϑΝΠϧͷΞοϓϩʔυ

  32. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ w ೥ͳͷͰK2VFSZ΍Ίͯ&$."4DSJQUʢ&4ʣ͚ͩͰ࣮૷ w 3FBDUͱ͔7VFͳͲͱͷ૊Έ߹Θͤ΋͋Δʁ w )5.-͔Β͋Δ'JMF"1*Λ࢖͏ͱʜ w αϜωΠϧ͸؆୯ʹͰ͖Δ w

    1$ͩͱυϥοάˍυϩοϓͰϑΝΠϧΞοϓϩʔυ w -JWF1IPUPTͳͲͷ৽͍͠ը૾ϑΥʔϚοτͷଘࡏ 4UFQɿ&$."4DSJQU΍'JMF"1*ͳͲ
  33. 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ ٕज़ͷੵΈॏͶͱମݧ 3BJMT 4ͳͲ +BWB4DSJQU &4)5.- (SBQI2-ʁ Ϣʔβମݧ

  34. "HFOEB ͖͔͚ͬ ը૾ΞοϓϩʔυͰߟ͑ΔϙΠϯτ 6*͔Βߟ͑Δ೥ͷը૾Ξοϓϩʔυ 3BJMTͰը૾ΞοϓϩʔυΛ࡞Δ ·ͱΊ 3BJMTͰͭ͘Δը૾Ξοϓϩʔυ

  35. 3BJMTͰը૾Ξοϓϩʔυ w ೥ʹը૾ΞοϓϩʔυΛ࡞Δͱͨ͠ΒʁΛߟ͑Δͱʜ w Ξοϓϩʔυ͚ͩͳΒ3BJMT Ϋϥ΢υετϨʔδͰ࣮ݱՄೳ w Ϣʔβମݧ΋ߟ͑Δͱɺ3BJMTҎ֎ͷٕज़஌͕ࣝඞཁ w 0+5ʹ࠷ద͔΋ʢ͠Εͳ͍͕ɺҊ͕݅গͳ͍ʣ

    w HFNΛར༻͢Δͱͯ͠΋ɺ࣮૷Λߟ͑ͯΈΔͱHFNͷબఆ͕มΘΔ͔ ΋͠Εͳ͍ ·ͱΊ
  36. ·ͱΊ w ༥͚ΔσβΠϯ w ΢Σϒ͚ͩ͡Όͳ͘ɺΞϓϦ ΋ؚΊͯߟ͑ΔͱɺΞοϓϩʔ υ͢Δɺͱ͍͏ߦҝ͕ແ͘ͳ Δ ࢀߟॻ੶