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

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

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

スポンサーリンク
レクタングル(大)広告

GoogleマップのiframeのAMP化

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

Googleマップで地図を共有また埋め込む

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

Googleマップのiframe埋め込みタグ

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

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

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

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

  • 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を利用するには以下のようなスクリプトをヘッダーで呼び出しておく必要があると思います。

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

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

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

  • style属性を取り除く
  • iframeをlayout・sandbox属性のついたamp-iframeタグに置換する
WordPressで利用するには、add_filter関数で「the_content」をフックしてAMPページが表示されたときだけ処理するようにコードを書く必要があると思います。

動作

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

AMPページでのGoogleマップ

注意点

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

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より多く離すか

トップから600px以上

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

2016-11-03_12h06_47

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

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

placeholderを用いた対応

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

まとめ

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

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

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

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

  1. 名前:うんこ 投稿日:2016/11/27(日) 21:01:22 ID:fb836c622

    今日暇だからお前のコメント読んだ、
    どうせ誰だかもう分かっているんだろ

    無駄に的確に答えてくれてご苦労様と言ったところかな、ところで疑問だけどなんでコメントに過去にコメントした記事のURL載せてんの、
    無意味な労力だろ(笑)、何がしたいの?謎なんだよ。
    道端にゴミをすてるような感覚でお前のブログにコメントしただけでも、お前の行動性の謎が現れるんだな。
    きっとこのコメント読んだら、ムキになってコメントし返すんだろうけど無駄だから、
    だってこのコメントもゴミを道端に捨てるような感覚で書き込んでるし、どうせ大したこと言わねーだろだからもう読むこともね~。暇つぶしの道具になってくれてありがとう。

  2. わいひら 名前:わいひら 投稿日:2016/11/28(月) 11:47:55 ID:c6d72d680

    ああ、どうも。
    僕ですら、何処に書き込んだか忘れてしまった昔のコメント欄を、わざわざ探し出して読むなんてよっぽど暇だったんですね。
    僕も暇なわけではないので、おっしゃる通り、無駄にコメントを返すことはせず、今後コメントがあれば、そのまま削除させていただこうと思います。