Q&A
実際の実装を提示してください。
参考記事は単なる参考でしかありません
下記の問題につきまして、ご存知の方いらっしゃいましたら、ご教示お願いいたします。
問題：
WordPressで作成したページを印刷するときに、印刷プレビュー見ると埋め込んだGoogle マップが表示されません。
わかったこと：
Google マップまでスクロールして見に行った後はプレビューに表示されることがわかりました。
推定原因：
Google マップを一度見ないと地図が表示されないので、読み込むタイミングが原因と推測しています。
試したこと：
Google マップがあるページにアクセスしてからしばらく待っても解決しません。
skip-lazyを追加しましたが、改善されませんでした。
参考にした記事：
【追記あり・入れてみた】「Native Lazyload」でワードプレスがお手軽遅延ローディング【有効化するだけ】
iframeのネイティブLazy-loadがウェブ標準に、<iframe>タグにloading=lazy属性を追加するだけで遅延読み込み可能に
現在のコードを追記いたします
html
1<p><iframe class="skip-lazy" style="border: 0;" tabindex="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3269.2996640542724!2d137.13387581598576!3d34.97415797602924!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600498762106d483%3A0x4764141f01994417!2z44CSNDQ0LTA5MDMg5oSb55-l55yM5bKh5bSO5biC5p2x5aSn5Y-L55S65L2N5byP77yU77yS!5e0!3m2!1sja!2sjp!4v1611772353836!5m2!1sja!2sjp" width="800" height="600" frameborder="0" allowfullscreen="allowfullscreen" aria-hidden="false"></iframe></p>
ご連絡大変ありがとうございます。
問題があるページのリンクを追加致しました。コードは帰宅後、追加致します。よろしくお願い致します。
リンク切れのようです。
こちらでしょうか？
https://aoitool.co.jp/en/home/company/
申し訳ございません。
添付いただきましたリンクで間違いございません。
本文中のリンク修正致しました。
大変失礼いたしました。
Native Lazyload を停止した場合はどうなりますか？
プラグインのことでしょうか？
はい、そのとおりです。
当方で埋め込みマップを使ってテストしてみましたが、地図をスクリーンに入れないまま印刷すると、Chromeでは地図が印刷されるものの表示が崩れていました。Firefoxでは問題ありませんでした。
GoogleのサービスはChromeに特化して何かをしてることが多いので、その影響かもしれません。
簡単な回避方法はないのではないかな、と感じました。
プラグインは入れておりません。
WordPress5.5からデフォルトで追加されたようです。
Edgeでもだめでした。
skip-lazyで回避することができると書いてありましたが、上手くいかない状況です。
お時間ありましたら、確認お願い致します。m(_ _)m
ご提示のページを拝見しましたが、Googleマップのiframeには loading="lazy" がありませんでしたので、その部分は関係がないだろうと思います。
Edgeでもダメな理由は、Chromium Edgeだからではないでしょうか。
iframeがないとのことですが、現在テスト用に１つ追加して２つマップがありますが、両方ともないということでしょうか？
現在のコード追記いたしました。
> 両方ともないということでしょうか？
おっしゃるとおりです。2つのiframeには、どちらも loading="lazy" がありませんでした。
EdgeはChromium Edgeですが、Chromium Edgeがダメな理由はなんでしょうか？
複数にわたるご回答大変感謝いたします。
原因は他にあるということでしょうか？
Chromium Edge だからダメというわけではなく、中身が Chrome なので Chrome と同じ理由によるものではないですか？ ということです。
> 原因は他にあるということでしょうか？
繰り返しになりますが、GoogleのサービスはChromeに特化して何かをしてることが多いのでその影響かもしれません、というのが私の考えです。開発者ツールを眺めながらスクロールをしてみたところ、DOMの変更があったことが見えましたので、おそらく、Googleマップのスクリプトの中で何かをしてるんだと思います。そうだとすると、こちら側からはどうしようもない、ということですから、回避策を考えるしかないと思います。
ありがとうございます。
どのような解決策があるか調べてみますが、ヒントでもなんでも良いので、なにかご存知の方いらっしゃいましたら、コメントよろしくお願い致しますm(_ _)m
あなたの回答
tips
プレビュー
