概要
在进行kintone自定义开发的时候，要把写好的代码文件上传到相应的应用里。
开发过程中难免需要调试重复修改，每修改一次就要上传一次是不是觉得特别麻烦？
本篇介绍在开发过程中免于重复多次上传代码，而是直接将修改的地方直接反映到自定义环境中。
※ 请注意本Tips只能用于开发时，仅可在自己的终端上确认。
※ 如果是想多个用户一起进行测试等情况，您可以考虑customize-uploader（日语）。
用到的工具
另外，您需要提前安装好VSCode和LiveServer。
工作原理
在开始介绍之前，先大致介绍以下其工作原理。
kintone自定义可以通过指定文件的URL来添加文件。
可以使用该功能添加自己本地开发环境的URL(localhost)。
要发送localhost的JavaScript/CSS文件，需要使用LiveServer的功能。
大致的工作原理如上。
但是，kintone自定义的URL栏只能指定https。
受这个限制，LiveServer需要在https模式下运行。
以下就是LiveServer在https模式下运行所需的设置。
需要做哪些事情？
使用mkcert生成通过浏览器访问https://localhost时必要的有效证书和密钥。
使用Live Server Extension通过https格式发送正在编辑的文件
启动LiveServer
在kintone自定义URL栏输入Live Server Extension的URL
可以开始开发了
使用webpack的话还需要多加几步，后面会说到。
使用mkcert生成访问https://localhost时所需的有效证书和密钥
浏览器在访问https://localhost时会判断是否安全，因此需要以下内容：
安装证书到操作系统里
使用(1)里安装的证书和密钥运行https服务器
而能够帮我们简略这步工作的是mkcert。不管是什么操作系统都可以用。
请下载以下工具进行(1)，(2)的操作。
※2019年4月时的最新版是1.3.0。使用时，请从这里下载最新版。
Windows mkcert-v1.3.0-windows-amd64.exe
mkcert下载完后，执行以下代码(以Mac为例):
# $ tree . # . # └── mkcert-v1.3.0-darwin-amd64 # chmod +x mkcert-v1.3.0-darwin-amd64 ./mkcert-v1.3.0-darwin-amd64 -install # 根据要求输入Password ./mkcert-v1.3.0-darwin-amd64 localhost 127.0.0.1 ::1 # 执行后会生成证书 # $ tree . # . # ├── localhost+2-key.pem # 密钥 # ├── localhost+2.pem # 证书 # └── mkcert-v1.3.0-darwin-amd64
如果是Windows，除了以下内容，其他按同样的方式执行。
执行文件为mkcert-v1.3.0-windows-amd64.exe
chmod命令不需要
不用输入密码，取而代之的是弹出安全警告，请点击【确定】
生成的证书和密钥仅限于用于开发目的，请不要共享给其他人。
通过Live Server Extension实现正在编辑的文件通过https实时发送
接下来，用mkcert生成的证书和密钥通过https来运行LiveServer。
依次点击VScode左下角的齿轮按钮 > 设置
显示设置选项卡，点击“工作区”设置
在顶部的搜索框输入“Live http”
编辑“Live Server > Settings:Http”项的内容
编辑内容请参考下述的“liveServer.settings.https下的设置项” 。
或者根据Creating User and Workspace Settings 上的步骤打开settings.json，添加设置内容。
{
"settings": {
"liveServer.settings.https": {
"enable": true,
"cert": "/home/cybozu/cert/localhost+2.pem",
"key": "/home/cybozu/cert/localhost+2-key.pem",
"passphrase": ""
}
}
}liveServer.settings.https下的设置项
设置enable: true时，按https运行
设置用cert: mkcert生成的证书的路径
设置用key: mkcert生成的密钥的路径
passphrase:是私钥的密码，设为空
settings.json中可能还含有其他扩展功能的设置，复制时请注意。
启动LiveServer:
启动图标是VSCode页面上的一部分，点击如下图中的图标启动LiveServer，会在浏览器上打开https://localhost:5500。
用浏览器访问时，应该会显示和项目的结构相同的文件。
点击文件夹，可以打开文件夹。
在kintone的自定义URL栏中输入Live Server Extension的URL
选择开发所使用到的文件时，会在浏览器上显示JavaScript文件。
复制kintone自定义开发的文件URL。
在kintone的自定义页面上添加刚才复制的URL。
保存到kintone。
到这里为止，准备就完成了。
封装kintone自定义
试着修改一下您的kintone自定义文件，然后刷一下页面。
修改的地方应该可以立即反映到页面上。
针对Webpack用户的设置
使用Webpack进行开发时，要用到Webpack里的watch选项。
在带watch选项的情况下编译webpack
LiveServer端通过webpack的API复制编译后的URL
在kintone的JavaScript自定义里添加URL
在带watch选项的情况下编译webpack:
npx webpack --mode development --colors --watch
访问https://localhost:5500，复制在webpack.config.js中设置的内容的程序URL。
将此URL贴到kintone自定义的URL中就完成了。
※ webpack-dev-server这个工具也内置https模式，也可以使用这个。
在此不做详细介绍，如您想尝试一下，请参考使用webpack-dev-server + mkcert通过有效的https请求发送编译好的文件（日语）
此Tips在2019年4月版的kintone中确认过。