題字ペタペタ：Contentful + Gatsby で作るコレクションサイト / FFTT #409

題字ペタペタ https://daipeta.com ができるまでの話を、社内勉強会で発表しました。

題字ペタペタができるまで - しろもじメモランダム

Transcript

1. ୊ࣈϖλϖλ
   $POUFOUGVM(BUTCZͰ࡞Δ
   ίϨΫγϣϯαΠτ
   ೥݄೔
   !NBTIBCPX
   

   View Slide

2. ࠓճͷςʔϚ
   w ৽ฉͷ୊ࣈΛ͋ͭΊͨαΠτΛ࡞ͬͨΑ
   w ୊ࣈϖλϖλIUUQTEBJQFUBDPN
   
   

   View Slide

3. ܦҢ
   w Ͷ͜΃Μ ࠺
   
   ͕ɺ೥͝ΖʹझຯͰ୊ࣈΛ͋ͭΊͨ
   w Ҏલ͔ΒʮαΠτʹ·ͱΊ͍ͨʯͱ͍͏࿩͸ฉ͍͍ͯͨ
   w ݄͝Ζɺલճͷൃද΋ऴΘͬͯҰଉ͍ͭͨͷͰɺ;ͨΓͰ΍Δ͔ʔͱͳͬͨ
   w ίϩφͰࡏ୐ͷ͕࣌ؒ૿͑ͨ͜ͱ΋͋Γɺूதͯ͠࡞Δ͜ͱʹ
   
   

   View Slide

4. ୲౰
   
   ઃܭ σʔλऩू
   ίϯςϯπࣥච
   ·͠Ό΅͏ɹͶ͜΃Μ
   ϩΰ࡞੒
   ࣮૷
   Πϥετ࡞੒
   σβΠϯ
   

   View Slide

5. ํ਑
   w ·ͣͰ͖Δͱ͜Ζ͔Β࡞ͬͯͬ͞͞ͱಈ͔͢
   w ׬ᘳΛٻΊͳ͍
   w ָ͘͠΍Δ
   w ࣗ෼͕ͨͪཉ͍͠΋ͷΛ࡞Δ
   
   

   View Slide

6. ୊ࣈը૾Λ༻ҙ͢Δ
   

   View Slide

7. εΩϟϯ
   w ੾Γऔͬͨ୊ࣈΛͳΒ΂ͯɺ
   ී௨ͷεΩϟφͰεΩϟϯ
   w ਺͑ͯΈͨΒຕҎ্ͷ୊ࣈ͕͋ͬͨ
   
   

   View Slide

8. ը૾Λ੾Γൈ͘
   w ຕຕ੾Γൈ͍ͯอଘ͢Δͷ͸໘౗
   w ੾Γൈ͖ઐ༻ͷ؆୯ͳΞϓϦΛ࡞ͬͨ
   w IUUQTHJUIVCDPNNBTIBCPXLJSJOVLJ
   w IUUQTNBTIBCPXHJUIVCJPLJSJOVLJ
   
   

   View Slide

9. ੾Γൈ͖ΞϓϦ
   w ຊ౰͸
   w (PPHMFυϥΠϒ͔ΒεΩϟϯը૾Λ։͘
   w ܏͖΍ྖҬΛࣗಈݕग़
   w ϒϥ΢β্Ͱ੾Γൈ͍ͨը૾Λੜ੒
   w ੜ੒ͨ͠ը૾ΛΞοϓϩʔυ
   w ʜ͕Ͱ͖Δͱ͔͍͍͕ͬ͜ɺࠓճ͸΍Βͳ͔ͬͨ
   w ͦ͜·ͰͷखؒΛ͔͚Δ΄ͲͷྔͰ͸ͳ͍
   
   

   View Slide

10. ୊ࣈը૾͕ἧͬͨ
    w ΞϓϦͰ࡞ͬͨ੾Γൈ͖σʔλΛ΋ͱʹɺ*NBHF.BHJDLͰεΫϦϓτॲཧ
    w ͜͜·Ͱिؒఔ౓
    w ͔ͳΓॱௐ
    w ϑϧϦϞʔτ͕࢝·ͬͨ͜Ζ
    
    

    View Slide

11. ୊ࣈσʔλΛ$POUFOUGVMʹೖΕΔ
    

    View Slide

12. σʔλஔ͖৔
    w σʔλɿ୊ࣈͷઆ໌ͱ͔ɺ৽ฉ໊ͱ͔ɺ஍໲ͷछྨͱ͔ʜ
    w Ͷ͜΃Μ͕(PPHMFεϓϨουγʔτʹ͋Δఔ౓·ͱΊ͍ͯͨ
    w ͕ɺεϓϨουγʔτʹจষΛॻ͍ͨΓɺը૾ΛషͬͨΓ͢Δͷ͸ͭΒ͍
    
    

    View Slide

13. $POUFOUGVM
    w IFBEMFTT$.4Ͱ͋Δ$POUFOUGVMʹσʔλΛೖΕΔ͜ͱʹͨ͠
    w IFBEMFTT$.4Ӿཡऀ޲͚ͷϏϡʔ͕ͳ͍$.4
    w ฤूऀ޲͚ͷϏϡʔ͸͋Δ
    w ݸਓαΠτఔ౓ͩͬͨΒ
    $POUFOUGVMͷແྉ࿮ʹऩ·Δ
    
    

    View Slide

14. σʔλΛೖΕΔ
    w $POUFOU5ZQFΛఆٛͯ͠ɺ
    &OUSZ͸εϓϨουγʔτͷσʔλ͔ΒεΫϦϓτͰྲྀ͠ࠐΈखͰ௥Ճ
    
    

    View Slide

15. (BUTCZͰαΠτΛ࡞Δ
    

    View Slide

16. (BUTCZ
    w $POUFOUGVM͸IFBEMFTT$.4ͳͷͰɺӾཡऀ޲͚ͷϏϡʔ͸ࣗ෼Ͱ༻ҙ͢Δ
    w ԿͰ΋͍͍͕ɺࠓճ͸(BUTCZΛ࢖ͬͨ
    w 3FBDU(SBQI2-ϕʔεͷ੩తαΠτδΣωϨʔλ
    w σϑΥϧτͷঢ়ଶͰ͍͍ײ͡ʹ଎͍αΠτ͕࡞ΕΔ
    w ϓϥάΠϯ͕๛෋
    w ͔ͨ͠ΧϩϦʔϝΠτͷϓϩϞʔγϣϯαΠτͰ΋࢖ΘΕ͍ͯͨ
    w $BMPSJF.BUFUP1SPHSBNNFScେ௩੡ༀ
    
    

    View Slide

17. શମͷߏ੒
    w Ͷ͜΃Μʹઆ໌ͨ͠ͱ͖ͷਤ
    w σʔλஔ͖৔͸$POUFOUGVM
    w ϖʔδੜ੒͸(BUTCZ
    w ϏϧυɾσϓϩΠ͸/FUMJGZ
    w Α͋͘Δߏ੒
    w ͜ͷ൒೥Ͱ೔ຊޠهࣄ͕͔ͳΓ૿͑ͨؾ͕͢Δ
    
    

    View Slide

18. $POUFOUGVMͷσʔλΛදࣔ
    w (SBQI2-ͷΫΤϦͰऔಘͰ͖Δ
    w ։ൃॳظͷ୊ࣈৄࡉϖʔδͷྫɿ
    
    

    View Slide

19. ܕ͕΄͍͠
    w (BUTCZຊମͷ5ZQF4DSJQUҠߦ͕ਐΈͭͭ͋Δ΋ͷͷɺ·ͩಓ൒͹
    w HBUTCZQMVHJOUZQFTDSJQUͱHBUTCZQMVHJOUZQFHFOͰܕΛ͚ͭΔ
    w HBUTCZOPEFKTͳͲͷ5ZQF4DSJQUԽʹ͸ɺUTOPEFΛ࢖͏
    w (BUTCZKTΛ׬શ5ZQF4DSJQUԽ͢Δ2JJUB
    w 5ZQF4DSJQU(BUTCZDPOpHBOEOPEF"1*
    w (SBQI2-෦෼ͷܕ͸ɺ(BUTCZ͕σʔλ͔Βਪଌͯ͠෇͚͍ͯΔ
    w $POUFOUGVM্ͷ$POUFOU5ZQFͷఆٛ͸ແࢹ͞ΕΔ
    w (BUTCZͷ4DIFNB$VTUPNJ[BUJPO"1*Ͱ্ॻ͖Ͱ͖Δ͕ɺखؒ
    
    

    View Slide

20. 3JDI5FYU
    w 3JDI5FYU$POUFOUGVMͷϑΟʔϧυͷҰछ
    w ߏ଄੍͕ݶ͞Ε͍ͯͯ.BSLEPXOΑΓѻ͍΍͍͢
    w ผͷ&OUSZ΁ͷϦϯΫΛຒΊࠐΊΔ
    
    

    View Slide

21. 3JDI5FYUͷ᠘
    w ͕ɺ&OUSZ΁ͷϦϯΫ͕૿͑ͯ͘Δͱ(BUTCZͷϏϧυ͕མͪΔ
    w HBUTCZTPVSDFDPOUFOUGVMͷόάHBUTCZKTHBUTCZ
    w ࢀরઌͷ&OUSZΛ࠶ؼతʹ·Δ·Δऔಘͯ͠ຒΊࠐΉͱ͍͏߽շͳڍಈ
    w ॥؀ࢀর͕͋ΔͱམͪΔɻͳͯ͘΋མͪΔ
    w ݁ہී௨ͷϦϯΫʹஔ͖׵͑ͨ
    w εΫϦϓτͰҰׅॲཧ
    
    

    View Slide

22. /FUMJGZ'PSNT
    w ϑΥʔϜͷड͚ޱΛ؆୯ʹ࡞ΕΔɻ͓໰͍߹ͤϑΥʔϜΛ͜ΕͰ࣮૷
    w GPSNཁૉʹEBUBOFUMJGZUSVFΛࢦఆ͢Δ͚ͩ
    w ಧ͍ͨ಺༰Λ4MBDL΍ϝʔϧʹసૹ͢Δ͜ͱ΋Ͱ͖Δ
    
    

    View Slide

23. σβΠϯ೉͍͠
    

    View Slide

24. σβΠϯ೉͍͠
    w Ͷ͜΃Μ͕ͻͨ͢Βࢼߦࡨޡ͍ͯͨ͠
    
    

    View Slide

25. ৽ฉࢴ෩ͷσβΠϯ
    w ౰ॳਐΊΑ͏ͱ͍ͨ͠σβΠϯ
    w ৽ฉࢴ໘ͷີ౓͕࠶ݱͰ͖ͣɺͲ͏ͯ͠΋ύνϞϊײ͕ʜ
    w ݄͝ΖʹͳͬͯɺݱࡏͷσβΠϯ΁ͱํ޲స׵
    
    

    View Slide

26. ߜΓࠐΈϘοΫε
    w ϑΝʔετϏϡʔͰ·ͣ͸୊ࣈͷ෺ྔΛײͯ͡΄͔ͬͨ͠
    w ߜΓࠐΈϘοΫε͸ίϯύΫτʹ·ͱΊͨ
    w ͜Μͳͷ΋ࢼ͕ͨ͠ɺʮຊࣾॴࡏ஍ʯͷத਎͕ೖΓ੾Βͣஅ೦
    
    

    View Slide

27. εϚϗ޲͚σβΠϯ
    w ͣͬͱ1$޲͚ͷσβΠϯͰ࡞͍ͬͯͨ
    w िؒલ͙Β͍ʹΨοͱεϚϗʹରԠͤͨ͞
    w $IBLSB6*ʢͷϕʔεͷ4UZMFE4ZTUFNʣͷ͓͔͛Ͱ
    ࢥͬͨΑΓָͩͬͨ
    w ˢجຊ͸ࠨἧ͑ɺ
    ɹMHʢQYʣҎ্ͷը໘Ͱ͸தԝἧ͑ʹ͢Δྫ
    
    

    View Slide

28. ίϯϙʔωϯτͷग़͠෼͚
    w ϝχϡʔόʔͱ͔ɺߜΓࠐΈ෦෼ͱ͔
    w 443ͩͱIZESBUF࣌ʹද͕ࣔΨλ͍ͭͯ͠·͏ˠ!BSUTZGSFTOFMͰղফ
    
    

    View Slide

29. ͦͷ΄͔
    w ੈͷதͷσβΠφʔ͞Μ͍͢͝
    w Πϥετͷྗ΋͍͢͝
    w ϑΥϯτ·ΘΓͰ΋༧૝Ҏ্ʹۤઓ͕ͨ͠ɺ͖ΐ͏͸ׂѪ
    w ޙ೔ϒϩάʹͰ΋ॻ͘
    w $44Ͱ৽ฉॻମΛ૊Ήͷ೉͍͠໰୊
    w 8FCϑΥϯτͷ΋Ͳ͔͠͞
    
    

    View Slide

30. ͓ΘΓʹ
    

    View Slide

31. ΍ͬͯΈͯ
    w Ұ࿈ͷ੍࡞աఔͱɺ֤αʔϏεɾ֤ϥΠϒϥϦΛҰ௨Γ৮Δ͜ͱ͕Ͱ͖ͨ
    w ೤த͗ͯ͢͠ɺͦΕҎ֎ͷΠϯϓοτɾΞ΢τϓοτ͕͔ͳΓݮͬͨ
    w Ոఉ಺ͷ࿩୊͕ίϩφͱ୊ϖλʹ઎ྖ͞Εͯ͠·ͬͨ
    w Ͷ͜΃Μ͔ΒΊͬͪΌ๙ΊΒΕͨ
    w ࡞ָ͍͍ͬͯͯ͠
    
    

    View Slide

32. ͜Ε͔Β
    w ύϑΥʔϚϯε͕શવνϡʔχϯάͰ͖͍ͯͳ͍ͷͰվળ͢Δ
    w ΞΫηγϏϦςΟ΍ϢʔβϏϦςΟ΋
    w ܧଓతͳӡ༻ɾίϯςϯπ֦ॆ
    w աڈͷ୊ࣈͷௐࠪ
    
    

    View Slide

33. View Slide