ホームページに埋め込んだGoogleカレンダーが表示されない原因と解決策を紹介

2022.04.21 コラム

ホームページを制作していると、ブラウザやOSの違いによる問題が数多く発生します。

この記事では

「Googleカレンダーを埋め込んだけどiPhone(iOS)で確認したら表示されない！」

原因と解決策について解説していきます。

【原因①】カレンダーのアクセス権限設定がされていない

Googleカレンダー初期設定のアクセス権限では「一般公開」になっていません。

他社ブラウザ利用者は「Google カレンダーを使用していないユーザー」に該当するため、一般公開されていないカレンダーは閲覧できないようです。

アクセス権限は埋め込みだけでなくリンク共有にも該当するので、カレンダーを自分のアカウント以外に公開したい場合はカレンダー側でアクセス権限の設定を変更する必要があります。

Google カレンダーを使用していないユーザーもあなたのカレンダーを表示できるようにするには、カレンダーを一般公開する必要があります。
他のユーザーとカレンダーを共有する – Google カレンダーヘルプ

実際に、一般公開していないGoogleカレンダーを埋め込んでPC（OS:Windows）で表示結果を検証してみました。

登録したスケジュールが表示されました。

カレンダーは表示されましたが、左上に

「カレンダーの表示権限がないため、予定を表示できません。」

とテキストが表示され、登録したスケジュールは表示されませんでした。

Googleにログインしていない場合、ブラウザの種類関係なくカレンダー自体表示されなくなりました。

Google Chrome以外のブラウザでGoogleにログインすると、カレンダー作成者のアカウントでも400エラーになってしまい閲覧できませんでした。

Googleカレンダーを開き、公開したいカレンダーにカーソルを合わせると横に縦３点のアイコンが表示されるのでクリック。

オーバーフローメニューから「設定共有」を選択。

スクロールすると「予定のアクセス権限」の項目があるので

「一般公開して誰でも利用できるようにする」にチェックを入れます。

チェックを入れると、一般公開の警告アラートが表示されるので「OK」を選択。

以上でカレンダーの一般公開の設定が完了し、他ブラウザでも埋め込みカレンダーが閲覧できるようになります。

iOSのバージョンアップでセキュリティ強化のためSafariのセキュリティ設定が自動変更されてしまう事があるようです。

「私はロボットではありません。」

と表示され、カレンダーが表示されない場合はSafariのセキュリティ設定が原因の可能性が高いのでユーザー側で設定変更する必要があります。

【iPhone・iPadの場合】
iPhoneのホーム画面から「設定（歯車）」アイコンをタップ。

「Safari」を選択してスクロールすると「プライバシーとセキュリティ」の項目があるので
「サイト越えトラッキングを防ぐ」が有効（緑）になっている場合は、スライダを選択し無効（グレー）にします。

【Macの場合】
MacのSafariアプリケーションで、メニューバーの「Safari」から「環境設定」を選択します。

「プライバシー」を選択します。

「サイト越えトラッキングを防ぐ」にチェックが入っている場合は外します。

ブラウザの開発者ツールを使用すればレスポンシブサイトのレイアウト確認は可能です。

しかし、開発者ツールは使用ブラウザに依存してしまうため、ブラウザやＯＳの違いで発生する不具合発見が困難な場合もあります。

iPhone・Macは不具合が発生する事が多いので、端末を所有している場合は極力実機での動作確認を推奨します。

WRITER

kuroda

Ranking