フィールド情報を使った設定画面を作成してみよう

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

更新日：2024年05月01日

）

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

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

プラグインの設定画面を作成してみようでは、入力値をチェックしたいフィールドコードを、テキストボックスに入力していました。
そのため、別のアプリでも入力値をチェックしたい場合、アプリの管理者が「アプリのフィールドコードを確認して入力する」という手間が発生してしまいます。

本章では、この手間を省くために前章で作成したプラグインを修正します。
具体的には、アプリのフィールド情報を利用して、設定画面のドロップダウンリストを生成するように変更します。
利用できるフィールドコードがドロップダウンリストに表示されることで、アプリ管理者にとって利用しやすいプラグインになります。

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

フィールド情報を使った設定画面の作成

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

フィールド情報を使った設定画面を作成するために、修正が必要なファイルは、次の2種類です。

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

設定画面用HTMLの修正

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

はじめに、設定画面用HTMLで作成した「config.html」を修正します。
「config.html」では、次のようにテキストボックスを作成していました。

1
2
3


<div class="kintoneplugin-input-outer">
  <input id="checkvalue-field-zip" class="kintoneplugin-input-text" type="text">
</div>

今回は、アプリのフィールド情報を利用して自動的にドロップダウンリストを生成するため、テキストボックスの箇所を削除しドロップダウンリストの枠組みを作成します。
修正後の「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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69


<!--
 * 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-select-outer">
      <div class="kintoneplugin-select">
        <select id="checkvalue-field-zip" name="checkvalue-field-zip">
          <option value="">-----</option>
        </select>
      </div>
    </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-select-outer">
      <div class="kintoneplugin-select">
        <select id="checkvalue-field-tel" name="checkvalue-field-tel">
          <option value="">-----</option>
        </select>
      </div>
    </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-select-outer">
      <div class="kintoneplugin-select">
        <select id="checkvalue-field-fax" name="checkvalue-field-fax">
          <option value="">-----</option>
        </select>
      </div>
    </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-select-outer">
      <div class="kintoneplugin-select">
        <select id="checkvalue-field-mail" name="checkvalue-field-mail">
          <option value="">-----</option>
        </select>
      </div>
    </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>

設定画面用JavaScriptの修正

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

次に、設定画面用JavaScriptで作成した「config.js」を修正します。
ここでは、アプリのフィールド情報を取得して、ドロップダウンリストを生成する処理を追加します。
アプリのフィールド情報を取得するには、kintone-config-helperを利用します。

kintone-config-helperとは

kintone-config-helperとは、kintoneアプリのフィールド情報やレイアウト情報を簡単に取得できるライブラリです。
kintone-config-helperを使うと、指定したフィールドタイプに一致するフィールド情報やレイアウト情報を、一度で取得できます。
詳細は kintone-config-helperを確認してください。

また、kintone-config-helperのファイルをダウンロードする方法は kintone-config-helper.jsのダウンロードと配置を参照してください。
ダウンロードした「kintone-config-helper.js」は「js」ディレクトリの下に配置します。

kintone-config-helperを使ってドロップダウンリストを作成

それでは、kintone-config-helperを使って、ドロップダウンリストを作成してみましょう。

まずは、option要素を生成するcreateOptions関数を定義します。
関数内で、KintoneConfigHelper.getFields()を使い、アプリのフィールドコードとフィールド名を取得します。

ここではoption要素に、取得したフィールドコードとフィールド名を設定しています。

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


// セレクトボックスの項目を作成
const createOptions = async () => {
  let options = [];
  // フィールド型が「文字列（１行）」「数値」のフィールド情報を取得
  const fields =
    await KintoneConfigHelper.getFields(['SINGLE_LINE_TEXT', 'NUMBER']);
  fields.forEach((field) => {
    const option = document.createElement('option');
    option.value = field.code;
    option.textContent = field.label;
    options = options.concat(option);
  });
  return options;
};

次に、作成したcreateOptions関数を使って、ドロップダウンリストを生成します。

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


// 設定画面のフォーム情報を取得
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 selectBoxOptions = await createOptions();
selectBoxOptions.forEach((originalOption) => {
  const zipSelectBoxOption = originalOption.cloneNode(true);
  zipFormData.appendChild(zipSelectBoxOption);
  const telSelectBoxOption = originalOption.cloneNode(true);
  telFormData.appendChild(telSelectBoxOption);
  const faxSelectBoxOption = originalOption.cloneNode(true);
  faxFormData.appendChild(faxSelectBoxOption);
  const mailSelectBoxOption = originalOption.cloneNode(true);
  mailFormData.appendChild(mailSelectBoxOption);
});

これで、フィールド情報を使った設定画面の作成が完了です。
最終的なソースコードは、次のとおりです。

 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


/*
 * 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 createOptions = async () => {
    let options = [];
    // フィールド型が「文字列（１行）」「数値」のフィールド情報を取得
    const fields =
      await KintoneConfigHelper.getFields(['SINGLE_LINE_TEXT', 'NUMBER']);
    fields.forEach((field) => {
      const option = document.createElement('option');
      option.value = field.code;
      option.textContent = field.label;
      options = options.concat(option);
    });
    return options;
  };

  // 設定画面のフォーム情報を取得
  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 selectBoxOptions = await createOptions();
  selectBoxOptions.forEach((originalOption) => {
    const zipSelectBoxOption = originalOption.cloneNode(true);
    zipFormData.appendChild(zipSelectBoxOption);
    const telSelectBoxOption = originalOption.cloneNode(true);
    telFormData.appendChild(telSelectBoxOption);
    const faxSelectBoxOption = originalOption.cloneNode(true);
    faxFormData.appendChild(faxSelectBoxOption);
    const mailSelectBoxOption = originalOption.cloneNode(true);
    mailFormData.appendChild(mailSelectBoxOption);
  });

  // プラグインの設定情報を取得
  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);

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

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

manifest.jsonの編集

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

本章では、新たに「kintone-config-helper.js」を利用したので、「manifest.json」のconfigにファイルのパスを追記します。

また、プラグインをアップデートしたことを示すため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
35


{
  "manifest_version": 1,
  "version": "1.2.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/kintone-config-helper.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
13


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

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

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

前章と同じ方法で、再パッケージングとアップロードを行います。
再パッケージング / アップロードを確認してください。

動作確認

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

入力値をチェックしたいフィールドを、ドロップダウンで選択して動作確認をしてみましょう。
確認内容は、前章を参考にしてください。

まとめ

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

今回は、フィールド情報を使った設定画面の作成方法を学びました。
次回の秘匿情報を扱うkintoneプラグインを作成してみようでは、プラグインで秘匿情報を扱う方法を学びます。

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

はじめようkintoneプラグイン