HAMLでAMPフォーマット対応 schema.orgとamp独自タグへの対応方法 in Rails
Qiitaにまるまる載せた。
Qiitaの方が見やすいね。
参考：【Rails】AMP(Accelerated Mobile Pages)に合唱音源の新着情報.comを無理矢理対応させる
参考：AMP(Accelerated Mobile Pages) HTMLしてみたという話
すごい面倒。すごい。viewいっぱい作らないといけなくなりました。。。
基本知識
- AMPというファイルフォーマット。ギターやベースのアレではない。
- Google、Wordpressなどがモバイル用に高速なフォーマット定義作ったから、その宗教に入れというお触れ
- ****.ampとか、****/amp/のようなURLで提供するようにするのが一般的っぽい。
参考としたampフォーマットは、
- 通常 http://www.bbc.com/news/world-europe-34471849
- AMP http://www.bbc.co.uk/news/amp/34471849
- 通常 http://rocketnews24.com/2016/04/22/740353/
- AMP http://rocketnews24.com/2016/04/22/740353/amp/
デバッグ
ある程度出来たら、そのURLの末尾に「#development=1」を付与してアクセスすると、chromeなどのコンソールを見ることでデバッグできる。
url
http://****.amp#development=1
主な修正箇所と手順
1. mime_typesにamp追加
config/initializers/mime_types.rb
1 # Add new mime types for use in respond_to blocks:
2 # Mime::Type.register "text/richtext", :rtf
3
4 Mime::Type.register "text/html", :amp
こんな一行を。
2. controllerに追加
format.ampを追加。
***_controller.rb
def show
respond_to do |format|
format.html
format.amp { render :layout => false }
end
end
showアクションだけしか使わないので。こんな感じ。
layoutをfalseにしてるのは、余計なCSSやJSを読み込まないようにするため。そもそもdoctypeから修正がいるからlayoutは邪魔。
3. 大元のファイルを再利用しながら作る
いきなり全部書くのはしんどいしミスったら阿呆なので参考をいただく。
https://github.com/ampproject/amphtml
に大元となるサンプルHTMLが落ちてる。
****/show.amp.haml
1 <!doctype html>
2 <html ⚡>
3 <head>
4 <meta charset="utf-8">
5 <link rel="canonical" href="hello-world.html" >
6 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
7 <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
8 <script async src="https://cdn.ampproject.org/v0.js"></script>
9 </head>
10 <body>Hello World!</body>
11 </html>
をベースにしていく。
僕はhaml派なので、なるべくhamlで。
4. 宣言文
宣言文。hamlで書くと、展開時に
<html amp="" lang="ja">
とかなって、すごく胸焼けがするので、書くとしたら
haml
1 :plain
2 <!doctype html>
3 <html amp lang="ja">
4 %head
で。plainは万能だけどカオスになりやすい。
絵文字怖いからampに書き換え。
わざわざplain使うぐらいならerbでいいんじゃ？という声がありそうですが、body内の</div>とかやってられないのでplain使ってでもhaml使いたい。
5. canonicalタグで元ファイルを明示
%link{rel: "canonical", href: "#{request.path}"}
と、ampしてないときのURL(path)をcanonicalで付記する
6. ampタグでampファイルを明示
逆に元々のhtmlファイル側にampファイルはここだよと付記する。
- HTML側にampのURL
- amp側にHTMLのURL
を、お互いに明示しあう形で書く。同ファイルに書くわけではないので注意。
%link{rel: "amphtml", href: "#{request.path}.amp"}
ここでは、.ampと拡張子つけた。
7. titleなどのSEO的な要素を追加
titleやdescriptionなどSEO上普通に必要なやつを記載しておく。
rocketnews24さんなどはogpなども設定されてたので設定してもいいのかもしれない。不要だと思うけど。
8. cssを直書き
別ファイル化出来ない。headerタグ内に書く。
<style amp-custom>
*
*
*
</style>
先の大元となってるコード内でamp-imgなどを使えるようにしているのでうまいこと継承して上書きするように書いてデザイン調整しましょう。
なお、容量制限がある。50kb。
超えたかどうかは先にあげたデバッグ方法で確認。
9. schema(構造化)
構造化は色々能書きたれると長いので割愛。ここではld+jsonの記法で書くことにします。
こちらも同じくheader内に記載する。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "===NewsArticle===",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"===#{request.path}==="
},
"headline": "===タイトル title===",
"image": {
"@type": "ImageObject",
"url": "===#{asset_path "thumbnail.jpng"}===",
"height": ===800===,
"width": ===800===
},
"datePublished": "===このページのcreate_at===",
"dateModified": "===このページのupdated_at===",
"author": {
"@type": "Person",
"name": "===書いた人 author==="
},
"publisher": {
"@type": "Organization",
"name": "===会社組織名===",
"logo": {
"@type": "ImageObject",
"url": "===#{asset_url 'logo.png'}===",
"height": ===83===,
"width": ===192===
}
},
"description": "===説明文 description==="
}
</script>
=== === で、くくった部分自分の好きなように書き換えればとりあえず動く。
注意するところとして、
* @type => ブログとかならArticleとかお決まりがある。
* image内のURLやheight,width => 基本サムネイル画像とかかな。URLを記入で。サイズ指示は必須。”auto”でもいける。
あとはなんとなくわかると思います。
このフォーマットが正しいかどうかは、
構造化データ テストツールで確認できる。
10. imgタグ => amp-img
haml
%amp-img{src: "#{asset_path} 'logo.png'" width: "90", height: "60"}
こんな感じに。
widthとheightが必要。
autoに出来ない。
「サイズのわからない画像のAMP対応」にも書かれているように、画像サイズが都度わからない場合にはこの指定が大変うざい。
正方形、縦長、横長の画像が存在するためどこかでどうしても縦横比を固定して表示しようとすると余計な隙間が空くようになる。大変うざい。
そこで解決策4
解決策2の亜流。とりあえず数値は入れておく。んで、画像ファイルを固定のサイズでトリミングする。
haml
%amp-img{src: "#{asset_path 'image1.jpg'}" width: "580", height: "580"}
carrierwave でのuploader
version :schema do
process resize_to_fill: [800, 800, "Center"]
end
こんな感じでcarrierwaveなどのアップローダー系でサイズを固定してその画像を作ってしまうのが最も面倒ではなかった。
尚、画面めいっぱいに広げたい画像の場合は、
haml
%amp-img{src: "#{asset_path} 'logo.png'" width: "90", height: "60", layout: "responsive"}
と、layout: responsiveを付けると画面サイズに合わせてフィットしてくれる。
11. twitterのembed => amp-twitter
twitter_idが必要。
twitterのurl
巷で噂のImageMagick先輩の件。
awsにコンソールログインして、
identify -version
でバージョン確認です。
コンソールログインしなくてもバージョンとかわかればいいのにな。https://t.co/DqbT6Ceacm
— 新堀勝＠cyborgninja (@cyborg__ninja) May 13, 2016
のラストの番号。
URLとかで取得してきちゃってたらsplitとかしてidだけ抽出する作業が必要。
その他にもyoutubeとかは専用のタグとかある。
以下省略。
youtube用のタグとかあったりしますが、とりあえず割愛。
上記で十分ampファイルは出来上がったかと思います。
amp対応することのまとめ
大変。
ampもschemaも、作ってデバッグ通す。作ってデバッグ通す。
デバッグ超重要。
