【説明】Googleカレンダーの埋め込みコードの出力方法

当サービス、サッカーイレブン(サッカーチーム専用ホームページ作成)では、予定表のページで「Googleカレンダー」を埋め込んでいます。Googleカレンダーは、お客様側で作成・埋め込みコードの出力までをお願いしていますので、そのやり方を1から説明していきます。この記事では、Googleカレンダーの埋め込みコードの出力方法を説明します。Googleカレンダーの作成はこちらの記事を参考にしてください。

Googleカレンダーとは？

Google カレンダーは、Googleが提供する無料の時間管理ウェブアプリケーションである。2006年4月13日にスタート。2009年7月までベータ版だった。ユーザーはソフトウェア使用するためにGoogleアカウントを取得する必要がある。

引用：ウィキペディア

Googleカレンダーの埋め込みコードを出力してみよう

サッカーイレブンでは、パソコン用とスマートフォン用の2つのコードを出力して表示させます。そのため2つの埋め込みコードの出力方法を順番に解説します。まずはパソコン用、次にスマホ用です。

 【手順1】パソコンでGoogleカレンダーを開く

まずはパソコンからGoogle カレンダーを開きます。スマホやタブレットのアプリからはカレンダーの作成はできませんので、ご注意ください。

この時、サッカーチーム用のGoogleアカウントでログインしてください。私用で使っているGoogleアカウントでログインしている場合などは、埋め込みコードの出力はできませ。

【手順2】右上にある設定メニューをクリック

右上にある設定アイコン→[設定メニュー]の順にクリックします。

【手順3】埋め込むカレンダーの名前をクリックする

左側のメニューより、埋め込むカレンダーの名前をクリックしてください。複数チームのカレンダーを埋め込む場合は、ここではひつだけ選択してください。

【手順4】アクセス権限で「一般公開」をチェックする

アクセス権限の「一般公開して誰でも利用できるようにする」にチェックを入れる。このチェックを入れていないと、ホームページ上で他の人にカレンダーが表示されません。

【手順5】カレンダーの統合→「カスタマイズ」をクリックする

「カレンダーの統合」に表示されている 「カスタマイズ」をクリックします。

【手順6】パソコン用のカレンダーのカスタマイズを行う

左側の指定箇所にチェックを入れたり、数字を変更して、パソコン用のカレンダーのカスタマイズを行います。パソコン用の埋め込みコード作成。変更点は以下です。

【表示】「ナビゲーションボタン」「日付」をチェックする

【幅】1100

【高さ】600 ※そのまま

【デフォルトのビュー】月

【週の開始日】月曜日

※上部に表示された緑枠部分のコードがパソコン用の埋め込みコードです。このコードをサッカーイレブンのお客様は、送ってください。

【手順7】スマホ用のカレンダーのカスタマイズを行う

スマホ用の埋め込みコードの出力は、パソコン用のコードと異なる点は１つだけです。

【デフォルトのビュー】予定リスト

デフォルトのビューを「月」から「予定リスト」に変更してください。これでまた改めて埋め込みコードをコピーして送ってください。

【最後に】

「iframe src」から始まるコードが出力されて、コピーできていれば完成です。サッカーイレブンのお客様は、パソコン用・スマホ用とわかるような形で送って頂けると助かります。わからないことがあれば何でも聞いてください。