Google's Accelerated Mobile Pages (AMP) Project written by Jonas Buntinx i3DESIGN
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Google's Accelerated Mobile Pages (AMP)
Project
written by Jonas Buntinx i3DESIGN
自己紹介
ベルギー出身のヨーナス・ブンティンクス(Jonas Buntinx) といいます。
i3DESIGN のエンジニアです。
JavaScript, Swift, Objective-C, PHP, .NET, HTML5, CSS3 は結構得意ですね。最近はAWS も勉強中です。
オランダ語がネイティブですが、英語はもちろん、奥さん日本人なので日本語も得意ですよ。
AMP HTML の紹介
AMP HTML とは：
- web サイトを速くするカスタム・コンポーネントを提供するライブラリー
- 厳しい制限を開発者へ課す規範的な取り組み
- パフォーマンスの保証
- コンテンツページのみ（ニュース、記事、ブログなど）
一般の人向けに言えば
AMP HTML = HTML + 制約 + カスタム・コンポーネント + AMP のjavascript
カスタム・コンポーネントとは、例えば <amp-img> は AMP の javascriptによって
<img> へ書き換えられます。<amp-img src="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="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="https://www.ampproject.org/how-it-works/malte.jpg"></amp-img>
要するに
既存の web 技術から作られた、新しいオープンフレームワークである AMP HTML は、軽量なサイトを作ることを可能にします。
AMP HTML は、例えばニュースサイトのようなコンテンツページを作るためのHTML のサブセットです。ある意味では確かなパフォーマンスの基準値を保証します。
使い方
AMP のランタイム：
- 各 AMP のドキュメント内で JavaScript が動く
- AMP のカスタム・エレメントへの実装を与える
- リソースのロードや優先度を管理する
<script src="https://cdn.ampproject.org/v0.js"></script>
さらに詳しく（ 1/3 ）
AMP コンポーネント（ <amp-img> など）による最適化
- 閲覧者の viewport のサイズにした画像の置き換え
- スクロールしないで見える範囲のインライン画像の可視化
- インライン CSS 変数
- 拡張されたコンポーネントの事前読み込み
- HTML と CSS の圧縮
さらに詳しく（ 2/3 ）
HTML を介してのタグや機能に対しての制限
- HTML タグのサブセットだけを許可
- 開発者が書いていない、もしくはサードパーティの JavaScript の禁止
- 外部スタイルシートの禁止と document head 内に 1 つだけの style タグ
- スタイルは 50kb 以下でなければならない
さらに詳しく（ 3/3 ）
配布（ Google ）
キャッシュへの新しい手続き。 Google の高パフォーマンスのグローバルキャッシュを通した効率の良い配布がある間、発行者は彼らのコンテンツを継続させることが出来る。
広告
AMP は多くのプロバイダーへコンポーネントを提供します。例えば、 A9 ・ AdReactor ・AdSense ・ AdTech ・ Doubleclick
<amp-ad width="320" height="250" type="adsense" data-ad-client="ca-pub-8125901705757971" data-ad-slot="7783467241"></amp-ad>
Google が AMP 推奨の背景を考察
表向きは
- モバイル・デバイスでのパフォマンスの問題
- メモリの使用量が大きいコンテンツサイト（例：ニュースサイト）
- ユーザーの離脱による収益低下
実際は
- アプリ（ Apple News や Facebook instant articles ）との競合
- 広告・トラッキングのスクリプトのコントロール
かな？
おしまい
Related Documents
