SDK&Tools

kintone-config-helper

目次

kintone-config-helperとは

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

kintone-config-helperは、kintoneアプリのフィールド情報やレイアウト情報をカンタンに取得できるライブラリです。
kintone-config-helperを使うと、指定したフィールドタイプに一致するフィールド情報やレイアウト情報を、1回で取得できます。

たとえば、kintoneプラグインの設定画面で、設定項目に日付型のフィールドの一覧を表示するとします。

表示するためには、フィールドを取得するAPIを使って、フィールドの一覧を取得し、フィールドタイプが日付型のフィールドに絞り込む必要があります。
フィールドを取得するAPI
またレイアウト情報も同時に必要な場合には、フォームのレイアウトを取得するAPIも実行する必要があります。
フォームのレイアウトを取得するAPI

GitHub

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

https://github.com/kintone-labs/config-helper/ (External link)

ライセンス

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

MITライセンス (External link)

ドキュメント

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

https://github.com/kintone-labs/config-helper/blob/master/README.md (External link)

Quickstart

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

Step1：kintoneアプリの作成

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

日付フィールドを3つ追加し、kintoneアプリを作成します。
フィールド名は、それぞれ「日付1」「日付2」「日付3」に変更してください。

Step2：プラグインのひな型の作成

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

次のcreate-pluginの記事を参考に、プラグインのひな型を作成します。
create-plugin 

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

create-kintone-plugin config_helper_sample_project

kintoneプラグインのプロジェクトを作成するために、いくつかの質問に答えてください :)
では、はじめましょう！

? プラグインの英語名を入力してください [1-64文字] config_helper_sample
? プラグインの説明を入力してください [1-200文字] config_helper_sample
? 日本語をサポートしますか？ Yes
? プラグインの日本語名を入力してください [1-64文字] (省略可)
? プラグインの日本語の説明を入力してください [1-200文字] (省略可)
? 中国語をサポートしますか？ No
? プラグインの英語のWebサイトURLを入力してください (省略可)
? プラグインの日本語のWebサイトURLを入力してください (省略可)
? モバイルページをサポートしますか？ No
? @kintone/plugin-uploaderを使いますか？ No

Step3：設定画面のカスタマイズファイルの修正

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

プラグインの設定画面で、kintone-config-helperを使うように、プラグイン設定画面用のHTMLとJavaScriptファイルを書き換えます。

  1. src/js/config.jsの内容を、次の内容に置き換えます。

     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

    (async (PLUGIN_ID) => {
  'use strict';
  const buildDropDownForDate = async () => {
    const dropdown = document.createElement('select');
    dropdown.id = 'message';
    // kintone-config-helperを使って日付型のフィールドを取得する
    const dateFields = await KintoneConfigHelper.getFields('DATE');
    dateFields.forEach((dataField) => {
      const option = document.createElement('option');
      option.value = dataField.code;
      option.textContent = dataField.label;
      dropdown.appendChild(option);
    });
    return dropdown;
  };
  try {
    const form = document.getElementById('js-submit-setting');
    const cancelButton = document.getElementById('js-cancel-button');
    const fields = document.getElementById('js-select-fields');
    // ドロップダウンフィールドを作る
    const dropdown = await buildDropDownForDate();
    fields.appendChild(dropdown);
    const config = kintone.plugin.app.getConfig(PLUGIN_ID);
    if (config.message) {
      dropdown.value = config.message;
    }
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      kintone.plugin.app.setConfig({message: dropdown.value}, () => {
        window.alert(
          'プラグイン設定を保存しました。アプリを更新してください。'
        );
        window.location.href = `/k/admin/app/${kintone.app.getId()}/plugin/`;
      });
    });
    cancelButton.addEventListener('click', () => {
      window.location.href = `/k/admin/app/${kintone.app.getId()}/plugin/`;
    });
  } catch (err) {
    window.alert(err);
  }
})(kintone.$PLUGIN_ID);

  2. src/html/config.htmlの内容を次の内容に置き換えます。

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

    <section class="settings">
  <h2 class="settings-heading">kintone-config-helperサンプル</h2>
  <p class="kintoneplugin-desc">kintone-config-helperは、kintoneアプリのフィールド情報やレイアウト情報をカンタンに取得できるライブラリです。</p>
  <form id="js-submit-setting">
    <div class="kintoneplugin-row">
      <label for="fields" class="kintoneplugin-title" style="display: block;">日付型フィールド</label>
      <div class="kintoneplugin-select-outer">
        <div id="js-select-fields" class="kintoneplugin-select"></div>
      </div>
    </div>
    <div class="kintoneplugin-row">
      <button type="button" id="js-cancel-button" class="kintoneplugin-button-dialog-cancel">キャンセル</button>
      <button class="kintoneplugin-button-dialog-ok">保存</button>
    </div>
  </form>
</section>

Step4：kintone-config-helper.jsのダウンロードと配置

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

GitHubから次のkintone-config-helper.jsをダウンロードします。
kintone-config-helper.js (External link)
ダウンロードしたkintone-config-helper.jsを、「src」内の「js」ディレクトリの下に配置します。

1
2
3
4
5
6
7
8
9

config_helper_sample_project
  ├── 省略
  └── src
      ├── 省略
      ├── js
      │   ├── config.js
      │   ├── desktop.js
      │   └── kintone-config-helper.js
      └── manifest.json

Step5：マニフェストファイルの修正

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

プラグインでkintone-config-helper.jsを読み込むように設定します。
manifest.jsonのconfig.jsプロパティで、js/config.jsの上に、js/kintone-config-helper.jsを追加します。

1
2
3
4
5
6

  "config": {
    "html": "html/config.html",
    "js": [
      "js/kintone-config-helper.js",
      "js/config.js"
    ],

Step6：プラグインのパッケージング

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

plugin-packerの記事を参考に、プラグインをパッケージングします。
plugin-packer 

1
2

cd config_helper_sample_project
kintone-plugin-packer src

Step7：プラグインの適用

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

プラグインファイルをkintoneへ追加し、作成したアプリにプラグインを適用します。
手順は、次のページを参照してください。

Step8：動作確認

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

  1. アプリの設定で、追加したプラグインの設定画面を開きます。

  2. プルダウンメニューに「日付1」「日付2」「日付3」と表示されていることを確認します。

information

この記事で紹介しているサンプルコードは、@kintone/create-plugin v8.0.0と2024年1月版kintoneで動作を確認しています。