phpcondo2017_15min_AMP

Transcript

1. AMPରԠͱ͔ͦͷ΁Μͷ࿩ @uessy_akr
2. ͸͡Ί·ͯ͠ʂ ΋͘͠͸͓ٱ͠ͿΓͰ͢ɻ ਓੜ2ճ໨ͷ๺ւಓɻ פ͍ʂʂʂw • ͏͑͠ʔ @uessy_akr • ओʹTwitterʹੜଉ͍ͯ͠ΔίΞϥ • σΟϨΫγϣϯ ٴͼ ։ൃ @
3. AMP
4. 
   ஌Γ߹͍ͷํ
   ʮ".1ରԠ͍ͨ͠ΜͰ͢ΑͶʔʯ ʮͳΔ΄Ͳʯ
5. AMPͱ͸ʁ ͜Εɻ (PPHMFݕࡧ݁ՌͰ͸
   ཕϚʔΫ͕෇͍͍ͯΔ
6. AMPͱ͸ʁ Google͞Μᐌ͘ ".1
   ϓϩδΣΫτ͸ɺϞόΠϧΠϯλʔωοτͷ ߴ଎ԽΛ໨ࢦ͢Φʔϓϯιʔεͷऔ૊ΈͰ͢ɻ ೥݄೔
   
   (PPHMF
   +BQBO
   #MPH
   ϞόΠϧ΢ΣϒΛ΋ͬͱ଎͘
   IUUQTKBQBOHPPHMFCMPHDPNCMPHQPTU@IUNM
   ΑΓ
7. AMPͱ͸ʁ ඞਢࣄ߲(1/2)
   w
   
   EPDUZQF
   IUNM
   Ͱ࢝ΊΔ͜ͱɻ
   
   w
   IUNM
   ͸
   IUNM
   ⚡
   ΋͘͠͸
   IUNM
   BNQ
   ͱॻ͘ɻ
   
   w
   IFBE
   ͱ
   CPEZ
   ͕ඞཁɻ
   
   w
   IFBE
   ͷதʹ
   MJOL
   SFMDBOPOJDBM
   ISFG40.&@63-
   ͕ඞཁɻ
   
 40.&@63-
   ʹ͸ɺ௨ৗͷ)5.-ϖʔδͷ63-΋͘͠͸ ".1ϖʔδࣗ਎ͷ63-Λࢦఆɻ
   
   w
   IFBE
   ͷ࠷ॳͷࢠཁૉͱͯ͠
   
 NFUB
   DIBSTFUVUG
   ͕ඞཁɻ
8. AMPͱ͸ʁ ඞਢࣄ߲(2/2)
   w
   IFBE
   ͷதʹ
   
 NFUB
   OBNFWJFXQPSU
   
 DPOUFOUXJEUIEFWJDFXJEUI NJOJNVNTDBMF
   
 ͕ඞཁɻ
   JOJUJBMTDBMF
   ΋ਪ঑ɻ
   
   
   w
   IFBE
   ͷதʹ
   
 TDSJQU
   BTZOD
   TSDIUUQTDEOBNQQSPKFDUPSH WKTTDSJQU
   ͕ඞཁɻ
   
   w
   IFBE
   ͷதʹ
   ".1
   #PJMFSQMBUF
   $PEF
   ͕ඞཁɻ
9. 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>
10. ͓ɺ͓͏…
11. ɾ5IF
    0QFO
    (SBQI
    QSPUPDPM
    ɾ5XJUUFS
    $BSET
    ͳͲՄ ϝλσʔλͷهड़
12. IUUQTEFWFMPQFSTGBDFCPPLDPNEPDTTIBSJOHXFCNBTUFST
    ΑΓ ϝλσʔλͷهड़ OGP(The Open Graph protocol) 'BDFCPPLଞ
    4/4Ͱ࢖ΘΕ͍ͯΔ
    63-γΣΞ࣌ͷ
    ෇ਵ৘ใఆٛ
13. IUUQTEFWUXJUUFSDPNXFCTJHOJOIUUQTEFWUXJUUFSDPNDBSETUZQFTTVNNBSZMBSHFJNBHFIUNM
    ΑΓ ϝλσʔλͷهड़ TwitterCard 5XJUUFSͰ࢖ΘΕ͍ͯΔ
    63-γΣΞ࣌ͷ
    ෇ਵ৘ใఆٛ
14. ϝλσʔλͷهड़ schema.org ͷϚʔΫΞοϓਪ঑ QIQDPO෱Ԭ
    -5εϥΠυࢀর
    IUUQTTQFBLFSEFDLDPNVFTTZ@BLSQIQDPOGVLMUKTPOME
15. ͓͚͓͚ɻ
16. ϚʔΫΞοϓํ๏ αϯϓϧ(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
    ΑΓ
17. ϚʔΫΞοϓํ๏ <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
    ΑΓ
18. ϚʔΫΞοϓํ๏ αϯϓϧ(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
    ΑΓ
19. ੍໿
20. <script> w TDSJQU
    UZQFBQQMJDBUJPOME KTPO
    
 Ҏ֎ېࢭɻ
    
    w ".1ʹඞਢͷ
    TDSJQU
    ͸ྫ֎ɻ
21. <noscript> ࢖༻Մೳ
22. ཁมߋ w JNH
    
    
    
    
    ˠ
    BNQJNH
    w WJEFP
    
    
    ˠ
    BNQWJEFP
    
    w BVEJP
    
    ˠ
    BNQBVEJP
    w JGSBNF
    ˠ
    BNQJGSBNF
23. ࢖༻ෆՄ w GSBNF
    w GSBNFTFU
    w PCKFDU
    w QBSBN
    w BQQMFU
    w FNCFE
24. <a> w ISFG
    ଐੑ͸
    KBWBTDSJQU
    Ͱ࢝·ͬͯ͸ ͍͚ͳ͍ɻ
    w UBSHFU
    ଐੑ͕ଘࡏ͢Δ৔߹͸ɺ
 ஋͸
    @CMBOL
    Ͱͳ͚Ε͹͍͚ͳ͍ɻ
25. <style> w ".1
    #PJMFSQMBUF
    $PEF
    Ͱͭ͸ඞਢɻ
    w ΋͏ͭɺ
    IFBE
    ͷதͰϨΠΞ΢τௐ੔༻ ʹهड़͕ڐ͞ΕΔɻ
 ࢖༻ՄೳͳຒΊࠐΈDTT͸͚ͭͩɻ
    w ͦͷ৔߹͸
    TUZMF
    BNQDVTUPN
    TUZMF
    Ͱهड़ɻ
    w Ұ෦࢖༻Ͱ͖Δ
    DTT
    ʹ੍ݶ͋Γɻ
    w ֎෦ͷDTTͷಡΈࠐΈ͸ෆՄɻ
26. ରԠ
27. طଘϖʔδͷAMPରԠ " طଘϖʔδΛ".1ϖʔδԽ͢Δ
    # طଘϖʔδͱ͸ผʹ".1ϖʔδੜ੒
28. طଘϖʔδͷAMPରԠ " طଘϖʔδΛ".1ϖʔδԽ͢Δ
    # طଘϖʔδͱ͸ผʹ".1ϖʔδੜ੒
29. طଘϖʔδͷAMPରԠ GoogleͷςετπʔϧͰઌୡऀΛνΣοΫ
30. ΍͸Γ ϓϨʔϯςΩετ ʴ ΞΠΩϟονը૾ ͱ͔͕ແ೉Ͱ͢ΑͶ…
31. ײ૝ w ".1ରԠ͢Δ৔߹͸
 ௨ৗ)5.-ͱ͸ผʹɺ".1ϖʔδΛ
 ੜ੒ͨ͠ํָ͕͔΋ʁ
    w ".1σβΠϯݪଇʮσϕϩούʔʹͱͬͯͷ ࣮૷ͷ͠΍͢͞ΑΓ΋ɺ
 ϢʔβʔΤΫεϖϦΤϯεΛ༏ઌ͢Δɻʯ
 ๻ʮࠨ༷Ͱ͔͢ɻʯ σβΠϯݪଇ
    r
    ".1
    IUUQTXXXBNQQSPKFDUPSHKBMFBSOBNQEFTJHOQSJODJQMFT
    ΑΓ
32. builderscon tokyo 2018 ։࠵!! ͓·͚ w ೥݄೔ ໦
    ʙ
    ݄೔ ౔
    w ܚጯٛक़೔٢Ωϟϯύε
    ڠੜؗ
33. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ