More Related Content
What's hot (20)
Viewers also liked (10)
![Randy[1]](https://cdn.slidesharecdn.com/ss_thumbnails/d4c1d49b-5d0c-424b-981a-532b9b97ce54-150521045738-lva1-app6891-thumbnail.jpg?width=560&fit=bounds)
Google AMP (Accelerated Mobile Pages) を纏めてみた
- 1. Google's Accelerated Mobile Pages (AMP) Project written by Jonas Buntinx i3DESIGN
- 2. 自己紹介 ベルギー出身のヨーナス?ブンティンクス (Jonas Buntinx)といいます。 i3DESIGNのエンジニアです。 JavaScript, Swift, Objective-C, PHP, .NET, HTML5, CSS3は結構得意ですね。最近はAWS も勉強中です。 オランダ語がネイティブですが、英語はもちろ ん、奥さん日本人なので日本語も得意ですよ。
- 3. AMP HTMLの紹介 AMP HTMLとは： - webサイトを速くするカスタム?コンポーネントを提供するライブラリー - 厳しい制限を開発者へ課す規範的な取り組み - パフォーマンスの保証 - コンテンツページのみ（ニュース、記事、ブログなど）
- 4. 一般の人向けに言えば AMP HTML = HTML + 制約 + カスタム?コンポーネント + AMPのjavascript カスタム?コンポーネントとは、例えば <amp-img> は AMPのjavascriptによ って <img> へ書き換えられます。 <amp-img src=/slideshow/google-amp-accelerated-mobile-pages/56001907/"https:/www.ampproject.org/how-it-works/malte.jpg" id="author-avatar" placeholder height="50" width="50" alt="Malte Ubl"></amp-img> <amp-img src=/slideshow/google-amp-accelerated-mobile-pages/56001907/"https:/www.ampproject.org/how-it-works/malte.jpg" id="author-avatar" placeholder="" height="50" width="50" alt="Malte Ubl" class="-amp-element -amp-layout-fixed -amp-layout-size-defined -amp-layout" style="width: 50px; height: 50px;"> <img amp-img-id="author-avatar" alt="Malte Ubl" class="-amp-fill-content" width="50" height="50" src=/slideshow/google-amp-accelerated-mobile-pages/56001907/"https:/www.ampproject.org/how-it-works/malte.jpg"> </amp-img>
- 6. 使い方 AMPのランタイム： - 各AMPのドキュメント内でJavaScriptが動く - AMPのカスタム?エレメントへの実装を与える - リソースのロードや優先度を管理する <script src=/slideshow/google-amp-accelerated-mobile-pages/56001907/"https:/cdn.ampproject.org/v0.js"></script>
- 7. さらに詳しく（1/3） AMPコンポーネント（<amp-img>など）による最適化 - 閲覧者のviewportのサイズにした画像の置き換え - スクロールしないで見える範囲のインライン画像の可視化 - インラインCSS変数 - 拡張されたコンポーネントの事前読み込み - HTMLとCSSの圧縮
- 8. さらに詳しく（2/3） HTMLを介してのタグや機能に対しての制限 - HTMLタグのサブセットだけを許可 - 開発者が書いていない、もしくはサードパーティのJavaScriptの禁止 - 外部スタイルシートの禁止とdocument head内に1つだけのstyleタグ - スタイルは50kb以下でなければならない
- 11. GoogleがAMP推奨の背景を考察 表向きは - モバイル?デバイスでのパフォマンスの問題 - メモリの使用量が大きいコンテンツサイト（例：ニュースサイト） - ユーザーの離脱による収益低下 実際は - アプリ（Apple NewsやFacebook instant articles）との競合 - 広告?トラッキングのスクリプトのコントロール かな？
- 12. おしまい