gatsby-imageをやめたいから勉強した話 -gatsbyをamp化したい-

Transcript

1. HBUTCZJNBHF
   ΛࣙΊͨͯ͘ษڧͨ͠࿩ ૣ͍(BUTCZΛBNQͰ΋ͬͱૣ͘͢ΔͨΊʹ :VUB
   *EF
   !TBEOFTT0KJTBO .FHVSPFT

2. ͋Δ೔ͷ๻ ʮૣ͍αΠτ࡞Ζʯ

3. ઌഐʹ૬ஊ ʮૣ͍ͷ΍Γ͍ͨʯ ʮ(BUTCZૣ͍Αʯ ʮ".1ૣ͍Αʯ

4. ʢ͖ͬͱɺʮૣ͍
   ૣ͍ 
   ര଎ʯͩͳʣ

5. Ͱɺ A A D

6. ݁Ռ

7. ࠓ೔࿩͢಺༰͸ɾɾɾ HBUTCZJNBHF
   ͱ BNQ͕ڝ߹ͯ͠ɺHBUTCZJNBHFΛ΍Ίͨ͘ͳͬͨ HBUTCZJNBHFΛফͨ͢ΊʹɺHBUTCZJNBHFΛษڧͨ͜͠ͱͷ·ͱΊ

8. ͬ͘͟Γ(BUTCZͱ͸ • 3FBDUͰॻ͚Δ੩తαΠτδΣωϨʔλ • OQNͳͲʹ͋ΔϓϥάΠϯͰػೳΛ֦ுͰ͖Δ • ύϑΥʔϚϯε͕ྑ͍ʢ଎͍ʣαΠτ͕ੜ੒͞ΕΔ • ී௨ͷαΠτΛര଎ͳαΠτʹม׵͢ΔίϯύΠϥͱ͍͏ݟํ΋ Ͱ͖Δ

   
   - 2 ) 7/ 13 01 -7 . ) 7 1 )

9. HBUTCZJNBHF
   ͱ͸ • (BUTCZͷϓϥάΠϯ • ը૾पΓͷύϑΥνϡʔΛΑ͠ͳʹ΍ͬͯ͘ΕΔ

10. ը૾ͷ࠷దԽྫ 
       
     

     (BUTCZͰ#VJME (BUTCZʹೖΕͣʹɺૉͷ JOEFYIUNMʹը૾ΛೖΕͯܭଌ 
    Y
    ͷେ͖͍ը૾

11. HBUTCZJNBHF
    ͱ͸ HBUTCZJNBHF
    ࢖͏͚ͩͰྑ͍͜ͱ͋Γͦ͏ʂʂʢϑϥάʣ αΠζ
    .#
    ˠ # ଎౓
    NT
    ˠ NT ۃ୺ͳྫͰ͢Έ·ͤΜ

12. ϑϥάճऩ • HZQ
    &33
    OPEFHZQ
    • %*4"--08&%
    )5.- HBUTCZJNBHF
    ͕ ੜ੒ͨ͠࠷దԽ )5.-
    ͸ ".1
    ͷ੍໿Λຬͨ͞ͳ͍

13. BNQ
    ରԠͭΒ͍ • HBUTCZJNBHF͸ը૾Λ#BTFͰJOMJOF
    DTT CBDLHSPVOE JNBHF ͱͯ͠ల։͢Δ 
    UBHͷ௕͞ʹ੍ݶ͕͋Δ
    *OMJOFͷ#BTFܗࣜ͸৯͍ͭͿ͢ • ͍ΖΜͳ΋ͷΛUBHͷBUUSJCVUFʹઃఆ͢Δ FY
    MPBEJOHlMB[Zz

    
    JNBHF BNQJNBHF λά͸ TSD
    BMU
    ͳͲࢦఆ͞ΕͨBUUSJCVUF͠ ͔࢖͑ͳ͍

14. Ͱ΋ؤுΔΑ • HBUTCZJNBHFΛ֎ͤ͹".1ରԠ͸Ͱ͖ͦ͏ • HBUTCZJNBHF͕ͯ͘͠Ε͍ͯΔ͜ͱΛࣗྗͰ΍Ζ͏ • HBUTCZJNBHF͕ԿΛ͍ͯ͠Δ͔ษڧ͢Δͧʂʂʂʂ ˞
    ࿩ͷࠊΛંΒͳ͍ͨΊʹ͜͜Ͱ͸ແࢹ͠·͕͢ɺHBUTCZJNBHF֎ͯ͠΋ɺ".1ରԠ͸ݫ ͍͠Ͱ͢ɻ ͸ͯϒͷϘλϯɺΞΫηεܭଌͳͲɺࢼ࿅͕·ͩ·ͩ଴ͪड͚͍ͯ·͢

15. HBUTCZJNBHF͕΍͍ͬͯΔ͜ͱ͸̎ͭʂ  ༩͑ΒΕͨΫΤϦΛݩʹɺը૾ΛTPVSDF͔Βऔಘ͢Δ  ༩͑ΒΕͨΫΤϦΛݩʹը૾ͷม׵΍Ճ޻Λ͢Δ Ϗϧυ࣌ʹը૾Λ࠷దԽ͢Δ

16. HBUTCZJNBHF͕ߦ͏ม׵΍࠷దԽ  ը૾αΠζ΍ղ૾౓Λ࠷దԽ  σόΠεαΠζʹ͋ͬͨը૾Λෳ਺छྨੜ੒  ը૾͔ΒϝλσʔλΛ࡟আ  ը૾ΛϨϯμϦϯά͢Δલʹग़ܰ͢ྔͳμϛʔը૾΋ੜ੒

17. 5SBDFE
    47( (BUTCZͷը૾͕ʮ;Θͬʯͬ ͯදࣔ͞ΕΔཪଆʹ͋Δ࢓૊Έ ܰྔͳ47(Λ༻ҙ͠ɺຊը૾ ͕ͰΔ·Ͱ͸47(Λදࣔͤ͞ Δ ຊը૾͕MPBE͞ΕͨΒ੾Γସ ͑Δ // .

    . /. /. . -

18. 47(Ͱ͋Δඞཁ͸ʁ . 57 / 4 46 7.45 6 7:- /

    - 7 46 ը૾ͷࠩ͠ସ͑͸ͨͩͷTLFMUPO WJFX ͱಉ͡Ͱ͋Γɺಛච͢Δ΋ͷͰ͸ͳ͍ ͜ͷख๏͕͍͢͝ͱ͜Ζ͸ը૾͔Βɺͦ ΕΛτϨʔεͨ͠47(Λ࡞੒͍ͯ͠Δͱ ͜Ζɻ͔͠΋Ϗϧυ࣌ʹʂʂʂʂ ߥ͍ը૾͸47(ͷํ͕αΠζ΋খ͘͞଎ ͍ʂ

19. HBUTCZJNBHFͷੜ੒෺ΛJOTQFDUPSͰΈΔͱ  ը૾͕CBTFܗࣜͰJOMJOF ͰຒΊࠐ·Ε͍ͯΔ  *NBHFλάʹṖͷQBEEJOH ͕ઃఆ͞Ε͍ͯΔ  TSDTFUͰը૾Λࢦఆ //

    . . /. /. . -   
    
    
    

20. #BTFͰJOMJOFԽ͢Δཧ༝ ը૾ΛϑΝΠϧͱͯ͠%-͠ͳ͍ͷͰϦΫΤετ਺ΛݮΒͤΔ $44 CBDLHSPVOEJNBHFͳͲ
    ΛΠϯϥΠϯ$44Ͱࢦఆ͢Ε͹ɺ $44ϑΝΠϧͷϦΫΤετ਺ΛݮΒͤΔ

21. ಾͷQBEEJOH͕͋Δཧ༝ ٖࣅཁૉͷQBEEJOHΛ࢖ͬͨɺ ը૾ͷΞεϖΫτൺΛมߋ͢ ΔςΫχοΫ HBUTCZJNBHF͸2VFSZΛ ࢖ͬͯɺ1$༻ɾ41༻ʹҟͳΔ ΞεϖΫτൺͷը૾Λు͖ग़ ͤΔ

22. TSDTFU͕͋Δཧ༝ σόΠεຖʹը૾Λग़͠෼͚ΔςΫχοΫ 3FUJOB޲͚ɺେ͖͍8JOEPX޲͚ʹग़͠෼͚ΒΕΔ ϒϥ΢βʹ΋ΑΓ·͕͢ɺࣗ਎͕ඞཁͳը૾͚͕࣮ͩࡍʹ%-͞ΕΔ

23. HBUTCZJNBHF͔Βֶ΂ͨ͜ͱҰཡ ͜Εࣗ࡞ͨ͠ΒHBUTCZJNBHF͍Βͳ͍͡ΌΜ  ը૾αΠζ΍ղ૾౓Λ࠷దԽ  σόΠεαΠζʹ͋ͬͨը૾Λෳ਺छྨੜ੒  ը૾͔ΒϝλσʔλΛ࡟আ  ը૾ΛϨϯμϦϯά͢Δલʹग़ܰ͢ྔͳμϛʔը૾΋ੜ੒

     #BTFʹม׵  ը૾Λ*OMJOFʹ  ΞεϖΫτൺΛٖࣅཁૉͷQBEEJOHͰࢦఆ  σόΠεຖʹෳ਺ը૾ੜ੒  TSDTFUͰࢦఆ

24. Ͱ͖Δ͔ʔʔʔʂʂʂ

25.  ࠷దԽΛϕετΤϑΥʔτͰؤுΔ  ͳΜͱ͔ͯ͠HBUTCZJNBHFΛಈ͔͢

26. ϕετΤϑΥʔτͰؤுΔ     
      ༗ࣝऀᐌ͘ɺ஗͍αΠτ͸ը૾ͷ αΠζपΓ͕Ψό͍͚ͩɻ ͦΕΛؾΛ͚ͭΔ͚ͩͰૣ͘ͳΔ

    ѹॖ͢Δ 
    UJOZQOH σεΫτοϓͱϞόΠϧͰը૾Λ ෼͚Δ

27. ͳΜͱ͔ͯ͠HBUTCZJNBHFΛಈ͔͢ "NQͷ્֐Λ͠ͳ͍Α͏ʹHBUTCZJNBHFΛ࡞Γม͑Δ ˣ λάͷMPBEJOHͱ#BTFΛফͯ͠͠·͑͹͍Μͩʂ ˠ ࡞ͬͨɻʢਖ਼֬ʹ͸HBUTCZSFNBSLJNBHFTͷQMVHJOʣ IUUQTXXXOQNKTDPNQBDLBHFHBUTCZSFNBSLJNBHFTXJUIPVUCH

28. ͳΜͱ͔ͯ͠HBUTCZJNBHFΛಈ͔͢ "NQͷ્֐Λ͠ͳ͍Α͏ʹHBUTCZJNBHFΛ࡞Γม͑Δ ˣ λάͷMPBEJOHͱTJ[FΛফͯ͠͠·͑͹͍Μͩʂ ˠ ࡞ͬͨɻʢਖ਼֬ʹ͸HBUTCZSFNBSLJNBHFTͷQMVHJOʣ IUUQTXXXOQNKTDPNQBDLBHFHBUTCZSFNBSLJNBHFTXJUIPVUCH ಈ͖·ͤΜͰͨ͠

29. ͳΜͱ͔ͯ͠HBUTCZJNBHFΛಈ͔͢ "NQͷ્֐Λ͠ͳ͍Α͏ʹHBUTCZJNBHFΛ࡞Γม͑Δ ˣ λάͷMPBEJOHͱTJ[FΛফͯ͠͠·͑͹͍Μͩʂ ˠ ࡞ͬͨɻʢਖ਼֬ʹ͸HBUTCZSFNBSLJNBHFTͷQMVHJOʣ IUUQTXXXOQNKTDPNQBDLBHFHBUTCZSFNBSLJNBHFTXJUIPVUCH ଥڠͯ͠ɺHBUTCZJNBHF֎͠·ͨ͠

30. ·ͨɺ໌೔͔ΒؤுΖ͏ͱࢥ͍·͢ ࠙਌ձͰ (BUTCZ
    ΍ ".1 ʹৄ͍͠ਓ͍ͨΒ͓࿩͠ฉ͔͍ͤͯͩ͘͞