JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでGoogle Calendar APIを実装する方法について現役エンジニアが解説しています。Googleカレンダーは、クラウドで予定を管理するサービスです。GoogleアカウントでAPIキーを取得し、カレンダーIDで操作します。カレンダーに祝日を追加してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでGoogle Calendar APIを実装する方法についてTechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせて見てみましょう。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでGoogle Calendar APIを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

Google Calendar APIとは

Googleカレンダーとは、クラウドのカレンダー画面で予定を管理するサービスの名前です。

APIとは、Application Programming Interface)の略です。

APIはアプリなどのサービスの機能を画面を通さずに直接呼び出して使うもので、画面を通さずに直接呼び出すことで一部の機能だけを利用し、自分のサイトやサービスに追加することができます。

そして、今回は公開されているGoogleカレンダーの「日本の祝日」から、APIを使って祝日名と日付を取得していきましょう。

JavaScriptでGoogle Calendar APIを実装する方法

下記の3つの手順でJavaScriptを書く前の準備が必要です。

  1. Googleアカウントを用意する
  2. APIの操作に必要なキーを用意する
  3. APIで操作するカレンダーのIDを用意する

準備ができたらGoogleから提供されているJavaScriptのライブラリを使ってAPIを呼び出します。

それでは、それぞれの手順の具体的な方法を確認していきましょう。

 

Googleアカウントを用意する

すでにGmailやGoogleカレンダーなどのGoogleのサービスを利用している方は、すでにアカウントがあるため用意する必要はありません。

アカウントが無い方は、Googleアカウントの作成ページからアカウントを作成します。

Googleカレンダー使用のためのGoogleアカウントの確認画面

 

APIの操作に必要なキーを用意する

APIを最小限の手間で動かすためにクイックスタートのページからGoogleカレンダーの設定とキーの取得を行います。

次の3つのステップをおこなってください。

1.Google Calendar APIのページにアクセスします。Googleカレンダー使用のためのAPIキー取得ページ2.「Enable the Google Calendar API」ボタンを押します。これでGoogleカレンダーのAPIが有効に設定されます。開いた画面は今回は使わないので、なにもせず右下の「DONE」を押して閉じてください。

3.「Create API key」ボタンを押します。ボタンを押した後に開いた画面に「YOUR API KEY」と書かれた文字がAPIを呼び出す際に必要になるためコピーし、右下の「DONE」を押して閉じましょう。

 

APIで操作するカレンダーのIDを用意する

Googleカレンダーのページにアクセスして、Googleのアカウントでログインします。

カレンダーの画面が表示されたら、左メニューの下の方にある「他のカレンダー」の横の「+」を押してみましょう。

表示されたメニューから「関心のあるカレンダーを探す」を選択してください。

Googleカレンダーの選択画面。カレンダーIDを取得します。

カレンダーの一覧から「日本の祝日」を見つけたら選択することで日本の祝日が自分のカレンダーに追加されます。

日本の祝日の「+」横にあるメニューから「設定」を選択します。

Googleカレンダーに日本の祝日を追加する画面

設定の画面にカレンダーIDが記載されているのでこれをコピーしておいてください。

JavaScriptで操作するためのGoogleカレンダーの設定画面

これで準備完了です。

では、JavaScriptでAPIの呼び出しです。

Googleから提供されているライブラリを下記のように読み込みます。

<script src="https://apis.google.com/js/api.js"></script>

後は、APIのリファレンスに合わせて、準備したIDやキーを渡せば呼び出すことが可能です。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

今回はHTMLソースの中にscriptタグでJavaScriptを書いていきましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id='resultArea'></div>  
  </body>
  <script src="https://apis.google.com/js/api.js"></script>
  <script>

    const API_KEY = 'AIzaSyDZCp9iU3aod8b6o6cPSrtEWHqwujTOXxk'
    const CALENDAR_ID = 'ja.japanese#holiday@group.v.calendar.google.com';

    function start() {
      gapi.client.init({
        'apiKey': API_KEY,
      }).then(function() {
        return gapi.client.request({
          'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(CALENDAR_ID) + '/events'
        })
      }).then(function(response) {
        let resultArea = document.getElementById('resultArea');
        let items = response.result.items;
        for(let i = 0; i < items.length; i++){
          resultArea.insertAdjacentHTML('beforeend', items[i].summary + items[i].start.date + '<br>');
        }
      }, function(reason) {
        console.log('Error: ' + reason.result.error.message);
      });
    };

    gapi.load('client', start);
  </script>
</html>

 

解説

日本の祝日に設定されている祝日の名前と日付が下記の画面のように表示されるでしょう。

JavaScriptで操作してGoogleカレンダーに日本の祝日を追加した画面

 

HTMLのbodyの中には、APIから呼び出された結果を表示する場所として「<div id=’resultArea’></div>」を用意しています。

bodyタグの後で、「api.js」の読み込みをしています。

scriptタグの中では、用意したAPIキーとカレンダーIDを設定しているものの、このAPIキーは仮のもので使用できないため、各自用意したものに置き換えましょう。

    const API_KEY = 'AIzaSyDZCp9iU3aod8b6o6cPSrtEWHqwujTOXxk'
    const CALENDAR_ID = 'ja.japanese#holiday@group.v.calendar.google.com';

「function start()」では、大きく3つの構成で処理を記述しています。

 

1、「gapi.client.init」GoogleのAPI呼び出しのライブラリのリファレンスに合わせて初期処理を行っています。

今回は公開されたデータ(日本の祝日)なので、APIキーを渡します。

公開されていないデータを操作する場合は、ここに認証用の情報を追加しましょう。

2、「.then(function()」では、1の初期化の後に実際のAPIを呼び出す処理が記述されています。

「gapi.client.request」の第2引数にAPIリファレンスのURLを書きました。

また、このURLに対して用意したカレンダーIDを渡すことになります。

カレンダーIDには「#」や「@」などが含まれることがあり、URLとして認識できなくなるので「encodeURIComponent」を使ってエスケープしてください。

3、「.then(function(response)」では、2のAPI呼び出しの結果を処理しています。

「let resultArea = document.getElementById(‘resultArea’);」にてHTMLの結果表示用のDOMを取得しています。

後は、APIの結果(response)の中の「items」に取得したイベント(今回は休日)がたくさん入っているため、ループ処理で休日の名前と日付を表示することが可能です。

仮に、API呼び出しがエラーになった場合は「function(reason)」が実行され、コンソールにエラー内容が表示されるでしょう。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptでGoogle Calendar APIを実装する方法が良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。