本日は複数のGoogleカレンダーをNotionの1つのカレンダーに埋め込む方法をご紹介いたします。
こんにちはken_tosです。
皆さん、Notionは使っていますか？
先日日本語対応がされたことで使い始めたという方も多いのかなと思います。
今回はNotionの中でもGoogleカレンダーとの連携について解説していきます。
さて、早速タイトルについてですが、このようなことをやりたいと思いました。
①GoogleカレンダーをNotionに埋め込む
②Googleカレンダーは仕事用とプライベート用で分けているがNotionには１つのカレンダーとして表示してほしい。
しかし、私の知る限り複数のGoogleカレンダーを１つのカレンダーに同期させるのは有料のサービスを使う必要がありました。
さすがにカレンダーを表示させるためにお金を払うのは。。。ということで今回は完全無料でできる技をご紹介します！
まず方法としてはAとBの2つがありまして、私がお見せしたのはBの方法になります。
それぞれ下記の特徴がございます。
A．Googleカレンダーの標準機能で埋め込む
→超簡単だけどデザインがださめ。
B. indifyとGASを使って複数のカレンダーを埋め込む
→デザインがおしゃれだけど少しむずかしい。
それでは順番に解説していきましょう！
A.Googleカレンダーの標準機能で埋め込む
まずはGoogleカレンダーの標準機能を用いて埋め込みます。
初めに1つのカレンダーをNotionに埋め込んでみましょう。
Googleカレンダーを開き、
右上の歯車マークの設定をクリック ＞ 左メニューのマイカレンダーの設定から対象のカレンダーを選択 ＞ カレンダーの設定 ＞ このカレンダーの公開URLをコピー ＞ Notionのページに貼り付け ＞ Create embedを選択
これでカレンダーを埋め込むことができました。
簡単ですね。
Aの方法で複数のカレンダーを1つにまとめて表示する
続いて複数のカレンダーを1つのカレンダーに表示する方法です。
まず先ほどと同じ要領でカレンダーの「公開URL」を控えます。
この時
work用URL https://calendar.google.com/calendar/embed?src=AAAAAA&ctz=Asia%2FTokyo
private用URL https://calendar.google.com/calendar/embed?src=BBBBBB&ctz=Asia%2FTokyo
とした時、下記のようなURLを作成します。
https://calendar.google.com/calendar/embed?src=AAAAAA&src=BBBBBB&ctz=Asia%2FTokyo
つまり「src＝XXX」の部分を「&」で繋げるわけです。
そして作成したURLを先ほどと同じようにNotionに貼り付けます。
きちんとプライベート用の予定と仕事用の予定を合わせて表示できていますね！
3つ以上のカレンダーをまとめる際も同様に「&」で繋げるだけです。
これで一応目的は達成できましたが、なんとも言えないダサさがありますよね。。。
もっとおしゃれなデザインにしたい方は次のBの方法をご覧ください！
B.indifyとGASを使って複数のカレンダーを埋め込む
さて、まずはindifyと呼ばれるnotionにウィジェットを埋め込むことができるサービスを使用します。
このサービスでは無料で使える範囲では１つのカレンダーを埋め込むことしかできません。複数のカレンダーを埋め込む機能は有料です。(4ドル/月)
これを無料の範囲で使うために少し手を加えます。
手順は単純で下記の２ステップです。
B-1. 2つのカレンダーを1つにまとめる(GASで自動同期させる)
B-2. 1つにまとめたカレンダーをindifyでNotionに埋め込む
要するに1つのカレンダーを使うのは無料なのであれば、
2つのカレンダーの予定を1つのカレンダーにまとめたものを作り、それをIndifyで連携させるというものです。
ただし、予定に変更が入るたびに手動で同期させるのは面倒ですから自動で同期させるようなプログラムを仕組みます。
では解説していきましょう。
B-1. 2つのカレンダーを1つにまとめる(GASで自動同期させる)
2つのカレンダーを自動的に1つにまとめるためにGASと呼ばれるプログラミング言語を用いて実装します。
GASはGoogleのサービスをプログラムで制御するために作られた言語です。
下記を参考にさせていただきました。
少し解説してゆきますが、基本的に手順に沿ってコピペしていけば設定可能ですのでご安心ください！
Step1. 2つのカレンダーの予定を結合するカレンダーを新しく作る。
Googleカレンダーの左メニューの「+」からカレンダーを新規作成します。
今回私は「notion用」という名前にしました。
Step2. カレンダーを同期させるプログラムを作る
まずはこちらのGASにアクセスします。
※同期したいアカウントでログインされていることを確認してください。
次に下段にあるプログラムをコピペします。
このプログラムは2つのカレンダーを、指定されたカレンダー（今回の場合notion用)に同期するという内容です。仕組みは下記の通りです。
(1) notion用カレンダーの予定を削除する
(2) workカレンダーを読み込んでnotion用カレンダーにコピーする
(3) privateカレンダーを読み込んでnotion用カレンダーにコピーする
やっていることは単純ですね。コピペを自動化しているだけです。
var calendar_shared = CalendarApp.getCalendarById('結合先のカレンダーIDをここに入力。今回の場合notion用カレンダー');
var calendar_b = CalendarApp.getCalendarById('結合元のカレンダーIDをここに入力。今回の場合workカレンダー');
var calendar_c = CalendarApp.getCalendarById('結合元のカレンダーIDをここに入力。今回の場合privateカレンダー');
function getEventsForDays(calendar, start_date, days) {
if (days == 0) {
var events = calendar.getEventsForDay(start_date);
return events;
} else {
var start_time = new Date(start_date.getTime());
var end_time = new Date(start_date.getTime() + (days * 24 * 60 * 60 * 1000));
var events = calendar.getEvents(start_time, end_time);
return events;
}
}
function deleteEventsForDay(calendar, start_date, days) {
var events = getEventsForDays(calendar, start_date, days);
events.forEach(function(e) {
e.deleteEvent();
});
}
function copyEventsForDay(from_calendar, to_calendar, start_date, days) {
var events = getEventsForDays(from_calendar, start_date, days);
events.forEach(function(e) {
if (e.isAllDayEvent()) {
to_calendar.createAllDayEvent(e.getTitle(), e.getEndTime(), {description: e.getDescription(), location: e.getLocation()});
} else {
to_calendar.createEvent(e.getTitle(), e.getStartTime(), e.getEndTime(), {description: e.getDescription(), location: e.getLocation()});
}
});
}
function syncEventsForDay(start_date, days) {
deleteEventsForDay(calendar_shared, start_date, days);
copyEventsForDay(calendar_b, calendar_shared, start_date, days);
copyEventsForDay(calendar_c, calendar_shared, start_date, days);
}
function syncEventsForToday() {
var today = new Date();
syncEventsForDay(today, 0);
}
function syncEventsForTomorrow() {
var today = new Date();
var tomorrow = new Date(today.getTime() + (1 * 24 * 60 * 60 * 1000));
syncEventsForDay(tomorrow, 0);
}
function syncEventsAfter2To14Days() {
var today = new Date();
var two_days_after = new Date(today.getTime() + (2 * 24 * 60 * 60 * 1000));
syncEventsForDay(two_days_after, 14);
}
function syncEventsAfter15To60Days() {
var today = new Date();
var fiften_days_after = new Date(today.getTime() + (15 * 24 * 60 * 60 * 1000));
syncEventsForDay(fiften_days_after, 60);
}次に上から３行目を今回同期させたいカレンダーIDに修正します。
修正が完了したら左上の「プロジェクトを保存」を選択して内容を保存します。
var calendar_shared = CalendarApp.getCalendarById(‘結合先のカレンダーIDをここに入力。今回の場合notion用カレンダー’); var calendar_b = CalendarApp.getCalendarById(‘結合元のカレンダーIDをここに入力。今回の場合workカレンダー’); var calendar_c = CalendarApp.getCalendarById(‘結合元のカレンダーIDをここに入力。今回の場合privateカレンダー’);
カレンダーIDはGoogleカレンダー設定画面の下記から確認することができます。
以上でプログラムの設定は完了しましたので、次のStep3ではこれらを定期的に実行するようにして自動同期を実現します。
Step3. 定期的に同期処理が実行されるようにする
左メニューの時計アイコンの「トリガー」を選択します。
次に右下の「＋トリガーを追加」をおして下記の通り4つ登録します。
Step4. 稼働確認してみる
登録が完了したら稼働確認をしましょう。
実行時間まで待ってもいいですが、下記のエディタ画面から手動で実行することもできます。
処理が正常終了したら、共有カレンダーに2つのカレンダーの予定がコピーされていることを確認してください！！
以上でB-1.2つのカレンダーを1つにまとめる(GASで自動同期させる)は完了です。
B-2. 1つにまとめたカレンダーをindifyでNotionに埋め込む
あとはindifyを使って共有カレンダーのウィジェットを作成し、Notionに埋め込めば完了です！
こちらの手順はすでに多くの方の解説記事がございますので本記事でのご説明は割愛させていただきます。
下記がわかりやすいです。
いくつか注意点
- 削除と同期を一定間隔で繰り返しているため、即時反映ではありません。
- 削除と同期は当日から約２．５ヶ月先のイベントを同期しています。2.5ヶ月以上先や 過去日付のイベントは変更対象外です。
※同期タイミングを小分けにしているのは、あまりに頻繁に削除と追加を繰り返すとGoogleにブロックされてしまうからです。
最後に
いかがでしたでしょうか。今回は複数のカレンダーを1つのNotionウィジェットにまとめて埋め込む方法をご紹介しました。
今回は2つのカレンダーでご説明しましたが、3つ、4つ。。等増やすことは可能ですのでもしやりたい方がいらっしゃいましたらコメントいただければと思います！
少し制約がある方法ですが、しばらく使ってみて同期タイミングを調整することでそこまで不便に感じることはございませんでした。
ぜひ皆さんもお試しください！
