Googleマップのiframe埋め込みをAMP化する方法

PR 2016/11/3 2017/8/18 WEB制作, WordPressカスタマイズ 8

Googleマップは、以下のようにiframeで地図をサイトに埋め込むことができます。

今回は、これをAMPページでもエラーを出さずに表示させる方法の紹介です。

GoogleマップのiframeのAMP化

Googleマップで「地図を共有また埋め込む」メニューを選択すると

以下のようなiframe埋込タグが表示されます。

ここで取得したタグ自体はこんな感じです。

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7144503548398!2d139.69826945132047!3d35.659406330102236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b57f03a6d3f%3A0x1d01d35eef4bf7a!2z44OP44OB5YWs5YmN5bqD5aC0!5e0!3m2!1sja!2sjp!4v1478138974491" 
  width="600" 
  height="450" 
  frameborder="0" 
  style="border:0" 
  allowfullscreen>
</iframe>

見やすいように改行してあります。

このiframeをAMPページで表示させるためには、以下のように書く必要があります。

<amp-iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7144503548398!2d139.69826945132047!3d35.659406330102236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b57f03a6d3f%3A0x1d01d35eef4bf7a!2z44OP44OB5YWs5YmN5bqD5aC0!5e0!3m2!1sja!2sjp!4v1478138974491" 
  width="600" 
  height="450" 
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  frameborder="0"
  allowfullscreen>
</amp-iframe>

変わった点といえば以下の部分です。

iframe→amp-iframeにタグを変更
layout=”responsive”属性の追加（レスポンシブ化）
sandbox=”allow-scripts allow-same-origin allow-popups”属性の追加（これがないと動作しないっぽい）
style=”border:0″ 属性の除去

allowfullscreen属性については、あってもなくても動作は変わらないようです。なのでそのまま残してあります。削除してしまっても多分問題ないと思います。

ですので、通常の「iframeのGoogleマップ埋め込みタグ」であっても、プログラム等により上記の変更処理を行いさえすれば、AMP化出来るようです。

参考 amp-iframe – AMP by Example

注意点：amp-iframeを利用するには以下のようなスクリプトをヘッダーで呼び出しておく必要があると思います。

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

PHPでGoogleマップのiframe埋め込みをAMP用に置換する

で、WordpressなどでPHPを用いて「デフォルトのGoogleマップiframeタグ」をAMP仕様に合わせて表示させるには、以下のような処理を行えばいけるかと思います。

//style属性を取り除く
$the_content = preg_replace('/ +style=["][^"]*?["]/i', '', $the_content);
$the_content = preg_replace('/ +style=[\'][^\']*?[\']/i', '', $the_content);

// iframeをamp-iframeに置換する
$pattern = '/<iframe/i';
$append = '<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/<\/iframe>/i';
$append = '</amp-iframe>';
$the_content = preg_replace($pattern, $append, $the_content);

やっていることは単純で、以下のようなことをやっているだけです。

style属性を取り除く
iframeをlayout・sandbox属性のついたamp-iframeタグに置換する

WordPressで利用するには、add_filter関数で「the_content」をフックしてAMPページが表示されたときだけ処理するようにコードを書く必要があると思います。

動作

こういった処理を行うことによって、AMPページでも以下のように通常のGoogle埋め込みとほとんど同じ表示を行うことができました。

注意点

ただ、Googleマップを今回書いたような方法でAMP化したとしても、amp-iframeを利用した場合以下のようなエラーが出てマップが表示されないことがあります。

Error: task failed: amp-iframe#1#L amp-iframe#1: <amp-iframe> elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller): amp-iframe#AMP_1 Current position 245. Min: 482.25Positioning rules don’t apply for iframes that use `placeholder`.See https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md#iframe-with-placeholder for details.

このエラーの原因は、<amp-iframe> はページ上部に表示できないという特殊な仕様があるためです。厳密には、ページ最上部から600pxより下の位置、または、ビューポートの75％より下の位置（いずれかを満たせばOK）に置かなければ、バリデーション・エラーになるようです。

参考 AMPページでGoogleマップを表示する方法 – ストリートビューもOK！ | Crane & to.

なので、以下のようにトップから600pxより多く離すか

ビューポート（表示エリア）の縦範囲の75％よりも下にamp-iframeを位置づける必要があるようです。

「トップから600pxより多く離す」と「ビューポートの75％より下に位置付ける」という制約は、どちらか一方を満たせばOKです。

この表示領域による制限はamp-iframe自体の仕様です。Googleマップだからというわけではありません。

placeholderを用いた対応

どうしても、上記条件を満たせない場合は、amp-iframeのplaceholderを用いるという手法もあります。

<amp-iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7144503548398!2d139.69826945132047!3d35.659406330102236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b57f03a6d3f%3A0x1d01d35eef4bf7a!2z44OP44OB5YWs5YmN5bqD5aC0!5e0!3m2!1sja!2sjp!4v1478138974491" 
  width="600" 
  height="450" 
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  frameborder="0"
  allowfullscreen>
  <amp-img layout="fill"
    src="[画像のURL]"
    placeholder></amp-img>
</amp-iframe>

まとめ

今回、GoogleマップデフォルトのiframeをAMP化したわけですが、思いのほか簡単にできました。

何か特別なAMPの遷移スクリプトを読み込む必要はなく、「script custom-element=”amp-iframe”」スクリプトさえ読み込んでいれば、ちょっとしたiframeタグと属性の変更で比較的簡単にAMP化できます（Twitter・YouTube埋込よりは）。

というわけで「通常ページではGoogleマップが表示されているのに、AMPページでは表示されない…」なんて時には、上に書いたようなことをチェックすると改善するかもしれません。

『Googleマップのiframe埋め込みをAMP化する方法』へのコメント

名前:うんこ投稿日：2016/11/27(日) 21:01:22 ID：fb836c622
今日暇だからお前のコメント読んだ、
どうせ誰だかもう分かっているんだろ
無駄に的確に答えてくれてご苦労様と言ったところかな、ところで疑問だけどなんでコメントに過去にコメントした記事のURL載せてんの、
無意味な労力だろ（笑）、何がしたいの？謎なんだよ。
道端にゴミをすてるような感覚でお前のブログにコメントしただけでも、お前の行動性の謎が現れるんだな。
きっとこのコメント読んだら、ムキになってコメントし返すんだろうけど無駄だから、
だってこのコメントもゴミを道端に捨てるような感覚で書き込んでるし、どうせ大したこと言わねーだろだからもう読むこともね～。暇つぶしの道具になってくれてありがとう。
名前:わいひら投稿日：2016/11/28(月) 11:47:55 ID：c6d72d680
ああ、どうも。
僕ですら、何処に書き込んだか忘れてしまった昔のコメント欄を、わざわざ探し出して読むなんてよっぽど暇だったんですね。
僕も暇なわけではないので、おっしゃる通り、無駄にコメントを返すことはせず、今後コメントがあれば、そのまま削除させていただこうと思います。
名前:jun 投稿日：2019/06/10(月) 19:23:08 ID：32f648823
わいひらさん初めまして。
junと申します。
ブログをAMP対応中でしてどうしても「警告」に対応したくていろいろ調べたところ、貴ブログにたどり着きました。
グーグルマップのIframeをampで表示した時に「amp-iframe」に置換したく調べておりましたところ情報が少なく困っております。
説明の中で、
『で、WordpressなどでPHPを用いて「デフォルトのGoogleマップiframeタグ」をAMP仕様に合わせて表示させるには、以下のような処理を行えばいけるかと思います。』の
「PHPを用いて」をもう少し詳しく教えていただけませんでしょうか？
初心者質問で申し訳ありません。
PHPの記述場所・方法が分からないんです。
よろしければご教示いただけませんでしょうか？
よろしくお願いいたします。
名前:わいひら投稿日：2019/06/10(月) 21:59:29 ID：73160a29e
AMPの記述場所は、以下のような本文のAMP変換関数内で利用します。
https://nelog.jp/wordpress-content-to-amp
ただ、これもどのようにAMPページを生成しているかによって変わってきます。
プラグインでAMP化しているとまた全然違ってきます。
ですので一概にどの部分ということは言えません。
かといって、全てのケースにおいて、説明するわけにはいきません。
なので申し訳ないですが、自身でPHPコードを書くべき場所を見つけていただくしかありません。
どうしても対応が難しい場合は、クラウドソーシング等でプロに依頼していただいた方が手っ取り早いかと思います。
名前:jun 投稿日：2019/06/11(火) 00:52:06 ID：d3d348678
わいひらさんこんばんは。
早速のご回答ありがとうございます。
function.phpに書き込んでみましたが私のブログではiframeが置換されませんでした。
AMP対応のテーマを使用しているのですが、どのようにAMPページを生成しているかはいろいろあるということが理解できました。
ありがとうございます。
phpをまったく理解していないので、自分なりに学習を始めて解決すればご報告させていただきたいと存じます。
初心者質問に反応していただきましたこと、感謝いたします。
名前:わいひら投稿日：2019/06/12(水) 22:01:28 ID：baf8c6968
ただfunctions.phpに書き込んだとしても、動作はしないと思います。
するにしても、「AMPページかどうかの条件分岐」と「投稿本文をフックしてiframe置換するコード」は必ず必要になるかと思います。
ある程度、PHPとAMPを理解して使わないと、当記事のコードを使うのは結構難しいかもしれません。
ちなみに、参考までに拙策のWordPressテーマのAMP変換関数は、こんな感じで利用しています。
https://github.com/yhira/cocoon/blob/5238c4542630dffbbdef5e84be63467f3dac9ff1/lib/amp.php#L54
AMP判別関数はこちら。
https://github.com/yhira/cocoon/blob/5238c4542630dffbbdef5e84be63467f3dac9ff1/lib/amp.php#L12
ただ、いずれにせよこれらのコードもAMP変換方式により変わってきます。
プラグインでAMP化していると、全然違うやり方をする必要があったりします。
名前:jun 投稿日：2019/06/18(火) 20:24:35 ID：6cea1850a
わいひらさんこんばんは。
コードは以下で何とかグーグルマップを表示できました。
▼グーグルマップ
$pattern = ‘/]+?)src=”(https:\/\/www\.google\.com\/maps\/embed\?.+?)”\s(.+?)>/i’;
$replacement = ”;
if(preg_match($pattern, $content, $matches)){
$content = preg_replace($pattern,$replacement,$content);
}
▼amp-iframe
$pattern = ‘/<iframe ([^<]+?)/iu’;
$replacement = ‘<amp-iframe layout="responsive" sandbox="allow-same-origin allow-scripts allow-popups-to-escape-sandbox allow-popups" $1’;
if(preg_match($pattern, $content, $matches)){
if (!$AMP_LIB_IFRAME){
add_action(‘dp_amp_library’, ‘dp_amp_library_iframe’);
$AMP_LIB_IFRAME = true;
}
$content = preg_replace($pattern,$replacement,$content);
}
ただこれだと「sandbox」が重複していると警告が出ます。
知人に聞いたりコードを見せてもらって書いたので、知識があるわけではありません。
知人も分からないようですが、エラーじゃないんだからいいんじゃない？とのことで、引き続き警告が出ないようにする方法を考えてみたいと思います。
ブログ記事からたくさん勉強させていただきました。
ありがとうございました。
名前:わいひら投稿日：2019/06/18(火) 22:58:53 ID：759fcd04d
ただこれだと「sandbox」が重複していると警告が出ます。
実際のバリデーション画面と警告メッセージを見たわけではないので推測になるのですが、もしかしたら以下の部分が不要なのかもしれません。
sandbox=”allow-same-origin allow-scripts allow-popups-to-escape-sandbox allow-popups”
もしくはsandbox属性値内のどれかを削除するとか。