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

はじめようkintoneプラグイン

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

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

更新日：2025年05月21日

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

）

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

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

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

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

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

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

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

フィールド情報を使った設定画面を作成するために、修正が必要なファイルは、次の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 REST API Clientを利用します。

kintone REST API Clientとは

kintone REST API Clientは、kintone REST APIを利用するためのライブラリです。
詳細は、 kintone REST API Clientを使って、kintone REST APIを実行してみようを参照してください。

kintone REST API Clientを使ってドロップダウンリストを作成

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

まずは、option要素を生成するcreateOptions関数を定義します。
関数内でKintoneRestAPIClientクラスを使い、kintone REST APIを操作するためのclient（接続用インスタンス）を作成します。
次に、client.app.getFormFields() を使って、指定したアプリのフィールド設定情報を取得し、その中からフィールドコードやフィールド名などを取り出します。

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


// セレクトボックスの項目を作成
const createOptions = async () => {
  let options = [];
  const client = new KintoneRestAPIClient();
  const appId = kintone.app.getId();
  const {properties} = await client.app.getFormFields({app: appId});
  // フィールド型が「文字列（１行）」「数値」のフィールド情報を取得
  const fields = Object.values(properties).filter(
    (field) => field.type === 'SINGLE_LINE_TEXT' || field.type === '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
100
101
102
103


/*
 * 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 client = new KintoneRestAPIClient();
    const appId = kintone.app.getId();
    const {properties} = await client.app.getFormFields({app: appId});
    // フィールド型が「文字列（１行）」「数値」のフィールド情報を取得
    const fields = Object.values(properties).filter((field) => {
      return field.type === 'SINGLE_LINE_TEXT' || field.type === '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の編集

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

本章ではプラグインをアップデートしたことを示すため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": [
      "https://js.cybozu.com/kintone-rest-api-client/5.7.1/KintoneRestAPIClient.min.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

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

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

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

動作確認

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

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

まとめ

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

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

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

チュートリアル

はじめようkintoneプラグイン

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

目次

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

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

設定画面用HTMLの修正

設定画面用JavaScriptの修正

kintone REST API Clientとは

kintone REST API Clientを使ってドロップダウンリストを作成

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

manifest.jsonの編集

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

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

動作確認

まとめ