More than 5 years have passed since last update.

株式会社favy

HAMLでAMPフォーマット対応(schema.orgとamp独自タグへの対応方法)

Last updated at 2018-08-16Posted at 2016-05-13

参考：【Rails】AMP(Accelerated Mobile Pages)に合唱音源の新着情報.comを無理矢理対応させる
参考：AMP(Accelerated Mobile Pages) HTMLしてみたという話

すごい面倒。すごい。viewいっぱい作らないといけなくなりました。。。

基本知識

AMPというファイルフォーマット。ギターやベースのアレではない。
Google、Wordpressなどがモバイル用に高速なフォーマット定義作ったから、その宗教に入れというお触れ
.ampとか、/amp/のようなURLで提供するようにするのが一般的っぽい。

参考としたampフォーマットは、

デバッグ

ある程度出来たら、そのURLの末尾に「#development=1」を付与してアクセスすると、chromeなどのコンソールを見ることでデバッグできる。

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">

とかなって、すごく胸焼けがするので、書くとしたら

  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

%amp-img{src: "#{asset_path} 'logo.png'" width: "90", height: "60"}

こんな感じに。

widthとheightが必要。
autoに出来ない。
「サイズのわからない画像のAMP対応」にも書かれているように、画像サイズが都度わからない場合にはこの指定が大変うざい。

正方形、縦長、横長の画像が存在するためどこかでどうしても縦横比を固定して表示しようとすると余計な隙間が空くようになる。大変うざい。

そこで解決策4

解決策2の亜流。とりあえず数値は入れておく。んで、画像ファイルを固定のサイズでトリミングする。

%amp-img{src: "#{asset_path 'image1.jpg'}" width: "580", height: "580"}

version :schema do
  process resize_to_fill: [800, 800, "Center"]
end

こんな感じでcarrierwaveなどのアップローダー系でサイズを固定してその画像を作ってしまうのが最も面倒ではなかった。

尚、画面めいっぱいに広げたい画像の場合は、

%amp-img{src: "#{asset_path} 'logo.png'" width: "90", height: "60", layout: "responsive"}

と、layout: responsiveを付けると画面サイズに合わせてフィットしてくれる。

11. twitterのembed => amp-twitter

twitter_idが必要。

https://twitter.com/cyborg__ninja/status/730976852643221505

のラストの番号。
URLとかで取得してきちゃってたらsplitとかしてidだけ抽出する作業が必要。

その他にもyoutubeとかは専用のタグとかある。

以下省略。

youtube用のタグとかあったりしますが、とりあえず割愛。
上記で十分ampファイルは出来上がったかと思います。

amp対応することのまとめ

大変。

ampもschemaも、作ってデバッグ通す。作ってデバッグ通す。
デバッグ超重要。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up