ウェブサイト内に埋め込んだGoogleカレンダーがiPhoneで表示されないトラブルの対策方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

先日に「ウェブサイト内へ設置したGoogleカレンダーが表示されない」というご相談をいただきました。詳細をお伺いするとスマートフォン(iPhone)で閲覧しているユーザーに起こっている現象とのこと。下記ではロボット確認画面が表示されないように回避する設定手順を含めた解決方法をご紹介させていただきます。

ウェブサイト内に埋め込んだGoogleカレンダーがiPhoneで表示されないトラブルの対策方法

原因は「GoogleカレンダーがiFrameで埋み込まれている点」ですね。ウェブサイト内に外部URL経由でGoogleカレンダーを表示させているのでそもそも“強引な仕組み”となっている状態となっています。

さらにGoogleカレンダーへ不正なアクセスを防ぐシステム(reCAPTCHA認証)も絡んできます。閲覧しているスマホによってはiFrameの都合で全画面が表示されないケースもあるので進めなくなることもあります。本来はチェックマークを入れて順番に画像を押しますがiFrame外に隠れてしまい選べない状況になるわけですね。

ちなみにチェックを入れるロボットの確認画面は下記です。

そしてチェックを入れると画像が選択可能になります。下記ではすべて表示されていますがGoogleカレンダーを外部サイトで読み込んでいる場合はiFrame外に画像が隠れて押せなくなるケースもあります。わかりやすく言えば選択画像の一部がiFrameの内側に隠れてしまってスキップボタンも何も操作ができなくなるわけですね。

これらを防ぐには閲覧ユーザー側の設定で対応が可能です。iPhoneからSafari設定を変更しましょう。設定項目は「設定 > Safari > プライバシーとセキュリティ > サイト超えトラッキングを防ぐ」ですね。

設定画面が開くと下記が表示されます。少し下へスクロールして進んでください。

すると下記の「サイト越えトラッキングを防ぐ」があります。

設定をOFFにすればそれ以降はロボットの確認画面が表示されなくなります。

対策方法は以上です。

まとめ

本日は「Googleカレンダー表示のロボット確認画面対策」をご紹介いたしました。

本来はGoogleカレンダー側はあらゆるiFrame表示を考慮していれば良いわけですが、横幅や縦幅も自由に設定できるiFrameのさまざまな設定状況まで想定して画像認証を動作させるというのも至難の技。そのため現時点では来訪ユーザー側で「そもそも認証画面はスルーする」という設定にするしか方法がありません。

ぜひご参考ください。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

💻手に職をつけて安定的に働きたい人

⇒ 完全無料のプログラミングスクール - 受講料無料でプログラミング習得 -

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください