kintoneのwebhookをGoogle Apps Scriptで受けたのにwebアプリが動かない？

Javascriptの基本的な構文で操作できるGoogle Apps Script（GAS）を触ってみると、なかなか便利でおもしろいと思って、最近たまに触っています。

また、サイボウズのwebデータベース型の業務アプリ構築クラウドサービス「kintone」を知人が使いはじめていて、私も遊び半分で動かしたりしています。

そんな中、kintoneで作ったアプリに、データが登録されたことをメールで内容を通知してくれるようなものができないかという話になったので、私も調べて見ることに。有料のサービスなどを利用すれば簡単にできるようなのですが、手持ちのリソースでできないかと思って、Google Apps Script（GAS）を利用してやってみました。

Google Apps Scriptの入門にはUdemyの講座もおすすめ！

【教育・学習】資格・学習

総合情報サイト「コレダ！」がお届けする教育・学習における資格・学習の総合情報サイトです。

でも、その連携時になぜかwebアプリが動かない。テストしたらdoGetが見つからないというような表示が出て、kintoneのwebhookをGoogle Apps Scriptが受けていない症状でした。何が間違っているのか、動くようになった実行コードも含めてここにメモしておきます。

kintoneでアプリを作成
Google Apps Script側の処理
kintoneでwebhookを作成
なぜ機能しなかったのか？対処法は簡単なことでした
最後に

kintoneでアプリを作成

kintoneの使い方自体はここでは詳細には述べませんので、ネットの記事や講座などを参考にしてください。

【教育・学習】資格・学習

総合情報サイト「コレダ！」がお届けする教育・学習における資格・学習の総合情報サイトです。

また別にkintoneの使い方に細かく触れる記事も扱ってもいいかなとは思っていますが、まだその域ではないので、とりあえずここではおいておきます。

今回はこんな感じで必要なパーツを設置してデータベースアプリを作ります。

上のアプリのイメージとしては、文字列のところに名前を入力して、日時は訪問希望時間、ドロップダウンに訪問先のメールアドレスを複数登録しておくという感じのものです。お店の予約みたいなアプリですね。

データが扱いやすくなるので、パーツの項目にフィールドコードも設定しておきます。

「アプリを公開」をクリックで保存できます。

Google Apps Script側の処理

Google Apps Scriptも、また別で細かく書いてみたいと思いますが、ここでは、今回の処理のコードを書いて行きます。

googleドライブに「アプリを追加」を利用して、Google Apps Scriptを使えるようにします。

ここでは、スタンドアロンスクリプトを使ってコードを書いていきます。こんな感じのコードになります。

function doPost(e) {
  
  // kintoneからの更新データをeで受け取ったものをパースする
  var params = JSON.parse(e.postData.getDataAsString());
　　  
  // kintoneで付けたアプリ名を取得
  var kintoneAppName = params.app.name;
  
  // 訪問予定日時
  var reserve_date = params.record.reservation_date.value;
  reserve_date = new Date(reserve_date);
  reserve_date = Utilities.formatDate(reserve_date, 'Asia/Tokyo', 'yyyy年MM月dd日 hh:mm')
  
  //　氏名の取得
  var customer = params.record.customer_name.value;
  
  //  選択した通知先のメールアドレスの取得
  var notifyEmail = params.record.shop_email.value;

  
  // 送信メールの内容の設定
  
  // メールのタイトル
  var title =  kintoneAppName + 'に登録がありました。';
  var subject = title;
 
  // 受信相手
  var recipient = notifyEmail;
  
  // メール本文   
  var body = '';  
  body += kintoneAppName + 'に、【' + notifyEmail + '】へ訪問希望が入りました。';
  body += '\n\n';
  body += '・訪問者名： '+ customer + ' 様';
  body += '\n';
  body += '・訪問希望時間： ' + reserve_date;
  body += '\n\n\n';
  body += '以上。';

  // メール送信実行 
  GmailApp.sendEmail(recipient, subject, body)

}

コメントアウトで説明を入れているのである程度わかると思います。kintoneのwebhookを受けて、データをパースしたものから、フィールドコードを指定してそれぞれの値（value）を取り出しています。

時間に関するところは、ISO形式（2020-02-20T16:54:00Zといった形式）で取得されていて、そのままではUtilities.formatDate()を使って日本時間に変換できないので、new Date()でUTC時刻に変換し、それをUtilities.formatDate()で日本時間に表示しています。

あとはメール送信に必要な部分を整えて、GmailApp.sendEmail()に各引数を渡して送信するという流れです。

そして、アプリを公開して行きます。

スタンドアロンスクリプトのタブの「公開」のところをクリックして、「ウェブアプリケーションとして導入…」を選択します。

すると、次のようにDeploy as web appと表示されます。

Execute the app asは、「Me」を選択して、Who has access to the appは「Anyne, even anonymous」を選択して誰でもアクセスできるようにしておきます。

「Deploy」ボタンを押します。

Googleアカウントからセキュリティ上の認証が問われると思うので、アクセスの許可をしましょう。こちらの流れになります。

Google Apps Scriptでの開発で承認が必要の表示。やり方がわからない？

Google Apps Script（GAS）でスクリプトを書いてコードを実行する時など、最初に一度だけgoogleアカウントへのアクセスの承認が求められます。簡単なことなのですが、最初、びっくりして間違える人もいるのでは？ここではその承認流れをメモしておきます。

すると、次のように、Current web app URLが表示されます。

これは、kintoneのWebhookを設定する時に使いますので、URLをコピーしておきます。

このURLはここでのアプリの運用上はあちこちネットなどで一般には公開しないのがいいですね。

kintoneでwebhookを作成

再度、kintoneを使ってwebhookを作成します。

作成しているアプリの設定画面を開きます。

中ほどに「Webhook」という項目があるので、これをクリックします。

Webhookの作成画面が表示されるので、右端にある[+]印をクリックして、「Webhookの追加」画面を表示します。

「説明」の欄にはどの処理のアプリかわかるように情報を記述しておくといいでしょう。

「Webhook URL」のところに、Google Apps Scriptでの「公開」の操作でコピーしておいたCurrent web app URLを記入します。

「通知を送信する条件」をここでは「レコードの追加」を選びます。アプリによって必要な項目をチェックして追加しましょう。

「このWebhookを有効にする」にチェックを入れて、保存を押して設定完了です。

あとは、kintoneのアプリを使って入力すると、該当するメールアドレスに通知が行くという流れになるのですが…

なぜ機能しなかったのか？対処法は簡単なことでした

これで上手く通知が飛べばいいのですが、最初にのべたように上手くメール送信ができませんでした。GASのコードで単なるメール送信の処理をしたら送信できていたので、kintoneからのWebhookをどうも受け付けていないようでした。

原因と解決方法は実は簡単なことでした。

上で示したコードを、いきなりパーフェクトに書くことができていたら、おそらく一発で動いたと思います。

ですが、テストしたり、コードを書き換えたりするなどして、コードを新たに保存すると、Google Apps Scriptではファイルのバージョンとして新しく保存しているというような仕組みになっています。

GASの「ウェブアプリケーションとして導入…」のところで設定したDeploy as web appの項目が古いままで公開されていたので、動かない時の試しのコードで過去にここを更新していた場合、いくらコードのみを動くものに更新しても、ここが古いコードを実行し続けていて、上手く動かないという状況だったというのが原因だったようです。

コードのバージョンを確認するには、スクリプトの「ファイル」メニューから「版を管理」を選択して確認することができます。