JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでGoogle Calendar APIを実装する方法について現役エンジニアが解説しています。Googleカレンダーは、クラウドで予定を管理するサービスです。GoogleアカウントでAPIキーを取得し、カレンダーIDで操作します。カレンダーに祝日を追加してみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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を書く前の準備が必要です。
- Googleアカウントを用意する
- APIの操作に必要なキーを用意する
- APIで操作するカレンダーのIDを用意する
準備ができたらGoogleから提供されているJavaScriptのライブラリを使ってAPIを呼び出します。
それでは、それぞれの手順の具体的な方法を確認していきましょう。
Googleアカウントを用意する
すでにGmailやGoogleカレンダーなどのGoogleのサービスを利用している方は、すでにアカウントがあるため用意する必要はありません。
アカウントが無い方は、Googleアカウントの作成ページからアカウントを作成します。
APIの操作に必要なキーを用意する
APIを最小限の手間で動かすためにクイックスタートのページからGoogleカレンダーの設定とキーの取得を行います。
次の3つのステップをおこなってください。
1.Google Calendar APIのページにアクセスします。
2.「Enable the Google Calendar API」ボタンを押します。これでGoogleカレンダーのAPIが有効に設定されます。開いた画面は今回は使わないので、なにもせず右下の「DONE」を押して閉じてください。
3.「Create API key」ボタンを押します。ボタンを押した後に開いた画面に「YOUR API KEY」と書かれた文字がAPIを呼び出す際に必要になるためコピーし、右下の「DONE」を押して閉じましょう。
APIで操作するカレンダーのIDを用意する
Googleカレンダーのページにアクセスして、Googleのアカウントでログインします。
カレンダーの画面が表示されたら、左メニューの下の方にある「他のカレンダー」の横の「＋」を押してみましょう。
表示されたメニューから「関心のあるカレンダーを探す」を選択してください。
カレンダーの一覧から「日本の祝日」を見つけたら選択することで日本の祝日が自分のカレンダーに追加されます。
日本の祝日の「＋」横にあるメニューから「設定」を選択します。
設定の画面にカレンダーIDが記載されているのでこれをコピーしておいてください。
これで準備完了です。
では、JavaScriptでAPIの呼び出しです。
Googleから提供されているライブラリを下記のように読み込みます。
<script src="https://apis.google.com/js/api.js"></script>
後は、APIのリファレンスに合わせて、準備したIDやキーを渡せば呼び出すことが可能です。
実際に書いてみよう
今回は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>
解説
日本の祝日に設定されている祝日の名前と日付が下記の画面のように表示されるでしょう。
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では、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
–
