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で動作を確認しています。