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

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

hogashi
June 26, 2019
1
1.7k

進化する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
44
hogashi-hatena-intern-intro
hogashi
0
41

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Web development in the modern age
philhawksworth
203
10k
How STYLIGHT went responsive
nonsquared
92
4.8k
Into the Great Unknown - MozCon
thekraken
15
1k
The Language of Interfaces
destraynor
151
23k
Typedesign – Prime Four
hannesfritz
36
2.1k
Thoughts on Productivity
jonyablonski
60
3.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Design by the Numbers
sachag
274
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
The Invisible Side of Design
smashingmag
294
49k

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 ൛ ഑৴ػೳΛڧԽ͍ͨ͠