TypeScript + Reactでkintoneプラグインを開発できるテンプレートを作成しました

1 min read読了の目安(約1300字

今までいくつかプラグインを公開しましたが、今後もう少し効率よく開発を行いたいと思い、テンプレートを作成しました。

https://github.com/Local-Bias/kintone-plugin-template

ベースは@kintone/create-pluginです。これのおかげでほんとに開発が楽になりました。
これにプラグインを作る上で頻繁に行うディレクトリ構成であったり、共通処理(プラグイン設定を保存するボタンなど)を追加してます。

初期状態でこんな感じになります。
また、最初からプラグインの設定情報を状態に持たせているので、設定の自動保存も簡単に実装できると思います。

テンプレートといっても自分用に作ったので、上記の画像の通り必ずしも必要ではない Material UI が含まれていたり、プラグイン設定画面に SNS やホームページのリンクを表示するためのコンポーネントが最初から入っていたりします。不要な場合は削除してください。

仕様

TypeScript での記述を前提

モジュールを最小限に抑えるため、初期状態では ts ファイルのみコンパイルするようにしています。Javascript を使用する場合は、webpack の設定を変更する必要があります。

Webpack

Webpack は開発用と本番用の2つにファイルを分けています。プラグインの圧縮ファイルも、別の名前で出力されます。

npm スクリプトの解説

初期設定

npm run init

上記コマンドを実行し、プラグインの初期設定を行います。

dist フォルダにプラグインの zip ファイル、ルートディレクトリに private.ppk という名前で秘密鍵が作成されます。この private.ppk は .gitignore に追加しているので、Private で使用する場合は .gitignore から削除するか、リポジトリとは別の形で保管してください。

ビルドとアップロード

npm run start

上記コマンドでファイルの修正を監視し、変更があればコンパイル・アップロードします。コンソールにログがドバっと出ますが、更新するとアップロード先の URL 入力待ちになると思います。

本番用ビルド

npm run start

実際にリリースするためのプラグインデータを出力します。

ライセンスは MIT です。よろしければご活用ください 🍀

https://github.com/Local-Bias/kintone-plugin-template