はじめに
本記事の初投稿から年月が経ち、Internet Explorer のサポート終了や、Typescript での開発がスタンダードになりつつあったりと、kintone プラグイン開発に関する周辺で様々なことが変化してきています。
また、@kintone/create-plugin の登場で kintone プラグイン開発環境構築も劇的に簡単になっています。
これに伴い、要件も変わってきており、本記事を更新しました。（もはや記事にすることでもないかも。。）
要件
プラグインの作成にあたり、以下の要件がありました。
- Windowsで開発
- git 管理
- 共通処理をモジュール化して他のプラグインでも使用する
- Typescriptで開発
構成概要
前述の要件を満たす構成として、以下のようにしました。
構築手順と設定
Git for Windows のインストール
kintone developer network のドキュメントにはcygwinという言葉がでてきたり、現在では WSL2（Windows Subsystem for Linux）上で開発した方がスマートな気がしたりもしますが、手軽に bash 環境と git コマンドが得られる Git for Windows を選択しました。
トップページの download からダウンロードしてインストールします。
インストール時のConfiguring the line ending conversionsの設定はCheckout as-is, commit as-isにしておくと改行コードの扱いについて混乱しないかと思います。
Visual Studio Code のインストールと設定
トップページの Download for Windows からダウンロードしてインストールします。
拡張機能として Japanese Language Pack for Visual Studio Code とESLint をインストールしておきます。
インストール方法については省略します。
ターミナルはデフォルトでは Power Shell になっていますが、 bash を選択しておくと、Git bash を別途立ち上げなくても bash コマンドが実行できるようになり便利です。
メニューバーの「表示」→「ビューを開く...」→「ターミナル」を選択し、開いたターミナルビューの「＋」アイコンを（初めて）クリックすると、新しい種類のターミナルを追加でき、そこで Git Bash を選択します。
その他の基本設定は、メニューバーから「ファイル」→「基本設定」→「設定」から行い、 JSON で設定します。
既定の改行文字を LF にしておくとよいでしょう。
以下は設定例です。
{
"window.zoomLevel": -1,
"editor.renderWhitespace": "all",
"window.menuBarVisibility": "default",
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"editor.renderControlCharacters": true,
"files.eol": "\n",
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/.project": true,
"**/.tern-project": true
},
}
Node.js のインストール
トップページの 推奨版をダウンロードしてインストールします。
特筆することはないので詳細は省略します。
@kintone/create-plugin でプラグイン開発用フォルダの作成
@kintone/create-plugin の登場でコマンド一発で作成できるようになりました。
npx @kintone/create-plugin --template modern --lang ja sample-plugin
質問に答えるだけで、フォルダの作成、ESlint/Prettier の設定、Webpack/babel の設定、Typescript の設定、秘密鍵の作成を自動でしてくれます。なんて便利なんでしょう。
git の初期化と .gitignore の作成
プラグイン用フォルダ直下で以下のコマンドを実行します。これはプラグイン用フォルダを作成した直後に行います。
$ git init
.gitignore は Visual Studio Code またはターミナルからvimコマンド等で作成します。
記述する内容については github/gitignore が参考になります。
Global/VisualStudioCode.gitignore と Node.gitignore の内容を組み合わせたものでよいでしょう。
プラグイン用として以下も追加します。
dist/
plugin/js
適宜 git に commit します。
プラグインパッケージ化
開発版の場合は以下のコマンドにより、プラグインディレクトリ配下の dist ディレクトリにプラグインが作成されます。
$ npm run build
製品版の場合は以下のコマンドになります。
$ npm run build:prod
とっても簡単ですね。
おわりに
このような環境で作成した kintone プラグインを https://kinkozi.webware.co.jp/ にて販売中です。