入力値チェックプラグイン作成例

目次

はじめに

kintone プラグイン開発手順 では、プラグイン開発に必要なファイルやプラグインファイルをパッケージングする手順を紹介しました。

この記事では、 顧客リストの郵便番号、TEL、メールの入力をチェックする の JavaScript サンプルを例に、実際にプラグインファイルを作成してみましょう。

STEP1 プラグイン用アプリの準備

kintone アプリストア (External link) にある 顧客リスト (External link) アプリを利用します。

STEP2 プラグイン作成に必要なファイルの準備

kintone プラグイン開発手順 にしたがって、ファイルを作成します。

アイコンファイル

次のようなアイコンファイルをペイントで作成しました。
ファイル名は「check.png」とします。

PC 用 JavaScript ファイル

顧客リストの郵便番号、TEL、メールの入力をチェックする を参考に、PC 用 JavaScript ファイルを作成します。

ポイント

  • 入力値をチェックするフィールド情報は、ユーザーが設定画面で保存するプラグインの設定情報を利用しています。
  • プラグインの設定情報は kintone.plugin.app.getConfig() で取得します。
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/*
 * checkvalue Plug-in
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
((PLUGIN_ID) => {
  'use strict';

  // 入力モード
  const MODE_ON = '1'; // 変更後チェック実施

  // 設定値読み込み用変数
  const CONFIG = kintone.plugin.app.getConfig(PLUGIN_ID) || {};

  // 設定がなければ処理を終了する
  if (Object.keys(CONFIG).length === 0) {
    return false;
  }

  const CONFIG_ZIP = CONFIG.zip;
  const CONFIG_TEL = CONFIG.tel;
  const CONFIG_FAX = CONFIG.fax;
  const CONFIG_MAIL = CONFIG.mail;

  // 変更後チェック実施:1、 未実施:0
  const MODE_CONFIG = CONFIG.mode;

  // 郵便番号の入力チェック
  const zipCheck = (event) => {
    // 郵便番号の定義(7桁の半角数字)
    const zip_pattern = /^\d{7}$/;
    // event よりレコード情報を取得します
    const rec = event.record;
    // エラーの初期化
    rec[CONFIG_ZIP].error = null;
    // 郵便番号が入力されていたら、入力値を確認します
    const zip_value = rec[CONFIG_ZIP].value;
    if (zip_value) {
      if (zip_value.length > 0) {
        // 定義したパターンにマッチするか確認します
        if (!(zip_value.match(zip_pattern))) {
          // マッチしない場合は、郵便番号フィールドにエラーの内容を表示するようにします
          rec[CONFIG_ZIP].error = '郵便番号は7桁の半角数字で入力して下さい。';
        }
      }
    }
  };

  // 電話番号の入力チェック
  const telCheck = (event) => {
    // TELの定義(10桁または 11桁の半角数字)
    const tel_pattern = /^\d{10,11}$/;
    // event よりレコード情報を取得します
    const rec = event.record;
    // エラーの初期化
    rec[CONFIG_TEL].error = null;

    // TEL が入力されていたら、入力値を確認します
    const tel_value = rec[CONFIG_TEL].value;
    if (tel_value) {
      if (tel_value.length > 0) {
        // 定義したパターンにマッチするか確認します
        if (!(tel_value.match(tel_pattern))) {
          // マッチしない場合は、TEL に対してエラーの内容を記載します
          rec[CONFIG_TEL].error = '電話番号は10桁 または 11桁の半角数字で入力して下さい。';
        }
      }
    }
  };

  // FAXの入力チェック
  const faxCheck = (event) => {
    // FAXの定義(10桁または 11桁の半角数字)
    const fax_pattern = /^\d{10,11}$/;
    // event よりレコード情報を取得します
    const rec = event.record;
    // エラーの初期化
    rec[CONFIG_FAX].error = null;
    // FAX が入力されていたら、入力値を確認します
    const fax_value = rec[CONFIG_FAX].value;
    if (fax_value) {
      if (fax_value.length > 0) {
        // 定義したパターンにマッチするか確認します
        if (!(fax_value.match(fax_pattern))) {
          // マッチしない場合は、FAX に対してエラーの内容を記載します
          rec[CONFIG_FAX].error = 'FAX番号は10桁 または 11桁の半角数字で入力して下さい。';
        }
      }
    }
  };

  // メールアドレスの入力チェック
  const mailCheck = (event) => {
    // メールアドレスの定義 (簡易的な定義です。さらに詳細に定義する場合は下記の値を変更して下さい)
    const mail_pattern = /^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/;
    // event よりレコード情報を取得します
    const rec = event.record;
    // エラーの初期化
    rec[CONFIG_MAIL].error = null;
    // メールアドレスが入力されていたら、入力値を確認します
    const mail_value = rec[CONFIG_MAIL].value;
    if (mail_value) {
      if (mail_value.length > 0) {
        // 定義したパターンにマッチするか確認します
        if (!(mail_value.match(mail_pattern))) {
          // マッチしない場合は、メールアドレスに対してエラーの内容を記載します
          rec[CONFIG_MAIL].error = 'メールアドレスとして認識されませんでした。値を確認して下さい。';
        }
      }
    }
  };

  // 登録・更新イベント(新規レコード、編集レコード、一覧上の編集レコード)
  kintone.events.on(['app.record.create.submit',
    'app.record.edit.submit',
    'app.record.index.edit.submit'], (event) => {
    zipCheck(event);
    telCheck(event);
    faxCheck(event);
    mailCheck(event);
    return event;
  });

  // 変更イベント(郵便番号)
  kintone.events.on(['app.record.create.change.' + CONFIG_ZIP,
    'app.record.edit.change.' + CONFIG_ZIP,
    'app.record.index.edit.change.' + CONFIG_ZIP
  ], (event) => {
    if (MODE_CONFIG === MODE_ON) {
      zipCheck(event);
    }
    return event;
  });

  // 変更イベント(電話番号)
  kintone.events.on(['app.record.create.change.' + CONFIG_TEL,
    'app.record.edit.change.' + CONFIG_TEL,
    'app.record.index.edit.change.' + CONFIG_TEL
  ], (event) => {
    if (MODE_CONFIG === MODE_ON) {
      telCheck(event);
    }
    return event;
  });

  // 変更イベント(FAX)
  kintone.events.on(['app.record.create.change.' + CONFIG_FAX,
    'app.record.edit.change.' + CONFIG_FAX,
    'app.record.index.edit.change.' + CONFIG_FAX
  ], (event) => {
    if (MODE_CONFIG === MODE_ON) {
      faxCheck(event);
    }
    return event;
  });

  // 変更イベント(Mail)
  kintone.events.on(['app.record.create.change.' + CONFIG_MAIL,
    'app.record.edit.change.' + CONFIG_MAIL,
    'app.record.index.edit.change.' + CONFIG_MAIL
  ], (event) => {
    if (MODE_CONFIG === MODE_ON) {
      mailCheck(event);
    }
    return event;
  });
})(kintone.$PLUGIN_ID);

ファイルが作成できたので、「check_sample.js」という名前をつけ、文字コードを UTF-8 にして保存します。

PC 用 CSS ファイルや、モバイル用 JavaScript ファイルは、今回作成しません。

設定画面用 HTML ファイル

設定画面用 HTML ファイルを作成します。

このプラグインでは、郵便番号、電話番号、FAX 番号、メールアドレスの入力値をチェックできます。
設定画面では、これら 4 つのチェックをどのフィールドに対して行うのかを、それぞれドロップダウンで設定できるようにします。
ドロップダウンの値候補は、のちほど作成する設定画面用の JavaScript ファイルで表示させることを想定しています。

ポイント

  • 設定画面用 HTML は body の内容だけでかまいません。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!--
 * checkvalue Plug-in
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
-->
<div>
  <div class="block">
    <label class="kintoneplugin-label">
      <span class="container_label">値変更後入力チェック</span>
    </label>
    <div class="kintoneplugin-row"></div>
    <div class="kintoneplugin-input-checkbox">
      <span class="kintoneplugin-input-checkbox-item">
        <input type="checkbox" name="checkbox" value="1" id="check-plugin-change_mode" checked="false">
        <label for="check-plugin-change_mode">値変更後に入力チェックを行う場合はチェックしてください。</label>
      </span>
    </div>
  </div>
  <div class="block">
    <label class="kintoneplugin-label">
      <span class="container_label">郵便番号をチェックするフィールド</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">郵便番号のチェックを行うフィールドを選択してください。</div>
    <div class="kintoneplugin-select-outer">
      <div class="kintoneplugin-select">
        <select id="select_checkvalue_field_zip" name="select_checkvalue_field_zip">
          <option value="">-----</option>
        </select>
      </div>
    </div>
  </div>
  <div class="block">
    <label class="kintoneplugin-label">
      <span class="container_label">電話番号をチェックするフィールド</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">電話番号のチェックを行うフィールドを選択してください。</div>
    <div class="kintoneplugin-select-outer">
      <div class="kintoneplugin-select">
        <select id="select_checkvalue_field_tel" name="select_checkvalue_field_tel">
          <option value="">-----</option>
        </select>
      </div>
    </div>
  </div>
  <div class="block">
    <label class="kintoneplugin-label">
      <span class="container_label">FAX番号をチェックするフィールド</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">FAX番号のチェックを行うフィールドを選択してください。</div>
    <div class="kintoneplugin-select-outer">
      <div class="kintoneplugin-select">
        <select id="select_checkvalue_field_fax" name="select_checkvalue_field_fax">
          <option value="">-----</option>
        </select>
      </div>
    </div>
  </div>
  <div class="block">
    <label class="kintoneplugin-label">
      <span class="container_label">メールアドレスをチェックするフィールド</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">メールアドレスのチェックを行うフィールドを選択してください。</div>
    <div class="kintoneplugin-select-outer">
      <div class="kintoneplugin-select">
        <select id="select_checkvalue_field_mail" name="select_checkvalue_field_mail">
          <option value="">-----</option>
        </select>
      </div>
    </div>
  </div>
  <div class="block">
    <button type="button" id="check-plugin-submit" class="kintoneplugin-button-dialog-ok"> 保存する </button>
    <button type="button" id="check-plugin-cancel" class="kintoneplugin-button-dialog-cancel"> キャンセル </button>
  </div>
</div>

ブラウザーで表示させると、以下のように表示されます。

ファイルを作成したら、名前を付けて保存します。文字コードは UTF-8 を指定してください。
今回は「check_config.html」という名前をつけました。

設定画面用 JavaScript ファイル

設定画面用 JavaScript ファイルを作成します。

このプラグインの設定画面では、以下の処理を行います。

  • プラグインの設定情報が設定済みの場合、フィールドに値を設定する。
  • アプリのフィールド情報を取得し、ドロップダウンの値候補としてセットする。
  • 「保存する」ボタンが押されたとき、空欄のフィールドがあれば警告を出す。
  • 「保存する」ボタンが押されたとき、この画面で入力された情報をプラグインの設定情報として保存する。
  • 「キャンセル」ボタンが押されたとき、前の画面へ戻る。

ポイント

  • kintone.plugin.app.getConfig() で、プラグインの設定情報を取得しています。
  • kintone.plugin.app.setConfig() で、この画面で入力された情報をプラグインの設定情報に保存しています。
  • アプリのフォームに配置してあるフィールド情報は、アプリのフォーム設計情報を取得できるライブラリ「kintone-config-helper」の「kintone-config-helper.js」を利用して取得しています。
    ライブラリの詳細は、 kintone-config-helper を参照してください。
  • このプラグインでは、JQuery の関数を利用しています。
  • 他プラグインや他 JavaScript カスタマイズとの競合を避けるため、jQuery.noConflict(); を記述することを推奨します。
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
/*
 * checkvalue Plug-in
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
jQuery.noConflict();

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

  const escapeHtml = (htmlstr) => {
    return htmlstr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  };

  const setDropdown = () => {
    // フィールド型が「文字列(1行)」「数値」のフィールド情報を取得し、選択ボックスに代入する
    KintoneConfigHelper.getFields(['SINGLE_LINE_TEXT', 'NUMBER']).then((resp) => {
      for (let i = 0; i < resp.length; i++) {
        const prop = resp[i];
        const $option = $('<option>');

        $option.attr('value', escapeHtml(prop.code));
        $option.text(escapeHtml(prop.label));
        $('#select_checkvalue_field_zip').append($option.clone());
        $('#select_checkvalue_field_tel').append($option.clone());
        $('#select_checkvalue_field_fax').append($option.clone());
        $('#select_checkvalue_field_mail').append($option.clone());
      }
      // 初期値を設定する
      $('#select_checkvalue_field_zip').val(CONF.zip);
      $('#select_checkvalue_field_tel').val(CONF.tel);
      $('#select_checkvalue_field_fax').val(CONF.fax);
      $('#select_checkvalue_field_mail').val(CONF.mail);
    }).catch((err) => {
      alert(err.message);
    });
  };

  // プラグインIDの設定
  const KEY = PLUGIN_ID;
  const CONF = kintone.plugin.app.getConfig(KEY);

  if (!CONF) {
    window.alert('プラグインの設定の読み込みに失敗しました。');
    window.location.href = `/k/admin/app/${kintone.app.getId()}/plugin/`;
  }

  // 入力モード
  const MODE_ON = '1'; // 変更後チェック実施
  const MODE_OFF = '0'; // 変更後チェック未実施

  $(document).ready(() => {
    // ドロップダウンリストを作成する
    setDropdown();
    $('#check-plugin-change_mode').prop('checked', false);
    // changeイベント有り
    if (CONF.mode === MODE_ON) {
      $('#check-plugin-change_mode').prop('checked', true);
    }

    // 「保存する」ボタン押下時に入力情報を設定する
    $('#check-plugin-submit').click(() => {
      const config = [];
      const zip = $('#select_checkvalue_field_zip').val();
      const tel = $('#select_checkvalue_field_tel').val();
      const fax = $('#select_checkvalue_field_fax').val();
      const mail = $('#select_checkvalue_field_mail').val();
      const mode = $('#check-plugin-change_mode').prop('checked');
      // 必須チェック
      if (zip === '' || tel === '' || fax === '' || mail === '') {
        alert('必須項目が入力されていません');
        return;
      }
      config.zip = zip;
      config.tel = tel;
      config.fax = fax;
      config.mail = mail;
      // 重複チェック
      const uniqueConfig = [zip, tel, fax, mail];
      const uniqueConfig2 = uniqueConfig.filter((value, index, self) => {
        return self.indexOf(value) === index;
      });
      if (Object.keys(config).length !== uniqueConfig2.length) {
        alert('選択肢が重複しています');
        return;
      }

      config.mode = MODE_OFF;
      if (mode) {
        config.mode = MODE_ON;
      }
      kintone.plugin.app.setConfig(config);
    });

    // 「キャンセル」ボタン押下時の処理
    $('#check-plugin-cancel').click(() => {
      history.back();
    });
  });

})(jQuery, kintone.$PLUGIN_ID);

ファイルが作成できたので、「config.js」という名前をつけ、文字コードを UTF-8 にして保存します。

設定画面用 CSS ファイル

設定画面用の CSS ファイルを作成します。

このプラグインでは、設定画面の各項目の間隔を調整します。
ボタンやラベルの装飾には、kintone デザインと調和させるために「51-modern-default.css」のクラスを利用しています。
詳しくは、 51-modern-default を参照してください。

1
2
3
.block {
  padding: 0 0 20px 0;
}

ファイルが作成できたので、「check_config.css」という名前をつけ、文字コードを UTF-8 にして保存します。

STEP3 マニフェストファイルの作成

マニフェストファイルを作成します。

  1. 作成した各ファイルを下図のように配置してみましょう。
    ファイル名やフォルダー構成は自由なので、下図は一例です。

    • kintone-config-helper.js の入手方法
      • GitHub (External link) にアクセスし、「Clone or download」ボタンから zip ファイルをダウンロードします。
        zip ファイルを解凍後、dist フォルダー下の「kintone-config-helper.js」を利用します。
    • 51-modern-default.css の入手方法
      • GitHub (External link) にアクセスし、「Clone or download」ボタンから zip ファイルをダウンロードします。
        zip ファイル解凍後、stylesheet フォルダー下の「51-modern-default.css」を利用します。
  2. マニフェストファイルを作成しましょう。

    • マニフェストファイルに記述するファイルパスは、先ほど配置した各ファイルの階層と合わせてください。
    • このプラグインでは、jQuery を利用しているため、jQuery ファイルの読み込みが必要です。
      今回は、 Cybozu CDN を利用して jQuery ファイルを読み込むので、マニフェストファイルに URL を記載しています。
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    
    {
        "manifest_version": 1,
        "version": 2,
        "type": "APP",
        "name": {
            "ja": "入力値チェックプラグイン",
            "en": "Input value check plug-in",
            "zh": "输入值校验插件"
        },
        "description": {
            "ja": "郵便番号、電話番号、FAX番号、メールアドレスの入力値をチェックするプラグインです。",
            "en": "This plugin checks zip code, telephone number, FAX number, e-mail address",
            "zh": "邮政编码,它是一个插件,以检查电话号码,传真号码,E-mail地址的输入值"
        },
        "icon": "image/check.png",
        "homepage_url": {
            "ja": "https://cybozu.dev/ja/kintone/tips/development/plugins/sample-plugin/checkvalue-plugin/",
            "en": "https://cybozu.dev/ja/kintone/tips/development/plugins/sample-plugin/checkvalue-plugin/",
            "zh": "https://cybozu.dev/ja/kintone/tips/development/plugins/sample-plugin/checkvalue-plugin/"
        },
        "desktop": {
            "js": [
                "js/check_sample.js"
            ]
        },
        "config": {
            "html": "html/check_config.html",
            "js": [
                "https://js.cybozu.com/jquery/1.11.1/jquery.min.js",
                "js/kintone-config-helper.js",
                "js/config.js"
            ],
            "css": [
                    "css/check_config.css",
                    "css/51-modern-default.css"
            ],
            "required_params": ["zip", "tel", "fax", "mail", "mode"]
        }
    }
  3. 作成したファイルは「manifest.json」という名前をつけ、文字コードを UTF-8 にして保存します。
    今回の保存先は、check_plugin ディレクトリー直下とします。

STEP4 パッケージング

plugin-packer を利用して、パッケージングします。
plugin-packer のインストール方法やツールの詳細は、 plugin-packer を参照してください。

  1. plugin-packer をインストールしていない場合は、以下のコマンドを実行します。

    1
    
    npm install -g @kintone/plugin-packer
  2. check_plugin ディレクトリーのひとつ上のディレクトリーに移動します。
    上図の配置の場合、「work」に移動します。

    1
    
    cd work
  3. 次のコマンドを実行すると、自動でパッケージングが開始されます。
    実行に成功すると、成功メッセージが表示されます。

    1
    2
    3
    
    $ kintone-plugin-packer check_plugin
    
    Succeeded: DIRECTORY_PATH/work/plugin.zip
  4. check_plugin ディレクトリーに、プラグインファイル(plugin.zip)と秘密鍵ファイル(ppk ファイル)が生成されます。
    秘密鍵ファイルのファイル名「hkfgjeehkaajnbmfojmpbgcpfalbfhjn」はプラグイン ID です。
    この値はプラグインによってランダムに一意な値が割り振られます。

STEP5 インストール & 動作確認

作成したプラグインファイルを、 STEP1 で作成した「顧客リスト」アプリに適用してみましょう。

  1. プラグインファイルを kintone にインストールします。
    「kintone システム管理」から「プラグイン」を開きます。
  2. 「読み込む」ボタンを押下します。

  3. 作成した plugin.zip を指定し、「読み込む」ボタンを押下します。
    作成したプラグインが kintone にインストールされます。

  4. インストールしたプラグインを「顧客リスト」アプリに適用します。
    「顧客リスト」アプリで、「アプリの設定」から「プラグイン」を開きます。
  5. 「プラグインの追加」ボタンを押下します。

  6. 「入力値チェックプラグイン」横のチェックをつけ、「追加」ボタンを押下します。
    入力値チェックプラグインが、「顧客リスト」アプリに適用されます。

  7. 設定画面でプラグインの設定します。
    歯車マークを押下します。
    入力値チェックプラグインの設定画面が表示されます。

  8. 入力値をチェックしたいフィールドを設定します。
    設定が完了したら、「保存する」ボタンを押下して設定を完了します。

  9. アプリの動作確認をしてみましょう。
    顧客リストの郵便番号、TEL、メールの入力をチェックする の JavaScript サンプルと同じ動きをしているでしょうか?

サンプルプラグイン

今回作成した「入力値チェック」プラグインは、下記リンク先にて公開しています。

入力値チェックプラグイン

おわりに

今回は 顧客リストの郵便番号、TEL、メールの入力をチェックする の JavaScript サンプルを例に、実際にプラグインを作成しました。

今回作成したプラグインの重要なポイントは、以下のとおりです。

  • 設定画面では、アプリフォーム設計情報取得ライブラリ(kintone-config-helper)を利用して、入力値をチェックしたいフォームのフィールド情報を取得する。
    また、この画面で入力された入力値をチェックするフィールドの設定を、プラグインの設定情報として保存する。
  • カスタマイズファイル(今回は PC 用 JavaScript ファイル)では、プラグインの設定情報を読み込んで利用する。

この記事で確認した内容を応用して、ぜひ Tips にあるサンプルコードのプラグイン化やオリジナルプラグインを作ってみてください。

information

この Tips は、2019 年 2 月版 kintone で動作を確認しています。