前回は、プラグインの設定画面を作成する方法を学びました。
今回は、フィールド情報を使った設定画面を作成してみましょう。
作成する設定画面について
固定リンクがコピーされました
プラグインの設定画面を作成してみようでは、入力値をチェックしたいフィールドコードを、テキストボックスに入力していました。
そのため、別のアプリでも入力値をチェックしたい場合、アプリの管理者が「アプリのフィールドコードを確認して入力する」という手間が発生してしまいます。
本章では、この手間を省くために前章で作成したプラグインを修正します。
具体的には、アプリのフィールド情報を利用して、設定画面のドロップダウンリストを生成するように変更します。
利用できるフィールドコードがドロップダウンリストに表示されることで、アプリ管理者にとって利用しやすいプラグインになります。
次のような設定画面を作ります。
フィールド情報を使った設定画面の作成
固定リンクがコピーされました
フィールド情報を使った設定画面を作成するために、修正が必要なファイルは、次の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 = [];
// フィールド型が「文字列(1行)」「数値」のフィールド情報を取得
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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/\n/g, '
');
};
// セレクトボックスの項目を作成
const createOptions = async () => {
let options = [];
// フィールド型が「文字列(1行)」「数値」のフィールド情報を取得
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プラグインを作成してみようでは、プラグインで秘匿情報を扱う方法を学びます。