予定はGoogle Calenderで追いたい。でもToDoの作成はNotionでやりたいからmakeで連携した

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/869dec23-73ec-2b81-d619-06eb00c696b3.png)


## Notionで追加したToDoをGoogle Calenderに連携する
:::note alert
1/18
NotionからNotionカレンダーという新しいサービスが出ました。そちらも是非見てみてください。
:::

次の機能を持ったGoogle Calenderを**make**でつくっていきます

> 1. Notionに新しい予定を追加する → Googleカレンダーに自動的に予定を追加する
> 1. Notionの予定に変更を加える → Googleカレンダーに変更を同期する
> 1. Notionでステータスを完了にする → Googleカレンダーの予定を削除する

私は毎朝、その日のToDoをNotionで整理しています。具体的な時間を決める時もありますし、「今日まで」くらいの粒度のものもあります。ただ予定の確認や通知はGoogle Calenderで行っているので、そちらで見えるようにしたいと思いました！

**「全部Googleカレンダーで予定管理すれば良くない？」**

と思うかもしれませんが、少し勝手が違います。Notionは一日のToDoを管理します。具体的には、家庭のこと、仕事のこと、勉強、その他など。フリーランスで家で働いているのでつい仕事に集中しちゃうのですが、他のこともしっかりやっていきたいのでこのようにしています。。
一方、Googleカレンダーは共有相手が違うので仕事とプライベートで分けていたりするので、NotionとGoogleカレンダーの2つを使ってToDo管理しています。

<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/dfade4f5-3248-00fe-1074-13d8042eb35d.png">


## makeをiPaaSとして使用
NotionとGoogle Calenderのつなぎこみはmakeで行います。
makeはノーコードでGUIベースでシステムを連携させることができるソフトウェアです。

https://www.make.com/en

NotionとGoogle Calenderでの連携に関しては、Notionのデータベースにアイテムを追加・変更・削除(今回はステータスの変更としています)など少なくとも3つの動きがあった時にGoogle Calenderを更新する必要があるので、このような分岐をGUIで設計・管理することができるのは非常にありがたいですね。

## makeのシナリオ
このようなシナリオとなります。こうしたノード状の遷移図を使いながら開発を進めていきます。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/e2be5739-8410-a74c-facc-0a12f63e3b7d.png">


実はこのシナリオはmakeのテンプレートを改造したものです。人気のあるプラットフォームであれば、多くのシナリオが公開されています。

## 個々のモジュールの紹介
### Notion：Watch Database Items
<img width="85%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/2780e740-7fbc-14ac-9e17-3bff99a1cf84.png">

Notionの監視を行います。NotionアカウントとDatabase IDを入力すればOKです。
Database IDはデータベースのURLのこの部分です。

:::note warn
https://www.notion.so/"この部分"?v=1111a2222b3333c44abc
:::

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/42d3bbf4-4451-3ab0-6e57-8b16bd286fec.png">


### Router
<img width="85%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/b9efe80e-1661-95fe-b25f-dfb30d8ccfcb.png">

分岐をつくります。設置してルート先に行く条件を定義します

ルートの点線をクリックすると設定できます。
それぞれ以下の条件になっています。
1. ルート１(Doesn’t Exist)：カレンダーの新規作成につながります。
**「作成時刻と最終編集時刻が等しい」かつ「アイテムのステータスが"未着手"」**
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/e61ba3dd-7708-d80c-0ae9-df5939f39d70.png">

1. ルート２(Exist)：カレンダーの更新につながります。
**「カレンダーのタイトルが存在する」かつ「作成時刻と最終編集時刻が異なる」**

<details><summary>詳しくはこちら</summary>
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/934a7a98-482a-e983-6ad8-cc73ba4fa6dd.png">
</details>

1．ルート３(Delete)：カレンダーの削除につながります。
**「カレンダーのタイトルが存在する」かつ「アイテムのステータスが完了」**

<details><summary>詳しくはこちら</summary>
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/86032c38-20f4-8295-25ff-341911ff9892.png">
</details>

### Google Calender：Create an Event
<img width="85%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/392fae99-56c9-94f3-ccf9-e49d9fcae7aa.png">

先ほどのルート1でNotionに新規のアイテムが追加されたときにカレンダーをつくります。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/3f0948c3-50fa-3a73-cdcb-69effa3eb0c9.png">
主要な設定項目は **「Connection」「Calender ID」「All Day Event」** です。「All Day Event」は任意ですが、今回は時刻を指定しないということで「Yes」にしています。

:::note info
「Connection」「Calender ID」はともに自身のGoogle Calenderのアカウントを選択すればOKです
:::

**!!POINT!!**

:::note alert
Google Calenderの更新のためにはカレンダーのどの予定を更新するのかを選択する必要があります。これはGoogle Calenderの **「Event ID」** という情報で一意に決定します。つまり、新規のカレンダーが生成されないと、このIDを取得することができないので、この設計ではGoogle Calenderで新規の予定が追加されたタイミングで一度別の場所にEvent IDを渡しています。そこでもう一つNotionの**Update a Database Item**というモジュールとつないでそちらに「Event ID」を渡しています。
:::


### Google Calender：Update an Event
<img width="85%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/6c746b3d-14ed-ab37-5d27-b5451acf5b47.png">

:::note info
Createのモジュールと同様に「Connection」「Calender ID」はともに自身のGoogle Calenderのアカウントを選択します。
こちらの**Event ID**に先ほどGoogle CalenderからNotionに渡したデータを選択しましょう。
:::

<details><summary>詳しくはこちら</summary>
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/3d517eb1-950c-30d8-4a69-ac98110d3990.png">
</details>

### Google Calender：Delete an Event
<img width="85%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/4f67005f-39b0-68b6-dc0c-59ffd38684fe.png">

:::note info
Create、Updateのモジュールと最低限必要な情報は同じです。「Connection」「Calender ID」はともに自身のGoogle Calenderのアカウントを選択します。
同様に**Event ID**にGoogle CalenderからNotionに渡したデータを選択しましょう。
:::

<details><summary>詳しくはこちら</summary>
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/6da3d67e-6f48-cfb1-50c0-ff4ba678856b.png">
</details>

## 動かしてみた
makeでシナリオを実行することで動作確認できます。
どのルートに進んだか、どこでエラーが出たかを簡易に見ることができます。

「Run」で実行
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/b1eaac13-ecc1-638b-221d-0c69d3109fdc.png">

エラーの内容も見ることができます。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/d7f7e8d5-5296-03b7-d3e6-265d1033c2a0.png">

### 新規作成
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/6c5432c6-72f0-5f95-1a59-949ed979f6ad.png">

### 更新
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/f27c3b37-824f-d5f3-02b7-6ae337079efd.png">

### 削除
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/f9bf7963-049e-c66b-86a8-95aadab523e1.png">

## アップデートしたい部分
1時間程度で正常に動作する状態をつくることができました。一度Google CalenderからNotionにデータを渡すところがつまづきポイントでした。
今回はNotionのアイテムそのものを監視しましたが、アイテム内にテンプレートをつくる場合があると思います。その中のToDoのチェックボックスを入れた時にGoogle Calenderから予定を削除する動きにも挑戦したいです。