• 概要

• 步骤0.准备插件用的应用

• 步骤1.准备做成插件所需的文件

• 步骤2.创建资源配置清单文件

• 步骤3.打包

• 步骤4.导入和动作确认

• 范例

• 最后

概要

关于开发插件所需的文件以及插件的打包方法请参考kintone插件开发流程。

本次以“kintone日历活动插件”为例，向大家介绍插件的做成方法。

步骤0.准备插件用的应用

关于应用必须的设置，请参考kintone日历活动插件的设置表单。

步骤1.准备做成插件所需的文件

根据kintone 插件开发流程，我们来作成文件。

图标文件

使用画图软件作成下面这样的图标文件。

文件名叫“colorful-weekly.png”。

前台PC专用JavaScript文件

重点

• 用kintone.plugin.app.getConfig()获取插件的设置信息。
  

• 应用列表页面
  - 从插件设置信息中获取列表，用FullCalendar并将其显示成日历形式（可切换显示日/周/月）。
  - 更改活动的时间时，更新相应的数据。
  - 根据插件的设置信息，流程管理状态按照指定的颜色显示。
  

• 记录编辑页面/记录添加页面/列表编辑页面
  - 控制活动开始时间和结束时间的输入

• 时间格式等的处理用了Moment。
  

/*
 * eventCalendar Plug-in
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 */
jQuery.noConflict();
(function($, PLUGIN_ID) {
    'use strict';

    // 根据用户设置的语言切换显示中/日
    function createMultilingual(num){
        var user_lang = kintone.getLoginUser().language;
        var multilingual = {
            'ja':{
                '1': 'YYYY年M月',
                '2': 'YYYY年 M月 D日',
                '3': 'YYYY年 M月 D日[(]ddd[)]',
                '4':'今日',
                '5': '月',
                '6': '週',
                '7': '日',
                '8': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                '9': ['日曜', '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
                '10': ['日', '月', '火', '水', '木', '金', '土'],
                '11': 'すべて見る',
                '12':'未入力項目があります',
                '13': '必須です',
                '14': '開始日時が終了日時より未来になっています',
                '15': '終了日時より過去にして下さい',
                '16': '開始日時より未来にして下さい',
                '17': '開始日時と終了日時は1分以上あけて下さ'
            },
            'zh':{
                '1': 'YYYY年M月',
                '2': 'YYYY年 M月 D日',
                '3': 'YYYY年 M月 D日[(]ddd[)]',
                '4':'今天',
                '5': '月',
                '6': '周',
                '7': '日',
                '8': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                '9': ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                '10': ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                '11': '显示全部',
                '12':'有必填项未填',
                '13': '必填',
                '14': '开始时间比结束时间晚',
                '15': '请选择比结束时间早的时间',
                '16': '请选择比开始时间晚的时间',
                '17': '开始时间和结束时间必须间隔至少1分钟'
            }
        };
        if(!multilingual[user_lang]) {
            user_lang = 'ja';
        }
        return multilingual[user_lang][num];
    }

    // 在日历上更改活动时间时的更新处理
    function putRecord(event) {
        var putConfig = kintone.plugin.app.getConfig(PLUGIN_ID);
        var stdtKey = putConfig.start_datetime;
        var eddtKey = putConfig.end_datetime;

        kintone.api('/k/v1/record', 'PUT', {
            'app': kintone.app.getId(),
            'id': event.rec,
            'record': (function() {
                var param = {};
                param[stdtKey] = {
                    'value': moment(event.start).add(-9, 'hours').format('YYYY-MM-DDTHH:mm:ssZ')
                };
                param[eddtKey] = {
                    'value': moment(event.end).add(-9, 'hours').format('YYYY-MM-DDTHH:mm:ssZ')
                };
                return param;
            })()
        });
    }

    // 获取所有记录的函数
    function fetchRecords(appId, query, opt_offset, opt_limit, opt_records) {
        var offset = opt_offset || 0;
        var limit = opt_limit || 500;
        var allRecords = opt_records || [];
        var params = {app: appId, query: query + ' limit ' + limit + ' offset ' + offset};
        return kintone.api('/k/v1/records', 'GET', params).then(function(resp) {
            allRecords = allRecords.concat(resp.records);
            if (resp.records.length === limit) {
                return fetchRecords(appId, query, offset + limit, limit, allRecords);
            }
            return allRecords;
        });
    }

    // 显示记录列表页面时的处理
    kintone.events.on('app.record.index.show', function(event) {
        var config = kintone.plugin.app.getConfig(PLUGIN_ID);
        if (!config) {
            return false;
        }

        new kintone.Promise(function(resolve, reject) {

            var evTitle = config.name;
            var evStart = config.start_datetime;
            var evEnd = config.end_datetime;

            var startDate;
            var endDate;

            fetchRecords(kintone.app.getId(), '').then(function(calRecords) {

                var records = calRecords;
                var recEvents = [];
                // 当有记录存在时循环以下处理
                if (records.length !== 0) {
                    for (var i = 0; i < records.length; i++) {
                        startDate = moment(records[i][evStart].value);
                        endDate = moment(records[i][evEnd].value);

                        // 当活动背景设设置有误或流程管理功能未启用时默认显示蓝色
                        var eventColor = '#0000ff';
                        // 设置活动背景色的处理
                        var eventStatus
                        var flag = false;
                        if(typeof (records[i].ステータス) !== 'undefined') {
                            eventStatus = records[i].ステータス.value;
                        } else if(typeof (records[i].状态) !== 'undefined'){
                            eventStatus = records[i].状态.value;
                        } else if(typeof (records[i].Status) !== 'undefined') {
                            eventStatus = records[i].Status.value;
                        } else {
                            flag = true;
                        }

                        if(flag === false) {
                            for (var k = 1; k < 6; k++) {
                                var stsPropName = 'status' + k;
                                var clrPropName = 'color' + k;
                                var status = config[stsPropName];
                                if (status === eventStatus) {
                                    eventColor = config[clrPropName];
                                    break;
                                }
                            }
                        }

                        recEvents.push({
                            title: records[i][evTitle].value,
                            start: startDate.format('YYYY-MM-DD HH:mm:ss'),
                            end: endDate.format('YYYY-MM-DD HH:mm:ss'),
                            url: location.protocol + '//' + location.hostname + '/k/' +
                                kintone.app.getId() + '/show#record=' + records[i].$id.value,
                            rec: records[i].$id.value,
                            backgroundColor: eventColor,
                            borderColor: eventColor
                        });
                    }
                }

                // 设置日历
                $('#calendar').fullCalendar({
                    lang: 'ja',
                    theme: false,
                    // 顶部的按钮和标题
                    header: {
                        left: 'prev,next, today',
                        center: 'title',
                        right: ' month,agendaWeek,agendaDay'
                    },
                    // 日历按日显示时
                    columnFormat: {
                        month: 'ddd',
                        week: 'M/D[(]ddd[)]',
                        day: 'M/D[(]ddd[)]'
                    },
                    // 日历的标题
                    titleFormat: {
                        month: createMultilingual('1'),
                        week: createMultilingual('2'),
                        day: createMultilingual('3')
                    },
                    // 按钮里的字符
                    buttonText: {
                        prev: '＜',
                        next: '＞',
                        today: createMultilingual('4'),
                        month: createMultilingual('5'),
                        week: createMultilingual('6'),
                        day: createMultilingual('7')
                    },
                    // 使用以周日为起始日的日历
                    firstDay: '0',
                    // 显示周末（周六，周日）
                    weekends: true,
                    // 默认按月显示
                    defaultView: 'month',
                    // 月的处理
                    monthNames: createMultilingual('8'),
                    monthNamesShort: createMultilingual('8'),
                    // 周的处理
                    dayNames: createMultilingual('9'),
                    dayNamesShort: createMultilingual('10'),
                    // 各日历的时间格式
                    axisFormat: 'H:mm',
                    timeFormat: 'H:mm',
                    // 在日历上编辑活动
                    editable: true,
                    durationEditable: true,
                    startEditable: true,
                    unselectAuto: true,
                    unselectCancel: '',
                    dragRevertDuration: 100,
                    // 不显示一整天的预定
                    allDaySlot: false,
                    // 使用以0点为一天的起点的日历
                    nextDayThreshold: '00:00:00',
                    // 日历的高度
                    height: 700,
                    contentHeight: 600,
                    // 时间轴的单位
                    slotDuration: '01:00:00',
                    // 拉动条状移动时，按每几分为单位移动
                    snapDuration: '01:00:00',
                    // 按日显示时的详细显示
                    views: {
                        day: {
                            slotDuration: '00:30:00',
                            snapDuration: '00:30:00',
                            scrollTime: '06:00:00'
                        }
                    },
                    minTime: '00:00:00',
                    maxTime: '24:00:00',
                    // 初始时间位置
                    scrollTime: '00:00:00',
                    // 按月显示时，活动如果太多省略显示不下的部分
                    eventLimit: true,
                    eventLimitText: createMultilingual('11'),
                    eventResize: function(ev, delta, revertFunc, jsEvent, ui, view) {
                        putRecord(ev);
                        $('#calendar').fullCalendar('unselect');
                    },
                    eventDrop: function(ev, delta, revertFunc, jsEvent, ui, view) {
                        putRecord(ev);
                        $('#calendar').fullCalendar('unselect');
                    },
                    eventSources: [{
                        events: recEvents
                    }]
                });
                resolve(event);
            });
        }).then(function() {
            return event;
        });
    });


    // 添加记录・编辑记录・在列表页面编辑记录时
    kintone.events.on(['app.record.create.submit', 'app.record.edit.submit',
        'app.record.index.edit.submit'], function(event) {
        var record = event.record;

        var config = kintone.plugin.app.getConfig(PLUGIN_ID);
        if (!config) {
            return false;
        }

        var evTitleVal = record[config.name].value;
        var evStartVal = record[config.start_datetime].value;
        var evEndVal = record[config.end_datetime].value;

        // 活动标题・活动开始/结束时间不可为空
        if (!evTitleVal || !evStartVal || !evEndVal) {
            event.error = createMultilingual('12');
            if (!evTitleVal) {
                record[config.name].error = createMultilingual('13');
            }
            if (!evStartVal) {
                record[config.start_datetime].error = createMultilingual('13');
            }
            if (!evEndVal) {
                record[config.end_datetime].error = createMultilingual('13');
            }
        // 开始时间晚于结束时间时报错
        } else if (moment(evStartVal).format('X') > moment(evEndVal).format('X')) {
            event.error = createMultilingual('14');
            record[config.start_datetime].error = createMultilingual('15');
            record[config.end_datetime].error = createMultilingual('16');
        // 开始时间和结束时间相同时报错（FullCalendar规格上的要求）
        } else if (moment(evStartVal).format('X') === moment(evEndVal).format('X')) {
            event.error = createMultilingual('17');
            record[config.start_datetime].error = createMultilingual('15');
            record[config.end_datetime].error = createMultilingual('16');
        }

        return event;

    });

})(jQuery, kintone.$PLUGIN_ID);

以上代码另存为desktop.js，文字编码设为UTF-8，保存。

前台PC专用CSS文件

对日历列表上的周六/周日和当天等的背景色进行设置。

将以下文件保存为customize.css。

/* 周日 */
.fc-head .fc-sun {
    background: rgb(250, 220, 233);
}

/* 周六 */
.fc-head .fc-sat {
    background: rgb(211, 237, 251);
}

/* 今日 */
.fc-today {
    background: rgb(255, 255, 204);
}

.fc-center {
    margin-right: 1.75em;
}

.fc-clear {
    clear: none;
}

另外还用到了FullCalendar库提供的CSS，在后面的资源配置文件中会将其链接添加进去。此处无需做处理。

前台智能手机端专用JavaScript文件

本次省略。

后台设置页面的HTML文件

这次我们将创建一个设置页面的HTML文件。
设置页面上，放置3个下拉框，可分别从应用表单选择一个字段作为活动标题，活动的开始时间和结束数据。还有一个5行列表，可最多对5个流程管理的状态分别设置背景色

重点

• 设置页面的HTML可以只写正文（body）内容。

• 本次为了实现可以根据用户设置的语言自动切换中文和日文的功能，使用jsrender库将设置页面上的文字放到JavaScript文件的变量里，然后在HTML里调用该变量。

<!--    
* eventCalendar Plug-in    
* Copyright (c) 2016 Cybozu    
*    
* Licensed under the MIT License    
-->    
<div id="EventCalendarPlugin">    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span id ="container_label">{{html:terms.event_title}}</span>    
      <span class="kintoneplugin-require">*</span>    
    </label>    
    <div class="kintoneplugin-row">{{html:terms.event_title_description}}</div>    
    <div class="kintoneplugin-select-outer">    
      <div class="kintoneplugin-select">    
        <select id="name_code">    
        </select>    
      </div>    
    </div>    
  </div>    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span id ="container_label">{{html:terms.start_dateTime}}</span>    
      <span class="kintoneplugin-require">*</span>    
    </label>    
    <div class="kintoneplugin-row">{{html:terms.start_dateTime_description}}</div>    
    <div class="kintoneplugin-select-outer">    
      <div class="kintoneplugin-select">    
        <select id="start_datetime_code">    
        </select>    
      </div>    
    </div>    
  </div>    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span id ="container_label">{{html:terms.end_dateTime}}</span>    
      <span class="kintoneplugin-require">*</span>    
    </label>    
    <div class="kintoneplugin-row">{{html:terms.end_dateTime_description}}</div>    
    <div class="kintoneplugin-select-outer">    
      <div class="kintoneplugin-select">    
        <select id="end_datetime_code">    
        </select>    
      </div>    
    </div>    
  </div>    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span id ="container_label">{{html:terms.background}}</span>    
    </label>    
    <div class="kintoneplugin-row">{{html:terms.background_description}}</div>    
      <div class="kintoneplugin-input-outer">    
        <table>    
          <tr style="background:#ccccff">    
            <th>No.</th>    
            <th>{{html:terms.background_status}}</th>    
            <th>{{html:terms.background_color}}</th>    
          </tr>    
          <tr>    
            <td>1</td>    
            <td><input id="status1" class="kintoneplugin-input-text"></input>    
            </td>    
            <td><input id="color1" class="kintoneplugin-input-text"></input>    
            </td>    
          </tr>    
          <tr>    
            <td>2</td>    
            <td><input id="status2" class="kintoneplugin-input-text"></input>    
            </td>    
            <td><input id="color2" class="kintoneplugin-input-text"></input>    
            </td>    
          </tr>    
          <tr>    
            <td>3</td>    
            <td><input id="status3" class="kintoneplugin-input-text"></input>    
            </td>    
            <td><input id="color3" class="kintoneplugin-input-text"></input>    
            </td>    
          </tr>    
          <tr>    
            <td>4</td>    
            <td><input id="status4" class="kintoneplugin-input-text"></input>    
            </td>    
            <td><input id="color4" class="kintoneplugin-input-text"></input>    
            </td>    
          </tr>    
          <tr>    
            <td>5</td>    
            <td><input id="status5" class="kintoneplugin-input-text"></input>    
            </td>    
            <td><input id="color5" class="kintoneplugin-input-text"></input>    
            </td>    
          </tr>    
        </table>    
      </div>    
  </div>    
<div class="block">    
    <button type="button" id="submit" class="kintoneplugin-button-dialog-ok">{{html:terms.save_button}}</button>    
    <button type="button" id="cancel" class="kintoneplugin-button-dialog-cancel">{{html:terms.cancel_button}}</button>    
  </div>    
</div>

单独一个HTML文件在浏览器上打开时显示如下。

插件打包后，HTML文件会读取Javascript文件中含有设置页面文字的变量，显示结果如下。

写完之后，以UTF-8的格式保存。文件名为“config.html"。

后续请点击【kintone活动日历插件的作成范例【后篇】】