中文
Index
注意事项
此插件是用于演示如何创建插件的范例，才望子不予以保证可正常运行。
不对此范例提供技术支持。
kintone的插件功能只可在标准版使用，简易版不可使用这点请大家注意一下。
概要
这次为大家介绍的是，将范例中的 “用甘特图显示To Do” Javascript做成插件时的步骤。
关于操作详情请参考 kintone 插件开发流程。
主要的更新信息
2017/05： 对应了大项目－小项目表示形式。其他的追加功能请参考“更新履歴”。
注意：使用旧版本插件的系统，更新到新版本插件时，由于之前的颜色设置将变得无效，所以需要到插件的设置页面重新设置。
另外、v2.0.0和以前的版本相比，在设置方法上稍微有点不一样。安装前请务必确认下这边的文章。
甘特图插件更新的详细解说 （暂时仅提供日文）
完成的样子
下面是使用这个插件后，应用上显示的样子。
根据记录列表里的记录数据来显示甘特图。
应用准备
为方便您确认插件的动作，在此提供了应用模板，点击“To Do”下载 。
※也可在现有的应用中直接添加。
将应用添加到您的kintone环境里，并添加几条范例数据。
※像完成的样子这样，想要设置子目录时，需要追加表格字段。详细的设定方法可以参考这里 （暂时仅提供日文）的文章。
插件文件的结构
访问GitHub ，并下载各个文件夹。这些文件夹的里面有一个叫 " examples/ganttchart " 的，是这次使用的整个文件包。
“ganttchart” 下面的文件结构如下图。
以下是各文件夹内的文件说明。
文件夹：css
51-modern-default.css
才望子提供的插件设置页面的样式。addin-style.css
加载原始配色方案的样式。
文件夹：html
config.html
插件设置页面的HTML。此文件用于制作设置页面，用来设置显示甘特图所必须的如下字段。
标题
副标题
开始日
结束日
甘特图颜色
默认显示的单位（小时、天、周、月的任意一个单位）
设置页面的语言会切换成登录用户的语言。主要使用了JsRender 。
使用插件后的设置页面的范例
文件夹：img
icon.png
插件的图标
文件夹：js
config.js
插件设置页面的程序。在这里，主要做以下的处理。点击 “保存” 时，为空的字段显示警告。
点击 “保存” 时，页面内设置的值存入插件变量内
点击 “取消” 时，返回上一画面。
设置插件变量后，设置各字段值。
设置标题字段时，如选择表格内字段，将会出现警告。
表格字段与非表格字段混在一起保存时，将会出现警告。
desktop-ganttchart.js
甘特图的程序。（PC端专用）
除了使用插件以外，也可上传到应用的 “导入JavaScript” 中使用。jquery.ui.datepicker-zh-CN.min.js
选择开始日和结束日的时候使用Datepicker库。
文件：manifest.json
插件的资源管理配置文件。
使用Cybozu CDN 的jQuery、jQuery.Gantt、JSRender。
支持日语、英语、中文的设置页面。
打包
关于插件的打包方法，请参考 此Tips的打包步骤 ，进行打包。
导入和设置
在设置页面，将下载后的 “plugin.zip” 导入到kintone的系统管理页面。
在待安装的应用的设置页面上安装插件。
在插件的设置页面，设置显示甘特图的字段。
“kintone活动日历插件的作成范例” 的教程里介绍了插件的安装方法和动作确认，大家可以参考一下。
更新历史记录
2017/05 v2.0.0公开了：追加了下面的功能。
对应了表单的表格化（非表格化的情况下也可运行）。
翻页后甘特图可以重新渲染。
给甘特图的周六和周日添加了颜色。
可在调色板中选择优先度的颜色。
增加了优先度的行添加功能。
初始显示的日程里，追加了 “时间”。
鼠标悬停出现的弹出框显示了设置页面设置的全部数据。
鼠标悬停出现的弹出框里显示字段名。
点击横条会出现一个窗口，可以更新开始日和截止日。
横条的标题显示小项目，如果没有小项目的话，显示大项目。
追加了设置页面上的项目和甘特图上哪个项目关联的说明图片。
2017/08/24 v2.0.1公开了，更新了以下的点。
样式表由 “51-current-default.css” 更新为 “51-modern-default.css”。
其他一些轻微的修订。
2017/08/25 v2.0.2 公开了。修改了一些bug。
2017/11/24 v2.0.3 公开了。修改了 “addin-style.css” 。没有更改功能。详细情况可参考这里的通知。
2020/04/06 v2.1发布了。插件显示语言新增了中文，可根据用户自身环境的语言设置来切换中文/日文/英文了。
2021/03/22 v2.2发布了。修复了开始日期设置的字段值为空时甘特图显示异常的问题。
2022/09/06 v2.2.1 发布了。将JavaScript代码改写成ES6之后的写法。
2022/10/05 v2.2.2 发布了。修改了受系统基础架构更新影响的内容。
限制事项
不支持智能手机端的浏览器。
日程视图里无法使用甘特图。
大项目和小项目最多显示全角6个文字，全角7个文字以上的情形，最多显示到全角5个文字为止。
放大或缩小浏览器页面时，甘特图的布局可能会奔溃。
若设置为开始日或结束日的字段的值为空，则甘特图仅显示大项目和小项目。
若不想查看这些记录，请使用筛选功能对其进行过滤。
所使用的OSS许可证信息
此插件使用的OSS许可证如下：
回复(10)
嗯 中文版是因为 "js/jquery.ui.datepicker-ja.min.js", 这个配置写错了，我上面改成"js/jquery.ui.datepicker-zh-CN.min.js",就可以了
首先，非常感谢你的帮助，问题已经解决了。刚刚我们公司的一位同事 从 日文版的 上面下载的 甘特图 的压缩包，在公司环境 插件里面 导入后直接就可以用了，下面是 日文版 的 manifest.json 配置文件：
{
"manifest_version":1,
"version":2,
"type":"APP",
"name":{
"ja":"ガントチャートプラグイン",
"en":"GanttChart plugin",
"zh":"甘特图插件"
},
"description":{
"ja":"これはガントチャートを表示するサンプルのプラグインです。",
"en":"This is sample Gantt chart plugin.",
"zh":"这是插件的例子"
},
"icon":"img/icon.png",
"homepage_url":{
"ja":"https://developer.cybozu.io/hc/ja/articles/203716110",
"en":"https://developer.cybozu.io/hc/ja/articles/203716110",
"zh":"https://developer.cybozu.io/hc/ja/articles/203716110"
},
"desktop":{
"js":[
"https://js.cybozu.com/jquery/2.1.3/jquery.min.js",
"https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js",
"https://js.kintone.com/momentjs/2.14.1/moment.min.js",
"https://momentjs.com/downloads/moment-timezone-with-data.min.js",
"https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js",
"js/jquery.ui.datepicker-ja.min.js",
"js/desktop-ganttchart.js"
],
"css":[
"https://js.cybozu.com/jquerygantt/20140623/css/style.css",
"https://js.cybozu.com/jqueryui/1.12.1/themes/smoothness/jquery-ui.css",
"css/addin-style.css"
]
},
"mobile":{
"js":[
"https://js.cybozu.com/jquery/2.1.3/jquery.min.js"
]
},
"config":{
"html":"html/config.html",
"js":[
"https://js.cybozu.com/jquery/2.1.3/jquery.min.js",
"https://js.kintone.com/jsrender/0.9.80/jsrender.min.js",
"thirdparties/jqColorPicker.min.js",
"js/config.js"
],
"css":[
"css/51-modern-default.css",
"css/config.css"
],
"required_params":[
"ganttchartTitle",
"ganttchartFrom",
"ganttchartTo",
"ganttchartColor",
"ganttchartScall"
]
}
}
我修改了这个配置文件，你再试下
这个插件是以前的 没有更新
https://gitee.com/cybozudeveloper/plugin-sdk/blob/master/plugin-sdk-master/examples/ganttchart/manifest.json
这个链接中的 甘特图 插件 manifest.json 有没有问题？
我打包的时候总是 报下面的错误：
C:\Users\Administrator\Desktop\wanglichao\kehu\src>kintone-plugin-packer ganttchart
Invalid manifest.json:
- ".desktop.js[5]" should match format "https-url"
- ".desktop.js[5]" should match format "relative-path"
- ".desktop.js[5]" file size should be <= 20MB
- ".desktop.js[5]" should match some schema in anyOf
Failed: Invalid manifest.json
Error: Invalid manifest.json
at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7
这个 教程 的步骤：
访问plugin-sdk ，并下载各个文件夹。这些文件夹的里面有一个叫 " examples/ganttchart " 的，是这次使用的整个文件包。
我这边下载下来了，然后 按照
https://cybozudev.kf5.com/hc/kb/article/1307833
用plugin-packer打包插件文件
这个教程，
执行以下命令，即可开始自动打包。
$cdsample_project$ kintone-plugin-packer plugin_dir但是还是报下面的这个错误，可以帮我看下吗，谢谢。
C:\Users\Administrator\Desktop\wanglichao\kehu\src>kintone-plugin-packer ganttchart
Invalid manifest.json:
- ".desktop.js[5]" should match format "https-url"
- ".desktop.js[5]" should match format "relative-path"
- ".desktop.js[5]" file size should be <= 20MB
- ".desktop.js[5]" should match some schema in anyOf
Failed: Invalid manifest.json
Error: Invalid manifest.json
at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7
下面是我下载的文件里面的 manifest.json 配置文件
{
"manifest_version":1,
"version":2,
"type":"APP",
"name":{
"ja":"ガントチャートプラグイン",
"en":"GanttChart plugin",
"zh":"甘特图插件"
},
"description":{
"ja":"これはガントチャートを表示するサンプルのプラグインです。",
"en":"This is sample Gantt chart plugin.",
"zh":"这是插件的例子"
},
"icon":"img/icon.png",
"homepage_url":{
"ja":"https://cybozudev.kf5.com/hc/kb/article/1007997",
"en":"https://cybozudev.kf5.com/hc/kb/article/1007997",
"zh":"https://cybozudev.kf5.com/hc/kb/article/1007997"
},
"desktop":{
"js":[
"https://js.cybozu.cn/jquery/2.1.3/jquery.min.js",
"https://js.cybozu.cn/jquerygantt/20140623/jquery.fn.gantt.min.js",
"https://js.kintone.com/momentjs/2.14.1/moment.min.js",
"https://momentjs.com/downloads/moment-timezone-with-data.min.js",
"https://js.cybozu.cn/jqueryui/1.12.1/jquery-ui.min.js",
"js/jquery.ui.datepicker-ja.min.js",
"js/desktop-ganttchart.js"
],
"css":[
"https://js.cybozu.cn/jquerygantt/20140623/css/style.css",
"https://js.cybozu.cn/jqueryui/1.12.1/themes/smoothness/jquery-ui.css",
"css/addin-style.css"
]
},
"mobile":{
"js":[
"https://js.cybozu.cn/jquery/2.1.3/jquery.min.js"
]
},
"config":{
"html":"html/config.html",
"js":[
"https://js.cybozu.cn/jquery/2.1.3/jquery.min.js",
"https://js.kintone.cn/jsrender/0.9.80/jsrender.min.js",
"thirdparties/jqColorPicker.min.js",
"js/config.js"
],
"css":[
"css/51-modern-default.css",
"css/config.css"
],
"required_params":[
"ganttchartTitle",
"ganttchartFrom",
"ganttchartTo",
"ganttchartColor",
"ganttchartScall"
]
}
}
npm是一个工具，用来安装一些nodejs的库，具体 你可以百度下，因为这个涉及到了很多东西。
非常感谢，我 看了打包配置文件， 下面的这个命令 怎么使用?$ npminstall-g @kintone/plugin-packer这个命令在 windows 系统上面怎么用？
Invalid manifest.json
是这个配置文件内写的错了。
请参考
新的打包工具：https://cybozudev.kf5.com/hc/kb/article/1307833
打包的配置文件说明： https://cybozudev.kf5.com/hc/kb/article/1000664/#
我在尝试打包 甘特图插件的时候，遇到了下面的错误，我不清楚该如何处理，可以帮我看下吗，非常感谢。
C:\Users\Administrator\Desktop\wanglichao\kehu\work>kintone-plugin-packer ganttchart
Invalid manifest.json:
- ".desktop.js[5]" should match format "https-url"
- ".desktop.js[5]" should match format "relative-path"
- ".desktop.js[5]" file size should be <= 20MB
- ".desktop.js[5]" should match some schema in anyOf
Failed: Invalid manifest.json
Error: Invalid manifest.json
at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7