phpcondo2017_15min_AMP

AMPରԠͱ͔ͦͷ΁Μͷ࿩ @uessy_akr

͸͡Ί·ͯ͠ʂ ΋͘͠͸͓ٱ͠ͿΓͰ͢ɻ ਓੜ2ճ໨ͷ๺ւಓɻ פ͍ʂʂʂw • ͏͑͠ʔ @uessy_akr • ओʹTwitterʹੜଉ͍ͯ͠ΔίΞϥ •
σΟϨΫγϣϯ ٴͼ ։ൃ @

஌Γ߹͍ͷํ ʮ".1ରԠ͍ͨ͠ΜͰ͢ΑͶʔʯ ʮͳΔ΄Ͳʯ

AMPͱ͸ʁ ͜Εɻ (PPHMFݕࡧ݁ՌͰ͸ ཕϚʔΫ͕෇͍͍ͯΔ

AMPͱ͸ʁ Google͞Μᐌ͘ ".1ϓϩδΣΫτ͸ɺϞόΠϧΠϯλʔωοτͷ ߴ଎ԽΛ໨ࢦ͢Φʔϓϯιʔεͷऔ૊ΈͰ͢ɻ ೥݄೔ (PPHMF+BQBO#MPHϞόΠϧ΢ΣϒΛ΋ͬͱ଎͘ IUUQTKBQBOHPPHMFCMPHDPNCMPHQPTU@IUNMΑΓ

AMPͱ͸ʁ ඞਢࣄ߲(1/2) wEPDUZQFIUNMͰ࢝ΊΔ͜ͱɻ wIUNM͸IUNM⚡΋͘͠͸IUNMBNQͱॻ͘ɻ wIFBEͱCPEZ͕ඞཁɻ wIFBEͷதʹMJOLSFMDBOPOJDBM ISFG40.&@63-͕ඞཁɻ  40.&@63-ʹ͸ɺ௨ৗͷ)5.-ϖʔδͷ63-΋͘͠͸ ".1ϖʔδࣗ਎ͷ63-Λࢦఆɻ wIFBEͷ࠷ॳͷࢠཁૉͱͯ͠ 
NFUBDIBSTFUVUG͕ඞཁɻ

AMPͱ͸ʁ ඞਢࣄ߲(2/2) wIFBEͷதʹ  NFUBOBNFWJFXQPSU  DPOUFOUXJEUIEFWJDFXJEUI NJOJNVNTDBMF  ͕ඞཁɻJOJUJBMTDBMF΋ਪ঑ɻ wIFBEͷதʹ  TDSJQUBTZODTSDIUUQTDEOBNQQSPKFDUPSH WKTTDSJQU͕ඞཁɻ
wIFBEͷதʹ".1#PJMFSQMBUF$PEF͕ඞཁɻ

AMPͱ͸ʁ AMP Boilerplate Code <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1
normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-moz- keyframes -amp-start{from{visibility:hidden} to{visibility:visible}}@-ms-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-o- keyframes -amp-start{from{visibility:hidden} to{visibility:visible}}@keyframes -amp- start{from{visibility:hidden}to{visibility:visible}} </style><noscript><style amp-boilerplate>body{-webkit- animation:none;-moz-animation:none;-ms- animation:none;animation:none}</style></noscript>

͓ɺ͓͏…

ɾ5IF0QFO(SBQIQSPUPDPM ɾ5XJUUFS$BSET ͳͲՄ ϝλσʔλͷهड़

IUUQTEFWFMPQFSTGBDFCPPLDPNEPDTTIBSJOHXFCNBTUFSTΑΓ ϝλσʔλͷهड़ OGP(The Open Graph protocol) 'BDFCPPLଞ 4/4Ͱ࢖ΘΕ͍ͯΔ 63-γΣΞ࣌ͷ ෇ਵ৘ใఆٛ

IUUQTEFWUXJUUFSDPNXFCTJHOJOIUUQTEFWUXJUUFSDPNDBSETUZQFTTVNNBSZMBSHFJNBHFIUNMΑΓ ϝλσʔλͷهड़ TwitterCard 5XJUUFSͰ࢖ΘΕ͍ͯΔ 63-γΣΞ࣌ͷ ෇ਵ৘ใఆٛ

ϝλσʔλͷهड़ schema.org ͷϚʔΫΞοϓਪ঑ QIQDPO෱Ԭ-5εϥΠυࢀর IUUQTTQFBLFSEFDLDPNVFTTZ@BLSQIQDPOGVLMUKTPOME

͓͚͓͚ɻ

ϚʔΫΞοϓํ๏ αϯϓϧ(1/3) <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>Sample
document</title> <link rel="canonical" href="./regular-html-version.html"> <meta name="viewport" content="width=device- width,minimum-scale=1,initial-scale=1"> <style amp-custom> h1 {color: red} </style> IUUQTXXXBNQQSPKFDUPSHKBEPDTSFGFSFODFTQFDSFRVJSFENBSLVQΑΓ

ϚʔΫΞοϓํ๏ <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article
headline", "image": [ "thumbnail1.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00" } </script> <script async custom-element="amp-carousel" src="https:// cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <style amp-boilerplate>ʙதུʙ</style><noscript><style amp- boilerplate>ʙதུʙ</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> αϯϓϧ(2/3) IUUQTXXXBNQQSPKFDUPSHKBEPDTSFGFSFODFTQFDSFRVJSFENBSLVQΑΓ

ϚʔΫΞοϓํ๏ αϯϓϧ(3/3) <body> <h1>Sample document</h1> <p> Some text <amp-img src=sample.jpg
width=300 height=300></amp-img> </p> <amp-ad width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad> </body> </html> IUUQTXXXBNQQSPKFDUPSHKBEPDTSFGFSFODFTQFDSFRVJSFENBSLVQΑΓ

੍໿

ཁมߋ w JNHˠBNQJNH w WJEFPˠBNQWJEFP w BVEJPˠBNQBVEJP w JGSBNFˠBNQJGSBNF

࢖༻ෆՄ w GSBNF w GSBNFTFU w PCKFDU w QBSBN w
BQQMFU w FNCFE

<a> w ISFGଐੑ͸KBWBTDSJQUͰ࢝·ͬͯ͸ ͍͚ͳ͍ɻ w UBSHFUଐੑ͕ଘࡏ͢Δ৔߹͸ɺ  ஋͸@CMBOLͰͳ͚Ε͹͍͚ͳ͍ɻ

طଘϖʔδͷAMPରԠ " طଘϖʔδΛ".1ϖʔδԽ͢Δ # طଘϖʔδͱ͸ผʹ".1ϖʔδੜ੒

طଘϖʔδͷAMPରԠ GoogleͷςετπʔϧͰઌୡऀΛνΣοΫ

΍͸Γ ϓϨʔϯςΩετ ʴ ΞΠΩϟονը૾ ͱ͔͕ແ೉Ͱ͢ΑͶ…

ײ૝ w ".1ରԠ͢Δ৔߹͸  ௨ৗ)5.-ͱ͸ผʹɺ".1ϖʔδΛ  ੜ੒ͨ͠ํָ͕͔΋ʁ w ".1σβΠϯݪଇʮσϕϩούʔʹͱͬͯͷ ࣮૷ͷ͠΍͢͞ΑΓ΋ɺ  ϢʔβʔΤΫεϖϦΤϯεΛ༏ઌ͢Δɻʯ  ๻ʮࠨ༷Ͱ͔͢ɻʯ
σβΠϯݪଇr".1 IUUQTXXXBNQQSPKFDUPSHKBMFBSOBNQEFTJHOQSJODJQMFTΑΓ

builderscon tokyo 2018 ։࠵!! ͓·͚ w ೥݄೔ ໦ ʙ݄೔ ౔
w ܚጯٛक़೔٢Ωϟϯύεڠੜؗ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

phpcondo2017_15min_AMP

phpcondo2017_15min_AMP

ueshiy

More Decks by ueshiy

Other Decks in Technology

Featured

Transcript

AMPରԠͱ͔ͦͷ΁Μͷ࿩ @uessy_akr

͸͡Ί·ͯ͠ʂ ΋͘͠͸͓ٱ͠ͿΓͰ͢ɻ ਓੜ2ճ໨ͷ๺ւಓɻ פ͍ʂʂʂw • ͏͑͠ʔ @uessy_akr • ओʹTwitterʹੜଉ͍ͯ͠ΔίΞϥ •

AMP

஌Γ߹͍ͷํ ʮ".1ରԠ͍ͨ͠ΜͰ͢ΑͶʔʯ ʮͳΔ΄Ͳʯ

AMPͱ͸ʁ ͜Εɻ (PPHMFݕࡧ݁ՌͰ͸ ཕϚʔΫ͕෇͍͍ͯΔ

AMPͱ͸ʁ Google͞Μᐌ͘ ".1ϓϩδΣΫτ͸ɺϞόΠϧΠϯλʔωοτͷ ߴ଎ԽΛ໨ࢦ͢Φʔϓϯιʔεͷऔ૊ΈͰ͢ɻ ೥݄೔ (PPHMF+BQBO#MPHϞόΠϧ΢ΣϒΛ΋ͬͱ଎͘ IUUQTKBQBOHPPHMFCMPHDPNCMPHQPTU@IUNMΑΓ

AMPͱ͸ʁ ඞਢࣄ߲(1/2) wEPDUZQFIUNMͰ࢝ΊΔ͜ͱɻ wIUNM͸IUNM⚡΋͘͠͸IUNMBNQͱॻ͘ɻ wIFBEͱCPEZ͕ඞཁɻ wIFBEͷதʹMJOLSFMDBOPOJDBM ISFG40.&@63-͕ඞཁɻ  40.&@63-ʹ͸ɺ௨ৗͷ)5.-ϖʔδͷ63-΋͘͠͸ ".1ϖʔδࣗ਎ͷ63-Λࢦఆɻ wIFBEͷ࠷ॳͷࢠཁૉͱͯ͠

AMPͱ͸ʁ ඞਢࣄ߲(2/2) wIFBEͷதʹ  NFUBOBNFWJFXQPSU  DPOUFOUXJEUIEFWJDFXJEUI NJOJNVNTDBMF  ͕ඞཁɻJOJUJBMTDBMF΋ਪ঑ɻ wIFBEͷதʹ  TDSJQUBTZODTSDIUUQTDEOBNQQSPKFDUPSH WKTTDSJQU͕ඞཁɻ

AMPͱ͸ʁ AMP Boilerplate Code <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1

͓ɺ͓͏…

ɾ5IF0QFO(SBQIQSPUPDPM ɾ5XJUUFS$BSET ͳͲՄ ϝλσʔλͷهड़

IUUQTEFWFMPQFSTGBDFCPPLDPNEPDTTIBSJOHXFCNBTUFSTΑΓ ϝλσʔλͷهड़ OGP(The Open Graph protocol) 'BDFCPPLଞ 4/4Ͱ࢖ΘΕ͍ͯΔ 63-γΣΞ࣌ͷ ෇ਵ৘ใఆٛ

IUUQTEFWUXJUUFSDPNXFCTJHOJOIUUQTEFWUXJUUFSDPNDBSETUZQFTTVNNBSZMBSHFJNBHFIUNMΑΓ ϝλσʔλͷهड़ TwitterCard 5XJUUFSͰ࢖ΘΕ͍ͯΔ 63-γΣΞ࣌ͷ ෇ਵ৘ใఆٛ

ϝλσʔλͷهड़ schema.org ͷϚʔΫΞοϓਪ঑ QIQDPO෱Ԭ-5εϥΠυࢀর IUUQTTQFBLFSEFDLDPNVFTTZ@BLSQIQDPOGVLMUKTPOME

͓͚͓͚ɻ

ϚʔΫΞοϓํ๏ αϯϓϧ(1/3) <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>Sample

ϚʔΫΞοϓํ๏ <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article

ϚʔΫΞοϓํ๏ αϯϓϧ(3/3) <body> <h1>Sample document</h1> <p> Some text <amp-img src=sample.jpg

੍໿

<script> w TDSJQUUZQFBQQMJDBUJPOME KTPO  Ҏ֎ېࢭɻ w ".1ʹඞਢͷTDSJQU͸ྫ֎ɻ

<noscript> ࢖༻Մೳ

ཁมߋ w JNHˠBNQJNH w WJEFPˠBNQWJEFP w BVEJPˠBNQBVEJP w JGSBNFˠBNQJGSBNF

࢖༻ෆՄ w GSBNF w GSBNFTFU w PCKFDU w QBSBN w

<a> w ISFGଐੑ͸KBWBTDSJQUͰ࢝·ͬͯ͸ ͍͚ͳ͍ɻ w UBSHFUଐੑ͕ଘࡏ͢Δ৔߹͸ɺ  ஋͸@CMBOLͰͳ͚Ε͹͍͚ͳ͍ɻ

<style> w ".1#PJMFSQMBUF$PEFͰͭ͸ඞਢɻ w ΋͏ͭɺIFBEͷதͰϨΠΞ΢τௐ੔༻ ʹهड़͕ڐ͞ΕΔɻ  ࢖༻ՄೳͳຒΊࠐΈDTT͸͚ͭͩɻ w ͦͷ৔߹͸TUZMFBNQDVTUPNTUZMF

ରԠ

طଘϖʔδͷAMPରԠ " طଘϖʔδΛ".1ϖʔδԽ͢Δ # طଘϖʔδͱ͸ผʹ".1ϖʔδੜ੒

طଘϖʔδͷAMPରԠ " طଘϖʔδΛ".1ϖʔδԽ͢Δ # طଘϖʔδͱ͸ผʹ".1ϖʔδੜ੒

طଘϖʔδͷAMPରԠ GoogleͷςετπʔϧͰઌୡऀΛνΣοΫ

΍͸Γ ϓϨʔϯςΩετ ʴ ΞΠΩϟονը૾ ͱ͔͕ແ೉Ͱ͢ΑͶ…

ײ૝ w ".1ରԠ͢Δ৔߹͸  ௨ৗ)5.-ͱ͸ผʹɺ".1ϖʔδΛ  ੜ੒ͨ͠ํָ͕͔΋ʁ w ".1σβΠϯݪଇʮσϕϩούʔʹͱͬͯͷ ࣮૷ͷ͠΍͢͞ΑΓ΋ɺ  ϢʔβʔΤΫεϖϦΤϯεΛ༏ઌ͢Δɻʯ  ๻ʮࠨ༷Ͱ͔͢ɻʯ

builderscon tokyo 2018 ։࠵!! ͓·͚ w ೥݄೔ ໦ ʙ݄೔ ౔

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ