【kintone】Teams通知プラグインを作ってみた

動機

kintoneでteams通知するプラグインを作成したので、それのプラグイン化を試してみる。

仕様

kintoneで新規にレコードを登録した際にTeamsに通知する。

プロジェクト作成

create-pluginを使用してプロジェクトを作成する

$ create-kintone-plugin プロジェクト名

設定画面の作成

完成イメージ

コード

<section class="settings">
  <h2 class="settings-heading">プラグインの設定</h2>
  <p class="kintoneplugin-desc">teamsから取得したwebhookのURLを入力してください</p>
  <form class="js-submit-settings">
    <p class="kintoneplugin-row">
      <label for="message">
        URL:
        <input type="text" class="js-text-message kintoneplugin-input-text">
      </label>
    </p>
    <p class="kintoneplugin-row">
        <button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">Cancel</button>
        <button class="kintoneplugin-button-dialog-ok">Save</button>
    </p>
  </form>

設定の保存・読み込み設定

jQueryで書かれていたのを、素のJSに書き直しました。

コード

((PLUGIN_ID) => {
  'use strict';

  const form = document.querySelector('.js-submit-settings');
  const cancelButton = document.querySelector('.js-cancel-button');
  const url = document.querySelector('.js-text-message');
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);

  console.log(form, cancelButton, url, config);

  if (config.url) {
    url.value = config.url;
  }
  form.addEventListener('submit', event => {
    event.preventDefault();
    kintone.plugin.app.setConfig({url: url.value}, () => {
      window.location.href = '../../flow?app=' + kintone.app.getId();
    });
  });
  cancelButton.addEventListener('click', () => {
    window.location.href = '../../' + kintone.app.getId() + '/plugin/';
  });
})(kintone.$PLUGIN_ID);

アプリ側処理

レコード保存成功イベントにトリガーさせ、teamsに送信しています。
teamsの設定方法は別途調べてください。

コード

((PLUGIN_ID) => {
  'use strict';

  kintone.events.on('app.record.create.submit.success', (event) => {
    const config = kintone.plugin.app.getConfig(PLUGIN_ID);
    const webhookUrl = config.url;

    const payLoad = {
      'text': `新規レコードが追加されました。`
    };

    return new kintone.Promise((resolve, reject) => {
      kintone.proxy(webhookUrl, 'POST', {}, payLoad, (body, status, headers) => {
        resolve(event);
      });
    });
  });
})(kintone.$PLUGIN_ID);

感想

プラグインの作り方が大体把握できたので、今後は通知内容を設定できるようにしたりしていきたい。