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

AMPをかじってみた話 / The first impression of AMP

Avatar for Masashi Sekine Masashi Sekine
April 26, 2016
Programming
1
1.3k

AMPをかじってみた話 / The first impression of AMP

Avatar for Masashi Sekine

Masashi Sekine

April 26, 2016
Tweet

More Decks by Masashi Sekine

See All by Masashi Sekine
Free study Google Apps Script
Avatar for Masashi Sekine ms76
1
1.1k
Introduction to HTTP2
Avatar for Masashi Sekine ms76
0
900
とあるサービスの運営を追体験してみよう / Let's experience a certain services vicariously
Avatar for Masashi Sekine ms76
1
920
1秒間に250通のメールをさばくAWSの使い方
Avatar for Masashi Sekine ms76
2
2.1k

Other Decks in Programming

See All in Programming
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
290
Oxlint JS plugins
Avatar for kazupon kazupon
1
980
Claude Codeと2つの巻き戻し戦略 / Two Rewind Strategies with Claude Code
Avatar for 果物リン fruitriin
0
140
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.5k
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
410
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
250

Featured

See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
97
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
52
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
71
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
650
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
130
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
390
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
66

Transcript

  1. AMPΛ͔ͬͯ͡Έͨ࿩ @ms76

  2. Accelerated Mobile Pages ੩తͳίϯςϯπΛ ߴ଎ͰϨϯμϦϯάͤ͞ΔͨΊͷख๏

  3. ৽͍ٕ͠ज़Ͱ͸ͳ͘ɺ طଘͷHTML, CSS, JavaScript ʹରͯ͠ ߴ଎ͳϨϯμϦϯάΛୡ੒͢ΔͨΊʹ ੍͋͑ͯݶΛՃ͑ͨ΋ͷɻ ֓ཁ

  4. 1. ࠷ॳʹಡΈࠐΉHTMLʹϨΠΞ΢τʹ ؔ͢Δ৘ใΛશͯೖΕΖʂ 2. ϨΠΞ΢τ͕ޙ͔Β่ΕΔΑ͏ͳॻ͖ ํ͸͢ΔͳʂʢͰ͖ͳ͍ʣ 3. ผϦιʔε͸શͯඇಉظͰಡΈࠐΊʂ మଇ

  5. 1. AMP validationʹύε͢ΔͱfreeͰ Google AMP Cacheʹ৐ͤͯੈք΁ ഑৴ͯ͘͠ΕΔ 2. ࠓޙSEOʹޮՌ͕͋Δ ϝϦοτ

  6. ۩ମతʹͲΜͳੈքͳͷ͔ʁ

  7. img video audio iframe frame frameset object param applet embed

    form input script ҎԼͷλά͸ېࢭ

  8. amp-img amp-video amp-audio amp-iframe ୅ΘΓʹ͜ΕΛ࢖͑ʂ

  9. JavaScriptʁ ͦΜͳා͍΋ͷ͸ېࢭʂʂ ୅ΘΓʹઐ༻JavaScriptϥΠϒϥϦ Λ࢖͑ʂ

  10. CSS͸·͋ڐͦ͏ɻ Ͱ΋֎෦ϦιʔεಡࠐΈ͸μϝɻ ΠϯϥΠϯ <style>λάͰɻ

  11. ࡞ΕΔؾ͕͠ͳ͍…

  12. ͔Βͷ Demo

  13. ҙ֎ͱϥΠϒϥϦ͸ἧͬͯΔͷͰ ͋Δఔ౓ͷUI/UXΛ੔͑ͯ ࡞Δ͜ͱ͸Ͱ͖ͦ͏Ͱ͢ɻ ݁࿦

  14. https://www.ampproject.org/ https://github.com/ampproject/amphtml/ blob/master/spec/amp-html-format.md AMP HTML࢓༷ Accelerated Mobile Pages Project ࢀߟ

  15. Thank you.