enebularでGoogleカレンダーの予定の時間がきたらフローを開始する

フリーランスエンジニアのよねざわ(@satosiyonezawa)です。

Node-REDでGoogleカレンダー連携をしている情報があまりなかったので
今回は [**enebular**](https://www.enebular.com/ja/index.html) を使って
Googleカレンダーの予定時間になったら
enebularのフロー(処理)を開始するということをやってみます。

#準備
- enebularの導入はこちら
  - [Introduction(公式)](https://docs.enebular.com/ja/GetStarted/Introduction.html)
  - ↑から無料でアカウントを作ってHelloWorldの実行まですぐにできます
- 連携したいカレンダーのGoogleアカウントにログインしてください

#Googleノードをインストール
Googleカレンダーと連携できるノードをインストールします

- **node-red-node-googleノード** をインストール
    - 右上の **adminタブ** をクリック
    - **node-red-node-google** と入力
    - **Installボタン** をクリック
<img width="1019" alt="スクリーンショット 2019-09-21 16.07.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/42c1fd05-6ca6-262f-61ec-870c72a857d5.png">

- ノードがインストールされました
<img width="1024" alt="スクリーンショット 2019-09-21 16.19.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/a1e0221f-5de2-f117-6f24-0e42034d2f3c.png">

- カレンダー(input)ノードをドラッグアンドドロップで設置します。
<img width="1057" alt="スクリーンショット 2019-09-21 16.41.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/1ec20f51-056a-bbb6-f19e-104f11782386.png">

- ノードをダブルクリックして連携したいGoogleカレンダーの認証情報の入力画面を開きます<img width="615" alt="スクリーンショット 2019-09-21 16.56.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/2c2bddf7-dfc5-9f2f-669d-31014a9a0d55.png">

- 以下の３つの項目が出てきました。次の章で詳しく解説します。
    - リダイレクトURI
    - クライアントID
    - シークレットキー
<img width="823" alt="スクリーンショット 2019-09-21 17.00.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/ea948334-c362-95ea-c64e-78636a9143b3.png">

#GCPのプロジェクトを作成
enebularとGoogleカレンダーを連携するために
Google側でリダイレクトURIの設定と
クライアントIDとシークレットキーの発行が必要になります。

- Googleの開発者コンソールにアクセスしましょう
    - https://console.developers.google.com/apis/
- はじめてGCPを使うアカウントは以下の画面が出てくると思うのでチェックをして **同意して続行** を押します
- 本記事ではAPIの有効化をして認証情報を作成するだけなので**GCPの料金は発生しません**。決済情報の入力も必要ありません。
<img width="1184" alt="スクリーンショット 2019-09-21 17.28.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/56d1f794-453e-cbea-e24b-982b6aae5746.png">

- プロジェクトを作成します。上の **組織なし** をクリック
<img width="1187" alt="スクリーンショット 2019-09-21 18.12.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/23f274ba-c661-b562-6cee-9f65dd5e806e.png">

- **プロジェクトを作成** をクリック
<img width="1181" alt="スクリーンショット 2019-09-21 18.12.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/8356afd4-8344-961c-1469-cb80cdf9c95d.png">

- プロジェクト名に任意の名前を入力
- 任意の場所を指定
- 作成ボタンをクリック
<img width="551" alt="スクリーンショット 2019-09-21 18.14.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/a9303eb9-d70a-c63d-ef9f-69c0c5e63553.png">

#Google+とGoogleカレンダーのAPIを有効にする
- ダッシュボードの **APIとサービスを有効化** をクリック
<img width="1199" alt="スクリーンショット 2019-09-21 18.15.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/dbb8f6c9-5222-bc7d-ac87-1e20aef3a3a9.png">

- [google plus]で検索

<img width="990" alt="スクリーンショット 2019-09-21 18.16.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/f10a8c22-64c1-6cfe-caa4-332c79712a2a.png">

- **Google+ API** をクリック

<img width="1048" alt="スクリーンショット 2019-09-21 18.17.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/1f33f73f-be7e-53b3-6f7f-10172b3b5160.png">

- **有効にする** ボタンをクリック

<img width="1062" alt="スクリーンショット 2019-09-21 18.18.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/67f58736-dd79-5661-2227-63560b8dd43c.png">

- 同様にGoogleカレンダーのAPIを有効にします
<img width="1092" alt="スクリーンショット 2019-09-21 21.20.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/20538cf8-11cc-1668-47b6-dfef21a4807c.png">
<img width="1100" alt="スクリーンショット 2019-09-21 21.21.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/d8151b07-a104-0176-19d0-2a1df0dd7c19.png">



#認証情報を作成
- GoogleAPIsのダッシュボードから **認証情報** をクリック
- **認証情報を作成** をクリック
- **OAuthクライアントID** をクリック
<img width="1011" alt="スクリーンショット 2019-09-21 18.40.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/eaf36fdb-7f47-d414-1dc7-2da0ca37fd9a.png">

- enebularからGoogleと連携するときに開く同意画面について設定します
<img width="1086" alt="スクリーンショット 2019-09-21 18.54.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/3f74fd47-849c-df46-c5f3-82b81872370a.png">
- **アプリケーション名** に任意の名前を入力
<img width="1086" alt="スクリーンショット 2019-09-21 18.56.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/ddf5f587-730e-5be9-8bff-a7cc07432dbb.png">

- **承認済みドメイン** にURIのドメインを入力→Enter→保存ボタンをクリック
    - カレンダーノードをダブルクリックしたときに表示される赤文字のドメイン
    - 入力例：ev2-prod-node-red-XXXXXXXX-XXX.herokuapp.com
<img width="1091" alt="スクリーンショット 2019-09-21 19.20.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/d8c30268-f7cc-72da-ab88-fd4c7a8b6a34.png">
<img width="715" alt="スクリーンショット 2019-09-21 19.10.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/ee059c9b-0c8c-52bf-6e66-8106726d577d.png">
    
- 認証情報を設定します
  - アプリケーションの種類
      - ウェブアプリケーション
  - 名前
      - 任意の名前
  - 承認済みの JavaScript生成元
      - 空欄
  - 承認済みのリダイレクト URI
      - ノード側の赤文字のURIをコピペ(https://からcallbackまで全て)
  - 作成ボタンを押す

<img width="659" alt="スクリーンショット 2019-09-21 19.38.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/0fbf960b-3953-87fe-872f-edf1c1968a30.png">

- 出現したクライアントIDとクライアントシークレットをノード側の認証情報にコピペ
<img width="1095" alt="スクリーンショット 2019-09-21 19.48.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/0ffe1d60-86d2-e259-815c-60ec0b7749b6.png">
- ノードの **Authenticate with Googleボタン** をクリック
<img width="733" alt="スクリーンショット 2019-09-21 19.51.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/736a1b05-04b2-657f-dd2b-f1d7fced288b.png">

**このアプリは確認されていません** という画面が出てきますが以下を実行します。

- 詳細ボタン
- ev2-prod-node-red-XXXXXX-XXX.herokuapp.com（安全ではないページ）に移動
<img width="687" alt="スクリーンショット 2019-09-21 19.57.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/67c1d44d-fb9e-afbb-78b0-c62ea409ae5c.png">

- 許可→チェック→許可
- ~~**Authorised - you can close this window and return to Node-RED** と表示されれば連携成功~~

-------
~~2020年1月2日追記
現在はここで失敗してしまいます。記事公開時は上記メッセージが出ていたのですが、連携できないとの指摘があり再現しました。
エラーメッセージ「**auth worked but profile fetching failed**」
GoogleAPI側の問題だと思いますが解決した方は教えていただければ幸いです。~~
↑2020年9月16日現在、問題無しとの報告いただきました！

-------

<img width="339" alt="スクリーンショット 2019-09-21 20.44.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/de5296dd-72f0-8c22-3dd9-9ee47e08faf8.png">
<img width="415" alt="スクリーンショット 2019-09-21 20.45.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/9e438159-b96a-6fcb-effe-18fda6fe22c3.png">
<img width="526" alt="スクリーンショット 2019-09-21 20.52.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/cf772a4e-4266-bd08-5b84-b62652bfe026.png">

- ノード側に戻って追加ボタンをクリック
<img width="532" alt="スクリーンショット 2019-09-21 20.56.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/35f31bf1-8a93-b762-72dc-3f5facc4fc06.png">

- 画像の設定例ではカレンダーのイベントが始まった時にフローが開始します
<img width="496" alt="スクリーンショット 2019-09-21 20.57.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/f24b53ca-99f6-7a88-06e8-f7434660da77.png">

- debugノードを設置してカレンダーノードとつないでデプロイボタンをクリック
<img width="1158" alt="スクリーンショット 2019-09-21 21.05.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/f3cf493b-0579-5708-1c04-eae84a1bc3ac.png">

#カレンダーを作成して連携確認
- 予定を作成します
<img width="1020" alt="スクリーンショット 2019-09-21 21.26.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/35d84706-a860-d02f-da9b-1c8a8c75cb82.png">

- 予定の開始時間が来たらフローが開始します
<img width="844" alt="スクリーンショット 2019-09-21 21.25.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270185/7f214bbc-2bf7-d032-672c-1c4033abdef9.png">

- カレンダーの情報も取得しています。詳しくはノードの公式ページを参照
    - https://flows.nodered.org/node/node-red-node-google

#まとめ

enebularとGoogleカレンダー連携をさせることができました。
enebular側の作業はわずかでGoogle側の設定がほとんどでしたね。

- カレンダーの情報も取得できるのでカレンダードリブンのシステム連携ができそう
- カレンダーAPIの他にもGoogle+APIの許可が必要（ノードの仕様のため？）
- OAuth認証は認証画面を挟んでいる分、設定がちょっとめんどう