Googleカレンダーを、ホームページなどのWebページへ埋め込むための手順。この記事は「ホームページに営業カレンダーを掲載する」の解説記事の補足説明として書いています。ホームページに営業カレンダーを掲載するための解説記事はこちらを御覧ください→「ホームページに営業カレンダーを掲載する」
Googleカレンダーを用意する
ホームページなどのWebサイトへ掲載するため（埋め込むため）のGoogleカレンダーを用意します。Googleアカウントを作り（あるいは既存のアカウントを利用して）、掲載するためのカレンダーを新たに作成してもよいですし、既存のカレンダーを使う、でもOKです。
Googleカレンダーの設定
埋め込むためのGoogleカレンダーの設定を行います。
カレンダーの設定画面へ移動する
図のようにGoogleカレンダーをブラウザで表示し、右上の設定アイコン（歯車のマーク）をクリックして「設定」画面へ移動します。
カレンダーを選択する
カレンダーの設定画面に移動できたら、画面左側のメニューを少し下の方へスクロールします。図のように「マイカレンダーの設定」という項目欄に、カレンダーのリストが表示されますので、埋め込みたいカレンダーをクリックします。
※Googleカレンダーでは、１つのGoogleアカウントで複数のカレンダーを作成することが出来ます。この機能を利用して、例えば「店舗営業カレンダー」と「プライベートスケジュール」という２つのカレンダーを作成し、埋め込むのには「店舗営業カレンダー」の方だけを埋め込む、というようなことが出来ます。
カレンダーの共有設定をする
カレンダーを選択したら、今度は画面右側の方を少し下の方へスクロールします。
「予定のアクセス権限」という項目が出てきますので、以下のように設定します。
- 「一般公開して誰でも利用できるようにする」の項目のレ点チェックを入れる
- 「予定の表示」部分を選択する（「時間枠のみ・詳細は非表示」にしておくことをオススメします。「すべての予定の詳細」を選択すると、カレンダーに入れたスケジュールの内容（お客様の名前とか、メモとして書いたスケジュールの備考など）が埋め込んだカレンダー上に表示されてしまいますのでご注意ください。
共有設定をしていないと・・・
この「共有設定」をしないまま埋め込み設定をしてしまうと、実際に埋め込んだカレンダーに、図のように「表示権限がないため、予定を表示できません」という表示が出てカレンダーの中身が何もない状態になってしまいます。ご注意ください。
※なお、共有設定（アクセス権限設定）は、あとから変更することも出来ます。
埋め込みの設定をする
次に、カレンダーの埋込設定をします。図のように、掲載する（埋め込む）カレンダーを選択した状態で、画面右側を更に下へスクロールすると、「埋め込みコード」という欄のすぐ下に「カスタマイズ」というボタンが現れますので、これをクリックします。
※なお、ここから先の「埋め込み設定のカスタマイズ」は、一旦完了して画面を閉じてしまうとあとから変更することは出来ません（どうしても後から変更したい場合は、埋込設定を一からやり直す必要があります）のでご注意ください。
カスタマイズ画面
「カスタマイズ」をクリックすると、図のような画面になります。この画面で「埋め込むカレンダー」の調整をします。画面左側の様々な項目を設定すると、それに応じて右側のカレンダー表示が変わります。最終的に、右側に表示されている状態が「埋め込まれる」ことになります。
図の例は、初期の状態です（初期の状態では、複数のカレンダーが全部表示されている状態で出てきますのでご注意）
埋め込むカレンダーを選択する
カスタマイズ画面では、とにかく何はともあれ「埋め込む（掲載する）カレンダー」を選択します。図のように画面を下の方へスクロールすると、ご自分のGoogleアカウントで作成してあるカレンダーがすべて表示されますので、埋め込みたいカレンダーのレ点を残して、それ以外のカレンダーのレ点チェックを外していきます。
図の例では、「kishimoto@kspc-biz.com」というカレンダーと、「営業カレンダー」「六曜」「日本の祝日」というカレンダーを表示して、それ以外のカレンダーのレ点を外して表示されないようにしています。
カレンダーのスタイルを指定する
埋め込むカレンダーを選択したら、画面のスクロールを上の方へ戻します。画面の左側の各項目を編集しながら埋め込むカレンダーの表示スタイルを指定していきます。
【カレンダーのタイトル】
ここに入力した文字が、図のようにカレンダー上部の「タイトル」として表示されますので、埋め込む際に表示したいタイトルを入力します。
【表示】（１）
各項目のレ点を選択して表示する内容を選びます。図では「タイトル」「ナビゲーションボタン」「日付」「タブ（右側の週・月・予定リストというのがタブです）」「タイムゾーン」を表示し、「印刷アイコン」「カレンダーリスト」は表示しないように指定しています。
【週の開始日】（２）
週の開始日の項目では、カレンダーの表示の一番左を何曜日にするか？を指定できます。「土・日・月」から指定できますので選択します（基本では「日曜日」になっています。図では「月曜始まり」のカレンダーにしたいため「月曜日」を指定しています）
選択した状態のカレンダーが、図で例示したカレンダーのイメージになります。
サイズ・デフォルトのビューを指定する
さらに設定をしていきます。「幅」「高さ」の部分の数値を変えると、表示する幅や高さを調節することが出来ます。図では高さを「800」にしています。
※なお、埋め込むホームページやブログページなどの幅にちょうど合うようにするためには、埋め込む先のページの幅を確認した上でここを設定する必要があります。
※HTMLソースなどを編集できる知識のある方は、この設定の後埋め込むコードをコピーした際に、ソースコードのなかで直接幅を指定することも出来ます。直接ソースコードをいじれば、例えば「画面の拡大・縮小に合わせたパーセント表示で幅を調節する」というような細かな指定も可能です。
また、図の例では更に「デフォルトのビュー」で初期表示を「1ヶ月のカレンダー」ではなく「週間カレンダー」にするようにしています。
※カレンダーの「月」「週」の切り替えは、最初にやった「表示」のレ点チェックで「タブ」を表示しておくことで、あとで見ている方が自分で自由に切り替えるようにすることが出来ます。ここで行うのは「最初はどういう表示にしておくか？」を設定するという意味になります。
と、こんな風に試行錯誤しながら調節して、お好みの表示スタイルに仕上げていきましょう。
埋め込みコードを取得する
埋め込む（掲載する）カレンダーの表示スタイルが決まったら、図のように画面の一番上にある「埋め込みコード」という欄の右側にあるコピーマークをクリックします。
※埋め込みコードをコピーできたらGoogleカレンダーの設定画面は閉じても構いませんが、実際の作業では閉じずにこのまま開いておくことを強くおすすめします。実際にはWebページへ埋め込んで確認したあとになって、「幅を変更したい」とか「表示項目を変更したい」などの試行錯誤をすることが多いのです。ここで閉じずに開いておけば、必要な箇所だけを設定変更してもう一度コードを取得すればOKですが、一旦閉じてしまうと、変更したい場合には全部一からやり直しになります。
Webページへ埋め込みコードを入れる
埋め込みコードをコピーして取得できたら、ここから先はご自分のホームページやブログ、SNSなどのページの編集手順に従って、取得した埋め込みコードを貼り付けてください。貼り付け終えてそのページを公開（更新）したら完成です。→この手順は、それぞれのホームページやブログによって異なりますのでご自分でやってみてください。
Jimdoホームページへ埋め込む
参考までに、Jimdoホームページでお店や会社のサイト運用をしている場合の埋め込み方法をご説明します。まずは、ご自分のJimdoホームページへ編集ログインします。
コンテンツの追加
カレンダーを埋め込みたい（掲載したい）ページで、コンテンツの追加をします。（取得した埋め込みコードは、ホームページの一部として掲載されますので、カレンダー専用のページを作ってそこへ追加しても良いですし、既存のページのお好きなところにコンテンツの追加をしても構いません）。
コンテンツの追加では、図のように「ウィジェット/HTML」を選択します。
取得した埋め込みコードを貼り付ける
Jimdoの「ウィジェット/HTML」追加では、図のように真っ白な画面枠が上下2つ表示されます。図のように、下の方の枠へ、
（１）先ほどコピーした埋め込みコードを貼り付けます（マウスで右クリックして貼り付け）。
貼り付けると図のようにずら～～～っと1行だけ右へ長いおまじないのようなコードが貼り付けられますので、このまま
（２）「保存」をクリックします。
埋め込み作業はコレで完了です。
結果を確認する
Jimdoホームページの編集モードを終了して、実際にそのページを閲覧してみてください。図は、実際に弊社のJimdoサブサイトへ埋め込んだ結果です。
※共有設定の「２.予定の表示」で「時間枠のみ・詳細は非表示」を選択してあるので、カレンダーの表示の中身は「予定あり」だけになっていることがわかると思います。
埋め込んだカレンダーの表示を変更したい場合には・・・
実際に埋め込んでみたけれど、やっぱり表示の仕方やタイトルを変えたい、というような場合には、以下のいずれかの方法で変更します。
１．埋め込み設定画面に戻って変更する
上記の説明中にも注意書きしたように、Googleカレンダーの設定画面を閉じずに作業をすすめていれば、その画面へもう一度行って、必要箇所だけ設定変更し、再度埋め込みコードを取得し直せばOKです。ただし、カレンダー設定画面を閉じてしまっていた、という場合には、以下のようにもう一度埋め込み作業をし直す必要があります。
２．もう一度埋め込み作業をしなおす
HTMLコードとか専門的なホームページ編集の知識が無い方は、ご面倒でももう一度このページで解説した手順に沿ってカレンダーの共有設定・埋込設定をし直した上で、埋込コードを取得して埋め込み直してください。
３．埋め込んだコードを直接編集する
HTMLコードやホームページ編集の知識がある方は、埋め込んだソースコードを直接編集することで表示が変更できます。（上記Googleカレンダーの設定作業で最後に取得した埋め込みコードは「iframe」タグなのでここがいじれれば、埋込設定などを一から行わなくても表示変更ができます。
コメントを投稿するにはログインしてください。