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ページで地図が表示されませんでした。