Webページ（HUGO）へのGoogleカレンダー埋め込み方法

GoogleカレンダーをWebページに埋め込むための手順を紹介します。今回はHUGOで作成したWebページを対象にしています。

Ishiguro Suguru

以前の記事ではReactでカレンダーを作成しました。 今回はGoogleカレンダーとFullCalendarというJavaScriptライブラリを使用したカレンダー作成方法について紹介します。 おそらくこちらのほうがお手軽です。

作成したカレンダーはこちらにあります。

Googleカレンダー＋FullCalendar埋め込み手順概要

手順概要は以下になります。 カレンダーのデザインについて素のままでよいという方は、手順1だけでWebページへの埋め込みは完了します。 今回は素のデザインに手を加えたかったため、手順2~3を実施しています。

FullCalendarはオープンソースのJavaScriptライブラリでデザイン変更のために使用します。 FullCalendarでGoogleカレンダーのデータを取り込み表示するためにはGoogleカレンダーのAPIキーが必要になります。

  1. Googleカレンダー作成
  2. GoogleカレンダーのAPIキー取得
  3. FullCalendar設定
  4. Webページへの埋め込み

※手順に載せているGoogleのWeb画面は変更されている可能性があるためご注意ください。

1. Googleカレンダー作成

まずは、Webページに埋め込むGoogleカレンダーを作成します。 Googleアカウントを持っていな方はアカウントを作成して、Googleカレンダーアプリを開きましょう。

他のカレンダー横の「＋」アイコンをクリックして、”新しいカレンダーを作成”を選択します。

新しいカレンダー作成画面が表示されます。 任意のカレンダー名を入力して”カレンダーを作成”をクリックします。

以上でカレンダーが作成されました。 ページをF5キーなどでリロードすると”マイカレンダーの設定”のところに作成したカレンダーが表示されていると思います。 次にカレンダーの公開設定とカレンダーIDを取得します。

”マイカレンダーの設定”の作成したカレンダーをクリックすると詳細設定画面が表示されます。

今回作成したカレンダーはすべてのユーザーに対して公開するため、アクセス権限の”一般公開して誰でも利用できるようにする”チェックボックスのチェックを入れておきます。

また、カレンダーの統合に記載のある”カレンダーID”をコピーしておきます。 このIDは手順3のFullCalendar設定で利用します。

2. GoogleカレンダーのAPIキー取得

次にFullCalendarでGoogleカレンダーのデータを取り込むために、GoogleカレンダーのAPIキーを取得します。 Googleが提供しているAPIなどのクラウドサービスを提供するサイトGoogle Cloud Platformを開きます。 利用規約に同意して次へ進みます。

サービス一覧が表示されます。 Google Calendar APIをクリックします。

”有効にする”をクリックします。

Google Calendar API概要ページが開きます。 ”認証情報を作成”をクリックします。

認証情報の追加画面が表示されます。 文章"この手順をスキップして…“にあるリンク”APIキー”をクリックします。

APIキーの設定画面が表示されます。 任意のAPIキーを入力してください。

またAPIをどこからでも実行できないようにするため、今回はアプリケーションの制限で”HTTPリファラー（ウェブサイト）”を選択しています。 これを選択することでこのAPIは指定したサイトからのみに制限されます。

APIを不正利用されないためにこの設定は有効にしておくことが望ましいです。 ただしローカル環境でテストする場合にも制限されてしまうため、テスト用のAPIキーを別で作成しておくのが良いかと思います。

また複数のWebページでAPIキーを使用する場合、URLの指定はワイルドカードに「*」をつけておきましょう。 例えば「https://sample.com/*」とすることで、「sample.com」すべてのページでAPIキーを使用できます。

作成したAPIキーが表示されます。 APIキーはコピーしておきましょう。

3. FullCalendar設定

次にFullCalendarを使用してGoogleカレンダーのデータを取り込みます。 まずはこちらのサイトにアクセスして、ライブラリをダウンロードします。 中央に表示されている”Get Started”をクリックします。

ダウンロードページが表示されます。 今回はビルド済みのzipファイルをダウンロードします。（v5.2.0）

ダウンロードしたzipファイルを展開すると、examplesフォルダがあると思います。 サンプルとしていろいろなカレンダーが用意されていますが、今回はGoogleカレンダーを利用したいためgoogle-calendar.htmlをベースに設定しています。

参考までに編集後のファイルは以下になります。

  • google-calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<!-- ③ライブラリの読み込み -->
<link href='./main.min.css' rel='stylesheet' />
<script src='./main.min.js'></script>
<script src='./locales-all.min.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {

      // ④カレンダーの高さ指定
      height: '600px',

      // ⑤日本語表示に変更
      locale: 'ja',

      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,listYear'
      },

      displayEventTime: false, // don't show the time column in list view

      // ①GoogleカレンダーのAPIキーを設定
      googleCalendarApiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',

      // ②カレンダーIDを設定
      events: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',

      eventClick: function(arg) {

        console.log('@arg---->',arg);

        arg.jsEvent.preventDefault() // don't navigate in main tab

      },

      loading: function(bool) {
        document.getElementById('loading').style.display =
          bool ? 'block' : 'none';
      },

    });

    calendar.render();
  });

</script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 9px;
  }

  #loading {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  #calendar {
    max-width: 1100px;
    margin: 0 auto;
  }
</style>
</head>
<body>

  <div id='loading'>loading...</div>

  <div id='calendar'></div>

</body>
</html>

ポイントを少しだけ解説します。

  • ① 手順2で取得したGoogleカレンダーのAPIキーを設定します。
  • ② 手順1で取得したカレンダーIDを設定します。
  • ③ 展開したzipファイルのlibフォルダにあるライブラリをインポートします。この例ではhtmlファイルを同じディレクトリに配置しています。
  • ④ カレンダーの高さを指定します。省略できますが高さを固定したかったため、明示的に指定しています。
  • ⑤ メニューなどを日本語表示に変更します。

その他にサンプルではeventClickの動作でGoogleカレンダーを別ウィンドウで開くようになっていました。 この動作は個人的にはイケてない感じだったため、いったん別ウィンドウで開く処理を削除しています。 このあたりは時間があるときにカスタマイズしていきたいと思います。

4. Webページへの埋め込み

いよいよWebページへの埋め込みに入ります。 今回はHUGOで作成したWebサイトが対象になります。

いろいろ試行錯誤してみましたが、手順3で作成したサンプルベースのHTMLファイルをiframeで読み込ませる方法が一番簡単そうでした。 HTMLファイルをHUGOとわけているほうがメンテナンスもやりやすいかなと思います。 本当はレイアウトに組み込みたかったのですが一部のページにしか使わないので…

まずはマークダウンファイル内でHTML形式の記述を行うために、設定ファイルconfig.tomlに以下の設定を追加します。 この設定はHUGOのバージョンがv0.60以降の場合、必要になります。

  • config.toml
[markup.goldmark.renderer]
  unsafe = true

次にカレンダーを表示するマークダウンファイルを作成します。 テーマはMainroadを使用しています。

以下のようにiframeタグでカレンダーHTMLファイルを読み込ませるだけです。 若干CSSでレイアウトは調整しています。

---
title: イベントカレンダー
date: false
authorbox: false
sidebar: false
toc: false
pager: false
menu: main
---
<style>
.iframe-wrap {
    position: relative;
    width: 100%;
    overflow:auto; 
    -webkit-overflow-scrolling:touch;
}
.iframe-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
}
</style>
<div class="iframe-wrap" style="height: 600px;">
    <iframe src="/fullcalendar/google-calendar.html" frameboader="0"></iframe>
</div>

また、FullCalendarのライブラリはHUGOのソースディレクトリ直下にあるstaticフォルダに配置しています。

最後に

長くなりましたが以上でGoogleカレンダーをWebページに埋め込むことができます。 作成したカレンダーはこちらにあるため、気になる方は参考にしてみてください。

comments powered by Disqus