webpack-plugin-kintone-plugin
webpack-plugin-kintone-plugin とは
webpack-plugin-kintone-plugin は、
webpack
を使って kintone プラグインファイルを作成できる CLI ツールです。
webpack でファイルサイズを圧縮したり、サードパーティのライブラリをバンドルしたりできます。
npm パッケージとして提供されているため、Windows/macOS/Linux 環境で利用できます。
GitHub
https://github.com/kintone/js-sdk/tree/master/packages/webpack-plugin-kintone-plugin
ライセンス
ドキュメント
https://github.com/kintone/js-sdk/blob/master/packages/webpack-plugin-kintone-plugin/README.md
下準備
webpack-plugin-kintone-plugin を実行するには、Node.js とパッケージ管理ツールの npm が必要です。
Node.js をインストールすると、npm は自動でインストールされます。
-
Node.js 公式サイト
からインストーラーをダウンロードします。
必要な Node.js のバージョンは、リポジトリの packages/webpack-plugin-kintone-plugin/package.jsonにある engines プロパティを確認してください。
たとえば、次の記載の場合、Node.js のバージョン 14 以上が必要です。1 2 3
"engines": { "node": ">=14" },
-
ダウンロードしたインストーラーを実行し、画面にしたがってセットアップします。
Quickstart
webpack-plugin-kintone-plugin をプラグインファイルを作成する手順を説明します。
Step1:プラグインファイルの準備
プラグインにパッケージングする、プラグイン用のカスタマイズファイルを準備します。
この Quickstart では、
create-plugin の Quickstart で作成したテンプレートを使います。
自分でパッケージングするファイルを用意する場合には、
kintone プラグイン開発手順
の「プラグイン作成に必要なファイルの準備」で案内しているファイル構成にしたがって、ファイルを準備してください。
create-plugin の Quickstart で作成したテンプレートは、次のファイル構成になっています。
|
|
Step2:必要なパッケージのインストール
プラグインファイルのディレクトリーの直下に、webpack-plugin-kintone-plugin と webpack をインストールします。
|
|
Step3:ビルドファイル用のディレクトリーの作成
webpack でビルドしたファイルを格納するディレクトリーとして、「plugin」を作成します。
「plugin」内のファイルが、kintone プラグインファイルにパッケージングされます。
|
|
Step4:webpack-plugin-kintone-plugin に合わせた設定ファイルの作成と修正
webpack-plugin-kintone-plugin を実行するために、次の 3 つのファイルを作成、修正します。
manifest.json
webpack.config.js
package.json
manifest.json
プラグインをパッケージングするための設定ファイルです。
src/manifest.json
を Step3 で作成した「plugin」ディレクトリーに移動します。
|
|
webpack.config.js
webpack の設定ファイルです。
次の内容で、プラグインファイルのディレクトリーの直下に「webpack.config.js」を作成します。
|
|
生成されるプラグインファイルのファイル名に、プラグイン ID と manifest.json 内の version を利用できます。
|
|
package.json
npm パッケージを管理するためのファイルです。
package.json
の script
を次のように修正します。
|
|
Step5:js 以外のファイルを「plugins」に移動
今回は、css や HTML、画像ファイルを webpack でバンドルしません。
そのため、パッケージングできるよう、「plugin」ディレクトリーに移動します。
|
|
Step5 まで行うと、「sample_plugin_project」のディレクトリー構成は、次のようになっています。
|
|
Step6:プラグインファイルにパッケージングする
次のコマンドを実行します。
|
|
「dist」ディレクトリーの下に、「plugin.zip」としてプラグインファイルが生成されます。
|
|
あとは、作成したプラグインを kintone に追加すれば、kintone アプリで利用できます。
プラグインを kintone に追加する方法には、次の 2 つの方法があります。
- 画面から行う方法:
プラグインを追加/削除する(システム管理)
- plugin-uploader を使う方法: プラグインのアップロード:plugin-uploader
補足
ファイル監視をして自動でパッケージング/kintone へプラグインを追加する
次のコマンドを実行すると、ソースコードを修正したときに、自動で、プラグインファイルにパッケージングしてアップロードできます。
このコマンドでは、plugin-uploader を実行しています。
plugin-uploader の詳細は、
プラグインのアップロード:plugin-uploader を確認してください。
|
|
更新履歴
webpack-plugin-kintone-plugin の変更履歴は、
CHANGELOG
を確認してください。
この記事で紹介しているサンプルコードは、2022 年 5 月版 kintone および @kintone/webpack-plugin-kintone-plugin v6.0.0 で動作を確認しています。