Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Masashi Sekine Masashi Sekine
April 26, 2016
Programming
1.4k
1

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

Avatar for Masashi Sekine

Masashi Sekine

April 26, 2016

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
960
とあるサービスの運営を追体験してみよう / Let's experience a certain services vicariously
Avatar for Masashi Sekine ms76
1
970
1秒間に250通のメールをさばくAWSの使い方
Avatar for Masashi Sekine ms76
2
2.1k

Other Decks in Programming

See All in Programming
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
400
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
950
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
160
最近”作らせてる” ローカルAIアプリの話
Avatar for ITO Akihiro akit37
0
440
mrbgem 三角測量 開発
Avatar for ogom ogom
0
230
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
200
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
180
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
8
5.6k
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
160
Workers Cache を知る
Avatar for syumai syumai
0
350
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
Avatar for Marco Roth marcoroth
0
200

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
620
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
710
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
570
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
67k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
600
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
330

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.