警告
このページで説明している新方式は開発検討中の実験的な機能です。随時、機能の追加を予定しています。また今後、大きな仕様変更や機能自体を削除する可能性もあります。
アップデートオプション内の「開発中の新機能」から動作をお試しいただけます。
新機能の有効／無効の切り替え手順
を参照してください。
プラグインの新しい開発方式に関するフィードバックを、ユースケースとともに、
kintone の改善に協力する
フォームへぜひご登録ください。
新しい方式のプラグインをゼロから作成する
固定リンクがコピーされました
レコード一覧画面上に、次の機能をもつプラグインを作成してみましょう。
新しい方式のプラグインを作成する手順
固定リンクがコピーされました
プラグインを作成する手順は次のとおりです。
マニフェストファイル（manifest.json）を作成
プラグイン作成に必要なファイル（JavaScript, CSSファイルなど）を準備
cli-kintoneを利用して、プラグイン作成に必要なファイルをパッケージング
作成したプラグインファイルをkintone環境にインストール
マニフェストファイル（manifest.json）を作成
固定リンクがコピーされました
プラグイン作成に必要なファイルや設定をmanifest.jsonで定義します。
Copy
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
{
"manifest_version": 2 ,
"version": "1" ,
"type": "APP" ,
"components": [
{
"type": "APP_INDEX_HEADER_SPACE" ,
"js": ["js/index.js" ],
"css": ["css/index.css" ]
}
],
"allowed_hosts": ["https://example.com/" ],
"permissions": {
"js_api": ["kintone.app.getId" , "kintone.api" , "kintone.app.setFieldStyle" ],
"rest_api": ["/k/v1/records.json:get" ]
},
"icon": "image/icon.png" ,
"name": {
"ja": "新方式のプラグイン" ,
"en": "New Plugin"
},
"description": {
"ja": "レコード一覧画面上部にレコード一覧を取得して表示するボタンと、セルの色を変えるボタンを配置するプラグイン" ,
"en": "A plugin that places a button to get and display the record list at the top of the record list screen and a button to change the color of the cell."
}
}
プラグインを作成するため、manifest.jsonに次の項目の設定をします。
manifest_version: マニフェストのバージョン。新方式を利用する場合は2を指定version: プラグインのバージョンtype: プラグインの種類。今回はアプリに適用するためAPPを指定components: プラグインの実行環境の設定
type: 実行環境・表示領域。今回はプラグインで実行されたものをレコード一覧画面上部に表示するのでAPP_INDEX_HEADER_SPACEを指定js: 指定した実行環境で実行するJavaScriptファイルcss: 指定した実行環境に適用したいCSSファイル
allowed_hosts: プラグインで利用する外部通信先permissions: プラグインで利用するJavaScript APIやREST APIを指定icon: プラグインのアイコンname: プラグイン名
<locale>: 指定されたロケールのプラグインの名前
description: プラグインの説明
<locale>: 指定されたロケールのプラグインの説明
プラグイン作成に必要なファイル（JavaScript, CSSファイルなど）を準備
固定リンクがコピーされました
次にプラグインで利用するJavaScriptファイルやCSSファイル、アイコンファイルを準備します。
ディレクトリはmanifest.jsonで指定した形式に合わせて次のような構成で作成します。
1
2
3
4
5
6
7
8
9
.
└── src
├── css
│ └── index.css
├── image
│ └── icon.png
├── js
│ └── index.js
└── manifest.json
アイコンファイル
プラグイン一覧、プラグイン設定画面で表示されるアイコン画像を用意します。アイコンに利用できる画像の条件は次のとおりです。
png／jpg／gif／bmpのいずれか
サイズの上限値は20MB
任意の画像がない場合は、次のアイコンを使います。
JavaScriptファイル
プラグインで利用するJavaScriptファイルを作成します。
まず、次の機能に必要なHTML要素を生成するためのJavaScriptを定義します。
レコードの一覧情報を取得して表示
セルのスタイルを変更
レコードIDを入力するテキストボックス
フィールドコードを入力するテキストボックス
ボタン
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 必要な要素を生成する関数
function createUI() {
const html = `
<section class="section section-left">
<button class="button">レコードの一覧を取得する</button>
<div class="result"></div>
</section>
<section class="section section-right">
<input type="text" placeholder="レコードID" class="input">
<input type="text" placeholder="フィールドコード" class="input">
<button class="button">セルを赤色に変更する</button>
</section>
` ;
document .body.innerHTML = html;
}
次に、kintone JavaScript APIを使ってレコード一覧情報を取得する関数と、セルのスタイルを変更する関数を定義します。
1
2
3
4
5
6
7
8
9
10
11
12
13
// kintone.app.getIdとkintone.apiを使い、レコード一覧情報を取得する関数
async function getRecords() {
const appId = await kintone.app.getId();
const records = await kintone.api('/k/v1/records.json' , 'GET' , {
app: appId,
});
return JSON.parse(records);
}
// kintone.app.setFieldStyleを使い、セルのスタイルを変更する関数
async function changeCellStyle(recordId, fieldCode) {
await kintone.app.setFieldStyle(recordId, fieldCode, {backgroundColor: 'red' });
}
そして、ボタンクリック時のイベントハンドラーを追加します。
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
function addHandlers() {
// レコードの一覧を取得するボタン
const getRecordsBtn = document .querySelector('.section-left .button' );
getRecordsBtn.addEventListener('click' , async () => {
const records = await getRecords();
// 取得したレコード情報を整形して表示
const formattedJson = JSON.stringify(records, null , 2 )
.replace(/\n/g , '<br>' )
.replace(/ /g , ' ' );
const result = document .querySelector('.section-left .result' );
result.innerHTML = formattedJson;
});
// 指定したレコードID、フィールドコードのセルを赤色に変更するボタン
const changeCellStyleBtn = document .querySelector('.section-right .button' );
const recordIdInput = document .querySelector('.section-right .input:nth-of-type(1)' );
const fieldCodeInput = document .querySelector('.section-right .input:nth-of-type(2)' );
changeCellStyleBtn.addEventListener('click' , async () => {
const recordId = recordIdInput.value;
const fieldCode = fieldCodeInput.value;
if (recordId && fieldCode) {
await changeCellStyle(recordId, fieldCode);
}
});
}
最後に、これらの関数を呼び出すmain関数を定義し、実行します。
1
2
3
4
5
6
function main() {
createUI();
addHandlers();
}
main();
コードの全容は次のようになります。このコードをsrc/js/index.jsに保存します。
Copy
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
function createUI() {
const html = `
<section class="section section-left">
<button class="button">レコードの一覧を取得する</button>
<div class="result"></div>
</section>
<section class="section section-right">
<input type="text" placeholder="レコードID" class="input">
<input type="text" placeholder="フィールドコード" class="input">
<button class="button">セルを赤色に変更する</button>
</section>
` ;
document .body.innerHTML = html;
}
async function getRecords() {
const appId = await kintone.app.getId();
const records = await kintone.api('/k/v1/records.json' , 'GET' , {
app: appId,
});
return JSON.parse(records);
}
async function changeCellStyle(recordId, fieldCode) {
await kintone.app.setFieldStyle(recordId, fieldCode, {backgroundColor: 'red' });
}
function addHandlers() {
const getRecordsBtn = document .querySelector('.section-left .button' );
getRecordsBtn.addEventListener('click' , async () => {
const records = await getRecords();
const formattedJson = JSON.stringify(records, null , 2 )
.replace(/\n/g , '<br>' )
.replace(/ /g , ' ' );
const result = document .querySelector('.section-left .result' );
result.innerHTML = formattedJson;
});
const changeCellStyleBtn = document .querySelector('.section-right .button' );
const recordIdInput = document .querySelector('.section-right .input:nth-of-type(1)' );
const fieldCodeInput = document .querySelector('.section-right .input:nth-of-type(2)' );
changeCellStyleBtn.addEventListener('click' , async () => {
const recordId = recordIdInput.value;
const fieldCode = fieldCodeInput.value;
if (recordId && fieldCode) {
await changeCellStyle(recordId, fieldCode);
}
});
}
function main() {
createUI();
addHandlers();
}
main();
CSSファイル
JavaScriptファイルで生成した要素にスタイルを適用するCSSファイルを作成します。今回は次のコードをコピーしてsrc/css/index.cssに保存します。
Copy
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
body {
display : flex ;
gap: 20 px ;
background-color : #f6f5f2 ;
}
.section {
display : flex ;
flex-direction : column ;
flex-wrap : wrap ;
gap: 10 px ;
height : 300 px ;
}
.section-left {
width : 600 px ;
}
.section-right {
flex-direction : row ;
}
.result {
height : 200 px ;
overflow : scroll ;
border : #ccc 1 px solid ;
background-color : white ;
}
.button {
padding : 10 px ;
background-color : #f0f0f0 ;
border : 1 px solid #ccc ;
border-radius : 5 px ;
cursor : pointer ;
width : 200 px ;
height : 50 px ;
&:hover {
cursor : pointer ;
}
}
.message {
font-size : 20 px ;
color : #333 ;
margin : 0 ;
}
.input {
padding : 10 px ;
border : 1 px solid #ccc ;
border-radius : 5 px ;
width : 200 px ;
height : 50 px ;
}
cli-kintoneを利用して、プラグイン作成に必要なファイルをパッケージング
固定リンクがコピーされました
cli-kintoneを利用してプラグインに必要なファイルをパッケージングします。
cli-kintoneの詳細については次のリンクを参照してください。
https://cybozu.dev/ja/tutorials/hello-cli-kintone/introduction/
cli-kintoneのインストール
cli-kintoneのインストールについては、次のリンクを参照してください。
https://cli.kintone.dev/guide/installation/
cli-kintoneを使ってプラグインをパッケージング
まず、パッケージングしたいファイルをまとめたディレクトリより、ひとつ上のディレクトリに移動します。
たとえば、次のような構成の場合、workディレクトリに移動しましょう。
1
2
3
4
5
6
7
8
9
work
└── src
├── css
│ └── index.css
├── image
│ └── icon.png
├── js
│ └── index.js
└── manifest.json
次に、cli-kintoneのpackコマンドを使ってプラグインをパッケージングします。packコマンドについての詳細は次のリンクを参照してください。
https://cli.kintone.dev/guide/commands/plugin-pack/
1
cli-kintone plugin pack --input ./src
packコマンドを実行すると、パッケージングされたプラグインのzipファイルと秘密鍵ファイル（ppkファイル）が生成されます。
生成された秘密鍵ファイルのファイル名はプラグインIDになります。ccijopfhfihmnikhigaipibpanfogfldです。
1
2
3
4
5
6
7
8
9
10
11
work
├── ccijopfhfihmnikhigaipibpanfogfld.ppk
├── plugin.zip
└── src
├── css
│ └── index.css
├── image
│ └── icon.png
├── js
│ └── index.js
└── manifest.json
2回目以降のパッケージングでは--private-keyオプションを使って、初回に生成された秘密鍵ファイルを指定することで、同じプラグインIDでパッケージングできます。
1
cli-kintone plugin pack --input ./src --private-key ./ccijopfhfihmnikhigaipibpanfogfld.ppk
作成したプラグインファイルをkintone環境にインストールし、アプリに適用する
固定リンクがコピーされました
パッケージングしたプラグインファイルを次の手順でkintone環境にインストールし、アプリへ適用します。
開発中の新機能を有効化
kintone環境へプラグインをインストール
対象アプリにプラグインを適用
開発中の新機能を有効化
「kintoneシステム管理」から「アップデートオプション」に遷移します。開発中の新機能（APIラボ）の中から、「プラグインの新しい開発方式の試用を有効にする」を有効化することで、新しい開発方式のプラグインをkintone環境で試せます。
kintone環境へプラグインをインストール
kintoneシステム管理から「新方式のプラグイン」に遷移します。
新方式のプラグイン画面左上にある「プラグインを読み込む」ボタンをクリックします。
「プラグインを読み込むボタン」をクリックすると「プラグインの読み込み」ダイアログが表示されるので、「参照」ボタンからパッケージングしたプラグインのzipファイルを選択します。
プラグインが読み込まれると、manifest.jsonで宣言した操作や通信先を許可するかダイアログで確認されます。
「読み込む」ボタンをクリックすると、一覧画面に新しく「プラグインの新しい開発方式の動作確認用サンプルプラグイン」が追加されます。
対象アプリへプラグインを適用
対象アプリへのプラグインの適用は従来の方法と同様です。
を参照してください。