kintone 插件开发流程

cybozu发表于:2016年11月25日 17:47:16更新于:2019年02月03日 10:29:13

Index

概要

作成kintone插件前,首先请阅读一下 “开始” 的文章。以下就是作成kintone 插件的操作流程。

  1. 必要的文件作成。

  2. 必要的资源配置文件作成。

  3. 利用打包工具,将作成的文件打包。

  4. 导入到kintone环境里。

各文件的作成

首先,让我们先准备要打包的文件。要打包的文件夹结构和文件名,大家可以随意安排。

文件夹结构范例

css/
  - customize.css //PC端专用CSS文件
  - config.css //设置页面专用CSS文件
html/
  - config.html //设置页面用html文件
image/
  - icon.png //图标文件
js/
  - customize.js //PC端专用JavaScript文件
  - mobile-customize.js //智能手机端专用JavaScript文件
  - config.js //设置页面用JavaScript文件

图标文件  

显示在各个应用页面上的图标文件。

  • 这个文件是必须的。

  • 可使用的文件类型:png、jpg、gif、bmp 中的任意一个。

  • 文件大小的最大值为 512KB。

PC端专用JavaScript文件

PC页面专用的JavaScript文件。

  • 如果是手机端专用的插件,可以省略。

  • 使用设置页面的设置信息来做成想要执行的处理。

  • 文件大小的最大值为 512KB。

  • 在设定页面里通过JavaScript使用kintone.plugin.app.setConfig()来设定的信息,可以用kintone.plugin.app.getConfig()来获取。此时所需要的插件ID,主要通过kintone.$PLUGIN_ID这个变量来传递。

※所谓的插件ID,是作成插件的时候,向各个插件里分配的唯一的32位的ID。例如:hkfgjeehkaajnbmfojmpbgcpfalbfhjn

获取插件ID的范例

如果在同一个应用里,使用多个插件的时候,需要多次传递 kintone.$PLUGIN_ID。因此, 可以像下面这样,使用匿名函数来使用插件ID。

(function(PLUGIN_ID) {
    kintone.plugin.getConfig(PLUGIN_ID);
})(kintone.$PLUGIN_ID);

PC端专用CSS文件

PC页面专用的CSS文件。

  • 如果是手机端专用,可以省略。

  • 想要使用kintone 的设计风格的话,请参照样式表的使用

  • 文件大小的最大值为 512KB。

智能手机端专用JavaScript文件

智能手机页面专用的JavaScritp文件。

设置页面用html文件

设置页面用的HTML文件。

  • 可省略。

  • 文件大小的最大值为 64KB。

设置页面用JavaScript文件

设置页面用的JavaScript文件。

设置页面用CSS文件

设置页面用的CSS文件。

资源配置文件的作成

作成kintone 插件时,我们还需要创建一些必要的资源配置文件。
kintone 插件的作成,必须要有资源配置文件(manifest.json)。

资源配置文件的格式

以下就是资源配置文件的格式。使用json格式来指定各个参数。

参数名称类型必须说明
限制指定的范例
manifest_version

Numbe

※必须整数

必须

插件的资源配置版

只能指定1

※当前最新版本为1


"manifest_version": 1
version

Numbe

※必须整数

必须插件的版本

"version": 1
typeString必须插件的种类。
指定字符串"APP"。

 
"type":"APP"


nameObject.<String>必须将地域(ja, en, zh)作为键名的各种语言的插件名
"name": { 
    "ja": "サンプルプラグイン",
    "en": "sample plugin",
    "zh": "插件的例子"
  }
name.<locale>String必须所指定地域的插件名1个字以上64个字以下。name.en 是必须的
descriptionObject.<String>可省略将地域作为键名的各种语言的描述文字
"description": { 
    "ja": "これはサンプルプラグインです。",
    "en": "This is sample plugin.",
    "zh": "这是插件的例子"
  }
description.<locale>String必须所指定地域的描述文字1个字以上200个字以下。有description的时候,description.en是必须的
iconString必须图标文件可以只指定插件里的文件
"icon": "image/sample.png"
homepage_urlObject.<String>可省略将地域作为键名的各种语言的Web网站URL
 
"homepage_url": { 
    "ja": "https://example.com/jp/",
    "en": "https://example.com/en-us/",
    "zh": "https://example.com/cn/"
  }
homepage_url.<locale>String可省略所指定地域的Web网站URL

desktopObject.<String>可省略将文件的类型(js, css)作为键名的PC端专用的自定义文件
"desktop": {
    "js": [
      "js/customize.js",
      "https://example.com/js/customize.js"
    ],
    "css": [
      "https://example.com/css/customize.css",
      "css/customize.css"
    ]
  }
desktop.jsArray.<String>可省略PC端专用JavaScript文件・URL的数组

30个为止
※有同名文件的话,会报错。


desktop.cssArray.<String>可省略PC端专用CSS文件・URL的数组30个为止
有同名文件的话,会报错

mobileObject.<String>可省略将文件的类型(js)作为键名的智能手机端专用的自定义文件
"mobile": {
    "js": [
      "js/mobile-customize.js",
      "https://example.com/js/mobile-customize.js"
    ]
  }
mobile.jsArray.<String>可省略智能手机端专用的JavaScript文件・URL的数组30个为止
有同名文件的话,会报错

configObject.<String>可省略将文件的类型(html, js, css)作为键名的个人设置用文件和设置信息
"config": {
    "html": "html/config.html",
    "js": [
      "https://example.com/js/config.js",
      "js/config.js"
    ],
    "css": [
      "css/config.css",
      "https://example.com/css/config.css"
    ],
    "required_params": ["Param1", "Param2"]
  }
}
config.htmlString可省略设置页面用HTML文件可以只指定插件里的文件
config.jsArray.<String>可省略设置页面用JavaScript文件・URL的数组30个为止
有同名文件的话,会报错

config.cssArray.<String>可省略设置页面用CSS文件・URL的数组30个为止
有同名文件的话,会报错

config.required_paramsArray.<String>可省略设置页面上设置必须的参数数组ASCII码,1个字以上64个字以下。

资源配置文件的范例

{
    "manifest_version": 1,
    "version": 1,
    "type": "APP",
    "name": { 
        "ja": "サンプルプラグイン",
        "en": "sample plugin",
        "zh": "插件的例子"
    },
    "description": { 
        "ja": "これはサンプルプラグインです。",
        "en": "This is sample plugin.",
        "zh": "这是插件的例子"
    },
    "icon": "image/icon.png",
    "homepage_url": { 
        "ja": "https://example.com/jp/",
        "en": "https://example.com/en-us/",
        "zh": "https://example.com/cn/"
    },
    "desktop": {
        "js": [
            "js/customize.js",
            "https://example.com/js/customize.js"
        ],
        "css": [
            "https://example.com/css/customize.css",
            "css/customize.css"
        ]
    },
    "mobile": {
        "js": [
            "js/mobile-customize.js",
            "https://example.com/js/mobile-customize.js"
        ]
    },
    "config": {
        "html": "html/config.html",
        "js": [
            "https://example.com/js/config.js",
            "js/config.js"
        ],
        "css": [
            "css/config.css",
            "https://example.com/css/config.css"
        ],
        "required_params": ["Param1", "Param2"]
    }
}


打包

为了打包方便,作成的各个文件按照资源配置文件来进行配置。

文件配置的范例

css/
  - customize.css //PC端专用CSS文件
  - config.css //设置页面专用CSS文件
html/
  - config.html //设置页面用html文件
image/
  - icon.png //图标文件
js/
  - customize.js.js //PC端专用JavaScript文件
  - mobile-customize.js //智能手机端专用JavaScript文件
  - config.js //设置页面用JavaScript文件
manifest.json //资源配置文件

接下来,使用打包工具按下面的操作步骤打包。

配置获取的打包工具

例:/work/

移动到配置好打包工具的文件夹下。

命令行范例:
$cd /work/

运行打包工具。指定资源配置文件所在的文件夹作为第一参数。

命令行范例:
$package.sh <manifest.json所在的文件夹>

成功的话,在执行完的文件夹下,会创建出以下的文件夹和文件。※插件ID为 "hkfgjeehkaajnbmfojmpbgcpfalbfhjn" 时的范例

keys/
  - check_plugin.hkfgjeehkaajnbmfojmpbgcpfalbfhjn.ppk //密钥文件
plugins/
  /hkfgjeehkaajnbmfojmpbgcpfalbfhjn
  - plugin.zip //打包好的文件

密钥文件,在第二次或以后的打包时也会使用到,所以请注意不要遗失。

※第二次或以后的打包

第二次或以后的打包时,请像以下这样指定密钥文件。

命令行范例:
$package.sh <manifest.json所在的文件夹> <首次打包时生成的密钥文件>

导入

在插件管理页面上,点击 “导入”,将操作步骤3里创建的打包文件 “plugin.zip” 导入到kintone环境里。在 “导入的插件” 里显示出我们这次作成的插件的话就成功了。

001583bf6a57d8d26abccefb4c63b8b

001583bf6f14cdb97f255d6ba2d1189

  • 可导入的文件大小,最大为100MB。

补充

  • 如果上传了相同插件ID的插件,会自动覆盖安装,并立刻应用到您正在使用中的应用中。


回复(2)

  • betsy_yan

    谢谢提醒,已调整。请尽情阅读吧!

    引用 dd000 的回复:

    >> 资源配置文件的范例范例好像没有显示。

  • dd000

    >> 资源配置文件的范例

    范例好像没有显示。


注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
您需要登录后才可以回复