SDK & Tools

webpack-plugin-kintone-plugin

目次

webpack-plugin-kintone-plugin とは

webpack-plugin-kintone-plugin は、 webpack (External link) を使って kintone プラグインファイルを作成できる CLI ツールです。
webpack でファイルサイズを圧縮したり、サードパーティのライブラリをバンドルしたりできます。

npm パッケージとして提供されているため、Windows／macOS／Linux 環境で利用できます。

GitHub

https://github.com/kintone/js-sdk/tree/master/packages/webpack-plugin-kintone-plugin (External link)

ライセンス

MIT ライセンス (External link)

ドキュメント

https://github.com/kintone/js-sdk/blob/master/packages/webpack-plugin-kintone-plugin/README.md (External link)

下準備

webpack-plugin-kintone-plugin を実行するには、Node.js とパッケージ管理ツールの npm が必要です。
Node.js をインストールすると、npm は自動でインストールされます。

  1. Node.js 公式サイト (External link) からインストーラーをダウンロードします。
    必要な Node.js のバージョンは、リポジトリの packages/webpack-plugin-kintone-plugin/package.json (External link) にある engines プロパティを確認してください。
    たとえば、次の記載の場合、Node.js のバージョン 14 以上が必要です。

    1
2
3

    "engines": {
  "node": ">=14"
},

  2. ダウンロードしたインストーラーを実行し、画面にしたがってセットアップします。

Quickstart

webpack-plugin-kintone-plugin をプラグインファイルを作成する手順を説明します。

Step1：プラグインファイルの準備

プラグインにパッケージングする、プラグイン用のカスタマイズファイルを準備します。

この Quickstart では、 create-plugin の Quickstart で作成したテンプレートを使います。
自分でパッケージングするファイルを用意する場合には、 kintone プラグイン開発手順 の「プラグイン作成に必要なファイルの準備」で案内しているファイル構成にしたがって、ファイルを準備してください。

create-plugin の Quickstart で作成したテンプレートは、次のファイル構成になっています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

  ├── node_modules
  ├── package-lock.json
  ├── package.json
  ├── private.ppk
  ├── scripts
  │   └── npm-start.js
  └── src
      ├── css
      │   ├── 51-modern-default.css
      │   ├── config.css
      │   └── desktop.css
      ├── html
      │   └── config.html
      ├── image
      │   └── icon.png
      └── js
            ├── config.js
            └── desktop.js

Step2：必要なパッケージのインストール

プラグインファイルのディレクトリーの直下に、webpack-plugin-kintone-plugin と webpack をインストールします。

1
2
3
4
5
6
7
8

# プラグインファイルのディレクトリに移動
cd sample_plugin_project

# webpack-plugin-kintone-pluginをインストール
$ npm install --save-dev @kintone/webpack-plugin-kintone-plugin

# webpackとwebpack-cliをインストール
$ npm install --save-dev webpack webpack-cli

Step3：ビルドファイル用のディレクトリーの作成

webpack でビルドしたファイルを格納するディレクトリーとして、「plugin」を作成します。
「plugin」内のファイルが、kintone プラグインファイルにパッケージングされます。

1

mkdir plugin

Step4：webpack-plugin-kintone-plugin に合わせた設定ファイルの作成と修正

webpack-plugin-kintone-plugin を実行するために、次の 3 つのファイルを作成、修正します。

  • manifest.json
  • webpack.config.js
  • package.json
manifest.json

プラグインをパッケージングするための設定ファイルです。
src/manifest.json を Step3 で作成した「plugin」ディレクトリーに移動します。

1

mv src/manifest.json plugin/
webpack.config.js

webpack の設定ファイルです。
次の内容で、プラグインファイルのディレクトリーの直下に「webpack.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

const path = require('path');
const KintonePlugin = require('@kintone/webpack-plugin-kintone-plugin');

module.exports = {
  // webpack でバンドルする js のファイルを指定する
  entry: {
    desktop: './src/js/desktop.js',
    // mobile: './src/js/mobile.js',
    config: './src/js/config.js',
  },
  // webpack でバンドルしたファイルが出力する先を指定する
  output: {
    path: path.resolve(__dirname, 'plugin', 'js'),
    filename: '[name].js',
  },
  // プラグインのパッケージングに必要なファイルのパスを設定する
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './plugin/manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: './dist/plugin.zip'
    }),
  ],
};

生成されるプラグインファイルのファイル名に、プラグイン ID と manifest.json 内の version を利用できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// ...
module.exports = {
  // ...
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: (id, manifest) => `${id}.${manifest.version}.plugin.zip`
    })
  ]
};
package.json

npm パッケージを管理するためのファイルです。
package.json の script を次のように修正します。

1
2
3
4
5
6
7

  "scripts": {
    "build": "webpack --mode production",
    "develop": "webpack --mode development --watch",
    "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000",
    "lint": "eslint src",
    "start": "npm run develop"
  },

Step5：js 以外のファイルを「plugins」に移動

今回は、css や HTML、画像ファイルを webpack でバンドルしません。
そのため、パッケージングできるよう、「plugin」ディレクトリーに移動します。

1
2
3

mv src/css plugin/
mv src/html plugin/
mv src/image plugin/

Step5 まで行うと、「sample_plugin_project」のディレクトリー構成は、次のようになっています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

├── node_modules
├── package-lock.json
├── package.json # Step4 で編集
├── plugin
│   ├── css # Step5 で移動
│   │   ├── 51-modern-default.css
│   │   ├── config.css
│   │   └── desktop.css
│   ├── html # Step5 で移動
│   │   └── config.html
│   ├── image # Step5 で移動
│   │   └── icon.png
│   └── manifest.json # Step4 で移動
├── private.ppk
├── scripts
│   └── npm-start.js
├── src
│   └── js
│       ├── config.js
│       └── desktop.js
└── webpack.config.js # Step4 で作成

Step6：プラグインファイルにパッケージングする

次のコマンドを実行します。

1

npm run build

「dist」ディレクトリーの下に、「plugin.zip」としてプラグインファイルが生成されます。

1
2
3
4

├── dist
│   └── plugin.zip # 生成されたプラグインファイル
├── node_modules
├── # 以降は、省略

あとは、作成したプラグインを kintone に追加すれば、kintone アプリで利用できます。
プラグインを kintone に追加する方法には、次の 2 つの方法があります。

補足

ファイル監視をして自動でパッケージング／kintone へプラグインを追加する

次のコマンドを実行すると、ソースコードを修正したときに、自動で、プラグインファイルにパッケージングしてアップロードできます。

このコマンドでは、plugin-uploader を実行しています。
plugin-uploader の詳細は、 プラグインのアップロード：plugin-uploader を確認してください。

1

npm start

更新履歴

webpack-plugin-kintone-plugin の変更履歴は、 CHANGELOG (External link) を確認してください。

information

この記事で紹介しているサンプルコードは、2022 年 5 月版 kintone および @kintone/webpack-plugin-kintone-plugin v6.0.0 で動作を確認しています。