広告のAMP対応

Transcript

1. ޿ࠂͷAMPରԠ
2. ࣗݾ঺հ ߥҪ߳ࡊࢠ MDHͷαʔόαΠυΤϯδχΞ ޷͖ͳݴޠ: scala ޷͖ͳϑϨʔϜϫʔΫ: Akka JavaScript ͸Ͳૉਓ
3. ಺༰ MDH͕ A.J.A. Infeed ޿ࠂΛ AMPରԠͨ͠ͱ͖ʹ ࠔͬͨ͜ͱɾղܾํ๏ ౳
4. AMPରԠͨ͠ཧ༝ MDH͕ओʹ޿ࠂΛग़͍ͯ͠Δ Ξϝϒϩ͕AMPରԠ͢Δ͔Β
5. AMPͱ͸ʁ GoogleͱTwitter͕த৺ͱͳͬͯ͸͡Ίͨ ΦʔϓϯιʔεϓϩδΣΫτ
7. ϞόΠϧϖʔδΛ ߴ଎Ͱදࣔ͢ΔͨΊͷ࢓૊Έ
8. AMP HTML ΧελϜAMPϓϩύςΟΛ௥Ճͨ͠HTML GoogleΫϩʔϥ͕AMP Cache΁ొ࿥ͯ͘͠ΕΔ AMP JS Ҏ֎ͷJavaScript͕࢖͑ͳ͍
9. AMP Cache ϓϩΩγϕʔεͷCDN ਖ਼͍͠ߏ੒ͷAMP HTMLͱϦιʔεΛ࠷దԽͯ͠Ωϟογϡͯ͘͠ΕΔ
10. AMP JS AMP Cache ʹೖͬͯΔ AMP༻JavaScript AMP HTML ͷϨϯμϦϯάΛߴ଎Խ͢Δ JavaScriptͰͳ͍ͱ࣮ݱͰ͖ͳ͍ίϯϙʔωϯτΛ༻ҙ
11. Google Search ͸ ϞόΠϧϖʔδ͕AMPରԠ͞Ε͍ͯͨΒ AMP Cache ͷURLΛݕࡧ݁Ռʹग़͢ ϞόΠϧ͔ΒͷΞΫηε͕ߴ଎Խ͞ΕΔ
12. Ξϝϒϩ͕ AMP HTML Ͱ هࣄΛ༻ҙ AMP JS ͷ ޿ࠂίϯϙʔωϯτΛ࢖͏ MDH͕ AMP JS Ͱ A.J.A. Infeed ޿ࠂ༻ ίϯϙʔωϯτΛ༻ҙ
13. ۩ମతʹͳʹΛ͔ͨ͠ʁ AMP JS ΁ A.J.A. Infeed ޿ࠂαϙʔτͷ ϓϧϦΫΛग़͢
14. AMP޿ࠂ͕Ͳ͏΍ͬͯදࣔ͞Ε͍ͯΔ͔ʁ <amp-ad width="320" height="120" type="caajainfeed" data-ad-spot="thtuegn1pAQ" data-test="true"> </amp-ad> <amp-ad width="320" height="120" type="caajainfeed" data-ad-spot="thtuegn1pAQ" data-test="true" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" data-amp-slot-index="25" style="width: 320px; height: 120px;"> <div placeholder="" class="amp-hidden"></div> <div fallback=""></div> <iframe src="https://d-40792436924160944579.ampproject.net/1486153081489/frame.html" name="hogehoge" width="320" height="120" scrolling="no" data-amp-3p-sentinel="0-38170932382427127587" class="i-amphtml-fill-content -amp-fill-content" style="border: none;"></iframe> </amp-ad> ͜ͷλά͕ ͜Μͳײ͡Ͱදࣔ͞ΕΔ αϯυϘοΫεͷiframe͕ ల։͞Εͯɺ͜ͷதͰAMP JS Ҏ֎ͷJSΛར༻Ͱ͖Δ Α͏ʹͳ͍ͬͯΔ
15. AMPରԠͰࠔͬͨ͜ͱᶃ
16. AMP޿ࠂͷinviewܭଌ iframeʹ޿ࠂ͕ϨϯμϦϯά͞ΕΔ͔Β ը໘ʹ޿ࠂ͕දࣔ͞Εͨ͜ͱΛ ݕ஌͢Δ͜ͱ͕೉͍͠
17. AMP޿ࠂͷinviewܭଌ amp-analyticsλά͕طʹ༻ҙ͞Ε͍ͯΔ͚Ͳ amp-adλάͱඇಉظͰಈ͘͠ ޿ࠂͷҐஔΛܭଌ͢Δͷ͸ແཧͬΆ͍
18. AMP޿ࠂͷinviewܭଌ ղܾํ๏ amp-adλά಺෦Ͱల։͞ΕΔiframe಺෦Ͱ APIΛར༻ͯ͠޿ࠂҐஔΛܭଌ͢Δ දࣔͱܭଌΛಉ͡λάͰ࣮૷ window.context.observeIntersection(function(changes) { changes.forEach(function(c) { console.info('Height of intersection', c.intersectionRect.height); }); }) ը໘ͱ޿ࠂͷަࠩ఺ͷߴ͕͞௨஌͞ΕΔ ը໘ʹ޿ࠂ͕දࣔ͞ΕͨΒɺ͜ͷ஋͕0Ҏ্ʹͳΔ
19. AMPରԠͰࠔͬͨ͜ͱᶄ
20. AMP JS ͷ lint A.J.A.ͷ޿ࠂϨϯμϦϯά༻ϥΠϒϥϦͰఆٛͨ͠ ؔ਺ΛΤΫεϙʔτͯ͠΋࢖͑ͳ͍
21. AMP JS ͷ lint
22. AMP JS ͷ lint ղܾํ๏ globalʹλάͷଐੑύϥϝλΛೖΕ͔ͯΒ A.J.A.ͷϥΠϒϥϦΛϩʔυ ※ͩΕ͔΋ͬͱྑ͍ํ๏͕͋ͬͨΒڭ͍͑ͯͩ͘͞
23. AMPରԠͰࠔͬͨ͜ͱᶅ
24. CLAಉҙॻਃ੥͕௨Βͳ͍ Contributor License Agreements
25. CLAಉҙॻਃ੥͕௨Βͳ͍ CLAಉҙॻਃ੥͕௨Βͳ͍ͱ ϓϧϦΫΛϨϏϡʔͯ͠΋Β͑ͳ͍ bot͕ϓϧϦΫͷεςʔλεΛ؅ཧ͍ͯ͠Δ
26. CLAಉҙॻਃ੥͕௨Βͳ͍
27. CLAಉҙॻਃ੥͕௨Βͳ͍ ਃ੥͢Δͱɺ͙͢ʹূ໌ॻ͕ૹ৴͞ΕΔ͔Β ௨ͬͨͱࢥ͏͚Ͳ
28. CLAಉҙॻਃ੥͕௨Βͳ͍ CyberAgentͰਃ੥ͯ͠Έ͚ͨͲ εςʔλε͔ΘΒͣɾɾɾ
29. CLAಉҙॻਃ੥͕௨Βͳ͍ ݪҼ ਃ੥͢Δͱ͖ͷ੹೚ऀͷ໾৬Λ Directorʹͯͨ͠ ChiefҎ্΋͘͠͸หޢ࢜Ͱͳ͍ͱ ਃ੥͕௨Βͳ͍ ※ޙ೔↑ͷ಺༰ͷϝʔϧ͕͖·ͨ͠
30. CLAಉҙॻਃ੥͕௨Βͳ͍ ղܾํ๏ SlackͰ͓ͭ͘͜͠ئ͍͢Δ
31. CLAಉҙॻਃ੥͕௨Βͳ͍ botͷόάͩͱࢥͬͯڧؾͰ͓ئ͍ͯ͠͠·͍·ͨ͠ɻ ຊ౰ʹਃ͠༁ͳ͍͜ͱΛ͠·ͨ͠ɻ
32. AMPରԠͰࠔͬͨΒʁ ίϛϡχςΟͰ࣭໰ͨ͠Β୭͔͕౴͑ͯ͘ΕΔ Slack https://docs.google.com/a/cyberagent.co.jp/forms/d/e/ 1FAIpQLSd83J2IZA6cdR6jPwABGsJE8YL4pkypAbKMGgUZZriU7Qu6Tg/viewform?fbzx=4406980310789882877 StackOverFlow http://stackoverflow.com/questions/tagged/amp-html AMP HTML Discuss https://groups.google.com/forum/#!forum/amphtml-discuss
33. ͓ΘΓ ͜Ε͔Β޿ࠂΛAMPରԠ͞ΕΔํͷ ࢀߟʹͳΕ͹ɺ޾͍Ͱ͢ɻ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ