使用customize-uploader工具通过命令行上传自定义用JS/CSS文件

aki发表于:2020年08月17日 13:33:32更新于:2021年08月31日 17:13:07

Index

概要

在命令行里上传kintone自定义用的JavaScript/CSS文件的工具发布啦!
使用这个工具,每次修改JS/CSS文件后都无需重新上传了!

customize-uploader是什么

是可将自定义用的JavaScript/CSS文件上传到kintone的CLI工具。

可支持npm,所以可在Windows/macOS/Linux等任意环境下执行。

代码公开在GitHub上。

※ 使用此工具所要求的Node.js的版本请参考仓库的 package.json 下的engines属性。
例如:如果是像如下记载,表示Node.js 的版本要求10 以及更高。

"engines": {
   "node": ">=10"
 },

安装方法

安装customize-uploader。

※ 这里以使用npm进行全局安装为例

 $ npm install -g @kintone/customize-uploader

执行以上代码即可安装customize-uploader。

创建资源配置文件

要执行customize-uploader,需要创建资源配置文件,在资源配置文件里写明上传目标应用的信息以及要上传的文件信息,并且将资源配置文件和要上传的文件放在同一个目录下。
资源配置文件里需要记载的项目如下。

  • app : 上传目标应用的应用ID

  • scope: 自定义的应用范围 ("ALL" || "ADMIN" || "NONE")

  • desktop: PC专用JavaScript文件、CSS文件 ("js": [] || "css": [])

  • mobile: 智能手机专用JavaScript文件、CSS文件 ("js": [] || "css": [])

如要用到Cybozu CDN,需要将其URL一起写到资源配置文件。

通过命令来创建资源配置文件

可以使用init命令来创建资源配置文件。

$ kintone-customize-uploader init

生成如下资源配置文件格式的JSON文件。

#执行命令    
$ kintone-customize-uploader init

#设置应用ID以及自定义的应用范围    
? Input your app id: 12345
? Select the scope of customization: (Use arrow keys)
❯ ALL    
  ADMIN    
  NONE    
生成dest/customize-manifest.json

如以下customize-manifest.json那样,在生成的资源配置文件中记载需要上传的文件名

・customize-manifest.json (例)

{
    "app": "1",
    "scope": "ALL",
    "desktop": {
        "js": [
            "https://js.cybozu.cn/jquery/3.3.1/jquery.min.js",
            "sample.js"
        ],
        "css": [
            "51-modern-default.css"
        ]
    },
    "mobile": {
        "js": [
            "https://js.cybozu.cn/jquery/3.3.1/jquery.min.js"
        ],
        "css": [
        ]
    }
}

如上设置后,页面上将显示如下。

0015f3f4fd261d336df3bf72679518c0015f5096c1b06a85cd9fef204d822d

另外,如果只有电脑专用的JavaScript文件,如下记载。

{
    "app": "1",
    "scope": "ALL",
    "desktop": {
        "js": [
            "sample.js"
        ],
        "css": [
        ]
    },
    "mobile": {
        "js": [
        ],
        "css": [
        ]
    }
}

应用中已有的自定义信息输出到资源配置文件中

使用import命令,可以将应用中已有的JavaScript文件或CSS文件导出到资源配置文件中。
※以下介绍生成资源配置文件之后的操作。请用上述的init命令等预先创建资源配置文件。

kintone-customize-uploader import dest/customize-manifest.json

可以如下将其他应用中的JavaScript文件或CSS文件下载到资源配置文件,替换资源配置文件中的内容。

#执行命令
$ kintone-customize-uploader import dest/customize-manifest.json    

#输入要导入的应用信息    
? Input your kintone's domain (https://example.cybozu.cn): https://<子域名>.cybozu.cn
? Input your username: <登录名>
? Input your password: <密码> 
 
Generate customize-manifest.json from kintone app customize
Download Uploaded files on kintone app customize
Finish importing from kintone app customize

基本使用方法

将创建好的自定义用的JavaScript文件、CSS文件上传到kintone。

该工具在执行时需要指定kintone环境的信息。
环境信息的输入方法有以下3种。

※ 需要用持有上传目标应用的管理员权限的用户才能执行。

1. 直接指定的方法

除了资源配置文件,还有通过选项指定域名信息、登录名、密码。

# 移到资源配置文件所在目录    
$ cd sample_project    
# 执行命令    
$ kintone-customize-uploader --base-url https://<子域名>.cybozu.cn --username <登录名> --password <密码> customize-manifest.json    

sample.js has been uploaded!  
JavaScript/CSS files have been uploaded!   
Customize setting has been updated!    
Wait for deploying completed...
Wait for deploying completed...
Setting has been deployed!

2. 通过对话形式来指定

只指定资源配置文件的话,可以通过对话形式来输入域名信息、登录名、密码。

# 移到资源配置文件所在目录    
$ cd sample_project    
# 执行命令    
$ kintone-customize-uploader customize-manifest.json    

# 通过对话形式输入环境信息    
? Input your kintone's domain (https://example.cybozu.cn): https://<子域名>.cybozu.cn
? Input your username: <登录名>
? Input your password: <密码>    

sample.js has been uploaded!  
JavaScript/CSS files have been uploaded!
Customize setting has been updated!
Wait for deploying completed...
Wait for deploying completed...
Setting has been deployed!

3. 通过环境变量指定的方法

预先在环境变量里设置好kintone的域名等的话,可以使用环境变量。
在执行命令时希望避免在页面上直接显示密码等情况时使用的话特别方便。

# Windows(PowerShell)的情况    
# 预先在环境变量里设置kintone信息    
set-item "env:KINTONE_BASE_URL" https://<子域名>.cybozu.cn
set-item "env:KINTONE_USERNAME" <登录名>    
set-item "env:KINTONE_PASSWORD" <密码>    
set-item "env:HTTPS_PROXY or HTTP_PROXY" <代理服务器设置>   
 
# 移到资源配置文件所在目录    
$ cd sample_project    
# 执行命令    
$ kintone-customize-uploader customize-manifest.json   
 
# Mac的情况    
# 预先在环境变量里设置kintone信息    
export KINTONE_BASE_URL=https://<子域名>.cybozu.cn
export KINTONE_USERNAME=<登录名>    
export KINTONE_PASSWORD=<密码>    
export HTTPS_PROXY or HTTP_PROXY=<代理服务器设置>    

# 移到资源配置文件所在的目录    
$ cd sample_project
# 执行命令    
$ kintone-customize-uploader customize-manifest.json

选项功能

除了域名信息和登录信息,还搭载了选项功能。

监视文件

使用--watch选项可以对文件进行监视,一旦有更新将自动上传到kintone。
对于需要反复修改JS/CSS文件,然后每次修改完后又重新上传等情况,使用此选项特别方便!

$ kintone-customze-uploader --watch customize-manifest.json

※ 用[ctrl + c]取消命令即可结束监视。

来宾空间

使用--guest-space-id 选项还可以对来宾空间内的应用进行操作。

$ kintone-customize-uploader --guest-space-id <Guest space ID> customize-manifest.json

语言设置

使用--lang 可以指定命令行上的显示语言,可指定日语和英语两种。

# 设置为日语时    
$ kintone-customize-uploader --lang ja customize-manifest.json 
   
# 设置为英语时    
$ kintone-customize-uploader --lang en customize-manifest.json

设置代理

如使用了代理服务器,可以通过--proxy选项输入代理信息。

$ kintone-customize-uploader --proxy <Proxy Server> customize-manifest.json    

# 使用环境变量时    
$ kintone-customize-uploader --proxy $HTTP_PROXY customize-manifest.json

最后

综上所述,使用customize-uploader的话,不需要操作kintone,只要通过命令行即可完成自定义文件的上传。
而watch选项可以让你摆脱Dropbox等文件管理工具,实时将所作的更改配置到环境中,大大提高了便利性!

您不妨也尝试一下!

注意事项

根据本工具的许可证,可对代码进行更改、再发布、用于商业目的等。

更改履历

  • 2019/07/01

    • 可支持智能手机专用的CSS

    • 所需的Node.js的版本由6改为8及更高

  • 2019/12/13

    • 追记了关于init命令的信息

    • 追记了关于import命令的信息

    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。