アクトインディ開発者ブログ

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

いこーよの記事をAMP化しました～デザイナー編～

HTML ojika

デザイナーのojikaです。

エンジニアakiyama氏とは別の知見（？自分が勝手にひっかかったともいえる失敗談）をご紹介したいと思います。

記事に関しては、探すもCSSやデザイン的な部分はあまり記述ありませんでした。英語の記事ならあったのかもしれませんが、英語ﾖﾒﾏｾﾝ(´・ω・`)ｽﾐﾏｾﾝ 前編の記事が完結にまとまっていてスバラシすぎるので、アレな内容が加わることをお許し下さい。 （やめて!!電車のホームで後ろから刺さないで!!）

AMPのCSSについて

公式ドキュメントはこちら https://www.ampproject.org/docs/guides/responsive/style_pages.html
制約は少ないので、こちらを確認して進めていけばほぼ問題なくできます。

いこーよのAMP化ではCSSでアニメーションさせたり、webフォント（本体サイトではアイコンに使用）を使用したりはしませんでした。矢印などもcontent:'>'で対応してしまいました。 AMPは軽くないと!ですね( ´∀｀)bｸﾞｯ!

つまづきポイント1：slimにインラインでCSSを書く

AMPCSSはインラインでかくものと公式に書いてあったので、とりあえず.slimファイルに直接書くことにしました。

style amp-custom

html出力結果

<style>amp-custom</style>

あっハイだめですよね～。(；・∀・)ﾜｶﾙ
styleの中はテキスト扱いなので、上記のように｜（パイプ）も必要ですよね。 ↓　ということで

style(amp-custom)
  |
    header {
      margin: 0;
    }

html出力結果

<style amp-custom>
  header {
      margin: 0;
  }
</style>

( ´∀｀)bｸﾞｯ!きちんと認識してくれました。 slimにインラインでCSSなんて書いたことなかったのでこんな初歩でﾖｸﾜｶﾗﾅｲ!!!となっていました。初心にかえろう(;´д｀)ﾄﾎﾎ…

つまづきポイント2：backgroundでLINEボタン画像を読み込む

akiyama氏も書いていましたが、amp-social-shareにはLINEボタンがありません。 そのためボタンの画像もLINE公式の設置方法ページから画像をダウンロードして設置する形になります。

↓　テキストだしとりあえずいつもどおりやってみました。

amp-social-share[type=line] {
  background-image: image-url("s/articles/amp_line.png");
}

↓　CSS出力結果

amp-social-share[type=line] {
  background-image: image-url("s/articles/amp_line.png");
}

パス展開されてません！当然画像表示されてません！(；・∀・)

どうやらviews配下のファイルにCSSを書くときはimage-urlを使って書くとAsset Pipelineにのらないので、デプロイされた時にフィンガープリントがつかずに表示されないのだそうです。 そのかわりにimage_pathというものが使えます。

↓　このように。

amp-social-share[type=line] {
  background-image: url('#{image_path("s/articles/amp_line.png")}');
}

↓　CSS出力結果

amp-social-share[type=line] {
  background-image: url('/assets/s/articles/amp_line.png');
}

ワー(^O^)assetsさんコンニチワー！ ということで、表示されました！ いこーよのボタンは角丸ですのでtwitterとFacebookにもradiousを指定してならべました。 仲良く並んでいますね。ε-(´∀｀*)ﾎｯ

つまづきポイント3：各種iframeの高さ調整

いこーよの記事にはinstagramとyoutubeとgooglemapが使われていることがあります。akiyama氏も書いていましたが、今回amp-iframeを使用しました。

そこで、widthとheightを指定するのですがyoutubeは横長(googlemapはyoutubeにあわせました）instagramは正方形だったり縦長だったりでビシっと決められません(´・ω・`) 結局iframeにwidth="320"とheight="320"と固定値を指定して、CSSで高さを指定したのでした。

↓　instagramとyoutube・googlemapのCSS振り分けは本体でもやっていたので同じようにやりました。こんなかんじです。

amp-iframe[src^="https://www.instagram.com/"] {
  margin: 20px auto;
  ....
}
amp-iframe[src^="https://www.youtube.com/"],
amp-iframe[src^="https://www.google.com/maps/"] {
  margin: 20px auto;
  ....
}

instagramの高さに関しては、あまり数もないことから、現時点で記事に上がっている一番縦長なものが表示されるようにしました。 今後変更があるかもしれません。

つまづきポイント4： つまづきポイント2の修正

途中で管理の都合からCSSがインラインにベタ書き～ではなくrenderで読み込みに変更されました。そりゃそうですねー何百行もあるんですから… そしてakiyama氏の神の一言「slimはインデントが一つ無駄に深くなるから」でerbになりました(´ω｀)ﾌﾌ

ファイルをわけたところで、おやLINE画像ちゃんがまた表示されていない、ということに気づきました。erbになったので画像読み込みのパス部分を変更しなくてはなりません。

amp-social-share[type=line] {
  background-image: url('#{image_path("s/articles/amp_line.png")}');
}

↓

amp-social-share[type=line] {
  background-image: url("<%=image_path('s/articles/amp_line.png')%>");
}

はい、ふつうのslim→erbの変換でしたね。でもはじめきづかなかったので悩んでいました…。

つまづきポイント5：つまづき ポイント3の修正

akiyama氏の記事にもありましたが、instagramの読み込みがiframeからamp-instagramに変更になりました。 よって、つまづきポイント3も若干修正をしました。

amp-iframe[src^="https://www.instagram.com/"] {
  margin: 20px auto;
  ....
}

↓

amp-instagram {
  margin: 20px auto 0;
  ....
}

特に難しいことはありませんでした。むしろ前より楽だったぐらいです。

以上がCSSでつまづいたことでした。 あとは本体のCSSをコピペコピペして必要なものだけを移植したのですが、 地味にresetを選ぶのが面倒でした┐(´д｀)┌

画像

AMPページに表示するヘッダーロゴについて

ヘッダー部分に表示されるロゴを作るのですが、それに関しては公式ドキュメント通りにすすめればヨサソウです。 https://developers.google.com/search/docs/data-types/articles#amp-logo-guidelines

↓　ざっくりとこのような要件でした。

  • ファイルは.jpg .png または.gifのような、ラスタデータでなければならない。 .svgみたいなベクターデータはダメです。
  • アニメーションはダメです。
  • アイコンではなくフルワードマークまたは完全なロゴを使用しましょう。
  • 白または明るい背景で見やすいものにしましょう。
  • サイズは60x600px矩形に収まるように作りましょう。
  • 正確に60px高（推奨）または正確に600px幅でなくてはならない。 例えば450x45pxは、600x60px矩形に収まりますが、ダメです。
  • 60ピクセルの高さを維持することで幅が600px以上になる場合には、幅600pxにダウンスケールし、高さは元の縦横比を維持するために60px内で余白を取ります。
  • 単語ベースのロゴは上下に余白を6pxずつとるため最大48pxとなり、高さ60px高に対して垂直方向に中央揃えなければなりません。
  • 単色の背景とロゴはワードマークの周りに6px最小のパディングを含める必要があります。

上記の要件だったのですが、いこーよのロゴは四角で囲まれており、60px+上下余白6pxずつをとっても、AMP対応している他社のロゴに比べて大きく圧迫感があったため、90％縮小し中央にそろえてしまいました。

またAMPはスマホ特化のページですが、画像の対応については書いておらず、言われたとおりのサイズで表示するとロゴがボヤけます。 特にダメとも書いていなかったと判断したので、倍の大きさでロゴ画像を制作し、縦60pxと縦横比そのままの横幅を指定しています。 （ここは実際にAMP記事としてgoogleに表示されたときに確認し、なにか問題がありそうなら変更しようと思っています。）

AMPページに静的に画像を読み込む

slimに静的に書く場合、amp-imgタグを使う以外は意外とふつうでした。 通常はimage_tagを使っていたりするのですが、amp-imgタグを使う必要があるためasset_pashを使用しました。

amp-img src=asset_path("s/articles/amp_logo.png") alt="子どもとおでかけ情報いこーよ" width="127" height="60"

これで問題なく表示されました。ﾁｬﾝﾁｬﾝ

Google Analytics

公式ドキュメントはこちら https://developers.google.com/analytics/devguides/collection/amp-analytics/ こちらも公式ドキュメント通りにちまちま進めていきました。

↓　このような形で値の部分も｜パイプでslimに対応させています。

amp-analytics type="googleanalytics" id="analytics1"
  script type="application/json"
    |
      {
        "vars": {
          "account": "UA-xxxxxxx"
        },
        "triggers": {
          "任意の名称": {
            "on": "visible",
            "request": "pageview"
          },
          "任意の名称": {
            "selector": "クリックをとる箇所のセレクタ",
            "on": "click",
            "request": "event",
            "vars": {
              "eventCategory": "任意のカテゴリ名",
              "eventAction": "任意のアクション名"
            }
          }
        }
      }

まとめ

一度形を作ってしまえば特にこれといって難しかったなーということはないのですが、slimだとかerbだとかで作っているという記事は殆ど無かった（＆デザイナーがやってる記事はほぼなかった、とおもう）のでそのあたりで何度かつまづきました。 そういう地味なところでつまづく人はあまりAMP化を対応しないのではと思ったのですが、どこかの誰かのためになればいいな、と思い恥を忍んで書きました☆（ゝω・）vｷｬﾋﾟ

全てのAMP化仲間に幸あれ☆ミ