Google カレンダーをHTMLページに埋め込み表示する 第２回
GoogleカレンダーをHTMLページに埋め込んで表示します。Googleカレンダーを埋め込みますので、HTMLページでカレンダーを更新する必要がありません。
ホームページに営業日カレンダーを表示する場合に役立ちます。
また、複数のカレンダーをまとめて１つのHTMLページで見れるようにすることもできます。
Googleカレンダーの「Googleカレンダー埋め込み支援ツール」機能を使います。
Googleカレンダー埋め込み支援ツールでは、埋め込むカレンダーのプレビューが表示されますので、埋め込むカレンダーに表示する内容（ナビゲーションボタンなど）を選択します。
選択した内容でHTMLページに埋め込むコードが作成されます。埋め込みコードをコピーをして、HTMLページのソースファイルに貼り付けます。
手順
- Googleカレンダー埋め込み支援ツールの表示
- 埋め込みコードの作成
- 埋め込みコードをコピー
- HTMLページのソースファイルに貼り付け
- ブラウザでHTMLページを表示し確認
１．Googleカレンダー埋め込み支援ツールを表示
- Googleサービスにログイン後GoogleアプリからGoogleカレンダーを選択し、Googleカレンダーを表示します。（ログインURL：https://accounts.google.com/Login?hl=ja#identifier）
- 画面左で、埋め込み対象のカレンダーの右横にある▼をクリックします。
- カレンダーの詳細画面が表示されますので、「このカレンダーを埋め込む」項目にある「色やサイズなどをカスタマイズします」リンクをクリックします。
- クリック後、Googleカレンダー埋め込み支援ツールが表示されます。
２．埋め込みコードの作成
- Googleカレンダー埋め込み支援ツールの画面左側に、埋め込むカレンダーに関する選択項目が表示されます。
- 項目を選択すると、選択を反映したプレビューが画面中央に表示されます。
- プレビューの表示をもとに埋め込みコードが自動作成されます。画面中央にある「下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます」の下（下の図の②部分）に、埋め込みコードが表示されます。
①部分にある「表示するカレンダー」項目で埋め込むカレンダーを選択します。
複数のカレンダーを選択すると、複数のカレンダーをまとめて１つのHTMLページに表示することができます。
３．埋め込みコードをコピー
- 上の画像の②部分に表示されるコードをすべて選択します。
- Ctrlボタンと「c」キーを同時に押してコピーをします。
４．HTMLページのソースファイルに貼り付け
- カレンダーを埋め込むHTMLページのソースファイルを開きます。
- Ctrlボタンと「v」キーを同時に押して貼り付けます。
- ソースファイルの編集が終わりましたら保存します。
５．ブラウザでHTMLページを表示し確認
- HTMLファイルを右クリックしメニューリストを表示します。
- メニューリストから「プログラムから開く」を選択し、さらにブラウザを選択します。
- HTMLファイルがブラウザで表示されますで、埋め込んだカレンダーの表示を確認します。
