kintoneからボタンを押してwebhookにPOSTしたい

概要

kintoneにはwebhookへPOSTする機能が標準でありますが、webhookへPOSTするタイミングは下記のタイミングのみが標準でサポートされています。

• レコードの追加
• レコードの編集
• レコードの削除
• コメントの書き込み
• プロセス管理のステータスの更新

https://jp.cybozu.help/k/ja/user/app_settings/set_webhook/webhook.html

今回は、任意のタイミングで実行したい場合に、画面にボタンを追加して特定のエンドポイントにレコード情報をPOSTした際にJavaScriptで実装できたのでそのメモです。

条件

今回はこんな条件です。

• kintoneの画面上に「データをPOSTする」ボタンを作成して、押したら任意のエンドポイントにPOSTしたい
• Viewを使って表示する内容に条件を指定しているので、特定のViewの時だけボタンが実行できるようにしたい
• Viewの内容だけをポストしたい

実装内容

下記がコードです。
比較的シンプルに実装できているかと思います。
ボタンの実装は下記の公式ドキュメントを参考にしています。

第2回 レコード一覧画面にボタンを置いてみよう！

最初にViewIDでボタンを表示するかの条件をいれています。これで、特定のViewIDの時だけ実行されるようになります。

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        if (event.viewId !== ここにViewIDを指定) {
            return;
        }
        // 増殖バグを防ぐ
        if (document.getElementById('my_index_button') !== null) {
            return;
        }
        // ボタンを生成
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerText = 'データをPOSTする';
        myIndexButton.onclick = function(e) {
        var result = window.confirm( 'データのPOSTを開始しますか？' );
        if ( result ) {
            var recordData = event.records
            var webhookUrl = 'ここにwebhookのエンドポイントURL';
            var payload = {
                  "recordData": recordData,
            };
            return new (function(resolve, reject) {
                kintone.proxy(webhookUrl, 'POST', {}, payload, function(body, status, headers) {
                    console.log(status, body);
                });
            });
        } else {                                                                                       
            window.alert('データのPOSTは実行されませんでした');                                                           
        }                                                                                              
    }                                                                                                  
    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);                                
    });                                                                                                    
})();

あとは、webhookのエンドポイント先で煮るなり焼くなりすれば、kintoneのレコードをもとにゴニョゴニョできるようになるかと思います。
kintone.proxyを使うことでJavaScript内でも外部のエンドポイントにもPOSTできるのでkintone便利だなと思いました。