kintoneのJavaScriptカスタマイズ開発においては、モジュール化によるファイル数の増加やさまざまなライブラリの使用に伴い、それらをバンドルするツールとしてwebpackが主に使用されてきました。
Vite
が人気を博しているようです。
Vite をバンドルツールとして使うメリット
固定リンクがコピーされました
モジュール化されたJSコードをバンドルするツールとしては、
webpack
、
Rollup
、
Parcel
などがよく使われています。
この記事で紹介するVite
では、開発用のサーバーの起動速度が高速化されています。
kintone カスタマイズに Vite を利用してみる
固定リンクがコピーされました
JavaScriptのビルドツール（バンドラー）は、次の記事で紹介したように、JavaScriptをブラウザーで動かすために必要なライブラリをバンドルしたり、プログラミング言語を変換したりできるツールです。
webpackとBabel、Polyfillを導入してkintoneカスタマイズを効率化する
今回はkintoneのアプリストアから物品購入申請アプリを利用してカスタマイズを行います。
kintone アプリの作成
固定リンクがコピーされました
kintoneアプリストアから「調達・購買」の業務カテゴリーを選択します。
kintone アプリの設定
固定リンクがコピーされました
アプリの設定のフォームタブより以下のフィールドを追加・変更します。
フィールド名
フィールドタイプ
フィールドコード
備考
申請番号
文字列（１行）
purchase_request_no
フィールドを追加
日付
日付
date
フィールドを追加
購入の目的
文字列（複数行）
purpose
フィールドコードを変更
備考
文字列（複数行）
note
フィールドコードを変更
カスタムプロジェクトの作成
固定リンクがコピーされました
以下のコマンドでJSのカスタムプロジェクトを作成します。
1
2
3
mkdir vite-kintone-sample
cd vite-kintone-sample
npm init -y
カスタムコードの作成
固定リンクがコピーされました
上記で作成した物品購入アプリにおいて、次のカスタマイズファイルを作成します。
レコード追加時に「申請番号」を自動採番するカスタマイズファイル
「購入の目的」、「備考」欄の入力文字を制限するカスタマイズファイル
srcディレクトリを以下のコマンドで作成します。
以下のコードを「vite-kintone.js」としてsrcディレクトリ内に保存します。
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
/*
* Vite introduction sample program
* Copyright (c) 2024 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/
import {autoNum, charLimit} from './common' ;
(() => {
'use strict' ;
// 追加・編集画面表示後イベント
'app.record.edit.show' , 'app.record.create.show' , 'app.record.index.edit.show' ], (event) => {
const record = event.record;
// PR # を編集不可にする
true ;
return event;
});
// 追加・編集画面保存時のイベント
'app.record.create.submit' , 'app.record.edit.submit' , 'app.record.index.edit.submit' ], (event) => {
const record = event.record;
// 購入目的のテキストの値を取得
const purpose = record.purpose.value;
const minPurpose = 0 ; // 最小文字数の初期値
const maxPurpose = 256 ; // 最大文字数の初期値
if (purpose !== undefined ) {
if (!charLimit(purpose, minPurpose, maxPurpose)) {
record.purpose.error = `文字数は ${ minPurpose} から ${ maxPurpose} の範囲内で入力してください` ;
}
}
// 備考のテキストの値を取得
const note = record.note.value;
const minNote = 0 ;
const maxNote = 128 ;
if (note !== undefined ) {
if (!charLimit(note, minNote, maxNote)) {
record.note.error = `文字数は ${ minNote} から ${ maxNote} の範囲内で入力してください` ;
}
}
return event;
});
// 追加画面で保存に成功した後のイベント
'app.record.create.submit.success' ], async (event) => {
const record = event.record;
// 購入申請番号の自動採番
const prefix = 'PR' ;
const prDate = record.date.value;
const record_id = record.$id.value;
const autono = autoNum(prefix, prDate, record_id);
const param = {
app: kintone.app.getId(),
id: record_id,
record: {
purchase_request_no: {
value: autono
},
}
};
await kintone.api(kintone.api.url('/k/v1/record.json' , true ), 'PUT' , param);
return event;
});
})();
また、以下のコードを「common.js」としてsrcディレクトリ内に保存します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
* Vite introduction sample program
* Copyright (c) 2024 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/
/**
* 自動採番の共通関数
*/
export const autoNum = (prefix, date, uniqueid) => {
return prefix + '-' + date + '-' + uniqueid; // 自動採番の文字列を返す
/**
* 文字数制限の共通関数
*/
export const charLimit = (text, min, max) => {
const textNoSpace = text.replace(/\s+/g , '' ); // 空白文字を削除
const charCount = textNoSpace.length; // 文字数の取得
return charCount >= min && charCount <= max; // 文字数がminとmaxの範囲内にあるかチェックした結果を返す
Vite のインストール
固定リンクがコピーされました
以下のコマンドでViteをインストールします。
Vite によるビルド
固定リンクがコピーされました
次にプロジェクトのルートディレクトリに「vite.config.js」ファイルを作成し以下の内容で保存します。
1
2
3
4
5
6
7
8
9
10
11
12
export default {
build: {
rollupOptions: {
input: 'src/vite-kintone.js' , // 「vite-kintone.js」 を起点にビルドする
format: 'iife' , // 即時実行関数
'dist' , // 「dist」ディレクトリの下にビルド後のファイルを生成する
'bundle.js' // 「bundle.js」というファイルが生成される
}
},
};
また「package.json」を以下のように書き換えます。
1
2
3
"scripts" : {
"build": "vite build"
},
以下のコマンドを実行して、カスタマイズファイルをビルドします。
実行後「dist」フォルダーの下に「bundle.js」というファイルが生成されます。
カスタムファイルの自動アップロード
固定リンクがコピーされました
次のコマンドで
kintone-customize-uploader
をインストールします。
1
npm install -D @kintone/customize-uploader
次のコマンドを実行するとkintone-customize-uploaderの設定ファイル「customize-manifest.json」が生成されます。
1
2
3
4
5
npx kintone-customize-uploader init --dest-dir .
? アプリIDを入力してください: 158
? カスタマイズの適用範囲を選択してください: (Use arrow keys)
❯ ALL
「customize-manifest.json」ファイルを次のようにViteでビルドした「dist/bundle.js」をアップロードするように編集します。
1
2
3
4
"desktop" : {
"js": ["dist/bundle.js" ],
"css": []
},
次に「package.json」に以下のようにアップロードコマンドを追加します。
1
2
3
4
"scripts" : {
"build": "vite build" ,
"upload": "kintone-customize-uploader customize-manifest.json"
},
以下のコマンドを実行してアップロードを実行します。
1
2
3
4
5
6
7
8
npm run upload
> vite-kintone-sample@1.0.0 upload
> kintone-customize-uploader customize-manifest.json
? kintoneのベースURLを入力してください (https://example.cybozu.com): https://example.cybozu.com
? ログイン名を入力してください: username
? パスワードを入力してください: [hidden]
アプリの設定でファイルがアップロードされていることを確認します。
レコードを追加して動作を確認します。
「購入の目的」欄と「備考」欄で文字数制限を超過すると保存時に文字数制限のエラーメッセージが表示されます。
また、保存成功後には申請番号が自動生成されます。
今回は昨今人気のあるバンドルツールのViteをkintoneのカスタムマイズに導入してみました。
が人気を博しているようです。