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 ʹৄ͍͠ਓ͍ͨΒ͓࿩͠ฉ͔͍ͤͯͩ͘͞