Recommended
More Related Content
Similar to AMP のお話
Similar to AMP のお話 (20)
Recently uploaded
Recently uploaded (20)
AMP のお話
- 2. AMP
- 3. AMP • (Accelerated) • (Mobile) • (Pages) https://www.ampproject.org/
- 4. AMP • https://github.com/ampproject/amphtml/tree/master/spec • Native Web HTML • AMP ⚡ •
- 5. AMP • BuzzFeed https://www.buzzfeed.com/amphtml/sirajdatoo/just-forgot-this-325000 • Tech Crunch http://jp.techcrunch.com/2016/10/19/mikan-high-school-english-must-app/amp/ • Gigazine http://gigazine.net/amp/20161020-google-fonts-japanese-early-access • SUUMO http://suumo.jp/journal/2016/10/18/119691/?amp=1 • http://pr.hatenastaff.com/entry/2016/10/18/144156?amp=1
- 7. AMP • 70 AMP • • 6 • Google Bing Twitter • https://amphtml.wordpress.com/2016/10/07/amp-a-year-in-review/
- 9. • • • AMP
- 10. • AMP HTML https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md • HTML AMP • Google Analytics AD • : <img> <amp-img> • Metadata (schema.org) • href=“javascript:” • AMP HTML
- 11. AMP EXTENSIONS amp-a4a amp-access amp-accordion amp-ad-network-adsense-impl amp-ad-network-doubleclick-impl amp-ad-network-fake-impl amp-ad amp-analytics amp-anim amp-apester-media amp-app-banner amp- audio amp-brid-player amp-brightcove amp-carousel amp- dailymotion amp-dynamic-css-classes amp-experiment amp- facebook amp-fit-text amp-font amp-form amp-fx-flying-carpet amp- gfycat amp-google-vrview-image amp-iframe amp-image-lightbox amp-instagram amp-install-serviceworker amp-jwplayer amp-kaltura- player amp-lightbox amp-list amp-live-list amp-mustache amp-o2- player amp-pinterest amp-reach-player amp-share-tracking amp- sidebar amp-slides amp-social-share amp-soundcloud amp- springboard-player amp-sticky-ad amp-twitter amp-user-notification amp-vimeo amp-vine amp-viz-vega amp-youtube
- 12. AMP IMAGE <amp-img src=“sample@1x.jpg” srcset="sample@1x.jpg 1x, sample@2x.jpg 2x" layout="responsive" alt=“Alternative Text" height=“400" width=“800"> </amp-img> Reference https://www.ampproject.org/docs/reference/components/amp-img <amp-img /> Component
- 13. AMP OTHERS https://www.ampproject.org/docs/reference/components • <amp-analytics /> GA • <amp-ad /> ry Google Adsense • <amp-sidebar /> • <amp-accordion />, <amp-carousel /> UI Component
- 14. AMP CSS • • 50,000 bytes • <head /> • @Charset !important • * {} :not() Usage: https://github.com/ampproject/amphtml/blob/master/spec/amp-html- format.md#stylesheets
- 15. CONTENTS + CDN CACHE AMP • AMP HTML: • HTML • AMP Validator • AMP JS: AMP HTML • AMP Cache: AMP HTML CDN
- 16. AMP VALIDATOR • ProtocolBuffer https://github.com/ampproject/amphtml/blob/master/validator/validator- main.protoascii • Validator OpenJDK + Python + Node => engine/validador.js • Chrome https://chrome.google.com/webstore/detail/amp-validator/ nmoffdblmcmgeicmolmhobpoocbbmknc https://github.com/ampproject/amphtml/tree/master/validator
- 17. AMP EXPERIMENTS • DEV CHANNEL activate https://cdn.ampproject.org/experiments.html • amp-form-custom-validations 10/30 • Feature Label 100 PR https://github.com/ampproject/amphtml/labels/Type%3A %20Feature https://github.com/ampproject/amphtml/blob/master/tools/experiments/experiments.js
- 18. AMP AMP CONTRIBUTION • https://github.com/ampproject/amphtml/issues • https://github.com/ampproject/docs/issues • • https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md • https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md • Starter : https://github.com/ampproject/amphtml/blob/master/ DEVELOPING.md#starter-issues • Slack & https://www.ampproject.org/contribute/
- 19. Command Line Tool Online Validator https://www.ampproject.org/docs/guides/validate#command-line-tool https://validator.ampproject.org/ Chrome Developer Tools Firefox • AMP URL #development=1 • Console • schema.org • https://search.google.com/structured-data/testing-tool/u/0/
- 20. • • & etc • • • AMP …
- 21. APPENDIX • AMP Project Roadmap https://www.ampproject.org/roadmap/ • AMP http://ameblo.jp/ca-seo/entry-12140104002.html • AMP http://ameblo.jp/ca-seo/entry-12159258765.html • Why AMP is fast AMP Project Malte Ubl https://medium.com/@cramforce/why-amp-is-fast-7d2ff1f48597 • Android AMP http://bookmark.hatenastaff.com/entry/amp