google amp (accelerated mobile pages) を纏めてみた
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 )との競合
- 広告・トラッキングのスクリプトのコントロール
かな?
おしまい