Featured Image(Photo) by Artem Sapegin on Unsplash
更新履歴
- 2021/1/29 customize-uploaderのバージョンアップに対応しました
- 2020/5/22 「環境変数の設定」を追加しました
はじめに
kintoneのカスタマイズ効率をあげよう1 – エディタ設定の続きです。
本記事ではcustomize-uploaderを利用してカスタマイズの適用を自動化します。
customize-uploaderのインストール
カスタマイズファイルの反映を自動でやってくれるcustomize-uploaderをインストールします。
> npm install --save-dev @kintone/customize-uploader
local-web-serverのインストール
customize-uploaderも反映までは数秒かかって手間なので、ローカルにWebサーバーを立てます。
> npm install --save-dev local-web-server
カスタマイズ反映の準備
customize-uploader用のファイルを作成します。
まずは開発用のファイル「manifest.dev.json」を作成します。アプリIDは書き換えてください。
{
"app": "アプリID",
"scope": "ADMIN",
"desktop": {
"js": ["https://127.0.0.1:8000/index.js"],
"css": []
},
"mobile": {
"js": [],
"css": []
}
}
開発中はアプリ管理者にのみカスタマイズが適用されるようにscopeにはADMINを指定します。JavaScriptファイルはローカルのWebサーバーを参照します。
次は本番用のファイル「manifest.prod.json」を作成します。
{
"app": "アプリID",
"scope": "ALL",
"desktop": {
"js": ["index.js"],
"css": []
},
"mobile": {
"js": [],
"css": []
}
}
運用中はすべてのユーザーにカスタマイズが適用されるようにscopeにはALLを指定します。JavaScriptファイルはアップロードします。

次にpackage.jsonにws, dev, prodの3行を追加します。
"scripts": {
"ws": "ws --https",
"dev": "kintone-customize-uploader manifest.dev.json",
"prod": "kintone-customize-uploader manifest.prod.json",
"test": "echo \"Error: no test specified\" && exit 1"
},
テスト時のカスタマイズ反映
以下のコマンドを実行するとローカルのindex.jsを参照します。
> npm run dev

ブラウザがアクセスできるようにlocal-web-serverを起動します。
> npm run ws
カスタマイズが反映されない場合は https://127.0.0.1:8000/ にアクセスしてください。以下のような画面が表示されるので、「詳細設定」をクリック、「127.0.0.1 にアクセスする(安全ではありません)」をクリックしてください。これで反映されるはずです。

本番時のカスタマイズ反映
以下のコマンドを実行するとカスタマイズファイルをアップロードします。
> npm run prod
環境変数の設定
customize-uploaderは環境変数を利用できます。毎回ドメイン名などを入力するのは手間なので環境変数を設定しましょう。PowerShellを起動して以下のコマンドを実行します。
> [System.Environment]::SetEnvironmentVariable("KINTONE_BASE_URL", "https://xxxxx.cybozu.com", "User")
> [System.Environment]::SetEnvironmentVariable("KINTONE_USERNAME", "xxxxx", "User")
> [System.Environment]::SetEnvironmentVariable("KINTONE_PASSWORD", "xxxxx", "User")
反映にはターミナルの再起動が必要です。
自己証明書の作成
mkcertをダウンロードして、以下のコマンドを実行します。実行ファイル名はダウンロードしたファイル名に書き換えてください。実行方法がわからなければVisual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう!を参考にしてください。
> ./mkcert-v1.4.1-windows-amd64.exe -install
> ./mkcert-v1.4.1-windows-amd64.exe localhost 127.0.0.1 ::1
実行できれば2つのファイルができるはずです。そのファイルをプロジェクトフォルダの1つ上に移動させます。カスタマイズフォルダはカスタマイズするアプリごとに増えますが、この自己証明書は共通だからです。

次はpackage.jsonを書き換えます。
"ws": "ws --https --cert ../localhost+2.pem --key ../localhost+2-key.pem",
これでhttps://127.0.0.1:8000/にアクセスする必要がなくなりました。
ここまでの設定
ここまでの設定は以下にあります。(自己証明書は除く)
https://github.com/potaracom/kintone-customize-template