かんたん! GoogleカレンダーとNotionを連携する方法
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/df0e681b-b19b-4fc9-b50b-28058f717143/6ef58e89adec3aa7991364c34b8995a4.png)
どうもNotionもGoogleカレンダーも大好きかずうぉんばっとです!
Notionを使っている方の中には今日の予定やTODOを書き出して仕事の管理に活用している人も多いのではないでしょうか?
そんな時にやりたくなるのがGoogleカレンダーの予定の表示ですよね?
検索で調べてみるとGoogleカレンダーを公開ページにする方法が紹介されています。
がちょっと待ってください!⚠️ その方法だとURLを知っているとあなたの予定が丸見えになってしまうのでセキュリティ的にかなり危険です。⚠️
目次
indifyとは?
indifyとはNotionのページにWidget(ウィジェット)と呼ばれる様々な機能を埋め込むことができるサービスです。
例えば
- 時計
- 天気
- ボタン(任意のアクションを実行できる)
を埋め込めたりします。
![Widgetを埋め込んだページの例](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc8a21831-91c7-4cdd-b512-f1c34560cf3f%2F%E3%82%BF%E3%82%99%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9B%E3%82%99%E3%83%BC%E3%83%88%E3%82%99.png?table=block&id=100a9e65-0668-4205-b477-7db03b70de21&cache=v2&width=960)
今回はそんなindifyのGoogle Calendar Widgetを使って、Notionページ上にカレンダーの表示を行なっていきます。
indify側の設定
ユーザー登録
- indify にアクセスし、中央のGoogleボタンを選択します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/5f05883a-b712-4e32-8f4f-fb9a8541ecf3/8a3c347f044a00cd76cb8516a63dd073.png)
- 連携したいカレンダーのアカウントを選択し、ユーザー登録を行います。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/b79a3653-56b8-4eea-a798-8a3c364805c6/5d352545e20620238986294fdb656519.png)
- 登録が完了すると以下のような画面が表示されます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/4615e75b-c4bd-4f7a-a4cb-a411de3b8630/e9f71857ef10696f01028a3bddbeb192.png)
以上でユーザーの登録は完了です㊗️
Widgetの作成とカレンダー連携
- 画面右側のGoogle Calendarを選択します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/7bf778d2-abcf-4e4b-bc17-37d8f9b5ad8d/a04f66ef33cbca1cfed1cd8bd449872f.png)
- Widgetの名前をつけます。今回は としました。入力できたらContinueを選択します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/d233673b-5f69-4843-8287-fe773ea55670/4f628761dc800f27855a2146156a06ed.png)
- 編集画面が出てくるのでを選択します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/a0bdf77b-16a3-403d-bcc9-edfade45410a/eb82f10fb99d1353a89788ee5ade1051.png)
- 連携させたいカレンダーのアカウントを選択し、ログインします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/19fb0139-f891-408a-83e0-ce7219b5ceb4/471a4dd27cb0c3210fec2a721f689d8a.png)
- カレンダーへのアクセスを許可するモーダルが表示されるので、チェックをつけてを選択します。
この操作をすることで選択したアカウントのカレンダー及び予定の読み取りをindifyに対して許可している状態になることは理解しておくことが必要です。とはいえ公開して誰でも見れる状態になるよりは全然マシです。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/b8d30d36-cc7e-4c81-8d16-da1d109dde76/e013a6f5bee3e7bc9ffebca532d4a92b.png)
- ログインに成功すると以下のような画面が出るのでウィンドウを閉じます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/15d8faa2-af33-4e6f-bebf-33225308ec8f/a1e63efffb1fe50ac6d479901ea0309d.png)
以上でカレンダーの連携が完了しました!
Widgetの設定
続いてカレンダーの表示設定を行います。
今回は
- まず の項目で、カレンダーの表示単位を選択します。今回は日時のタスク管理のページに貼り付けることを想定しているのでを選んで日次の表示にしました。
選択するとカレンダーの表示が日次に切り替わり、今日の予定が表示されていることがわかります。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/eb224997-0c7c-4abb-aab9-232c60340511/e5e37ba59d08bca798929e0b81d40efe.png)
- このままだと日次表示するためには少し横長すぎるので、横幅を狭くしておきます。
右側のプレビューの点線部分をドラッグすることでサイズを調整できます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/461ef1ae-4b9e-4a64-90dd-57ba85716af1/2fea44915fe5bdbc442038769ed331ed.png)
- 以上で設定が完了しました。最後にフォーム最下部のコピーボタンを押してWidgetのURLをコピーしておきます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/8997949f-fe93-4168-a170-44560e9a1970/9ee2d901e0abb652678fba085f89ca80.png)
今回ご紹介した機能以外にも色を変えたり、ダークモードにしたりと様々なカスタマイズが可能です。(※ 複数カレンダーの連携など一部の機能は有料となっています 4$/月)
Notion側の設定
Notion側の設定は非常にシンプルです。
カレンダーを貼り付けたい場所に前項でコピーしたURLをで貼り付けます。
この時選択肢が複数出てくるので、 を選択します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/9442ac12-ed0d-49b4-a235-8eb43827f791/a6719693c695943eaa75aba668066cde.png)
すると見事にカレンダーが表示されました👏
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/9e3de9d6-7cdb-4b72-abb6-82788bfc9312/296b8fffee42ac1e3ee2c1c5f6b56bfc.png)
TODO管理のページと合わせると以下のような感じになるかなと思います。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/69109040-7d72-4d55-86ac-0d364ebdcd67/ba9a938673283aefcdecbb3a43b57736.png)
以上です!
予定の確認がタスクと一緒にできてますますNotionが捗りますね!
企業と候補者の日程調整が負担になっていませんか?
![https://site.nitte.app/recruit?ref=blog_bottom](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/nitte/ce02ca3f-6b93-44e7-9edf-add8b78dcff5/aa0fe9bd9ecb6266443829094649a3cc.jpg)