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

はじめようkintoneプラグイン

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

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

更新日：2024年05月01日

著者名：hato（サイボウズ株式会社

）

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

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

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

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

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

設定画面の作成

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

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

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

ひとつずつファイルを作成しながら、プラグインの設定画面を作る際のポイントを確認していきましょう。

設定画面用HTML

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

設定画面のHTMLを配置するため、「sample-plugin」の下に、「html」ディレクトリを作成します。

1
2
3
4
5


sample-plugin
 ├── html <=== 作成するディレクトリ
 ├── image
 ├── js
 └── manifest.json

次に、入力値をチェックしたいフィールドコードを、テキストボックスで入力できるようにHTMLファイルを作成します。
ファイル名は「config.html」とし、「html」ディレクトリの下に保存します。

設定画面用HTMLファイルにはbody内の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) 2024 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">
    </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">
    </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">
    </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">
    </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を配置するため、「sample-plugin」の下に「css」ディレクトリを作成します。

1
2
3
4
5
6


sample-plugin
 ├── css <=== 作成するディレクトリ
 ├── html
 ├── image
 ├── js
 └── manifest.json

次に、設定画面を装飾するために2つのCSSを準備します。

51-modern-default.css
ファイルをダウンロードする方法は、 51-modern-default.cssのダウンロードを参照してください。
独自に実装するCSS
1 2 3

.setting { padding: 0 0 20px 0; }
ファイル名を「config.css」として保存します。
「config.css」ではdiv要素の余白を調整します。

「51-modern-default.css」と「config.css」を「css」ディレクトリの下に保存します。

設定画面用JavaScript

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

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

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

ファイル名を「config.js」とし、「js」ディレクトリの下に保存します。

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) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(async (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」でも、入力値をチェックするフィールドコードを、プラグインの設定情報から使うように変更しましょう。

プラグインの設定情報の取得には、設定画面で作成した時と同じ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) 2024 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/check.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
│   └── check.png
├── js
│   ├── config.js
│   └── desktop.js
└── manifest.json

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

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

前回のプラグインファイルの生成で入手した秘密鍵ファイルを使って、プラグインを再パッケージングします。

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

1

kintone-plugin-packer sample-plugin --ppk 秘密鍵ファイル.ppk

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

設定画面の動作確認

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

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

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

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

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

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

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

アプリの動作確認

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

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

まとめ

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

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

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

チュートリアル

はじめようkintoneプラグイン

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

目次

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

設定画面の作成

設定画面用HTML

設定画面用CSS

設定画面用JavaScript

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

STEP2 取得した設定情報をフォームに表示

STEP3 キャンセルボタンの処理

STEP4 保存ボタンの処理

STEP5 プラグインの設定情報の保存

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

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

manifest.jsonの編集

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

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

設定画面の動作確認

アプリの動作確認

まとめ