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 ）との競合

- 広告・トラッキングのスクリプトのコントロール

かな？

おしまい