Adobe MuseにGoogleカレンダーを埋め込む方法

今回はAdobe MuseにGoogleカレンダーを埋め込む方法です。たまに見るアドビ公式のMuseのフォーラムに同様の質問があったのと、偶然見たサイトにGoogleカレンダーが埋め込まれていたことが切欠となりました。
Googleカレンダーを利用するにはGoogleのアカウントが必要なので、お持ちでない方は前もってアカウントを取得しておいてください。

※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。

Googleカレンダーを共有化し、サイトに埋め込むためのコードを取得する

はじめにGoogleカレンダーで共有化の設定

Googleカレンダーを開きます。
1. Googleのページの右上にある四角のメニューをクリックするとパネルが開きます。
2. パネルの中にある「カレンダー」をクリックします。

(C) Google 

3. Googleカレンダーが開いたら、画面の右上にある歯車のアイコンをクリックします。
4. 開いたパネルの中の「設定」をクリックします。

(C) Google

5. 次に画面左側にある「マイカレンダー」から、共有したいカレンダー名をクリックします。

(C) Google

6. マイカレンダーの設定画面になったら、上から2つめの「アクセス権限」の枠の中にある「一般公開して誰でも利用できるようにする」をクリックしてください。

(C) Google

7. クリックすると警告パネルがでますが、OKボタンをクリックしてください。

(C) Google

以上の手順でサイトに埋め込みたいGoogleカレンダーに表示するマイカレンダー全てを共有化させます。

8. 共有化の設定が終わったら、「カレンダーの統合」の枠の中にある青文字「カスタマイズ」をクリックしてください。

(C) Google

OKをクリックするとGoogleカレンダー埋込支援ツールが開きます。

Googleカレンダー埋込支援ツールで埋め込み用コードを取得

Googleカレンダー埋込支援ツールでは左側にある設定で各種表示やカレンダーのサイズを変更できます。

9. 先ほどの手順で共有化したマイカレンダーのうち、どれをカレンダーに表示させるかを左下のチェックボックスで指定できます。全ての設定が終わったら画面上に表示されているHTMLコードを全て選択し、クリップボードにコピーして下さい。

(C) Google

追記：左側の表示メニューの中にある「タイムゾーン」にチェックがあると、カレンダーの左下に「予定を表示するタイムゾーン」の文章が表示されるのですが、Museにカレンダーを配置した際にはこの文章が欠けて表示されてしまいます。なので、特に重要でなければタイムゾーンのチェックは外してしまったほうが良いと思います。

Adobe MuseにHTMLコードを挿入

10. Adobe MuseでHTMLコードを利用するには画面の上にあるメニュー「オブジェクト」から「HTMLを挿入...」を使用します。

11. クリックするとウィンドウが表示されるので、枠内に先ほどGoogleカレンダー埋込支援ツールにて取得したHTMLコードをペーストして入力してください。

OKをクリックするとGoogleカレンダーが配置されます。

以上となります。

次回のAdobe Museのついての投稿は、配置したGoogleカレンダーのレスポンシブ化について書こうと思っています。

次回→ Adobe Museに埋め込んだGoogleカレンダーをレスポンシブ化させる方法