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

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

33ef4c1ebe619115b552db9a9f9a3509?s=128

sadnessOjisan

August 08, 2019
Tweet

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&33OPEFHZQ • %*4"--08&%)5.- HBUTCZJNBHF͕ ੜ੒ͨ͠࠷దԽ )5.-͸ ".1ͷ੍໿Λຬͨ͞ͳ͍

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

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

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

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

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