MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す
目次
MovableTypeのブログをAMP対応にするため、AmpConvertというプラグインを入れています。You-Tube埋め込み用のiframeタグはamp-youtubeに変換してくれますが。それ以外のiframeタグはamp-frameにしてくれませんでした。
そこでテンプレート側で正規表現で置き換える方法で対応したのでメモ。
例えばGoogle Maps
例えばGoogleマップの地図をページを埋め込むためのタグが以下だったとします。
<iframe src="https://www.google.com/maps/embed?mid=0123456789" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
この<iframe></iflame>を以下のようにしたいのです。
<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="https://www.google.com/maps/d/embed?mid=mid=0123456789" width="640" height="480"></amp-iframe>
AMP用テンプレートのソース
MovableTypeのAMP用に作ったテンプレートの本文の部分を以下のようにしました。
<mt:AmpConvert fix_img_size="1" base_url="https://qwerty.work">
<$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
<$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>
<mt:For regex_replace="$regex">
<mt:EntryBody>
<mt:EntryMore>
</mt:For>
</mt:AmpConvert>
以下が正規表現でiframeをamp-iframeに置換前と置換後を指定している部分です。
<$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$> <$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>
Googleマップの場合、amp-iframeに置き換えるだけなく、sandbox="allow-scripts allow-same-origin allow-popups"がないとAMPページで地図が表示されませんでした。