kintone API

開発ノウハウ

戻る

kintoneのカスタマイズにViteを使ってみよう

著者名：Mamoru Fujinoki（ Fuji Business Software Inc. (External link) ）

目次

はじめに

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

kintoneのJavaScriptカスタマイズ開発においては、モジュール化によるファイル数の増加やさまざまなライブラリの使用に伴い、それらをバンドルするツールとしてwebpackが主に使用されてきました。
昨今では、高速かつ効率的なJavaScriptのバンドルツールの Vite (External link) が人気を博しているようです。
今回は、kintoneのカスタム開発にViteを導入してみたいと思います。

Vite をバンドルツールとして使うメリット

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

モジュール化されたJSコードをバンドルするツールとしては、 webpack (External link) 、 Rollup (External link) 、 Parcel (External link) などがよく使われています。
しかしながら、コードの複雑化によってビルドするモジュールが大量になると、速度が落ちどうしても開発のパフォーマンスに影響が出てしまいます。

この記事で紹介するVite *1 では、開発用のサーバーの起動速度が高速化されています。
これは、コードの依存関係を事前にバンドルすることによって実現されています。
さらに、ブラウザーへのソースコードの提供をオンデマンドで行っており、現画面で必要なコードのみが処理されるしくみになっています。
また、コードを編集した際は、アプリケーションのサイズにかかわらず、ブラウザーへ即座に反映されることを可能としています。

*1 Viteに関する詳細は Vite ガイド (External link) を参照してください。 ^

kintone カスタマイズに Vite を利用してみる

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

JavaScriptのビルドツール（バンドラー）は、次の記事で紹介したように、JavaScriptをブラウザーで動かすために必要なライブラリをバンドルしたり、プログラミング言語を変換したりできるツールです。
中でも、昨今はViteが注目されていて、VueやReactといったメジャーなフレームワークでもViteを使って開発できるようになっています。
Viteの設定はシンプルなことが特徴で、webpackと同じように複数ファイルのバンドルなどをしたい時に利用できますので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ディレクトリを以下のコマンドで作成します。

1

mkdir 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';

  // 追加・編集画面表示後イベント
  kintone.events.on(['app.record.edit.show', 'app.record.create.show', 'app.record.index.edit.show'], (event) => {
    const record = event.record;
    // PR # を編集不可にする
    record.purchase_request_no.disabled = true;
    return event;
  });

  // 追加・編集画面保存時のイベント
  kintone.events.on(['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;
  });

  // 追加画面で保存に成功した後のイベント
  kintone.events.on(['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をインストールします。

1

npm install -D 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」 を起点にビルドする
      output: {
        format: 'iife', // 即時実行関数
        dir: 'dist', // 「dist」ディレクトリの下にビルド後のファイルを生成する
        entryFileNames: 'bundle.js' // 「bundle.js」というファイルが生成される
      }
    }
  },
};

また「package.json」を以下のように書き換えます。

1
2
3

  "scripts": {
    "build": "vite build"
  },

以下のコマンドを実行して、カスタマイズファイルをビルドします。

1

npm run build

実行後「dist」フォルダーの下に「bundle.js」というファイルが生成されます。
このファイルを上記で作成した「物品購入申請」アプリに適用します。

カスタムファイルの自動アップロード

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

次のコマンドで kintone-customize-uploader (External link) をインストールします。

1

npm install -D @kintone/customize-uploader

次のコマンドを実行するとkintone-customize-uploaderの設定ファイル「customize-manifest.json」が生成されます。
アプリIDは、今回作成した「物品購入申請」アプリのアプリIDを入力してください。

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のカスタムマイズに導入してみました。
Viteを使用することで従来のwebpack等に比べ複雑なプログラムを高速ビルドできます。
また、ViteではVueやReactなどメジャーなフレームワークのプロジェクトの自動生成機能がサポートされています。
kintoneのカスタマイズでは複数のファイルやライブラリーをバンドルする際に利用できるのでぜひ試してみてください。

information

このTipsは、2024年4月版kintoneとVite v5.2.10で動作を確認しています。