blog_amp1200x480

Date: 2017/06/26

AMPってなに?WEBページが速くなる?2

こんにちは、ANDSPACEのKNです。
以前、Webページを高速化できる「AMP対応」について少しお話しましたが、今回は通常のWEBページをAMP対応させた場合の使用するタグの違いについて、少しお話したいと思います。

AMP対応の独自タグ

AMP対応ページでは【img】【video】【audio】【iframe】タグを使用することは禁止されています。
代わりに【amp-img】・【amp-video】・【amp-audio】・【amp-iframe】を使用する事になります。
ほぼ、通常のhtmlと同様の使い方でいいのですが、画像、動画に対しては、サイズ指定が必須なります。

先にサイズ指定をしておく事で、ソースの読み込み時にあらかじめ、表示する領域を確保することができ、
Webページ全体の表示速度の高速化につながります。

他にもAMP対応ページでは JavaScriptの使用が制限されているので、サイトの動的な部分はそのままでは表現できなくなってしまいます。
そのためAMP対応ページでは専用のタグが用意されています。

AMP独自タグ
タグ 説明
amp-accordion アコーディオン型メニューを設置
amp-carousel カルーセル(画像が横に並んだ、スクロール機能付きのエリア)を設置
amp-fit-text フォントサイズを要素の幅に応じて自動で調整
amp-font Webフォント読み込み時の動作を制御
amp-form 入力フォームを設置
amp-fx-flying-carpet フルスクリーンで画面を覆うように表示される「flying-carpet」を設置
amp-image-lightbox タップすると拡大表示されるようなlightboxを設置
amp-sidebar サイドバーを設置

複雑な動的ページを表現することは難しいですが、上の様なAMP専用のタグを利用することで、少しは動きを表現することが出来ます。

SNS埋込

SNSの記事などを埋込する場合も通常は埋込コードを利用しますが、AMP対応ページでは専用のタグが用意されています。

SNS埋め込みAMP独自タグ
タグ 説明
amp-social-share SNS(Facebook、G+、Twitterなど)のシェアボタンを設置
amp-facebook 記事を埋込
amp-twitter ツイートを埋込
amp-instagram Instagramのコンテンツを埋込

タグの使い方

<head>
	<!-- ↓ シェアボタン表示する為に{head}内に記述 ↓ -->
	<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
	<!-- ↓ Facebookの記事を表示する為に{head}内に記述 ↓ -->
	<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
	<!-- ↓ Twitterの記事を表示する為に{head}内に記述 ↓ -->
	<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
</head>

<body>
	<!-- ↓ Facebookのシェアボタン ↓ -->
	<amp-social-share type="facebook" data-param-app_id="FacebookのAppID"></amp-social-share>
	<!-- ↓ Google+のシェアボタン ↓ -->
	<amp-social-share type="gplus"></amp-social-share>
	<!-- ↓ Twitterのシェアボタン ↓ -->
	<amp-social-share type="twitter"></amp-social-share>


	<!-- ↓ Facebookの記事を埋込 ↓ -->
	<amp-facebook
		width="600"
		height="200"
		layout="responsive"
		data-href="コンテンツのURL">
	</amp-facebook>

	<!-- ↓ Twitterの記事を埋め込む ↓ -->
	<amp-twitter
		data-tweetid="TwitterID"
		width="600"
		height="200"
		layout="responsive">
	</amp-twitter>

</body>

まとめ

前回の記事を書いたのが、2017年2月だったのですが、Googleの対応もすすみ、どんどん新しいAMP対応タグが増えています。
少し前までは、表現がむつかしかった事が、今では単純に表現できるようになっていたりします。
まだまだ既存のWEBサイトをAMP化することには賛否両論ありますが、単純だとわかっているサイトをこれから作成する場合、ブログやニュースサイトを作成する場合には、ぜひ一度検討してみてはどうでしょうか?。