Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AMPで爆速WEBサイト
Search
Shohei Yamasaki
July 06, 2017
Programming
0
170
AMPで爆速WEBサイト
AMPの紹介です。
- AMPについて
- AMPの活用事例
- AMPのJekyllテーマの紹介
Shohei Yamasaki
July 06, 2017
Tweet
Share
More Decks by Shohei Yamasaki
See All by Shohei Yamasaki
ハフマン木の作成
shoyan
0
14k
PHPコーディング規約とサポートするツール
shoyan
2
3.4k
コンピュータと数学
shoyan
0
1.5k
暗号技術を支える素数
shoyan
2
3k
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
440
Domain-Driven Design (Tutorial)
hschwentner
13
22k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
170
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
540
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
PEPCは何を変えようとしていたのか
ken7253
3
270
PRレビューのお供にDanger
stoticdev
1
240
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.5k
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Rubyと自由とAIと
yotii23
6
1.8k
Featured
See All Featured
Speed Design
sergeychernyshev
27
810
Designing for humans not robots
tammielis
250
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Into the Great Unknown - MozCon
thekraken
35
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Automating Front-end Workflow
addyosmani
1368
200k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Code Reviewing Like a Champion
maltzj
521
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
AMPͰരWEBαΠτ ࢁ࡚উฏ / GMO Perabo, Inc. 2017.07.06 ϗεςοΫMTG #4
ࣗݾհ • 2ࣇͷ • ࡊΛҭ͍ͯͯ·͢ http://48n.jp
ാ
WEB+DB PRESS Vol.99 ൃചதͰ͢ 2017/6/24 ൃച(ൃചத)Ͱ͢ɻ ਓੜͰॳΊͯدߘ͠·ͨ͠ɻ
AMP͍ͬͯͬͯ·͔͢ʁ
ࠓ͓͢͠Δ͜ͱ • AMPʹ͍ͭͯ • AMPͷ׆༻ࣄྫ • AMPͷJekyllςʔϚͷհ
AMPʹ͍ͭͯ
AMPͱ • AMP(Accelerated Mobile Pages) • ΞϯϓͱݺͿ • ϞόΠϧͷΣϒϖʔδΛߴදࣔ͢ΔͨΊͷΈ •
GoogleͱTwitterͰڞಉ։ൃ
AMPͷϝϦοτ • Googleͷݕࡧ݁Ռ͔ΒҰॠͰαΠτΛදࣔ • αΠτͷؼͷԼʹޮՌ͋Γ εϐʔυ
AMPͷϝϦοτ • Χϧʔηϧදࣔ • AMPରԠͷϚʔΫ
AMPͷσϝϦοτ(੍) • AMPͷઐ༻ͷίϯϙʔωϯτ͕͍Ζ͍Ζ༻ҙ͞Ε͍ͯΔ • ༻ҙ͞Ε͍ͯΔػೳҎ֎͑ͳ͍ Not JavaScript
AMPͷσϝϦοτ(੍) • <img>λά͑ͳ͍ɻ<amp-img>λάΛ͏ HTMLͷ੍
AMPͷσϝϦοτ(੍) • <style amp-custom>λάͰғΉ ֎෦CSS ಡΈࠐΊͳ͍
AMPͷ׆༻ࣄྫ
AMPͱ૬ੑͷ͍͍ϓϥοτϑΥʔϜ • χϡʔεαΠτ • ϒϩά • ECαΠτ
۩ମతͳࣄྫ
AMPରԠͷJekellςʔϚ
Aminima • JekyllςʔϚͷminimaΛAMPରԠͨ͠ͷ • https://github.com/shoyan/aminima
Ampstart-blog-post • ampstartͷblog-postςϯϓϨʔτΛ JekyllʹΈࠐΜͩ • https://github.com/shoyan/ ampstart-blog-post
ରԠํ๏ΛϒϩάͰհ͍ͯ͠·͢ JekyllςʔϚͷminimaΛAMPରԠͨ͠ • http://48n.jp/blog/2017/04/14/ aminima-is-minima-with-amp/
AMPʹֶ͍ͭͯͿͨΊʹ https://www.ampproject.org/ • AMPͷެࣜαΠτ https://ampbyexample.com/ • AMPͷαϯϓϧ͕ͨ͘͞Μ https://blog.sakurasaku-labo.jp/amp-html/ • AMPͷຊޠͷใ