$30 off During Our Annual Pro Sale. View Details »

Hotwire的な設計を追求して「Web紙芝居」に行き着いた話

Yasuko Ohba
October 28, 2023

 Hotwire的な設計を追求して「Web紙芝居」に行き着いた話

Kaigi on Rails 2023での「Hotwire的な設計を追求して「Web紙芝居」に行き着いた話」のトーク資料です。

Yasuko Ohba

October 28, 2023
Tweet

More Decks by Yasuko Ohba

Other Decks in Technology

Transcript

  1. )PUXJSFతͳઃܭΛ௥ٻͯ͠
    ʮ8FCࢴࣳډʯʹߦ͖ண͍ͨ࿩

    !OBZେ৔ೡࢠ

    View Slide

  2. ࣗݾ঺հ
    !OBZʢେ৔ೡࢠʣ
    גࣜձࣾສ༿ͷ૑ۀऀɾࣾ௕
    3BJMTΤϯδχΞ
    ઃܭɾ࣮૷େ޷͖ਓؒ
    ݩɾڝٕ͔ΔͨޒஈֆΛඳ͘ͷ͕޷͖

    View Slide

  3. גࣜձࣾສ༿
    3BJMTΛ࢖ͬͨ։ൃࢧԉͷ࿝ฮ
    ͍͍΋ͷΛɺͨͷ͘͠
    ϦϞʔτϫʔΫଟ͍
    ৽ೖࣾһڭҭ༻ΧϦΩϡϥϜ
    ສ༿OPUF
    ΤϯδχΞ࠾༻Λߦ͍ͬͯ·͢ʂʂ

    View Slide

  4. ສ༿͸)PUXJSFΛਪ͍ͯ͠·͢ʂ
    ։ൃҊ݅ʹ)PUXJSFΛ׆༻
    ݚڀɾ৘ใൃ৴׆ಈ
    ສ༿OPUF
    5VSCP)BOECPPLͷ຋༁

    View Slide

  5. 5VSCP)BOECPPL
    ೔ຊޠ༁αΠτΛެ։͠·ͨ͠
    IUUQTFWFSZMFBGHJUIVCJPIPUXJSF@KB

    View Slide

  6. ຋༁ϓϩδΣΫτ
    օ͞ΜͱҰॹʹ຋༁Λ͍͚ͯ͠ΔΑ͏ɺίϯτϦϏϡʔ
    γϣϯΨΠυͷࡦఆΛߦ͍ͬͯ͘༧ఆ
    ຋༁ͱ͍͏Ξϓϩʔν͔Β)PUXJSFͷཧղΛਂΊΒΕΔ
    ͝ڵຯͷ͋Δํ͸ͥͻҰॹʹ΍Γ·͠ΐ͏

    View Slide

  7. Ͱ͸ຊ୊

    View Slide

  8. ·ͣڭ͍͑ͯͩ͘͞

    View Slide

  9. ʲ࣭໰ʳ
    )PUXJSFΛ࢖ͬͯ
    ։ൃͨ͜͠ͱ͕͋Δํʁ

    View Slide

  10. ʲ࣭໰ʳ
    )PUXJSF
    ؾʹೖͬͯΔํʁ

    View Slide

  11. ʲ࣭໰ʳ
    )PUXJSF
    ਖ਼௚ͬ͘͠Γདྷ͍ͯͳ͍ํʁ

    View Slide

  12. )PUXJSFͱࢲ
    )PUXJSFΛ࢖ͬͨେ͖ΊͷΞϓϦ։ൃΛܦݧ
    ݁࿦ɺ)PUXJSFศརɹجຊతʹ)PUXJSFͰ࡞Γ͍ͨ
    Ͱ΋ɺબ୒ࢶ͕ଟͯ͘໎͏
    ࢖͍౗͠ͳ͕ΒɺϞϠϞϠͯ͠ɺ͍Ζ͍Ζߟ͑ͨ
    ͳΜ͔෼͔͖ͬͯͨؾ͕͢ΔͷͰͦΕΛڞ༗͍ͨ͠

    View Slide

  13. ࠓ೔ͷςʔϚ
    )PUXJSFΛ࢖͍౗͍ͯ͘͠தͰࣗ෼ͳΓʹൃݟͨ͠ઃ
    ܭࢦ਑ͱɺͦͷഎܠʹ͋Δੑ࣭ʹ͍ͭͯ࿩ͯ͠Έ͍ͨ
    ࢦ਑͕׆༻͞ΕΔ͜ͱͰʮ)PUXJSFͰ͏·͍͘͘ʯ
    έʔεΛ૿΍͍ͨ͠

    View Slide

  14. ໰͍
    8FCΞϓϦ͸Ͳ͏ͳΕ͹
    ʮ41"෩ͷ࢖͍উखʯ
    ʹͳΔʁ

    View Slide

  15. ͨ͑͜
    ը໘͕ͳΊΒ͔ʹߋ৽Ͱ͖Δ
    ը໘͕෦෼తʹߋ৽Ͱ͖Δʢෆศͳը໘มԽ͕
    ͳ͍ʣ

    View Slide

  16. ੲ෩ͷ8FCΞϓϦͷར༻্ͷܽ఺
    ຖճɺը໘શମ͕ॻ͖׵ΘΔ
    ஗͍ɻ଴ͨ͞ΕΔɻ
    ͪΒͭ͘ɻμαΠɻ
    ࡞Γ͕ѱ͍ͱɺը໘্ͷมΘͬͯ΄͘͠ͳ͍஋ʢೖྗ஋ͳ΍ιʔ
    τɾߜΓࠐΈঢ়ଶ౳ʣ͕มΘͬͯ͠·ͬͨΓ͕ͪ͠ɻෆศɻ
    ϏδϡΞϧతʹ͔͍͍ͬ͜ಈ͖͕͚ͭʹ͍͘

    View Slide

  17. 41"΋)PUXJSF΋͜ͷ՝୊ΛղܾͰ͖Δ
    41" )PUXJSF
    ஗͍ ˕ ˕
    ͪΒͭ͘ ˕ ˕
    ෆศͳը໘มԽ ˕ ˕
    ϏδϡΞϧޮՌ ˕ ̋
    ˞ݸਓతײ৮Ͱ͢

    View Slide

  18. )PUXJSF
    5VSCP
    ը໘ભҠ΍4VCNJUΛεϜʔζɾߴ଎ʹͯ͠ɺ෦෼ߋ৽΍ɺ8FC4PDLFU
    ʹΑΔߋ৽ͳͲΛΧόʔɻ+4Λॻ͔ͣʹ͜ΕΒΛ࣮ݱͤͯ͘͞ΕΔɻ
    4UJNVMVT
    5VSCP͚ͩͰ͸र͑ͳ͍ը໘ଆͰ+4ॻ͖͍ͨχʔζʹରԠɻ%0.ͱ+4
    Λ͖Ε͍ʹ෼཭ͯ͠ॻ͘͜ͱ͕Ͱ͖Δɻ
    4USBEB
    ωΠςΟϒɾ8FCͷϋΠϒϦουܕͷϞόΠϧΞϓϦ޲͚
    ࠓ೔͸ओʹ͜ͷ࿩Λ͠·͢

    View Slide

  19. ͪͳΈʹ5VSCP͸ɺ
    5VSCPMJOLTͷࠒͱ͸
    ײ৮͕͕ͪͬͯͯ
    ͔ͳΓ࢖͍΍͍͢Ͱ͢

    View Slide

  20. 5VSCPʹΑΔը໘ߋ৽ͷ
    ڞ௨఺
    "DUJPO
    ϦΫΤετ
    Ϩεϙϯεʢ)5.-ʣ
    +4
    ը໘ߋ৽Λൃੜͤ͞ΔͨΊʹ
    ৽͘͠ΞΫγϣϯΛݺͿɻͦͷϨεϙϯεΛ
    +4 5VSCP
    ͕͏·͍͜ͱը໘ʹ൓өͯ͘͠ΕΔ

    View Slide

  21. 5VSCPʹΑΔ
    ը໘ߋ৽ͷख๏ͱಛ௃
    ෦෼ߋ৽
    ߋ৽ൣғͷ
    ࣗ༝౓
    ୯ಠͰ
    ΞΫηε
    ભҠ͢Δ
    5VSCP%SJWF ☓ ˕ ˕ ˕
    5VSCP'SBNFT ˕ ˚ ˕ ✕
    5VSCP4USFBNT ˕ ˕ ☓ ✕

    View Slide

  22. ख๏͕ෳ਺͋ΔͷͰ
    ໎͍͕ੜ͡Δ

    View Slide

  23. ࣮૷ͷ࢓ํʹ
    ෯͕Ͱ͖Δ

    View Slide

  24. ྑ͍ํ޲ͱ
    ΠϚΠνͳํ޲͕
    ͋Δ͜ͱʹؾ͍ͮͨ

    View Slide

  25. ʮը໘ͷҰ෦͚ͩΛ
    ߋ৽͍ͨ͠ʯͱ
    ߟ͑Δ৔߹

    View Slide

  26. 5VSCPͰ΍Γ͕ͪͳൃ૝ᶃ
    Ұ෦Λߋ৽͢ΔΜ͔ͩΒɺ5VSCP'SBNFT͔
    5VSCP4USFBNTͩͳ
    ࠓճ͸ҰՕॴʹ·ͱ·͍ͬͯΔ͔Βɺ5VSCP
    'SBNFT͕͍͍Μ͡Όͳ͍ʁ
    ෦෼ߋ৽͕ඞཁͩʂ 5VSCP'SBNFTͩʂ

    View Slide

  27. ΍Γ͕ͪͳ൑அϑϩʔ
    ෦෼ߋ৽͕ඞཁͩʂ
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    5VSCP4USFBNT
    5VSCP'SBNFT
    ελʔτ
    ·ͱ·Δ
    ·ͱ·Βͳ͍

    View Slide

  28. 5VSCPͰ΍Γ͕ͪͳൃ૝ᶄ
    ͜ͷʮ෦෼ߋ৽ʯͬͯɺ

    ίϯϙʔωϯτΈ͍ͨͳҐஔ͚ͮʹͯ͠ɺ

    ൚༻ԽͰ͖ΔΜ͡Όͳ͍͔ͳʁ

    View Slide

  29. ໨ࢦ͕ͪ͠ͳํ޲ੑ
    ʮ࠷ॳͷϖʔδʯͱʮ෦෼ߋ৽ʯͰ͸ɺͳΔ΂͘ॲཧͷ
    ॏͳΓ͕ͳ͍΄͏͕Α͍ɻ੹຿Λ෼͚Α͏ɻ
    ίϯϙʔωϯτͬΆ͘ɺγϯϓϧͳ੹຿ͷΞΫγϣϯΛ
    ࡞ͬͯɺͦΕΛ5VSCP'SBNFT͔5VSCP
    4USFBNTͰݺͼग़ͯ͠ߦ͜͏ɻ

    View Slide

  30. ΍Γ͕ͪͳ͜ͱ·ͱΊ
    ʮ෦෼ߋ৽ʯ͋Γ͖Ͱߟ͑Δ
    ʮ෦෼ߋ৽ʯΛಠཱͨ͠੹຿ʹରԠ͢Δίϯϙʔ
    ωϯτతͳΠϝʔδͰ࡞Δ

    View Slide

  31. ੹຿ͷ෼཭ͬͯѱ͍ͷʁʁ
    ͜͜ͳΜͰ͢Α
    ࢲͨͪ͸ɺ੹຿ͷ෼཭͕େ޷͖
    Ͱ΋ɺ)PUXJSFͰ͸஫ҙ͕ඞཁͳ͜ͱʹؾ
    ͍ͮͨʢ݁ߏɺিܸΛड͚ͨʣ
    ޙͰৄ͘͠આ໌͠·͢

    View Slide

  32. ᶃʮ෦෼ߋ৽ʯ͋Γ͖Ͱ
    ߟ͑ͳ͍Α͏ʹ͢Δʹ͸ʁ

    View Slide

  33. ελʔτΛม͑Δ
    ෦෼ߋ৽͕ඞཁͩʂ
    ը໘ঢ়ଶΛ"ˠ#ʹม͑Δ

    View Slide

  34. ը໘ঢ়ଶΛ"ˠ#ʹม͑Δํ๏Λ
    બͿͨΊͷϑϩʔνϟʔτ
    Ͱ͖Δ ओʹ(&5

    ࢖͏ ·ͱ·Δ
    ·ͱ·Βͳ͍
    #͸୯ಠͰ
    ΞΫηεͰ͖Δʁ
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    5VSCP'SBNFT
    5VSCP%SJWF
    8FC
    4PDLFU
    5VSCP4USFBNT
    ࢖Θͳ͍
    Ͱ͖ͳ͍
    1045 (&5PS1045
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    ·ͱ·Βͳ͍ ·ͱ·Δ
    ෦඼త
    ը໘త

    View Slide

  35. ը໘తΞϓϩʔν͸
    ͦ΋ͦ΋ݕ౼͔Β࿙Ε͕ͪ

    View Slide

  36. ෦඼తΞϓϩʔνʁ
    ը໘తΞϓϩʔνʁ
    ·ͣ͜͜Λ͸͖ͬΓͤ͞Α͏ʂ

    View Slide

  37. ͭͷΞϓϩʔνͷҧ͍
    ෦඼తͳΞϓϩʔν
    ʮ෦෼Λߋ৽͢ΔʯॲཧΛॻ͘
    ը໘తͳΞϓϩʔν
    ʮ෦෼͕ߋ৽͞Εͨ݁Ռը໘ʯ΁ભҠ͢Δ
    ʮ8FCࢴࣳډʯͱ໊෇͚ͨ

    View Slide

  38. มԽ̍
    ᶃ ᶄ
    มԽ
    มԽ มԽ
    ᶃ ᶄ
    ෦඼తΞϓϩʔν
    ը໘తΞϓϩʔνʢ8FCࢴࣳډʣ
    ʮࢴࣳډʯ΍ʮΞχϝʯΈ͍ͨ

    View Slide

  39. ෦඼తΞϓϩʔν͸
    ͞Βʹ̎ͭʹ෼ྨͰ͖Δ
    ෦඼తΞϓϩʔν
    ʮ͋Δը໘ͷ͋Δ෦෼ߋ৽ʯʹಛԽͨ͠ॲཧΛॻ͜͏
    ಠཱͨ͠੹຿Λ࣋ͭ൚༻తͳ෦඼ʢίϯϙʔωϯτʣ
    Λ࡞Ζ͏ˡ΍Γ͕ͪͳൃ૝ᶄ

    View Slide

  40. ͭ·Γ͜͏͍͏ײ͡
    ը໘తΞϓϩʔν
    ෦෼ߋ৽ͳ͠5VSCP%SJWFͷΈ
    ෦෼ߋ৽͋Γ5VSCP'SBNFTར༻
    ෦෼తΞϓϩʔν
    ಛఆը໘ઐ༻
    ൚༻ίϯϙʔωϯτ

    View Slide

  41. ࢲͷॴײ
    ը໘తΞϓϩʔν
    ෦෼ߋ৽ͳ͠5VSCP%SJWFͷΈ
    ෦෼ߋ৽͋Γ5VSCP'SBNFTར༻
    ෦෼తΞϓϩʔν
    ಛఆը໘ઐ༻
    ൚༻ίϯϙʔωϯτ
    ݟಀ͞Ε͕͚ͪͩͲ
    ༗ޮʂʂ
    (00%
    ةݥੑ͕͋Δ

    View Slide

  42. ۩ମྫͰઆ໌͠·͢
    ˞͜Ε͸τʔΫ༻ͷྫͰ͋Γ
    Ͳͷઃܭ͕߹͏͔͸
    ͦͷ࣌ͷঢ়گʹΑΔͱࢥ͍·͢

    View Slide


  43. Ұཡը໘্ʹ
    ΞΠςϜͷৄࡉΤϦΞΛ
    ද͍ࣔͨ͠

    View Slide

  44. ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    $MJDL
    ΫϦοΫͨ͠Β
    ৄࡉΤϦΞ͕දࣔ͞ΕΔ
    ˞༧Ίશ෦࢓ࠐΉબ୒ࢶ΋ߟ͑ΒΕ·͕͢ɺຊτʔΫͷओࢫʹ͸ؔ܎ͳ͍ͨΊ৮Ε·ͤ
    Μɻৄࡉදࣔͷίετ͕૬౰ߴ͍ͱ͔ɺҰཡͷදࣔྔ͕ଟ͍ͳͲͷཧ༝ͰͦΕΛબ୒͠ͳ
    ͍ɺৄࡉ৘ใΛ݅ͱΔͨΊͷΞΫγϣϯ͸ผʹ༻ҙ͢Δͱ͍͏લఏͰฉ͍͍ͯͩ͘͞ɻ

    View Slide

  45. ྫ෦඼తͳΞϓϩʔν

    ʢ൚༻ίϯϙʔωϯτʣ

    ͷઃܭྫ
    มԽ̍
    ᶃ ᶄ
    มԽ

    View Slide

  46. ෦඼తͳΞϓϩʔνͷൃ૝
    ը໘಺ͷʮৄࡉΤϦΞʯʹ
    ৄࡉͷ಺༰Λදࣔͤ͞ΔΑ͏ͳ
    ॲཧΛ༻ҙ͠Α͏ʂ

    View Slide

  47. ൚༻ίϯϙʔωϯτͷൃ૝Λϓϥε
    ৄࡉͷ಺༰Λදࣔ͞ΕΔॲཧͬͯ
    ੹຿Λ෼͚ͯ
    ൚༻తͳίϯϙʔωϯτΈ͍ͨʹ
    ߟ͑ΒΕΔΑͶ

    View Slide

  48. ͍·ίί
    Ͱ͖Δ ओʹ(&5

    ࢖͏ ·ͱ·Δ
    ·ͱ·Βͳ͍
    #͸୯ಠͰ
    ΞΫηεͰ͖Δʁ
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    5VSCP'SBNFT
    5VSCP%SJWF
    8FC
    4PDLFU
    5VSCP4USFBNT
    ࢖Θͳ͍
    Ͱ͖ͳ͍
    1045 (&5PS1045
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    ·ͱ·Βͳ͍ ·ͱ·Δ

    View Slide

  49. มߋՕॴ͕ՕॴͳͷͰ
    5VSCP'SBNFTΛ
    બ୒

    View Slide

  50. ख๏ܾఆʂ
    Ͱ͖Δ ओʹ(&5

    ࢖͏ ·ͱ·Δ
    ·ͱ·Βͳ͍
    #͸୯ಠͰ
    ΞΫηεͰ͖Δʁ
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    5VSCP'SBNFT
    5VSCP%SJWF
    8FC
    4PDLFU
    5VSCP4USFBNT
    ࢖Θͳ͍
    Ͱ͖ͳ͍
    1045 (&5PS1045
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    ·ͱ·Βͳ͍ ·ͱ·Δ

    View Slide

  51. ෦඼తΞϓϩʔνͷઃܭྫ
    JOEFY
    ΞΫγϣϯ
    ৄࡉදࣔͷ͜ͱ͚ͩΛ΍Δʂ
    ੹຿͕੾Γ෼͚ΒΕ͍ͯͯඒ͍͠ʂ
    Ұཡը໘
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷ
    ৄࡉΤϦΞ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    $MJDL
    TIPX
    ΞΫγϣϯ
    JUFNT

    JUFNT QBHF

    View Slide

  52. ίʔυྫ
    def index
    @items = Item.all
    end
    def show
    @item = Item.find(params[:id])
    end
    .row
    .col-6
    …Ұཡදࣔ…
    .col-6
    turbo-frame#itemDetailFrame
    turbo-frame#itemDetailFrame
    …ৄࡉදࣔ…
    JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJN
    TIPXIUNMTMJN
    ී௨ͷ$36%ͷܗͰը໘ʹຒΊࠐΊͯΩϨΠ

    View Slide

  53. ྫ8FCࢴࣳډͷઃܭྫ
    มԽ มԽ
    ᶃ ᶄ

    View Slide

  54. 8FCࢴࣳډͷൃ૝
    ΞΠςϜͷৄࡉ͕։͍ͨϖʔδͬͯ
    ௚ΞΫηεͰ͖ͨΒ
    ศརͳΜ͡Όͳ͍͔ͳʁ
    ͦ͏͍͏ը໘Λ
    Ұཡͱ͸ผʹ༻ҙ͠Α͏

    View Slide

  55. ͍·ίί
    Ͱ͖Δ ओʹ(&5

    ࢖͏ ·ͱ·Δ
    ·ͱ·Βͳ͍
    #͸୯ಠͰ
    ΞΫηεͰ͖Δʁ
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    5VSCP'SBNFT
    5VSCP%SJWF
    8FC
    4PDLFU
    5VSCP4USFBNT
    ࢖Θͳ͍
    Ͱ͖ͳ͍
    1045 (&5PS1045
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    ·ͱ·Βͳ͍ ·ͱ·Δ

    View Slide

  56. มߋՕॴ͕ՕॴͳͷͰ
    5VSCP'SBNFTΛબ୒

    View Slide

  57. ख๏ܾఆʂ
    Ͱ͖Δ ओʹ(&5

    ࢖͏ ·ͱ·Δ
    ·ͱ·Βͳ͍
    #͸୯ಠͰ
    ΞΫηεͰ͖Δʁ
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    5VSCP'SBNFT
    5VSCP%SJWF
    8FC
    4PDLFU
    5VSCP4USFBNT
    ࢖Θͳ͍
    Ͱ͖ͳ͍
    1045 (&5PS1045
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    ·ͱ·Βͳ͍ ·ͱ·Δ

    View Slide

  58. ༨ஊ
    ͜ͷΑ͏ʹ
    5VSCP'SBNFT͸
    ྆ํͷΞϓϩʔνͰ
    બͼಘΔ

    View Slide

  59. 8FCࢴࣳډͷઃܭྫ
    JOEFY
    ΞΫγϣϯ
    ࢴࣳډͷʮ࣍ͷຕʯΛఏڙʂ
    ੹຿͕෼͔Ε͓ͯΒͣɺటष͍
    Ұཡը໘
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷ
    ৄࡉΤϦΞ͕
    ։͍͍ͯΔҰཡը໘
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    TIPX
    ΞΫγϣϯ
    JUFNT QBHF
    $MJDL
    JUFNT QBHF

    View Slide

  60. .row
    .col-6
    …Ұཡදࣔ…
    .col-6
    turbo-frame#itemDetailFrame
    - if @item
    …ৄࡉදࣔ…
    .row
    .col-6
    …Ұཡදࣔ…
    .col-6
    turbo-frame#itemDetailFrame
    def index
    prepare_items
    end
    def show
    @item = Item.find(params[:id])
    prepare_items
    render action: :index
    end
    private
    def prepare_items
    @items = Item.all
    end
    ίʔυྫ
    JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJN
    TIPXIUNMTMJN
    ৑௕͕͋͞Δ

    View Slide

  61. ෦඼తͳΞϓϩʔν
    ʢ൚༻ίϯϙʔωϯτʣ
    ʹΑΔઃܭͷ΄͏͕
    ϞμϯͰඒ͍͠

    View Slide

  62. Ͱ΋ɺ࣮͸
    8FCࢴࣳډͷઃܭʹ΋
    ར఺͕͋Δ

    View Slide

  63. ࠓ೔͓఻͍͑ͨ͜͠ͱ
    ΦϒδΣΫτࢦ޲ʹ׳ΕͨΤϯδχΞ͸ɺ෦඼తͳ
    ΞϓϩʔνͰઃܭ͕ͪ͠
    ͔͠͠ɺ࣮͸෦඼తͳΞϓϩʔνͷઃܭͱ
    )PUXJSFͷ૬ੑ͸ͦ͜·Ͱྑ͘ͳ͍😱
    ʮ8FCࢴࣳډͷઃܭʯ΋બ୒ࢶʹೖΕͯऔΓೖΕ
    ͍ͯ͘ͷ͕͓͢͢Ί

    View Slide

  64. ෦඼తͳΞϓϩʔνͷઃܭͱ
    )PUXJSFͷ૬ੑ͸
    ͦ͜·Ͱྑ͘ͳ͍😱
    ͦΕ͸ͳͥʁ
    ͦͷͨΊͷ)PUXJSF͡Όͳ͍ͷʁ

    View Slide

  65. 3BJMTͰ
    ෦඼తΞϓϩʔνͷ
    ઃܭΛ͢Δͱ
    ੍ޚ͕ʮը໘ʯʹد͍ͬͯ͘

    View Slide

  66. ۩ମྫ

    View Slide

  67. ෦඼తͳΞϓϩʔνͷઃܭ
    JOEFY
    ΞΫγϣϯ
    Ұཡը໘
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷ
    ৄࡉΤϦΞ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    $MJDL
    TIPX
    ΞΫγϣϯ
    JUFNT

    JUFNT QBHF
    ༻ҙͯ͋͠ΔৄࡉΤϦΞΛ
    UVSCPGSBNFཁૉʹͯ͠
    ಺༰Λྲྀ͠ࠐ΋͏ʂ

    View Slide

  68. ࠶ܝɿίʔυྫ
    def index
    @items = Item.all
    end
    def show
    @item = Item.find(params[:id])
    end
    .row
    .col-6
    …Ұཡදࣔ…
    .col-6
    turbo-frame#itemDetailFrame
    turbo-frame#itemDetailFrame
    …ৄࡉදࣔ…
    JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJN
    TIPXIUNMTMJN
    ී௨ͷ$36%ͷܗͰը໘ʹຒΊࠐΊͯΩϨΠ

    View Slide

  69. ࡞ͬͨ௚ޙ͸
    ׬ᘳʹ͓͞·͍ͬͯͯ΋
    ػೳվળ͕
    ΍Γʹ͍͘৔߹͕͋Δ

    View Slide

  70. ཁ๬ᶃৄࡉΛ։͍͍ͯΔΞΠςϜΛҰཡ
    ಺Ͱ෼͔Γ΍͍ͨ͘͢͠
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ϦϯΫ͕ΫϦοΫ͞ΕͨΒ
    +4ͰσβΠϯม͑Α͏
    ৄࡉดͨ͡ͱ͖΋
    +4ͰσβΠϯม͑Α͏
    ·͋ɺ4UJNVMVTॻ͔͘

    View Slide

  71. +4͕૿͑࢝ΊΔ
    show(event) {
    this.rowTargets.forEach((element) => {
    element.classList.remove("bg-warning")
    })
    event.currentTarget.parentElement.parentElement.classList.add("bg-warning")
    }
    close(event) {
    this.rowTargets.forEach((element) => {
    element.classList.remove("bg-warning")
    })
    }
    JUFNT@DPOUSPMMFSKT

    View Slide

  72. ཁ๬ᶄҰཡը໘͚ͩͷχʔζͱͯ͠ɺ
    ಛఆͷΞΠςϜΛৄࡉදࣔͨ͠ͱ͖ʹɺ
    ܯࠂΛը໘্෦ʹද͍ࣔͨ͠
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    8BSOJOH
    ՝୊
    w ཁૉʹ·ͱ·Βͳ͍
    w ܯࠂ͸ΞΠςϜৄࡉຊདྷͷ

    ੹຿͡Όͳ͍

    View Slide

  73. ෆࣗ༝͞Λײ͍ͯ͘͡
    5VSCP'SBNFTͷ৔߹
    ܾΊͨΤϦΞͷ֎΋ߋ৽͠Α͏ͱ͢Δͱ

    ్୺ʹ໘౗ʹͳΔ
    τϨʔυΦϑͷ͋Δબ୒Λ͠ͳ͚Ε͹ͳΒͳ͍
    ಘΔ΋ͷ ࣦ͏΋ͷ
    ࢓༷Λଥڠ
    ʢৄࡉΤϦΞʹܯࠂදࣔʣ
    ੹຿ͷ෼཭
    ʢগ͠ଥڠʣ
    ࢓༷ͷ࣮ݱ
    5VSCP4USFBNTʹ
    มߋ
    ࢓༷ͷ࣮ݱ ੹຿ͷ෼཭
    +4Ͱผ్ܯࠂΛग़͢ ੹຿ͷ෼཭ ։ൃ଎౓ɾอकੑ

    View Slide

  74. ඒ͠͞ΛकΔ
    ˣ
    ΞΫγϣϯͷ੹຿Λখ͘͞อͭ
    ˣ
    +4͕૿͑Δ
    4UJNVMVTͰҎલΑΓշదͰ΋ɺ૿͑Ε͹େม

    View Slide

  75. Կ͕ى͖͍ͯΔ͔

    View Slide

  76. ຊ࣭తʹɺΞϓϦͷը໘ͷҰ෦෼͕
    ಠཱ͍ͯ͠Δ͜ͱ͸อূ͞Εͳ͍ɻ
    ը໘಺ͷύʔπ͸ɺ૬ޓʹؔ࿈ͯ͠
    มԽ͢ΔՄೳੑ͕͋Δɻ

    View Slide

  77. ૬ޓʹؔ࿈ͯ͠
    มԽͤ͞Δ͜ͱ͸
    ΋ͪΖΜٕज़ʹΑͬͯ
    ղܾՄೳ

    View Slide

  78. ͔͠͠

    View Slide

  79. )PUXJSFͰ͸
    ͦͷղܾͷओઓ৔͕
    ը໘ +4
    ʹͳͬͯ͠·͏ɾɾɾ
    ৄ͍͠ཧ༝͸ޙड़͠·͢

    View Slide

  80. 41"ͷ৔߹ͱൺ΂ͯ
    ͦ͏͍͏ղܾ͕
    ͖Ε͍ʹॻ͚ͳ͍

    View Slide

  81. αʔόαΠυʢ3VCZʣͱ
    ΫϥΠΞϯταΠυʢ+4ʣ
    Ͱೋॏॲཧੜ׆

    View Slide

  82. ͕Μ͹Δ
    ˣ
    ർΕΔ
    ˣ
    ͦΕΛղܾ͢ΔͨΊͷ41"
    ͡Όͳ͔͚ͬͨͬʜ
    ˣ
    41"ճؼ

    View Slide

  83. ͦ͏͍͏
    ࠳ં͕ى͖ͳ͍͔৺഑Ͱ͢
    ͳͷͰɺ͜ͷτʔΫΛ
    ͍ͨ͠ͱࢥ͍·ͨ͠

    View Slide

  84. ͔ͩΒ
    8FCࢴࣳډతͳઃܭΛ
    બ୒ࢶʹೖΕΔ͜ͱΛ
    ͓͢͢Ί͍ͨ͠

    View Slide

  85. ผͷݴ͍ํΛ͢Δͱ
    41"తϚΠϯυηοτ͔Β
    )PUXJSFతϚΠϯυηοτ
    ΁ͷ੾Γସ͑

    View Slide

  86. 41"తίϯϙʔωϯτࢦ޲
    )PUXJSFతੲ͔Βͷ3BJMT

    View Slide

  87. ը໘ʹ੍ޚ͕
    د͖ͬͯͨͱײͨ͡Β
    ઃܭํ਑ͷ੾Γସ͑Λ
    ߟ͑ͯΈΔͱྑ͍

    View Slide

  88. ͖ͬ͞ͷྫ͸
    8FCࢴࣳډతͳઃܭ
    Ͱ͸ɺͲ͏ͳΔ͔ʁ

    View Slide

  89. 8FCࢴࣳډͷઃܭ
    JOEFY
    ΞΫγϣϯ
    Ұཡը໘
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷ
    ৄࡉΤϦΞ͕
    ։͍͍ͯΔҰཡը໘
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    TIPX
    ΞΫγϣϯ
    JUFNT QBHF
    $MJDL
    JUFNT QBHF
    ৄࡉΤϦΞΛUVSCPGSBNFʹ͢Δ
    4IPXΞΫγϣϯҰཡৄࡉ

    View Slide

  90. .row
    .col-6
    …Ұཡදࣔ…
    .col-6
    turbo-frame#itemDetailFrame
    - if @item
    …ৄࡉදࣔ…
    .row
    .col-6
    …Ұཡදࣔ…
    .col-6
    turbo-frame#itemDetailFrame
    def index
    prepare_items
    end
    def show
    @item = Item.find(params[:id])
    prepare_items
    render action: :index
    end
    private
    def prepare_items
    @items = Item.all
    end
    ࠶ܝɿίʔυྫ
    JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJN
    TIPXIUNMTMJN
    ৑௕͕͋͞Δ

    View Slide

  91. ͨͿΜ͜ͷ࣌఺ͩͱ
    ͜ͷઃܭΛબͿར఺͸
    ཧղ͞ΕͮΒ͍
    ˞ҰԠɺ୯ಠͰΞΫηεͰ͖ΔʢύʔϚωϯτϦ
    ϯΫ͕͋Δʣͱ͍͏ϝϦοτ͸͢Ͱʹ͋Γ·͢

    View Slide

  92. ཁ๬ᶃৄࡉΛ։͍͍ͯΔΞΠςϜΛҰཡ
    ಺Ͱ෼͔Γ΍͍ͨ͘͢͠
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    4UJNVMVTͰ΋͍͍͚Ͳ
    5VSCP%SJWFͰ͍͔ͬ
    !JUFN͚ͩσβΠϯม͑ͯ
    ग़ྗͯ͋͛͠Ε͹
    ͍͍ΑͶ

    View Slide

  93. ख๏Λ5VSCP%SJWFʹมߋ
    Ͱ͖Δ ओʹ(&5

    ࢖͏ ·ͱ·Δ
    ·ͱ·Βͳ͍
    #͸୯ಠͰ
    ΞΫηεͰ͖Δʁ
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    5VSCP'SBNFT
    5VSCP%SJWF
    8FC
    4PDLFU
    5VSCP4USFBNT
    ࢖Θͳ͍
    Ͱ͖ͳ͍
    1045 (&5PS1045
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    ·ͱ·Βͳ͍ ·ͱ·Δ

    View Slide

  94. +4͕૿͑ͳ͍
    .row
    .col-6
    …ϔομ…
    - @items.each do |item|
    .row.m-1 class="#{item == @item ? "bg-warning" : ‘'}"
    ..1ߦͷදࣔ..
    .col-6
    - if @item
    …ৄࡉදࣔ…
    TIPXIUNMTMJN
    ͲͷৄࡉΛද͍͔ࣔͨ͠
    ΞΫγϣϯݺͼग़࣌͠఺ͰΘ͔ΔͷͰ
    ͋Β͔͡ΊσβΠϯΛࢦఆ
    UVSCPGSBNFফͨ͠

    View Slide

  95. ཁ๬ᶄҰཡը໘͚ͩͷχʔζͱͯ͠ɺಛఆͷΞΠςϜ
    Λৄࡉදࣔͨ͠ͱ͖ʹɺܯࠂΛը໘্෦ʹද͍ࣔͨ͠
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    8BSOJOH
    5VSCP%SJWFͩ͠
    ಛʹ໰୊ͳ͍ͬ͢

    View Slide

  96. +4͕૿͑ͳ͍
    - if @item&.old?
    .alert.alert-danger role="alert"
    | ͜ͷΞΠςϜ͸ར༻ظݶΛա͍͗ͯ·͢!!
    …Ұཡɾৄࡉදࣔ…


    TIPXIUNMTMJN

    View Slide

  97. ͍͢͝ʂʂ

    View Slide

  98. ͳΜͰ΋
    αʔόαΠυͰͰ͖Δʂʂ

    View Slide

  99. ɾɾɾ࣮ࡍ͸
    ௒ݹయతͳ
    8FCΞϓϦͳ͚ͩ

    View Slide

  100. 5VSCP%SJWFͷ͓͔͛Ͱ
    ΩϨΠʹΈ͑Δ
    ٯʹ͍͏ͱ5VSCP%SJWF͕ͳ͚Ε͹

    બ୒ࢶʹͰ͖ͳ͔ͬͨ৽͍͠બ୒ࢶ

    View Slide

  101. ίϩϯϒεͷཛ
    ౮୆Լ҉͠
    ݪ఺ճؼ

    View Slide

  102. 8FCࢴࣳډతͳઃܭͱ͸
    ࢴࣳډͷΑ͏ͳ8FCΞϓϦΛ5VSCPͰΩϨΠʹݟͤΔ
    ը໘ͷঢ়ଶ͝ͱʹ63-Λ༻ҙ͢Δ
    ෦෼ߋ৽ΛΦϓγϣφϧͳཁ݅ͱߟ͑Δ
    มԽ มԽ
    ᶃ ᶄ

    View Slide

  103. 8FCࢴࣳډͷ
    ઃܭͷϝϦοτ

    View Slide

  104. αʔόαΠυͰ
    ੍ޚͰ͖Δʂʂʂ

    View Slide

  105. αʔόαΠυͰ
    ੍ޚͰ͖Δ͜ͱ͕
    3BJMTͷྑ͞Λ
    ࠷େݶʹڗड͢Δ͜ͱʹ
    ͭͳ͕Δ

    View Slide

  106. αʔόαΠυ੍ޚͳΒ
    3VCZͰॻ͚Δˠߏ଄ԽɺϝλϓϩͳͲ͕͠΍͍͢
    ҰՕॴʹॻ͚ΔʢαʔόΫϥΠΞϯτͰೋॏ؅ཧ͠ͳ
    ͯ͘ࡁΉʣ
    Ͳ͜ʹͦͷॲཧ͕͋Δ͔୳͠΍͍͢ʢॲཧ͕·ͱ·Γ΍
    ͍͢ʣ

    View Slide

  107. ͱ͜ΖͰ

    View Slide

  108. ͜͜Ͱͪΐͬͱ
    ͬ͘͡Γݟ͍͖͍ͯͨͷ͕

    View Slide

  109. ෦඼తͳΞϓϩʔνͷઃܭ͕
    ը໘ʹ੍ޚΛدͤΔ͜ͱʹ
    ͭͳ͕Γ΍͍͢ͷ͸ͳ͔ͥʁ
    ͱ͍͏͜ͱ

    View Slide

  110. ໰͍
    ͍·දࣔ͞Ε͍ͯΔ
    ʮը໘ʯͷঢ়ଶΛ
    αʔόαΠυ͕೺Ѳ͍ͯ͠Δ͔ʁ

    View Slide

  111. Ұཡͷ͋ͱʹ
    ʮಠཱͨ͠ৄࡉΞΫγϣϯʯΛݺͿ
    JOEFY
    ΞΫγϣϯ
    Ұཡը໘
    TIPX
    ΞΫγϣϯ
    ৄࡉ
    Ϟʔμϧͷ
    த਎
    $MJDL
    ͲͪΒͷΞΫγϣϯ΋
    ࠓͷը໘ͷঢ়ଶΛ஌Βͳ͍

    View Slide

  112. ࠓͷը໘Λ஌͍ͬͯΔͷ͸ը໘͚ͩ
    JOEFY
    ΞΫγϣϯ
    Ұཡը໘
    TIPX
    ΞΫγϣϯ
    ৄࡉ
    Ϟʔμϧͷ
    த਎
    $MJDL
    ࣗ෼͕΍Δ͔͠ͳ͍Ͱ͢Ͷ

    View Slide

  113. ͔ͩΒը໘ʹ੍ޚ͕
    دͬͯ͠·͏

    View Slide

  114. )PUXJSFͷෆ౎߹ͳਅ࣮
    ͔΋͠Εͳ͍
    ෦෼ߋ৽͕ڧԽ͞Εͯศརͳ)PXJSF
    ෦෼ߋ৽͸ɺજࡏతʹɺը໘ʹ੍ޚΛҾ͖دͤΔ

    View Slide

  115. Ͱ͸ɺαʔόαΠυʹ
    ॲཧΛدͤΔʹ͸ʁ

    View Slide

  116. ը໘ͷঢ়ଶΛαʔό͕஌͍ͬͯΔঢ়ଶʹ͢Δ
    Ϣʔβʔ͕ૢ࡞ͨ͠Βɺαʔό΁ߦͬͯɺ࠷ऴը໘ঢ়ଶ
    Λαʔόʹ஌Βͤͳ͕Βɺը໘Λߋ৽͢Δ
    ΞΫγϣϯ ը໘ঢ়ଶ
    ը໘ঢ়ଶ
    Λද͢63-
    ΞΫγϣϯ ࣍ͷը໘ঢ়ଶ
    ࣍ͷը໘ঢ়ଶ
    Λද͢63-
    Ϣʔβʔૢ࡞

    View Slide

  117. ը໘ঢ়ଶΛද͢63-ͷྫ
    ͋ΔΧςΰϦͰߜΓࠐΜͩҰཡ
    JUFNT DBUFHPSZ
    DBUFHPSJFTJUFNT
    ͋ΔΧςΰϦͰߜΓࠐΜͩҰཡͰɺಛఆͷΞΠςϜͷৄࡉΛ։͍͍ͯ
    Δը໘
    JUFNT DBUFHPSZ
    DBUFHPSJFTJUFNT

    View Slide

  118. Ұݟɺී௨Ͱ͸ͳ͍
    ײ͡ʹݟ͑Δ͔΋͠Εͳ͍͚ΕͲ
    αʔόαΠυʹॲཧΛूΊΔͱ͸
    ͜͏͍͏͜ͱͩͱࢥ͏
    ΞΫγϣϯ ը໘ঢ়ଶ
    ը໘ঢ়ଶ
    Λද͢63-
    ΞΫγϣϯ ࣍ͷը໘ঢ়ଶ
    ࣍ͷը໘ঢ়ଶ
    Λද͢63-
    Ϣʔβʔૢ࡞

    View Slide

  119. 8FCࢴࣳډతͳઃܭͱ͸
    αʔόαΠυʹ
    ը໘ͷঢ়ଶΛ͢΂ͯ఻͑ͯ
    ͢΂੍ͯޚͤ͞Δ
    ઃܭࢦ਑

    View Slide

  120. ΠϝʔδͰ͖ͯ
    ͖·ͨ͠Ͱ͠ΐ͏͔ʁ

    View Slide

  121. 8FCࢴࣳډͷઃܭʹ͍ͭͯ
    ΋͏গ͠࿩͠·͢

    View Slide

  122. Ͱ΋ɺ%3:͡Όͳ͍Ͱ͢ΑͶ

    View Slide

  123. Ҋ֎ͦ͏Ͱ΋ͳ͍

    View Slide

  124. 3VCZͳΒ
    ڞ௨Խ͸͓खͷ΋ͷ

    View Slide

  125. ίϯτϩʔϥͷॲཧ΋
    ը໘ग़ྗ΋ڞ௨ԽͰ͖Δ
    JOEFY
    ΞΫγϣϯ
    Ұཡը໘
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷ
    ৄࡉϞʔμϧ͕
    ։͍͍ͯΔҰཡը໘
    ɹΞΠςϜ̍
    ɹΞΠςϜ̎
    ɹΞΠςϜ̏
    ɹΞΠςϜ̐
    ɹɾɾɾɾ
    ΞΠςϜͷৄࡉ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    ɾɾɾɾɾɾ
    TIPX
    ΞΫγϣϯ
    JUFNT QBHF
    JUFNT QBHF
    ҰཡΛग़͢४

    NFUIPE

    Ұཡ෦෼
    QBSUJBM

    View Slide

  126. Ͱ΋ɺॲཧ͕৑௕Ͱ
    ॏ͍Ͱ͢ΑͶ

    View Slide

  127. ͦΕ͸ͦ͏
    ॲཧͷແବ͸͋Δ͕޻෉༨஍͸͋Δ
    5VSCP'SBNFTͷ৔߹ɺ5VSCP'SBNFTϦΫΤετ͔Ͳ
    ͏͔ͰҰ෦ͷॲཧɾඳըΛলུ͢ΔίʔυΛॻ͘͜ͱ΋Մೳ
    Ωϟογϡ
    ΫϥΠΞϯτ੍ޚͷ൥ࡶ͞Λආ͚ΔϝϦοτͷ΄͏͕େ͖͍৔
    ߹͕͋Δ

    View Slide

  128. ͳΜ͔ඒ͘͠ͳ͍ɾɾɾ

    View Slide

  129. ύϥμΠϜ͕ҧ͏͚ͩ
    ҟͳΔඒ͕͋͠͞Δ

    View Slide

  130. ঢ়ଶ͝ͱʹ
    63-͕͋Δ͜ͱͷඒ͠͞

    View Slide

  131. ෦඼తΞϓϩʔν
    ʢಛʹ൚༻ίϯϙʔωϯτࢦ޲ʣ
    8FCࢴࣳډ
    ΞΫγϣϯΛ
    ԿͰ෼͚Δͷ͔
    ओͳ੹຿ ը໘ͷঢ়ଶ
    ඒ͠͞ ੹຿ͷ෼͔Εํ
    ը໘ঢ়ଶʢ63-ʣͷ
    ෼͔Εํ
    ՝୊
    ը໘ʢ+4ʣͰͷ
    ੍ޚ͕େม
    ॲཧͷॏෳ
    ՝୊΁ͷରࡦ 41"ʹ͢Δ ɾТɾA

    ίϯτϩʔϥ૚ͱ
    QBSUJBMςϯϓϨʔτΛ
    ߏ଄Խɾڞ௨Խ
    ॲཧ଎౓ͷ޻෉
    ΧϦΧϦʹ%3:ʹͰ͖Δʂ3VCZͳΒʂ
    ύʔϚωϯτϦϯΫͱ޷૬ੑ

    View Slide

  132. ༨ஊɿ௥ٻ͢Δͱ৽ͨͳઓ৔͕ੜ·ΕΔ
    ʢΠϝʔδͷΈ͓఻͑͠·͢ʣ
    ύϥϝʔλͷѻ͍
    Ϟʔμϧ։͍ͯ໭ΔΈ͍ͨͳͱ͖ʹલը໘ͷ෼΋αʔόʹ஌Βͤͨ͘ͳͬ
    ͯ63-௕௒͑ͨΓ͢Δ
    ௕͍ύϥϝʔλΛѻ͑ΔΑ͏ʹ1045Λར༻ͨ͠Γɺηογϣϯ
    ʢ
    fl
    BTIʣΛܰ͘ར༻ٖͯ͠ࣅతʹαʔόʹ৘ใΛ఻͑ΒΕΔΑ͏ʹ͢Δ
    SPVUFTੜ੒ϢʔςϦςΟ
    ಉ͡ύλʔϯͰෳ਺63-Λ༻ҙ͍ͨ͜͠ͱ͕૿͑ͯɺ؆୯ʹએݴͨ͘͠
    ͳΔ

    View Slide

  133. ·ͱΊ

    View Slide

  134. )PUXJSFศར
    ͚ͩͲબ୒ࢶ͕ଟͯ͘໎͏

    View Slide

  135. ը໘ͷ෦෼ߋ৽ͷ
    ख๏͕໨ཱͭͷͰɺ
    ෦෼ߋ৽͋Γ͖ͷൃ૝Ͱɺ
    ෦඼తͳΞϓϩʔνͷ
    ઃܭΛߦ͍͕ͪ

    View Slide

  136. ෦඼తͳΞϓϩʔνͷ
    ઃܭΛ͢Δͱɺ
    ੍ޚ͕ʮը໘ʯʹ
    د͍͖ͬͯ΍͍͢

    View Slide

  137. ੍ޚ͕ʮը໘ʯʹدΔͱ
    ΫϥΠΞϯτଆͷ+4͕૿͑ͯ
    ͭΒ͘ͳΔ

    View Slide

  138. ͦ͏ͳΒͳ͍ͨΊʹ

    View Slide

  139. ୈҰʹɺ
    ը໘తͳΞϓϩʔν
    ʢ8FCࢴࣳډͷઃܭʣ
    ͷՄೳੑΛ
    े෼ʹݕ౼͢Δͱྑ͍

    View Slide

  140. ը໘ঢ়ଶΛ"ˠ#ʹม͑Δํ๏Λ
    બͿͨΊͷϑϩʔνϟʔτ
    Ͱ͖Δ ओʹ(&5

    ࢖͏ ·ͱ·Δ
    ·ͱ·Βͳ͍
    #͸୯ಠͰ
    ΞΫηεͰ͖Δʁ
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    5VSCP'SBNFT
    5VSCP%SJWF
    8FC
    4PDLFU
    5VSCP4USFBNT
    ࢖Θͳ͍
    Ͱ͖ͳ͍
    1045 (&5PS1045
    มߋՕॴ͕
    ཁૉʹ·ͱ·Δʁ
    ·ͱ·Βͳ͍ ·ͱ·Δ
    ը໘త

    View Slide

  141. ίπɿ"ˠ#Λ̎ͭͷ෺ͷݟํͰͱΒ͑Δ
    ʮը໘Λม͑Δૢ࡞ʯͰ#ʹ͢Δ
    ˠ෦඼తΞϓϩʔν
    #ͱ͍͏ը໘ʹͳΊΒ͔ʹભҠ͢Δ
    ˠը໘తΞϓϩʔνʢ8FCࢴࣳډ

    View Slide

  142. ୈೋʹɺ
    ෦඼తͳΞϓϩʔν͸
    ༻๏ɾ༰ྔΛकΔ

    View Slide

  143. ൚༻తͳɺ
    ੹຿ͷ෼͔Εͨ෦඼Λ࡞Ζ͏
    ͜ͷը໘ʹดͨ͡
    ઐ༻ͷߋ৽ॲཧΛ࡞Ζ͏
    જࡏతʹةݥɻ
    ΦʔΨφΠζ͢Δ໾໨͕ը໘ʹू·Γ΍͍͢
    ܯռ͕ඞཁ
    ͨͿΜ҆શɻ
    ը໘ઐ༻ͳΒ࠷ޙ͸
    5VSCP4USFBNTͰͳΜͱͰ΋ͳΔ
    %3:ʹ͢Δͷ͸ϦΫΤετΑΓখ͍͞୯ҐͰ

    View Slide

  144. ෦඼తͳΞϓϩʔν͸
    ൚༻ੑɾ੹຿ಠཱੑΛ
    ௥͍ٻΊͳ͍Ͱ
    ΄Ͳ΄Ͳͷ෼ྔʹ
    ͱͲΊͨ΄͏͕Α͍

    View Slide

  145. ಛʹ5VSCP'SBNFTΛ
    ෦඼తʹ࢖͓͏ͱ͢Δͱ
    ੹຿͕෼͔Εͯඒ͘͠ײͯ͡
    ᠘ʹ͸·Γ͕ͪͩͱࢥ͍·͢
    ը໘తʹ5VSCP%SJWFʹಀ͛Δͷ΋ɺ
    ෦඼తʹ5VSCP4USFBNTʹಀ͛Δͷ΋ɺ
    ඒ͠͞Λଛͳ͏ײ͕ͯ͡͠͠·ͬͯɺ
    +4ͰͳΜͱ͔ͨ͘͠ͳΔ᠘ʜ

    View Slide

  146. ͳΔ΂͘
    αʔόαΠυʹ
    ॲཧΛدͤΔΑ͏ʹҙࣝ͢Δ

    View Slide

  147. 41"తͳϚΠϯυηοτ͔Β
    )PUXJSFʢ3BJMTʣతͳ
    ϚΠϯυηοτ΁
    ίϯϙʔωϯτࢦ޲͔Β
    8FCࢴࣳډ΁

    View Slide

  148. αʔόαΠυʹدͤͨ
    ͪΐͬͱͨ͠࢒ΓΛ
    4UJNVMVTͰ
    खܰʹղܾ
    ˞ந৅Խཻ౓͕·ͪ·ͪʹͳͬͯ
    ࢄΒ͔Γ͕ͪͳ͜ͱΛ೰Έʹࢥ͍ͬͯ·͕͢
    ࠓ೔ͷ࿩୊Ͱ͸ͳ͍ͷͰ͜͜ͰϘϠ͚ͩ͘ʹ͠·͢

    View Slide

  149. ͜Ε͕
    )PUXJSFͷޫͷಓ

    View Slide

  150. )PUXJSFͰ
    ࢖͍΍͍͢ΞϓϦΛ
    ര଎ɾշదʹ։ൃ͠Α͏ʂʂ

    View Slide