webpack-plugin-kintone-plugin

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

"engines": { "node": ">=14" },
ダウンロードしたインストーラーを実行し、画面にしたがってセットアップします。

Quickstart

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

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

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

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

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

このQuickstartでは、下記ページのcreate-pluginのQuickstartで作成したテンプレートを使います。

create-pluginのQuickstart

自分でパッケージングするファイルを用意する場合には、次のkintoneプラグイン開発手順の「プラグイン作成に必要なファイルの準備」で案内しているファイル構成にしたがって、ファイルを準備してください。
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つの方法があります。

画面から行う方法：プラグインを追加／削除する（システム管理）
plugin-uploaderを使う方法：プラグインのアップロード：plugin-uploader

補足

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

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

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

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

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

1

npm start

更新履歴

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

webpack-plugin-kintone-pluginの変更履歴は、以下のCHANGELOGを確認してください。
CHANGELOG

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

SDK&Tools