IFTTTとGoogle Apps ScriptでGoogleカレンダー & kintone連携してみよう!

フォローする

(著者:Cstap 武井 琢治

こんにちは。kintoneマニアのcstap武井です。

皆さん、Googleの各種サービスとkintoneを連携したいと思うことはないでしょうか?
例えば「Gmailでメールを受信したら、そのメール本文をkintoneに書き込む」とか、
「Googleカレンダーに入力したスケジュールをkintoneのカレンダーと連携させたい!」などがありそうですね。

今回は、後者の実現方法を書いていきたいと思います。

連携完成図

連携概略図

上図のように、
kintoneとGoogleカレンダーの連携のため、
IFTTT・Google Apps Scriptを使用します。

IFTTTとは

「IFTTT」は、TwitterやFacebookなどといったWebサービス同士を簡便に連携させることができるWebサービスです。
同様のサービスとして「Zapier」などが挙げられます。

IFTTTを使用しなくても連携する方法(例えばGoogle Apps Scriptのみ使用する方法)はありますし、
何よりIFTTTはZapierなどと異なりkintoneとのサービス連携に正規対応していないため、
連携させるためにひと手間必要とはなりますが、
IFTTTを使用することで、Googleカレンダーにおける予定登録イベントのキャッチをスムーズに行うことができます。

ここではそんなIFTTTの使い方まで同時に攻略できるという挑戦的かつお得な記事となっております。

Google Apps Scriptとは

Google Apps Scriptは、
Googleカレンダー、スプレッドシート、Gmailなど、
様々なGoogleサービスの各種操作に使用できるスクリプト言語です。

JavaScriptと互換性がありますので、
kintoneカスタマイズをしている方には親しみやすそうです。

Google Apps Scriptの使用方法はいくつかありますが、
ここでは分かりやすくスプレッドシートをトリガーとしたスクリプトを書くことにします。

準備

各サービスアカウント

以下のサービスアカウントが必要となりますので、お持ちでない場合は登録してください。

  • Googleアカウント
  • IFTTTアカウント

Googleのアカウントはこちらから、
IFTTTのアカウントはこちらから登録可能です。

IFTTTのレシピ

IFTTTにてレシピを作成します。
レシピとは、Webサービス連携において「どのタイミングで、何をするか」を指定するものです。

レシピの作成方法は以下の通りです。

1.ログイン後、画面右上のアカウント名を選択し、「New Applet」を選択します。

2.「this」を選択します。

3.フォームに「google」と入力すると「Google Calendar」が表示されるので、選択します。

4.「Connect」を選択します。

5.ポップアップウィンドウが立ち上がるので「許可」を選択します。

6.「Any new event added」を選択します。

7.「that」を選択します。

8.フォームに「google」と入力すると「Google Drive」が表示されるので、選択します。

9.「Connect」を選択します。

10.ポップアップウィンドウが立ち上がるので「許可」を選択します。

11.「Add row to spreadsheet」を選択します。

12.下図のような画面になるので、各設定はそのままで「Create action」を選択します。

13.「Finish」を選択します。

これでレシピの作成は完了です。

Googleの設定

GoogleのAPI登録等の設定をします。

1.Googleのコンソール画面を開きます。

2.「Calendar API」を選択します。

3.「プロジェクトを作成」を選択します。

※上図「プロジェクトを作成」ボタンが表示されない場合は、既にプロジェクトが作成されています。
手順6へ進んでください。

4.「プロジェクトを作成」を選択します。

5.各ラジオボタンを選択し、「作成」を選択します。

6.しばらく待つと下図の画面に戻るので、「有効にする」を選択します。

7.「認証情報に進む」を選択します。

8.それぞれ「ウェブブラウザ」「ユーザーデータ」を選択し「必要な認証情報」を選択します。

9.承認済みのJavaScript生成元に、kintone環境のURLを下図のように入力します。
その後「クライアントIDの作成」を選択します。

10.ユーザーに表示するサービス名を適当に入力し「次へ」を選択します。

11.クライアントIDが表示されるので控えます。
以後「クライアントID」とはこの文字列を指すこととします。
「完了」を選択します。

12.画面上部の「認証情報を作成」を選択し、「APIキー」を選択します。

13.APIキーが表示されるので控えます。
以後「APIキー」とはこの文字列を指すこととします。
「閉じる」を選択します。

14.Googleカレンダーを開き、
画面右上の歯車マークを選択し「設定」を選択します。

15.「カレンダー」タブから「このカレンダーを共有」を選択します。

16.「このカレンダーを一般公開する」にチェックを入れ「保存」を選択します。

17.「はい」を選択します。

18.カレンダーを選択します。

19.画面下部の「カレンダーID」を控えます。
以後「カレンダーID」とはこの文字列を指すこととします。

これでGoogle側の設定は完了です。

Googleスプレッドシート

Googleスプレッドシートの設定を行います。

1.Googleカレンダーを開き、適当に何か予定を作ります。

2.こちらを開き、「Googleスプレッドシートを使う」を選択します。

3.「Any new event created」というドキュメントが作成されているので選択します。
もしできていない場合は、数分待てば作成されます。
または、IFTTTの画面に戻り「Check now」のボタンを押すとすぐに作成されます。

4.「ツール」タブから「スクリプトエディタ」を選択します。

5.後述のスクリプトを入力します。

6.画面左上の保存ボタンを選択し、適当なプロジェクト名を入力したら「OK」を選択します。

7.「リソース」タブから「現在のプロジェクトのトリガー」を選択します。

8.下図のリンクを選択します。

9.それぞれ「func」「スプレッドシートから」「値の変更」を選択し「保存」を選択します。

10.「許可を確認」を選択します。

11.ポップアップウィンドウが立ち上がるので「許可」を選択します。

これでスプレッドシートの設定は完了です。

kintoneアプリ

以下のフィールドを持つアプリを作成します。

フィールドコード フィールドタイプ 備考
タイトル 文字列(1行)
場所 文字列(1行)
開始日時 日時 必須
終了日時 日時 必須
説明 文字列(複数行)  

また、「アプリの設定 > JavaScript / CSSでカスタマイズ」に以下のサンプルコードを設定します。
サンプルコードはエディタにコピーして、ファイル名を「googleCalendar.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

■PC用のJavaScriptファイル

また、APIトークンを発行します。
APIトークンの生成方法はヘルプを参照ください。

プログラム解説

Google Apps Script

以上が全体のGoogle Apps Scriptとなります。
以下、スポット解説していきます。

連携するkintone環境の情報です。
subdomain変数は連携したいkintone環境URL「XXXXX.cybozu.com」の"XXXXX"の部分に書き換えてください。
また、「appid」はアプリID、「token」は上記準備時に生成したAPIトークンに書き換えてください。

日時の変換関数です。
IFTTTからスプレッドシートに値が渡された開始日時および終了日時について、
kintoneに渡すことができる形式に変換させるために用います。

例えば「2016年11月15日午前10時30分」の予定であれば、
November 15, 2016 at 10:30AM」と渡されて来ますので、
これを受け渡し可能な形式に変換しています。

func()は上記準備で設定した、ドキュメントが変更された際に発火する関数です。
また、今回は後述する「KintoneManager」ライブラリを使用しています。

sheet変数には「Any new event created」ドキュメントのシート情報が入り、
data変数にはそのシートに入力された値の情報が入ります。

data変数の行数分だけループし、kintoneに連携するレコードデータを作成していきます。
その際、H列が"済"のものは連携済みとして除外しています。

現在取得中の行のH列に「済」の値を挿入し、
その行全体の背景色を灰色に着色しています。
この辺は他にも色々とやり方がありそうですね。

googleCalendar.js

以上がkintone側のJavaScriptとなります。
以下、スポット解説していきます。

上記準備で取得したAPIキー、クライアントID、カレンダーIDを各変数に入れてください。
スコープはこのままでOKです。

Googleカレンダーに渡すためのデータを作成しています。
summaryがタイトル、startが開始日時、endが終了日時、locationが場所、descriptionが説明になります。

APIキーのセット後、認証を行っています。
認証処理後、authBranch関数を呼び出しています。

認証の結果次第で処理を分岐させています。
認証が通っていればそのまま予定を生成し、
認証が通っていなければ、認証を承認する画面を表示します。

なお、本プログラム内ではkintone.Promiseを使用しています。
詳しくはこちらの記事などをご参照ください。

動作確認

念のため動作確認をしてみましょう。

Googleカレンダー → kintoneの確認

1.Googleカレンダーを開きます。

2.「作成」を選択します。

3.「タイトル」「開始日時」「終了日時」「場所」「説明」を入力し「保存」を選択します。

4.しばらく待つか、IFTTTのレシピページを開き「Check now」を選択すると、即座に処理が反映されます。

5.作成したkintoneアプリを開き、登録した予定と合致するレコードが作成されていることを確認します。

kintone → Googleカレンダーの確認

1.作成したkintoneアプリのレコード作成画面を開きます。

2.情報を入力し「保存」を選択します。

※下図のような画面が出た場合は、「許可」を選択し、再度レコードを作成してください。

3.Googleカレンダーを開きます。

4.kintoneで作成した予定がGoogleカレンダーにも生成されていることを確認します。

拡張

さらに本プログラムを拡張することで、以下のようなことも可能になります。

終わりに

いかがでしたでしょうか。
すべて自前で用意しようと思うと中々に手間取るWebサービス間の連携を、
比較的簡単に実現できたのではないかと思います。

現状では、kintoneに正式対応しているZapierを使用する方がベターと言えますが、
それ以外のサービスでも連携できるというところが参考になればと思います。

皆様の素晴らしいkintoneカスタマイズライフの一助となれたら幸いです。

参考

留意事項

  • 本記事は、2016年11月現在の内容となります。
    Windows10・Chrome 54.0.2840.99 m (64-bit)での動作を確認しています。
  • 参考ライブラリについての技術的サポート等は致しかねます。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
postedit

貴重な情報をありがとうございます。

手順どおり実装してみたのですが、この方法だとGoogleカレンダーで登録済みの予定を変更したときにその変更がGoogleドライブ内のExcelファイルに反映されないようです。
IFTTTが新規イベントの追加ではトリガーしてくれますが既存イベントの変更でトリガーをかける方法がないように理解したのですが、何か回避策があるでしょうか?

Avatar
cybozu Development team

postedit様

ご質問ありがとうございます。

ご指摘いただいている通り、IFTTTで使えるGoogleCalendarのトリガーに「更新した場合」というトリガーがないようです。

IFTTTに関しましては弊社にも詳しい情報がございませんので、もしIFTTTを利用しての連携をお考えでしたら、IFTTT側へお問い合わせいただけますようお願いいたします。

 

なお、「Googleカレンダーの既存予定を変更した場合にkintoneアプリへ連携したい」ということでしたら、こちらの記事冒頭でも触れさせていただいておりましたZapierを使ってGoogleカレンダーとkintoneを連携する方法も考えられます。

ZapierのGoogle Calendarのトリガーには、「New or Update Event」というトリガーがあり、削除を除く変更にも対応しているようです。kintone側は「Create Record」と「Update Status」の2つになるため、フィルター機能を使って2つのZapに振り分けることになります。

※Zapierのフィルターは有償プランとなるため、動作確認は取れておりませんが理論上は可能と思われます。

Zapierや他の方法での実装をお考えの場合、コミュニティページにてご相談いただければと思います。よろしくお願いいたします。

https://developer.cybozu.io/hc/ja/community/topics

 

Avatar
postedit

cybozu Development teamさま

丁寧な回答をありがとうございます!

アドバイスいただいた Zapierでの連携を試してみました。書いていただいたとおり、Create と Update を別のzapとして登録することにより、作成と更新に対応できました。

ZapierのACTION側で"Update Record By Update Key"を選び、Update KeyにイベントのIDを選択することで、期待どおりの処理ができました。

この方法は下記の記事のおかげでスムーズに実現できました。感謝です。

https://kintone-blog.cybozu.co.jp/developer/000280.html

 

私の場合、Zapを5件以内におさめて、同期も月次でとれればよいので、今のところFree Planで試しています。

 

これでCRUDのうちCRUまでできたのですが、やってみるとGoogleカレンダー側でイベントを削除したときに、そのことをkintoneに伝えるすべがないことに気付きました。これについては別の回避策をもうすこし考えてみることにします...

Avatar
cybozu Development team

postedit様

ご連絡ありがとうございました!

期待通りの処理ができたとのことで良かったです。

ご指摘の通り予定の削除は、現時点のZapierで解決するのが困難ですので、運用回避なども合わせてご検討いただけますと幸いです。

ログインしてコメントを残してください。
Powered by Zendesk