Upgrade to Pro — share decks privately, control downloads, hide ads and more …

進化するAMPとはてなブログ / AMP and HatenaBlog Evolve

hogashi
June 26, 2019
1
1.8k

進化するAMPとはてなブログ / AMP and HatenaBlog Evolve

Hatena Engineer Seminar #12 (2019/06/26, 2019/07/03)

hogashi

June 26, 2019
Tweet

More Decks by hogashi

See All by hogashi
SLTとBBCのご紹介
hogashi
0
56
hogashi-hatena-intern-intro
hogashi
0
46

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Become a Pro
speakerdeck
PRO
26
5.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
270
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
1.9k
Speed Design
sergeychernyshev
28
820
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
390
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k

Transcript

  1. ਐԽ͢Δ".1ͱ ͸ͯͳϒϩά JEIPHBTIJ )BUFOB&OHJOFFS4FNJOBS

  2. גࣜձࣾ͸ͯͳ ೖࣾ ΞϓϦέʔγϣϯΤϯδχΞ ͸ͯͳϒϩά 1FSM+BWB4DSJQU JEIPHBTIJ

  3. JEIPHBTIJ ೖࣾ

  4. JEIPHBTIJ ೖࣾ ৽ଔͰ͢

  5. ࿩͢͜ͱ ".1 ͷ঺հ ͸ͯͳϒϩά ʹ͓͚Δ ".1 ͷ঺հ ".1 ͷਐԽ ͸ͯͳϒϩά

    ͷਐԽ

  6. ".1 IUNM⚡ ϨϯμϦϯά͕଎͍

  7. ".1 ߴ଎ʹදࣔͰ͖Δ8FCϖʔδΛ ؆୯ʹͭͬͨ͘Γ͢ΔͨΊͷ Φʔϓϯιʔεͳ 8FCϑϨʔϜϫʔΫ

  8. ".1 8FCϖʔδΛߴ଎ʹදࣔ

  9. ".1 8FCϖʔδΛߴ଎ʹදࣔ ഑৴ ϨϯμϦϯά

  10. ܾ·ͬͨܗͰॻ͘".1)5.- ϨϯμϦϯά

  11. ܾ·ͬͨܗͰॻ͘".1)5.- ϥϯλΠϜΛಡΈࠐΉ".1+4 ϨϯμϦϯά

  12. ܾ·ͬͨܗͰॻ͘".1)5.- ϥϯλΠϜΛಡΈࠐΉ".1+4 ".1+4͕".1)5.-Λ ϨϯμϦϯά ϨϯμϦϯά

  13. ߴ଎ͳϨϯμϦϯάͷͨΊʹ੍ݶ͕͋Δ ".1)5.-

  14. ߴ଎ͳϨϯμϦϯάͷͨΊʹ੍ݶ͕͋Δ ɾࣗ༝ͳTDSJQU͸ॻ͚ͳ͍ ɾJNHͰ͸ͳ͘BNQJNH w XJEUI IFJHIUͷࢦఆ͕ඞਢ ".1)5.- ͳͲ

  15. ϘΠϥʔϓϨʔτΛίϐϖͯ͠ ".1)5.-Խ IUUQTBNQEFWEPDVNFOUBUJPOHVJEFTBOEUVUPSJBMTTUBSUDSFBUFCBTJD@NBSLVQ

  16. ϘΠϥʔϓϨʔτΛίϐϖͯ͠ ".1)5.-Խ <img ... /> <amp-img ... ></amp-img> IUUQTBNQEFWEPDVNFOUBUJPOHVJEFTBOEUVUPSJBMTTUBSUDSFBUFCBTJD@NBSLVQ ݩͷ)5.-ͷ಺༰Λ

    ".1)5.-ʹॻ͖׵͑Δ

  17. ഑৴ ".1$BDIF

  18. ༗ޮͳ".1ϖʔδͷΈ ࠷దԽΛߦͬͯ $%/ ܦ༝Ͱߴ଎ʹ഑৴ ഑৴ ".1$BDIF

  19. ഑৴ ".1$BDIF (PPHMF $MPVEqBSFͳͲ͕୲౰ ༗ޮͳ".1ϖʔδͷΈ ࠷దԽΛߦͬͯ $%/ ܦ༝Ͱߴ଎ʹ഑৴

  20. ߴ଎ͳϨϯμϦϯά ߴ଎ͳίϯςϯπ഑৴ ".1 ⚡

  21. ".1͕Α͘ग़ͯ͘Δ৔ॴ εϚϗͰͷ(PPHMFݕࡧ݁Ռ ͸ͯͳϒοΫϚʔΫͷεϚϗΞϓϦ 5XJUUFSͷεϚϗΞϓϦ ͳͲ

  22. ".1͕Α͘ग़ͯ͘Δ৔ॴ

  23. ͸ͯͳϒϩάʹ͓͚Δ".1

  24. ͸ͯͳϒϩάʹ͓͚Δ".1 :"1 BDIJNPO $"TJB)BDIJPKJͰͷൃද IUUQTCMPHTVTIJNPOFZFOUSZZBQDPKJ

  25. ͸ͯͳϒϩάʹ͓͚Δ".1 ͸ͯͳϒϩάͱ͸ ೥͔Βఏڙ͍ͯ͠ΔϒϩάαʔϏε ݱࡏ ೥໨

  26. ͸ͯͳϒϩάʹ͓͚Δ".1 هࣄͷ ".1 ൛Λ഑৴͢Δػೳ IUUQTEFWFMPQFSIBUFOBTUB⒎DPNFOUSZ BNQ )BUFOB5FDI#PPLΛࢧ͑Δٕज़)BUFOB%FWFMPQFS#MPH FH IUUQIFMQIBUFOBCMPHDPNFOUSZBNQ

  27. ".1 ௨ৗ

  28. ϘΠϥʔϓϨʔτΛίϐϖͯ͠ ".1)5.-Խ ࠶ܝ <img ... /> <amp-img ... ></amp-img> IUUQTBNQEFWEPDVNFOUBUJPOHVJEFTBOEUVUPSJBMTTUBSUDSFBUFCBTJD@NBSLVQ

    ݩͷ)5.-ͷ಺༰Λ ".1)5.-ʹॻ͖׵͑Δ

  29. ͸ͯͳϒϩάʹ͓͚Δ".1 ͸ͯͳϒϩά هࣄʹ೚ҙͷ)5.-Λॻ͚Δ

  30. ϘΠϥʔϓϨʔτΛίϐϖͯ͠ ϒϩάهࣄͷ".1)5.-Խ <img ... /> <amp-img ... ></amp-img> IUUQTBNQEFWEPDVNFOUBUJPOHVJEFTBOEUVUPSJBMTTUBSUDSFBUFCBTJD@NBSLVQ ݩͷ)5.-ͷ಺༰Λ

    ".1)5.-ʹॻ͖׵͑Δ

  31. ϘΠϥʔϓϨʔτΛίϐϖͯ͠ ϒϩάهࣄͷ".1)5.-Խ <img ... /> <amp-img ... ></amp-img> IUUQTBNQEFWEPDVNFOUBUJPOHVJEFTBOEUVUPSJBMTTUBSUDSFBUFCBTJD@NBSLVQ ݩͷ)5.-ͷ಺༰Λ

    ".1)5.-ʹॻ͖׵͑Δ

  32. ϘΠϥʔϓϨʔτΛίϐϖͯ͠ ϒϩάهࣄͷ".1)5.-Խ <img ... /> <amp-img ... ></amp-img> IUUQTBNQEFWEPDVNFOUBUJPOHVJEFTBOEUVUPSJBMTTUBSUDSFBUFCBTJD@NBSLVQ ೚ҙͷ)5.-Λ

    ".1)5.-ʹॻ͖׵͑Δ

  33. ͸ͯͳϒϩάʹ͓͚Δ".1 ͸ͯͳϒϩά هࣄʹ೚ҙͷ)5.-͕ॻ͚Δ ࣗಈͰ".1)5.-ʹ ॻ͖׵͍͑ͯ·͢

  34. ࣗಈͰ".1)5.-ʹॻ͖׵͑Δ JNHˠBNQJNH JGSBNFˠBNQJGSBNF 5XJUUFSΧʔυˠBNQUXJUUFS ộ ॻ͖׵͑ϙϦγʔΛॻ͘

  35. ࣗಈͰ".1)5.-ʹॻ͖׵͑Δ JNHˠBNQJNH JGSBNFˠBNQJGSBNF 5XJUUFSΧʔυˠBNQUXJUUFS ộ UZQPͳͲ͸༧ଌෆՄೳ ॻ͖׵͑ϙϦγʔΛॻ͘

  36. ഑৴ ࠶ܝ ".1$BDIF (PPHMF $MPVEqBSFͳͲ͕୲౰ ༗ޮͳ".1ϖʔδͷΈ ࠷దԽΛߦͬͯ $%/ ܦ༝Ͱߴ଎ʹ഑৴

  37. ".1)5.-͕ෆ׬શͩͱ Ωϟογϡͯ͠΋Β͑ͳ͍ ࣗಈͰ".1)5.-ʹॻ͖׵͑Δ

  38. ༗ޮͳ".1)5.-͔Ͳ͏͔Λ ".1όϦσʔλ͕൑அ ࣗಈͰ".1)5.-ʹॻ͖׵͑Δ

  39. ༗ޮͳ".1)5.-͔Ͳ͏͔Λ ".1όϦσʔλ͕൑அ ࣗಈͰ".1)5.-ʹॻ͖׵͑Δ ".1όϦσʔλ͸ όϦσʔγϣϯϧʔϧʹैͬͯಈ͘

  40. ࣗಈͰ".1)5.-ʹॻ͖׵͑Δ ".1όϦσʔλͰΤϥʔʹͳΔՕॴΛ όϦσʔγϣϯϧʔϧʹैͬͯमਖ਼͢Ε͹Α͍

  41. ࣗಈͰ".1)5.-ʹॻ͖׵͑Δ JNHˠBNQJNH JGSBNFˠBNQJGSBNF 5XJUUFSΧʔυ JGSBNF ˠBNQUXJUUFS ộ ".1όϦσʔλͷ όϦσʔγϣϯϧʔϧʹԊͬͯमਖ਼ 

    ॻ͖׵͑ϙϦγʔΛॻ͘

  42. ࣗಈͰ".1)5.-Λ௚͢ ".1όϦσʔλͷ όϦσʔγϣϯϧʔϧ ".1ެࣜͷϦϙδτϦʹ͋Δ IUUQTHJUIVCDPNBNQQSPKFDUBNQIUNMCMPC NBTUFSWBMJEBUPSWBMJEBUPSNBJOQSPUPBTDJJ

  43. λά͝ͱʹϧʔϧ͕͋Δ 1SPUPDPM#VGGFST +40/ʹ௚ͯ͠ࢀর σόοά࣌͸໨ͰಡΉ όϦσʔγϣϯϧʔϧ

  44. ϧʔϧʹແ͍λά͸ফ͢ ྫGPOU ଐੑͷ஋Λ௚͢ ྫUBSHFUIPHF ˠUBSHFU@CMBOL ࣗಈͰ".1)5.-Λ௚͢ ͳͲ

  45. όϦσʔγϣϯϧʔϧ͕ߋ৽͞ΕͨΒ GFUDI͢Δ͚ͩͰߋ৽׬ྃ ࣗಈͰ".1)5.-Λ௚͢

  46. όϦσʔγϣϯϧʔϧΛࢀরͯ͠ Ͱ͖Δ͚ͩमਖ਼͢Δ ࣗಈͰ".1)5.-Λ௚͢ πʔϧͱͯ͠ެ։͠·ͨ͠ IUUQTHJUIVCDPNIPHBTIJBNQBVUPpY ͓࢖͍͍ͩ͘͞

  47. ".1  ͷਐԽ

  48. ೥ʹ "DDFMFSBUFE.PCJMF1BHFT ͱͯ͠ొ৔ ".1  ͷਐԽ

  49. ϞόΠϧʹݶఆ͠ͳ͍ ".1  ͷਐԽ

  50. "DDFMFSBUFE.PCJMF1BHFT ".1 ".1 ϞόΠϧʹݶఆ͠ͳ͍ ".1  ͷਐԽ

  51. 8FCϑϨʔϜϫʔΫͱͯ͠޿͘࢖͑Δ 1$ͳͲͰ΋ݟΒΕΔ ϞόΠϧʹݶఆ͠ͳ͍ ".1  ͷਐԽ

  52. ".1$POGͳͲʹৄ͍͠ IUUQTBNQEFWKBFWFOUTBNQDPOG ΄͔ʹ΋͍Ζ͍Ζ ".1  ͷਐԽ

  53. ͸ͯͳϒϩά  ͷਐԽ

  54. ·ͣ͸جૅݻΊ͔Β هࣄͷ ".1 ൛ ഑৴ػೳΛվળ͍ͨ͠ ͸ͯͳϒϩά  ͷਐԽ

  55. ͸ͯͳϒϩά  ͷਐԽ όϦσʔγϣϯϧʔϧͷߋ৽

  56. όϦσʔγϣϯϧʔϧ͕ߋ৽͞ΕͨΒ GFUDI͢Δ͚ͩͰߋ৽׬ྃ ࣗಈͰ".1)5.-Λ௚͢ ࠶ܝ

  57. όϦσʔγϣϯϧʔϧ͕ߋ৽͞ΕͨΒ GFUDI͢Δ ํ਑͸ྑ͔͚ͬͨͲ Ћ όϦσʔγϣϯϧʔϧͷߋ৽

  58. όϦσʔγϣϯϧʔϧͷߋ৽

  59. ͓΍͓΍

  60. None

  61. "33": Y

  62. ഑ྻʹͳͬͯΔʜʜ

  63. None

  64. WBMVF͸ͭͷ஋ͩͬͨ ˠ഑ྻʹ DBTFJOTFOTJUJWFͳ ஋͕ొ৔ όϦσʔγϣϯϧʔϧͷߋ৽

  65. ".1ͷਐԽʹΑͬͯϧʔϧ΋มԽ σʔλεΩʔϚ ڐՄ͞ΕΔ஋ όϦσʔγϣϯϧʔϧͷߋ৽

  66. มߋ఺Λमਖ਼͢Δ͚ͩͰ ࠷৽ʹ௥ैͰ͖ͨ όϦσʔγϣϯϧʔϧج࣠(PPE ͸ͯͳϒϩά  ͷਐԽ

  67. ͸ͯͳϒϩά  ͷਐԽ ͜Ε͔Β ɾBNQTPDJBMTIBSFͱ͔ ɾBNQCJOEͱ͔࢖ͬͯΈ͍ͨ

  68. ͸ͯͳϒϩά  ͷਐԽ ".1 ൛ ഑৴ػೳΛڧԽ͍ͨ͠ ͜Ε͔Β ɾBNQTPDJBMTIBSFͱ͔ ɾBNQCJOEͱ͔࢖ͬͯΈ͍ͨ

  69. ࡶஊ

  70. HJUHSFQBNQ

  71. HJUHSFQBNQ

  72. HJUHSFQBNQ BNQ DBNQBJHO FYBNQMF

  73. HJUHSFQBNQ BNQ DBNQBJHO FYBNQMF

  74. ͜Ε͔Β ɾBNQTPDJBMTIBSFͱ͔ ɾBNQCJOEͱ͔࢖ͬͯΈ͍ͨ ͸ͯͳϒϩά  ͷਐԽ ".1 ൛ ഑৴ػೳΛڧԽ͍ͨ͠