AMPの実装

AMPとは？

米Googleは現地時間2015年10月7日、モバイルWebページの高速表示を実現するためのプロジェクト「Accelerated Mobile Pages」（AMP）を発表した。AMPは高速レンダリング静的コンテンツ用のWebページを構築する方法です。

Webコンテンツのサポート

Tag	Status in AMP HTML
script	application/ld+json以外サポートされない
base	禁止
img	img代わりにamp-img
video	video代わりにamp-video.
audio	audio代わりに amp-audio.
iframe	iframe代わりにamp-iframe.
frame	禁止
frameset	禁止
object	禁止
param	禁止
applet	禁止
embed	禁止
form	禁止. Support coming in the future.
input elements	禁止(input, textarea, select, option)。 ボタンだけサポート
button	サポート
style	amp-custom属性でStyleをheadタグに設定しなければならない。
meta	http-equiv だけ禁止。他の属性はサポート
a	javascript:含めない href 属性がサポート。target があれば、値を_blankに設定なければならない。
svg	ほとんどサポート

viewsでのRailsの実装

layout='responsive'を設定すると、parentのDivがAmpタグのStyleに効く。
リンクを設定する

posts/show.html.erb

<%= link_to "google.com", target: "_blank" %>

イメージとリンクを設定する

posts/show.html.erb

<%= link_to posts_path(post.id) do %>
  <amp-img layout='responsive' height='300px' width='400px' src="#asset_path('image.jpg')">
  </amp-img>
<% end %>

YoutubeのIDでYoutube-ampを設定する

posts/show.html.erb

<amp-youtube layout='responsive' data-videoid='yIV1SQWSzzI' width='600px' height='400px'>
</amp-youtube>

Video-ampにhttpsがあるURLをせっていする

posts/show.html.erb

<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4">
  <source type="video/mp4" src="foo.mp4">
  <source type="video/webm" src="foo.webm">
</amp-video>

amp-iframeにhttpsがあるURLを設定する

posts/show.html.erb

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    resizable
    frameborder="0"
    src="https://foo.com/iframe">
</amp-iframe>

ロカルでURLに#development=1を付けたら、ブラウザのコンソールは以下のように表示したら、OKです。
AMP validation successful.
サーバに反映したら以下のURLでチェックができる。your_urlのかわりにUrlを入れてください
https://cdn.ampproject.org/v/your_url?amp_js_v=4
例えば：
https://cdn.ampproject.org/v/www.asahi.com/amp/articles/ASJ2V51K7J2VUHBI013.html?amp_js_v=4
もしページの内容が表示できたら、成功になりました。

参考

https://www.ampproject.org/
https://www.youtube.com/watch?v=yIV1SQWSzzI
https://takuyokomizo.com/google-amp/