kintone-config-helper

Step1：kintoneアプリの作成
Step2：プラグインのひな型の作成
Step3：設定画面のカスタマイズファイルの修正
Step4：kintone-config-helper.js のダウンロードと配置
Step5：マニフェストファイルの修正
Step6：プラグインのパッケージング
Step7：プラグインの適用
Step8：動作確認

kintone-config-helper とは

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

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

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

Quickstart

Step1：kintoneアプリの作成

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

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

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 ファイルを書き換えます。

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);

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 を、「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
7


  "config": {
    "html": "html/config.html",
    "js": [
      "https://js.cybozu.com/jquery/3.3.1/jquery.min.js",
      "js/kintone-config-helper.js",
      "js/config.js"
    ],

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

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

1
2


cd config_helper_sample_project
kintone-plugin-packer src

Step7：プラグインの適用

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

Step8：動作確認

アプリの設定で、追加したプラグインの設定画面を開きます。
プルダウンメニューに「日付 1」「日付 2」「日付 3」と表示されていることを確認します。

この記事で紹介しているサンプルコードは、2022 年 5 月版 kintone で動作を確認しています。

SDK & Tools