この記事と同じ内容を私のブログにも投稿してあります。

はじめに

とうとう自分のブログをAMPに対応させました。これにより、ページの読み込み速度が改善されました。

対応前は画像の遅延読み込みだけでなく、scriptタグにdefer属性を付けたりpreloadやpreconnectを使ったりしていました。しかし、AMPにしたらそんなことをしなくても高速になりました。また、日本語ウェブフォントをなくしただけでPage Speed Insightsのモバイルの点数が30点上がりました笑

この記事では、AMP化のときにつまずいたことや、解決した方法を書いていきます。そもそもAMPの概要や対応方法を知りたいという場合は他の記事を見てくださいm(_ _)m

1. amp-imgの終了タグ

amp-imgタグはimgタグと違い、終了タグが必要です。終了タグがなくても正常に動く場合もありますが画像が変に引き伸ばされたり、文字にかぶったり、画像の場所がずれたりします。

最初は原因がわからなかったのですが、公式サイトを読んでいるうちに「あれ？　終了タグ付け忘れてた」となりました。

2. amp-imgのフォールバックが機能しない

amp-imgタグのフォールバックが機能せず悩んでいたのですが、公式サイトの「プレースホルダーとフォールバック」に、さらっと書いてあります。

fallback 属性は、AMP 要素だけでなく、どの HTML 要素でも設定できます。指定する場合、fallback 要素は AMP 要素の直接の子にする必要があります。

https://amp.dev/ja/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/よりより

ということで、フォールバックはフォールバックでない要素の子要素にする必要があります。悪い例を見てみましょう。

<amp-img src="path_to_image" alt="" width="1920" height="1080" layout="responsive"></amp-img>
<amp-img fallback src="path_to_fallback_image" alt="" width="1920" height="1080" layout="responsive"></amp-img>

フォールバックは子要素にしなければいけません。悪い例を修正するとこうなります。

<amp-img src="path_to_image" alt="" width="1920" height="1080" layout="responsive">
    <amp-img fallback src="path_to_fallback_image" alt="" width="1920" height="1080" layout="responsive"></amp-img>
</amp-img>

ちゃんと子要素にしましょう。

3. CSSのobject-fitを使った画像の切り抜きができない

私のブログでは、ページの一番上の画像をCSSのobject-fitを使って切り抜いているのですが、切り抜かれる代わりにその縦横比で無理やり引き伸ばされてしまいました。

解決方法は、公式サイトの「How to support Images with unknown Dimensions」のObject-Fit to the rescue」の[object-fit: cover]に書かれていました。

ページ自体は「サイズがわからない画像ってどうすればいいの？」という内容ですが、CSSのobject-fitでトリミングする方法も書かれています。

レスポンシブに画像を正方形に切り抜くならこんな感じでしょうか。

HTML

<div class="cropping-container">
   <amp-img layout="fill" src="path_to_image"></amp-img>
</div>

CSS

.cropping-container {
  position: relative;
  width: 100vw;
  height: 100vw;
}

.cropping-container amp-img,
.cropping-container img {
   object-fit: cover;
}

ちなみに、CSSにamp-imgだけでなく普通のimgの指定もありますが、これを消すと上手く動きません。AMPのスクリプトがimgタグを使って画像を表示しているためです。

4. 直書きのSVG画像のエラー

AMPテストをしたら、SVGのxmlns:dc、xmlns:cc、xmlns:rdf、rdf:rdf、cc:work、dc:format、dc:title、paint-order、gとかが許可されてないよ☆的なこと言われました。

そこで、許可されてないと言われたものを消していきました。ただし、paint-orderとgタグは削除すると画像が破壊されることがあるので、ブラウザーなどで画像をプレビューしながら作業することをおすすめします。

paint-orderはフィルやストロークの重なりの順番を指定するものです。ストロークの塗りがなければ消しても問題ないでしょう。しかし、ストロークを使って袋文字（縁取りのある文字）などを作っている場合は注意が必要です。paint-orderを消すと縁取りが外側だけでなく内側にも付いてしまうことがあります。その場合はInkscapeなどのSVGエディターを使い、袋文字の上に袋文字でない（＝ストロークの塗りがない）ものを、重ねれば上手くいくはずです。

また、gタグについては、gタグにstyle属性が使われている場合、自分で消さないほうが良いです。gタグはグループ化をしているので、SVGエディターで全てのグループ化を解除すれば直接ファイルをいじらずに解決します。ただし、何かしらの理由があってグループ化しているはずなので、グループ化解除前のコピーを残しておきましょう。

InkscapeでSVGを作成した場合、「inkscape」という文字列の含まれた属性があるので、それらも削除しました。

最後に注意点として、頑張って削除した属性やタグは、ファイルをSVGエディターで開いて保存すると復活するので、SVGエディターで開く用のファイルと公開用で分けましょう。

さいごに

こんな感じで、色々ありながら、Pythonの力も借りながらほぼ全てのページをAMP化しました。今回は維持・管理のしやすさから、AMP化したページは通常のHTMLページを用意していませんが、IEのアクセスも考えるなら通常のHTML版も用意する必要があります。

私のブログでは静的サイトなのでプラグインが使えませんでした。また、ツールで上手く変換できず、さらに趣味なので外注という選択肢や複数人でやるという選択肢がなかったので手作業（＆一部自動化）という形になりました。ページ数が少なかったおかげで1人でもなんとかなりました。しかし、AMP対応すると読み込みは高速化されますが、対応するための作業が大変なので複数人で作業したりツールやプラグインを使ったりするべきです。

ということで、最後までお読みいただき、ありがとうございました。

ページのAMP化でつまずいたこと