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

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

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

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

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

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

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

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

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

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

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

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

対策方法は以上です。

まとめ

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

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

ぜひご参考ください。