読者です 読者をやめる 読者になる 読者になる

プログラミングノート

プログラミングの備忘録です

Google カレンダーをHTMLページに埋め込み表示する 第2回

 GoogleカレンダーをHTMLページに埋め込んで表示します。Googleカレンダーを埋め込みますので、HTMLページでカレンダーを更新する必要がありません。

 ホームページに営業日カレンダーを表示する場合に役立ちます。

 また、複数のカレンダーをまとめて1つのHTMLページで見れるようにすることもできます。

 

 Googleカレンダーの「Googleカレンダー埋め込み支援ツール」機能を使います。

 Googleカレンダー埋め込み支援ツールでは、埋め込むカレンダーのプレビューが表示されますので、埋め込むカレンダーに表示する内容(ナビゲーションボタンなど)を選択します。

 選択した内容でHTMLページに埋め込むコードが作成されます。埋め込みコードをコピーをして、HTMLページのソースファイルに貼り付けます。

 

手順

  1. Googleカレンダー埋め込み支援ツールの表示
  2. 埋め込みコードの作成
  3. 埋め込みコードをコピー
  4. HTMLページのソースファイルに貼り付け
  5. ブラウザでHTMLページを表示し確認

 

1.Googleカレンダー埋め込み支援ツールを表示

  1.  Googleサービスにログイン後GoogleアプリからGoogleカレンダーを選択し、Googleカレンダーを表示します。(ログインURL:https://accounts.google.com/Login?hl=ja#identifier
  2. 画面左で、埋め込み対象のカレンダーの右横にある▼をクリックします。
  3. カレンダーの詳細画面が表示されますので、「このカレンダーを埋め込む」項目にある「色やサイズなどをカスタマイズします」リンクをクリックします。
  4. クリック後、Googleカレンダー埋め込み支援ツールが表示されます。

 

2.埋め込みコードの作成

  1. Googleカレンダー埋め込み支援ツールの画面左側に、埋め込むカレンダーに関する選択項目が表示されます。
  2. 項目を選択すると、選択を反映したプレビューが画面中央に表示されます。
  3. プレビューの表示をもとに埋め込みコードが自動作成されます。画面中央にある「下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます」の下(下の図の②部分)に、埋め込みコードが表示されます。
 
 ①部分にある「表示するカレンダー」項目で埋め込むカレンダーを選択します。
複数のカレンダーを選択すると、複数のカレンダーをまとめて1つのHTMLページに表示することができます。

 

f:id:white-lilium:20170116142856j:plain

 
 

3.埋め込みコードをコピー

  1. 上の画像の②部分に表示されるコードをすべて選択します。
  2. Ctrlボタンと「c」キーを同時に押してコピーをします。
 

4.HTMLページのソースファイルに貼り付け

  1. カレンダーを埋め込むHTMLページのソースファイルを開きます。
  2. Ctrlボタンと「v」キーを同時に押して貼り付けます。
  3. ソースファイルの編集が終わりましたら保存します。
 

5.ブラウザでHTMLページを表示し確認

  1. HTMLファイルを右クリックしメニューリストを表示します。
  2. メニューリストから「プログラムから開く」を選択し、さらにブラウザを選択します。
  3. HTMLファイルがブラウザで表示されますで、埋め込んだカレンダーの表示を確認します。
 

記事一覧

第1回 Google カレンダーを施設予約カレンダーとして使用する

第2回 Google カレンダーをHTMLページに埋め込み表示する