MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

Tue, 09 May 2017 19:42:31 +0900

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>

このを以下のようにしたいのです。

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

Amp-Iframe on qwerty.work

MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

例えばGoogle Maps

AMP用テンプレートのソース

sandboxについては以下参考