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

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

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

Transcript

1. 
   ୊ࣈϖλϖλ
   $POUFOUGVM
   
   (BUTCZ
   Ͱ࡞Δ
   ίϨΫγϣϯαΠτ ೥݄೔
   !NBTIBCPX
2. ࠓճͷςʔϚ w ৽ฉͷ୊ࣈΛ͋ͭΊͨαΠτΛ࡞ͬͨΑ
   w ୊ࣈϖλϖλ
   IUUQTEBJQFUBDPN 
3. ܦҢ w Ͷ͜΃Μ
   ࠺
   
   ͕ɺ೥͝ΖʹझຯͰ୊ࣈΛ͋ͭΊͨ
   w Ҏલ͔ΒʮαΠτʹ·ͱΊ͍ͨʯͱ͍͏࿩͸ฉ͍͍ͯͨ
   w ݄͝Ζɺલճͷൃද΋ऴΘͬͯҰଉ͍ͭͨͷͰɺ;ͨΓͰ΍Δ͔ʔͱͳͬͨ
   w ίϩφͰࡏ୐ͷ͕࣌ؒ૿͑ͨ͜ͱ΋͋Γɺूதͯ͠࡞Δ͜ͱʹ 
4. ୲౰  ઃܭ σʔλऩू
   ίϯςϯπࣥච ·͠Ό΅͏ɹͶ͜΃Μ ϩΰ࡞੒ ࣮૷ Πϥετ࡞੒ σβΠϯ
5. ํ਑ w ·ͣͰ͖Δͱ͜Ζ͔Β࡞ͬͯͬ͞͞ͱಈ͔͢
   w ׬ᘳΛٻΊͳ͍
   w ָ͘͠΍Δ
   w ࣗ෼͕ͨͪཉ͍͠΋ͷΛ࡞Δ
   
6. 
   ୊ࣈը૾Λ༻ҙ͢Δ
7. εΩϟϯ w ੾Γऔͬͨ୊ࣈΛͳΒ΂ͯɺ
   ී௨ͷεΩϟφͰεΩϟϯ
   w ਺͑ͯΈͨΒຕҎ্ͷ୊ࣈ͕͋ͬͨ 
8. ը૾Λ੾Γൈ͘ w ຕຕ੾Γൈ͍ͯอଘ͢Δͷ͸໘౗
   w ੾Γൈ͖ઐ༻ͷ؆୯ͳΞϓϦΛ࡞ͬͨ
   w IUUQTHJUIVCDPNNBTIBCPXLJSJOVLJ
   w IUUQTNBTIBCPXHJUIVCJPLJSJOVLJ 
9. ੾Γൈ͖ΞϓϦ w ຊ౰͸
   w (PPHMF
   υϥΠϒ͔ΒεΩϟϯը૾Λ։͘
   w ܏͖΍ྖҬΛࣗಈݕग़
   w ϒϥ΢β্Ͱ੾Γൈ͍ͨը૾Λੜ੒
   w ੜ੒ͨ͠ը૾ΛΞοϓϩʔυ
   w ʜ͕Ͱ͖Δͱ͔͍͍͕ͬ͜ɺࠓճ͸΍Βͳ͔ͬͨ
   w ͦ͜·ͰͷखؒΛ͔͚Δ΄ͲͷྔͰ͸ͳ͍
   
10. ୊ࣈը૾͕ἧͬͨ w ΞϓϦͰ࡞ͬͨ੾Γൈ͖σʔλΛ΋ͱʹɺ*NBHF.BHJDL
    ͰεΫϦϓτॲཧ
    w ͜͜·Ͱिؒఔ౓
    w ͔ͳΓॱௐ
    w ϑϧϦϞʔτ͕࢝·ͬͨ͜Ζ 
11. 
    ୊ࣈσʔλΛ
    $POUFOUGVM
    ʹೖΕΔ
12. σʔλஔ͖৔ w σʔλɿ୊ࣈͷઆ໌ͱ͔ɺ৽ฉ໊ͱ͔ɺ஍໲ͷछྨͱ͔ʜ
    w Ͷ͜΃Μ͕
    (PPHMF
    εϓϨουγʔτʹ͋Δఔ౓·ͱΊ͍ͯͨ
    w ͕ɺεϓϨουγʔτʹจষΛॻ͍ͨΓɺը૾ΛషͬͨΓ͢Δͷ͸ͭΒ͍ 
13. $POUFOUGVM w IFBEMFTT
    $.4
    Ͱ͋Δ
    $POUFOUGVM
    ʹσʔλΛೖΕΔ͜ͱʹͨ͠
    w IFBEMFTT
    $.4
    Ӿཡऀ޲͚ͷϏϡʔ͕ͳ͍
    $.4
    w ฤूऀ޲͚ͷϏϡʔ͸͋Δ
    w ݸਓαΠτఔ౓ͩͬͨΒ
    $POUFOUGVM
    ͷແྉ࿮ʹऩ·Δ 
14. σʔλΛೖΕΔ w $POUFOU
    5ZQF
    Λఆٛͯ͠ɺ
    &OUSZ
    ͸εϓϨουγʔτͷσʔλ͔ΒεΫϦϓτͰྲྀ͠ࠐΈ
    
    खͰ௥Ճ 
15. 
    (BUTCZ
    ͰαΠτΛ࡞Δ
16. (BUTCZ w $POUFOUGVM
    ͸
    IFBEMFTT
    $.4
    ͳͷͰɺӾཡऀ޲͚ͷϏϡʔ͸ࣗ෼Ͱ༻ҙ͢Δ
    w ԿͰ΋͍͍͕ɺࠓճ͸
    (BUTCZ
    Λ࢖ͬͨ
    w 3FBDU
    
    (SBQI2-
    ϕʔεͷ੩తαΠτδΣωϨʔλ
    w σϑΥϧτͷঢ়ଶͰ͍͍ײ͡ʹ଎͍αΠτ͕࡞ΕΔ
    w ϓϥάΠϯ͕๛෋
    w ͔ͨ͠ΧϩϦʔϝΠτͷϓϩϞʔγϣϯαΠτͰ΋࢖ΘΕ͍ͯͨ
    w $BMPSJF.BUF
    UP
    1SPHSBNNFS
    c
    େ௩੡ༀ 
17. શମͷߏ੒ w Ͷ͜΃Μʹઆ໌ͨ͠ͱ͖ͷਤ
    
    w σʔλஔ͖৔͸
    $POUFOUGVM
    w ϖʔδੜ੒͸
    (BUTCZ
    w ϏϧυɾσϓϩΠ͸
    /FUMJGZ
    w Α͋͘Δߏ੒
    w ͜ͷ൒೥Ͱ೔ຊޠهࣄ͕͔ͳΓ૿͑ͨؾ͕͢Δ 
18. $POUFOUGVMͷσʔλΛදࣔ w (SBQI2-
    ͷΫΤϦͰऔಘͰ͖Δ
    w ։ൃॳظͷ୊ࣈৄࡉϖʔδͷྫɿ 
19. ܕ͕΄͍͠ w (BUTCZ
    ຊମͷ
    5ZQF4DSJQU
    Ҡߦ͕ਐΈͭͭ͋Δ΋ͷͷɺ·ͩಓ൒͹
    w HBUTCZQMVHJOUZQFTDSJQU
    ͱ
    HBUTCZQMVHJOUZQFHFO
    ͰܕΛ͚ͭΔ
    w HBUTCZOPEFKT
    ͳͲͷ
    5ZQF4DSJQU
    Խʹ͸ɺUTOPEF
    Λ࢖͏
    w (BUTCZKT
    Λ׬શ5ZQF4DSJQUԽ͢Δ
    
    2JJUB
    w 5ZQF4DSJQU
    
    (BUTCZ
    DPOpH
    BOE
    OPEF
    "1*
    w (SBQI2-
    ෦෼ͷܕ͸ɺ(BUTCZ
    ͕σʔλ͔Βਪଌͯ͠෇͚͍ͯΔ
    w $POUFOUGVM
    ্ͷ
    $POUFOU
    5ZQF
    ͷఆٛ͸ແࢹ͞ΕΔ
    
    w (BUTCZ
    ͷ
    4DIFNB
    $VTUPNJ[BUJPO
    "1*
    Ͱ্ॻ͖Ͱ͖Δ͕ɺखؒ 
20. 3JDI
    5FYU w 3JDI
    5FYU
    $POUFOUGVM
    ͷϑΟʔϧυͷҰछ
    w ߏ଄੍͕ݶ͞Ε͍ͯͯ
    .BSLEPXO
    ΑΓѻ͍΍͍͢
    w ผͷ
    &OUSZ
    ΁ͷϦϯΫΛຒΊࠐΊΔ 
21. 3JDI
    5FYU
    ͷ᠘ w ͕ɺ&OUSZ
    ΁ͷϦϯΫ͕૿͑ͯ͘Δͱ
    (BUTCZ
    ͷϏϧυ͕མͪΔ
    
    w HBUTCZTPVSDFDPOUFOUGVM
    ͷόά
    HBUTCZKTHBUTCZ
    w ࢀরઌͷ
    &OUSZ
    Λ࠶ؼతʹ·Δ·Δऔಘͯ͠ຒΊࠐΉͱ͍͏߽շͳڍಈ
    w ॥؀ࢀর͕͋ΔͱམͪΔɻͳͯ͘΋མͪΔ
    w ݁ہී௨ͷϦϯΫʹஔ͖׵͑ͨ
    w εΫϦϓτͰҰׅॲཧ 
22. /FUMJGZ
    'PSNT w ϑΥʔϜͷड͚ޱΛ؆୯ʹ࡞ΕΔɻ͓໰͍߹ͤϑΥʔϜΛ͜ΕͰ࣮૷
    w GPSN
    ཁૉʹ
    EBUBOFUMJGZUSVF
    Λࢦఆ͢Δ͚ͩ
    w ಧ͍ͨ಺༰Λ
    4MBDL
    ΍ϝʔϧʹసૹ͢Δ͜ͱ΋Ͱ͖Δ 
23. 
    σβΠϯ೉͍͠
24. σβΠϯ೉͍͠ w Ͷ͜΃Μ͕ͻͨ͢Βࢼߦࡨޡ͍ͯͨ͠ 
25. ৽ฉࢴ෩ͷσβΠϯ w ౰ॳਐΊΑ͏ͱ͍ͨ͠σβΠϯ
    w ৽ฉࢴ໘ͷີ౓͕࠶ݱͰ͖ͣɺͲ͏ͯ͠΋ύνϞϊײ͕ʜ
    w ݄͝ΖʹͳͬͯɺݱࡏͷσβΠϯ΁ͱํ޲స׵ 
26. ߜΓࠐΈϘοΫε w ϑΝʔετϏϡʔͰ·ͣ͸୊ࣈͷ෺ྔΛײͯ͡΄͔ͬͨ͠
    w ߜΓࠐΈϘοΫε͸ίϯύΫτʹ·ͱΊͨ
    w ͜Μͳͷ΋ࢼ͕ͨ͠ɺʮຊࣾॴࡏ஍ʯͷத਎͕ೖΓ੾Βͣஅ೦ 
27. εϚϗ޲͚σβΠϯ w ͣͬͱ
    1$
    ޲͚ͷσβΠϯͰ࡞͍ͬͯͨ
    w िؒલ͙Β͍ʹΨοͱεϚϗʹରԠͤͨ͞
    w $IBLSB
    6*ʢͷϕʔεͷ
    4UZMFE
    4ZTUFNʣͷ͓͔͛Ͱ
    ࢥͬͨΑΓָͩͬͨ
    w ˢ
    جຊ͸ࠨἧ͑ɺ
    
    ɹMHʢQYʣҎ্ͷը໘Ͱ͸தԝἧ͑ʹ͢Δྫ 
28. ίϯϙʔωϯτͷग़͠෼͚ w ϝχϡʔόʔͱ͔ɺߜΓࠐΈ෦෼ͱ͔
    w 443
    ͩͱ
    IZESBUF
    ࣌ʹද͕ࣔΨλ͍ͭͯ͠·͏
    ˠ
    !BSUTZGSFTOFM
    Ͱղফ 
29. ͦͷ΄͔ w ੈͷதͷσβΠφʔ͞Μ͍͢͝
    w Πϥετͷྗ΋͍͢͝
    w ϑΥϯτ·ΘΓͰ΋༧૝Ҏ্ʹۤઓ͕ͨ͠ɺ͖ΐ͏͸ׂѪ
    w ޙ೔ϒϩάʹͰ΋ॻ͘
    w $44
    Ͱ৽ฉॻମΛ૊Ήͷ೉͍͠໰୊
    w 8FC
    ϑΥϯτͷ΋Ͳ͔͠͞ 
30. ͓ΘΓʹ
31. ΍ͬͯΈͯ w Ұ࿈ͷ੍࡞աఔͱɺ֤αʔϏεɾ֤ϥΠϒϥϦΛҰ௨Γ৮Δ͜ͱ͕Ͱ͖ͨ
    w ೤த͗ͯ͢͠ɺͦΕҎ֎ͷΠϯϓοτɾΞ΢τϓοτ͕͔ͳΓݮͬͨ
    w Ոఉ಺ͷ࿩୊͕ίϩφͱ୊ϖλʹ઎ྖ͞Εͯ͠·ͬͨ
    w Ͷ͜΃Μ͔ΒΊͬͪΌ๙ΊΒΕͨ
    w ࡞ָ͍͍ͬͯͯ͠ 
32. ͜Ε͔Β w ύϑΥʔϚϯε͕શવνϡʔχϯάͰ͖͍ͯͳ͍ͷͰվળ͢Δ
    w ΞΫηγϏϦςΟ΍ϢʔβϏϦςΟ΋
    w ܧଓతͳӡ༻ɾίϯςϯπ֦ॆ
    w աڈͷ୊ࣈͷௐࠪ