チュートリアル

はじめようkintoneプラグイン

戻る

プラグインの設定画面を作成してみよう

著者名：hato（ サイボウズ株式会社 (External link) ）

目次

前回までに、kintoneプラグインの開発の基本を学びました。
今回はplugin initコマンドを使って、プラグインの設定画面を作成してみましょう。

作成する設定画面について

固定リンクがコピーされました

プラグインを作成してみよう では、入力値をチェックするフィールドをハードコードしていたため、プラグインのメリットを活かしきれていませんでした。

今回は、設定画面のあるプラグインを作成します。
設定画面を作成することで、アプリの管理者が入力値をチェックしたいフィールドを任意に選択できるようにします。

次のような設定画面を作ります。

設定画面の作成

固定リンクがコピーされました

設定画面を作成するために必要なファイルは、次の3種類です。

  • 設定画面用HTML
  • 設定画面用CSS
  • 設定画面用JavaScript

今回はplugin initコマンドで作成したファイルを編集して、設定画面用のファイルを作成していきます。

plugin initコマンドで設定画面のファイルを作成する

固定リンクがコピーされました

plugin initコマンドを実行すると、設定画面用のファイルが自動で作成されます。
plugin initコマンドについては、 plugin init (External link) を参考にしてください。

プラグイン名を「sample_plugin」、テンプレートを「javascript」として、次のコマンドを実行します。

1

cli-kintone plugin init --name sample_plugin --template javascript

コマンドを実行すると、質問が順番に表示されるので、次の例を参考に必要な情報を入力してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# コマンド実行後の質問と入力例
√ Input your plug-in name in English [1-64chars] sample_plugin
√ Input your plug-in description in English [1-200chars] sample_plugin
√ Input your home page url for English (Optional)
√ Does your plug-in support Japanese? Yes
√ Input your plug-in name in Japanese [1-64chars] sample_plugin
√ Input your plug-in description in Japanese [1-200chars] sample_plugin
√ Input your home page url for Japanese (Optional)
√ Does your plug-in support Chinese? No
√ Does your plug-in support Spanish? No

質問に答えると、次のようなファイル構成で、プラグインのファイルが作成されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

sample-plugin
 ├── css
 │   ├── 51-modern-default.css <=== kintoneのUIパーツのスタイルシート
 │   ├── config.css <=== 設定画面用CSS
 │   ├── desktop.css <=== PC用CSS
 │   └── mobile.css <=== モバイル用CSS
 ├── html
 │   └── config.html <=== 設定画面用HTML
 ├── js
 │   ├── config.js <=== 設定画面用JavaScript
 │   ├── desktop.js <=== PC用JavaScript
 │   └── mobile.js <=== モバイル用JavaScript
 ├── image
 │   └── icon.png <=== アイコン画像
 ├── node_modules
 ├── scripts
 ├── manifest.json <=== プラグインの設定ファイル
 ├── private.ppk <=== 秘密鍵ファイル
 └── その他のファイル（.gitignore、package.jsonなど）

設定画面用HTML

固定リンクがコピーされました

作成された設定画面用HTMLを編集して、設定画面を作成します。
「html」の下にある「config.html」の中身をすべて削除し、次のコードを張り付けて保存してください。

 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

<!--
 * checkvalue Plug-in
 * Copyright (c) 2026 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
-->
<div>
  <div class="setting">
    <label class="kintoneplugin-label" for="checkvalue-field-zip">
      <span>郵便番号をチェックするフィールド</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">郵便番号のチェックを行うフィールドのフィールドコードを入力してください。</div>
    <div class="kintoneplugin-input-outer">
      <input id="checkvalue-field-zip" class="kintoneplugin-input-text" type="text" placeholder="郵便番号">
    </div>
  </div>
  <div class="setting">
    <label class="kintoneplugin-label" for="checkvalue-field-tel">
      <span>電話番号をチェックするフィールド</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">電話番号のチェックを行うフィールドのフィールドコードを入力してください。</div>
    <div class="kintoneplugin-input-outer">
      <input id="checkvalue-field-tel" class="kintoneplugin-input-text" type="text" placeholder="TEL">
    </div>
  </div>
  <div class="setting">
    <label class="kintoneplugin-label" for="checkvalue-field-fax">
      <span>FAX番号をチェックするフィールド</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">FAX番号のチェックを行うフィールドのフィールドコードを入力してください。</div>
    <div class="kintoneplugin-input-outer">
      <input id="checkvalue-field-fax" class="kintoneplugin-input-text" type="text" placeholder="FAX">
    </div>
  </div>
  <div class="setting">
    <label class="kintoneplugin-label" for="checkvalue-field-mail">
      <span>メールアドレスをチェックするフィールド</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">メールアドレスのチェックを行うフィールドのフィールドコードを入力してください。</div>
    <div class="kintoneplugin-input-outer">
      <input id="checkvalue-field-mail" class="kintoneplugin-input-text" type="text" placeholder="メールアドレス">
    </div>
  </div>
  <div class="setting">
    <button type="button" id="submit" class="kintoneplugin-button-dialog-ok">保存する</button>
    <button type="button" id="cancel" class="kintoneplugin-button-dialog-cancel">キャンセル</button>
  </div>
</div>

ここでは、「51-modern-default」というスタイルシートが適用されるようにクラス名を設定しています。
51-modern-default は、UIパーツをkintoneのデザインと調和させるためのスタイルシートです。
ボタンやテキストボックスなどのデザインをkintoneに合わせることができます。

設定している、クラス名やid名の詳細は次のとおりです。

  • kintoneplugin-から始まるクラス名が、「51-modern-default」を適用しているCSSのクラス名です。
  • settingのクラス名は 設定画面用CSS で使用します。
  • checkvalue-field-から始まるid名は 設定画面用JavaScript で使用します。

設定画面用CSS

固定リンクがコピーされました

「css」ディレクトリの下に、次のcssファイルがあることを確認してください。

  • 51-modern-default.css
  • config.css

「config.css」の中身をすべて削除し、次のコードを張り付けて保存してください。

1
2
3

.setting {
  padding: 0 0 20px 0;
}

「config.css」ではdiv要素の余白を調整します。

設定画面用JavaScript

固定リンクがコピーされました

設定画面用JavaScriptで、設定画面の動作部分を作成します。
主な機能は次の4つです。

  • プラグイン設定情報を取得し、値があればフォームに初期値として表示
  • [キャンセル]をクリックすると、設定を取りやめてアプリのプラグイン一覧画面に遷移
  • [保存する]をクリックすると、必須チェックと重複チェックを行い、エラーの場合はアラートを表示
  • [保存する]をクリックし、必須チェックと重複チェックに問題がなければ、選択した設定を保存してアプリの設定画面に遷移

「js」ディレクトリの下の「config.js」の中身をすべて削除し、次のSTEP1からSTEP5を参考にして設定画面用のコードを作成してください。

STEP1 プラグイン設定情報を取得

保存済みのプラグインの設定情報を kintone.plugin.app.getConfig(pluginId) で取得します。
引数のpluginIdはプラグインIDです。
プラグインIDはkintone.$PLUGIN_IDという変数に格納されるため、即時実行関数の引数で受け取って利用します。
今回は、即時実行関数の引数名をPLUGIN_IDとし、作成した「config.js」に次のように記載します。

1
2
3
4
5

((PLUGIN_ID) => {
  'use strict';
  // プラグインの設定情報を取得
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
})(kintone.$PLUGIN_ID);
STEP2 取得した設定情報をフォームに表示

プラグインの設定情報に値があれば、設定画面のフォームに初期値として表示する処理を作成します。

checkvalue-field-から始まるid名で、フォーム情報を取得します。
プラグインの設定情報に値があれば、初期値としてフォームに値を代入します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

((PLUGIN_ID) => {
  'use strict';
  // プラグインの設定情報を取得
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
  // 設定画面のフォーム情報を取得
  const zipFormData = document.getElementById('checkvalue-field-zip');
  const telFormData = document.getElementById('checkvalue-field-tel');
  const faxFormData = document.getElementById('checkvalue-field-fax');
  const mailFormData = document.getElementById('checkvalue-field-mail');
  // プラグインの設定情報に値があればフォームに初期値として設定
  zipFormData.value = config.zip || '';
  telFormData.value = config.tel || '';
  faxFormData.value = config.fax || '';
  mailFormData.value = config.mail || '';
})(kintone.$PLUGIN_ID);
STEP3 キャンセルボタンの処理

[キャンセル]がクリックされたら、そのアプリのプラグインの一覧画面に遷移する処理を実装します。
アプリのプラグインの一覧画面のパスは/k/admin/app/APP_ID/plugin/です。
APP_IDはkintoneのアプリIDで、 kintone.app.getId() で取得できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

  // アプリID取得
  const appId = kintone.app.getId();

  // 「キャンセル」ボタン押下時にプラグイン一覧画面に遷移する
  const cancelButton = document.getElementById('cancel');
  cancelButton.addEventListener('click', () => {
    // プラグイン一覧画面に遷移する
    window.location.href = `/k/admin/app/${appId}/plugin/`;
  });
})(kintone.$PLUGIN_ID);
STEP4 保存ボタンの処理

保存ボタンがクリックされたら、フォームで入力された値に対して、次のチェックを行います。

  • 必須チェック
    未選択なフォームがあれば、入力を促すアラートメッセージを表示。
  • 重複チェック
    フォームに同じ値が入力された場合、入力の変更を促すアラートメッセージを表示。

また、クロスサイトスクリプティング（XSS）を防ぐためにescapeHtml()という関数を作成し、選択された値をエスケープします。

 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

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

  // エスケープ処理
  const escapeHtml = (htmlstr) => {
    return htmlstr
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
      .replace(/\n/g, '&#xA;');
  };

  // プラグインの設定情報を取得
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
  // 設定画面のフォーム情報を取得
  const zipFormData = document.getElementById('checkvalue-field-zip');
  const telFormData = document.getElementById('checkvalue-field-tel');
  const faxFormData = document.getElementById('checkvalue-field-fax');
  const mailFormData = document.getElementById('checkvalue-field-mail');
  // プラグインの設定情報に値があればフォームに初期値として設定
  zipFormData.value = config.zip || '';
  telFormData.value = config.tel || '';
  faxFormData.value = config.fax || '';
  mailFormData.value = config.mail || '';

  // アプリID取得
  const appId = kintone.app.getId();

  // 「保存する」ボタン押下時に入力情報を設定する
  const saveButton = document.getElementById('submit');
  saveButton.addEventListener('click', () => {
    const zip = escapeHtml(zipFormData.value);
    const tel = escapeHtml(telFormData.value);
    const fax = escapeHtml(faxFormData.value);
    const mail = escapeHtml(mailFormData.value);
    // 必須チェック
    if (zip === '' || tel === '' || fax === '' || mail === '') {
      alert('必須項目が入力されていません');
      return;
    }
    // 重複チェック
    if (new Set([zip, tel, fax, mail]).size < 4) {
      alert('選択肢が重複しています');
      return;
    }
  });
  // 「キャンセル」ボタン押下時にプラグイン一覧画面に遷移する
  const cancelButton = document.getElementById('cancel');
  cancelButton.addEventListener('click', () => {
    // プラグイン一覧画面に遷移する
    window.location.href = `/k/admin/app/${appId}/plugin/`;
  });
})(kintone.$PLUGIN_ID);
STEP5 プラグインの設定情報の保存

チェックに問題がなければ、プラグインの設定情報を保存します。
kintone.plugin.app.setConfig(config, successCallback) で、入力された情報をプラグインの設定情報に保存できます。

configは保存するプラグインの設定情報で、今回はnewConfigというオブジェクトを指定します。

また、第2引数のsuccessCallbackに、設定の保存が完了したあとに実行したい処理を記載できます。
設定の保存が完了したあとに実行したい処理は、「アプリの設定画面に遷移する」処理です。
アプリの設定画面のパスは/k/admin/app/flow?app=APP_IDです。

1
2
3
4
5
6

// プラグインの設定を保存
const newConfig = {zip, tel, fax, mail};
kintone.plugin.app.setConfig(newConfig, () => {
  // アプリの設定画面に遷移する
  window.location.href = `/k/admin/app/flow?app=${appId}`;
});

これで、設定画面の動作部分の作成が完了です。
最終的なソースコードは次のとおりです。

 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

/*
 * checkvalue Plug-in
 * Copyright (c) 2026 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
((PLUGIN_ID) => {
  'use strict';

  // エスケープ処理
  const escapeHtml = (htmlstr) => {
    return htmlstr
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
      .replace(/\n/g, '&#xA;');
  };

  // 設定画面のフォーム情報を取得
  const zipFormData = document.getElementById('checkvalue-field-zip');
  const telFormData = document.getElementById('checkvalue-field-tel');
  const faxFormData = document.getElementById('checkvalue-field-fax');
  const mailFormData = document.getElementById('checkvalue-field-mail');

  // プラグインの設定情報を取得
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);

  // プラグインの設定情報に値があればフォームに初期値として設定
  zipFormData.value = config.zip || '';
  telFormData.value = config.tel || '';
  faxFormData.value = config.fax || '';
  mailFormData.value = config.mail || '';

  // アプリID取得
  const appId = kintone.app.getId();

  // 「保存する」ボタン押下時に入力情報を設定する
  const saveButton = document.getElementById('submit');
  saveButton.addEventListener('click', () => {
    const zip = escapeHtml(zipFormData.value);
    const tel = escapeHtml(telFormData.value);
    const fax = escapeHtml(faxFormData.value);
    const mail = escapeHtml(mailFormData.value);
    // 必須チェック
    if (zip === '' || tel === '' || fax === '' || mail === '') {
      alert('必須項目が入力されていません');
      return;
    }
    // 重複チェック
    if (new Set([zip, tel, fax, mail]).size < 4) {
      alert('選択肢が重複しています');
      return;
    }
    // プラグインの設定を保存
    const newConfig = {zip, tel, fax, mail};
    kintone.plugin.app.setConfig(newConfig, () => {
      // アプリの設定画面に遷移する
      window.location.href = `/k/admin/app/flow?app=${appId}`;
    });
  });

  // 「キャンセル」ボタン押下時にプラグイン一覧画面に遷移する
  const cancelButton = document.getElementById('cancel');
  cancelButton.addEventListener('click', () => {
    // プラグイン一覧画面に遷移する
    window.location.href = `/k/admin/app/${appId}/plugin/`;
  });
})(kintone.$PLUGIN_ID);

カスタマイズファイルの編集

固定リンクがコピーされました

前回の章で作成した、 カスタマイズファイル の「desktop.js」でも、入力値をチェックするフィールドコードを、プラグインの設定情報から使うように変更しましょう。
まずは、前回作成した「desktop.js」のコードで、「js」ディレクトリの下の「desktop.js」内のコードを上書きしてください。

プラグインの設定情報の取得には、設定画面で作成した時と同じkintone.plugin.app.getConfig()を使います。
プラグインのIDが格納されたkintone.$PLUGIN_IDを即時実行関数の引数で受け取って利用します。

取得したプラグインの設定情報をconfigに代入し、configの値を使ってフィールドコードを設定するように変更します。
これでフィールドコードをハードコードせずに、プラグインの設定で保存したフィールドコードを利用できるようになりました。

  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

/*
 * checkvalue Plug-in
 * Copyright (c) 2026 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
((PLUGIN_ID) => {
  'use strict';

  // プラグインの設定情報を取得する
  const config = kintone.plugin.app.getConfig(PLUGIN_ID) || {};

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

  // 郵便番号のフィールドコード
  const zipFieldCode = config.zip;
  // TELのフィールドコード
  const telFieldCode = config.tel;
  // FAXのフィールドコード
  const faxFieldCode = config.fax;
  // メールアドレスのフィールドコード
  const mailFieldCode = config.mail;

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

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

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

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

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

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

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

  // 変更イベント(メールアドレス)
  kintone.events.on([
    'app.record.create.change.' + mailFieldCode,
    'app.record.edit.change.' + mailFieldCode,
    'app.record.index.edit.change.' + mailFieldCode
  ], (event) => {
    validateMail(event);
    return event;
  });

  // 追加・更新イベント
  kintone.events.on([
    'app.record.create.submit',
    'app.record.edit.submit',
    'app.record.index.edit.submit'
  ], (event) => {
    validateZip(event);
    validateTel(event);
    validateFax(event);
    validateMail(event);
    return event;
  });

})(kintone.$PLUGIN_ID);

プラグインをバージョンアップ

固定リンクがコピーされました

設定画面を作成したので、再度パッケージを行い、プラグインをバージョンアップしてみましょう。

manifest.jsonの編集

固定リンクがコピーされました

設定画面のための設定を「manifest.json」に追加していきます。

設定画面を作るために必要なファイルのパスは、configというキーをもつプロパティに追記します。

config.required_paramsというキーには、必須入力にした設定情報のキー名を指定します。
指定しておくと、次のように必須の項目が保存されていない場合に、アプリのプラグイン一覧画面で「必須項目が設定されていません」というメッセージを表示できます。

今回はプラグインの設定情報のキー名をzip tel fax mailと指定します。

また、プラグインをアップデートしたことを示すため、versionを加算します。

 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

{
  "manifest_version": 1,
  "version": "1.1.0",
  "type": "APP",
  "name": {
    "ja": "入力値チェックプラグイン",
    "en": "Input value check plug-in"
  },
  "description": {
    "ja": "郵便番号、電話番号、FAX番号、メールアドレスの入力値をチェックするプラグインです。",
    "en": "This plugin checks zip code, telephone number, FAX number, e-mail address"
  },
  "icon": "image/icon.png",
  "homepage_url": {
    "ja": "https://cybozu.dev/ja/tutorials/hello-kinplugin/",
    "en": "https://cybozu.dev/ja/tutorials/hello-kinplugin/"
  },
  "desktop": {
    "js": [
      "js/desktop.js"
    ]
  },
  "config": {
    "html": "html/config.html",
    "js": [
      "js/config.js"
    ],
    "css": [
      "css/51-modern-default.css",
      "css/config.css"
    ],
    "required_params": ["zip", "tel", "fax", "mail"]
  }
}

最終的なディレクトリ構成

固定リンクがコピーされました

次のディレクトリ構成になっていることを確認してください。
その他のファイルについては省略しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

sample-plugin
├── css
│   ├── 51-modern-default.css
│   └── config.css
├── html
│   └── config.html
├── image
│   └── icon.png
├── js
│   ├── config.js
│   └── desktop.js
└── manifest.json

再パッケージング / アップロード

固定リンクがコピーされました

前回の プラグインファイルの生成 で入手した秘密鍵ファイルを使って、プラグインを再パッケージングします。
再パッケージする場合は--private-keyオプションに秘密鍵ファイルを指定します。
同じプラグインとして認識されるため、kintoneへ追加するときにプラグインを上書きできます。

1

cli-kintone plugin pack --input sample_plugin/manifest.json --private-key private.ppk

アップロード方法も、前回の kintoneにプラグインファイルを追加する と同様にplugin uploadコマンドを使用します。
正常にアップロードされた場合は、kintoneシステム管理のプラグインの画面で、「manifest.json」で加算したバージョンに書き換わっていることを確認できます。

設定画面の動作確認

固定リンクがコピーされました

アプリのアプリ設定画面から、[プラグイン]をクリックします。
今回プラグインに設定画面を追加したので、プラグインには歯車の形をした設定ボタンが表示されています。

歯車の形をしたボタンをクリックすると、設定画面が表示されます。

アプリで設定されているフィールドコードを確認します。
今回利用している 顧客リスト (External link) アプリの場合は、次のとおりです。

フィールド名 フィールドコード
郵便番号（数字のみ） 郵便番号
TEL（数字のみ） TEL
FAX（数字のみ） FAX
メールアドレス メールアドレス

設定画面で入力をチェックしたいフィールドコードを入力し、次の動作に問題がないか確認してみましょう。

  • [キャンセル]をクリックすると、アプリのプラグインの一覧画面に遷移する。
  • 値を入力せずに[保存する]をクリックすると、アラートメッセージが表示される。
  • 重複した値を設定して[保存する]をクリックすると、アラートメッセージが表示される。
  • すべての値を入力して[保存する]をクリックすると、アプリの設定画面に遷移する。
  • 保存後もう一度設定画面を開くと、先ほど設定した値が、フォームに初期値として設定されている。

アプリの動作確認

固定リンクがコピーされました

アプリを開き、設定画面で指定したフィールドに、前回と同様な入力チェック機能が動作しているか確認してみましょう。

tips
補足

より洗練されたUIコンポーネントを使うには

今回作成した設定画面では51-modern-defaultスタイルシートを活用しましたが、さらに洗練されたUIコンポーネントを実装したい場合は、kintone UI Component v1の利用を検討してみてください。

kintone UI Component v1は、kintoneライクなUIパーツを簡単に作ることができるライブラリです。
ボタン、テキストボックス、ドロップダウンなど、kintone標準のUIを忠実に再現したコンポーネントが利用でき、今回作ったような設定画面をより使いやすく美しいものにできます。

詳しくは kintone UI Component v1のページ を確認してください。

まとめ

固定リンクがコピーされました

今回は、アプリの管理者が入力値をチェックしたいフィールドコードを設定画面から任意に入力する方法を学びました。
次回は、 フィールド情報を使った設定画面を作成してみよう でアプリのフィールド情報を使った設定画面を実装する方法を学びます。

information

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