【AMP】GoogleMapなどのiframeを埋め込む方法

2019年 8月 15日  2019年 8月 20日

【AMP】GoogleMapなどのiframeを埋め込む方法

iframeを入れる方法です。

といっても、iframeをamp-iframeに変えるだけなんですが…

amp-iframeを使ってGoogleMapを表示する。

GoogleMapへ行って埋め込み用のコードを取得しましょう!

メニューを開いて、「地図を共有または埋め込む」を選択します。

「地図を埋め込む」からiframeを取得します。

このまま貼り付けてしまうと、表示はされますが、「AMP対応してないで」ってGoogleから怒られます。

なので、AMPの仕様に合わせましょう!

前提としてamp-iframeのインストールが必要です。

head内に以下のコードを入れてください。

<head>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

肝心の置き換えは下記のとおりです。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3193.2537948675445!2d138.9597593514422!3d36.83639737326132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601e16cd15cab9e1%3A0x86e8d194390d4698!2z5Zyf5ZCI5Y-j6aeF!5e0!3m2!1sja!2sjp!4v1568635518580!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe> 

<amp-iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3193.2537948675445!2d138.9597593514422!3d36.83639737326132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601e16cd15cab9e1%3A0x86e8d194390d4698!2z5Zyf5ZCI5Y-j6aeF!5e0!3m2!1sja!2sjp!4v1568635518580!5m2!1sja!2sjp" width="600" height="450" sandbox="allow-scripts allow-same-origin" ></amp-iframe>

iframeをamp-iframeに書き換えます。

そして、styleなどのAMPの仕様に合わない属性を削除し、sandbox属性を追加です。

sandbox属性のパラメータを簡単に解説しますね。

allow-scripts はamp-iframe内でJSが使えるようにします。

allow-same-origin はサーバー通信してもいいんやでって意味です。

まとめ

AMPで外部サイトを呼び出す仕組みであるamp-iframeの解説でした。

マスターしておくといろいろと便利ですよ!

どうしてもAMPの仕様で再現できない仕組みを別のHTMLファイルに切り出して、amp-iframeでなんとかするってこともできますから。