概要

在【kintone JavaScript API入门系列】中，我将简单地给大家介绍一下kintone JavaScript API的基本使用方法。如果您希望按照自己的喜好改造kintone、让kintone变得更加酷炫。那我们就一起学习吧！

具有纪念意义的第1篇是自定义kintone的关键。以下介绍JavaScript代码的编写规则、以及将JavaScript上传到 kintone并运行的一系列步骤。另外，还简单地介绍一下使用kintone JavaScript API时最重要的【event】。

此系列教程主要面向对HTML/JavaScript/CSS技术知识有一定基础的人员。关于这些知识，网上、书上都有大量的资料，您可以参考这些资料m(_ _)m

kintone JavaScript的写法 其一

才望子公司规定了kintone自定义时的JavaScript编码指南。在进行kintone自定义之前，让我们简单地了解一下吧(^^♪

① 保存时扩展名选择.js

创建好的JavaScript文件以.js扩展名保存。

②文字编码为UTF-8(无BOM)

关于BOM(字节顺序标记)，并不会因这个使程序发生bug・・・因此不需要恐慌(^^;

但为了避免你陷入死胡同的时候发飙“这什么鬼！(怒)”，请务必记住使用无BOM的UTF-8保存文件 (*^_^*)

③ 用即时函数编写代码

JavaScript最好使用即时函数编写。可能对这个术语有点陌生，但是当你看到代码时，可能就会反应过来“啊啊，是这个啊！”。具体就是这样的。

(function() {
    // 此处写需要处理的内容
})();

说起理由话就长了。简单地说，这样写的话，不用担心会干扰kintone的运行。

还有其他重要的事项，详情请参考【kintone JavaScript 编码指南】。

kintone JavaScript的写法 其二

还有一点希望大家知晓的。它就是安全编码指南！里面写了很多内容，这次只介绍其中一点。

①使用strict 模式

即在处理内容前面加"use strict;"。

(function() {
    "use strict";
    // 此处写要处理的内容
})();

简单地说就是为了避免毫无知觉的情况下犯下重大错误。(^^)该会有人抱怨怎么这么麻烦了吧。请别担心！什么即时函数啊strict模式啊，这些难懂的名称我们暂且不用去管它，只要记住就是这样写的。(如果有人想深入了解，推荐去查一下即时函数和strict模式。)

创建JavaScript 文件

那么，让我们试着编写一下JavaScript文件吧。关于编辑器，用什么都可以，只要是您用得惯的。综合上面所述，我们简单地编写一个弹出alert信息的小程序吧(^^♪

(function() {
    "use strict";
    window.alert('kintone JavaScript API入门系列');
})();

将这个JavaScript文件命名为welcome.js保存。

创建好的文件上传到kintone

接下来，将刚才创建的JavaScript文件上传到kintone看看。关于上传步骤，请参考以下链接。

• 通过JavaScript或CSS自定义kintone

• 通过Javascript或CSS自定义应用

根据步骤上传刚才的JavaScript文件。这里应该没有特别难的地方，我就介绍一点注意事项。

① 扩展名为.js

如果文件名不正确，页面显示如下。

② 别忘了点击【更新应用】按钮

上传文件后如果只点击【保存】，无法应用JavaScript文件。因为很容易忘记，所以在点击【保存】之后，务必点击应用设置页面右上方的【更新应用】按钮。按下之后即弹出以下信息，点击【OK】按钮。忘记了的话等到胡须白了都不会应用到kintone里。务必记住！(我有时候一急起来也会忘记・・・)

③ 文字编码为UTF-8

哎呀！完了。上传的文件保存为UTF-8之外的文字编码了(^^;

重新创建文件，保存为UTF-8，在上传到kintone(^^♪
上传成功的话，应该在以下页面会弹出alert。

• 记录列表页面

• 记录添加页面

• 记录编辑页面

• 记录详情页面

• 记录汇总结果页面（仅限电脑版）

但是，这样所有的页面都会出现同样的东西。如果只希望在记录列表页面弹出的话，就不适用了。该怎么办呢？

让我们来了解一下kintone的事件

接下来要登场的是【事件】＼(^o^)／关于事件的写法请参考事件处理的写法。

kintone.events.on(event, handler(event))

这个是用于添加事件句柄的kintone JavaScript API函数。感觉好像很难的样子。其实并不然(^^)

比如，当【发生○○时】想要【执行××处理】。
以上面函数为列的话：

• ○○对应的是event

• ××对应的是handler

是不是有点明白了？(^^♪
kintone JavaScript API中，○○所对应的event有以下几个。

• 记录列表事件: app.record.index.show

• 记录显示事件: app.record.detail.show

• 记录添加事件: app.record.create.show

• 记录编辑事件: app.record.edit.show

• 图表显示事件: app.report.show

××部分的写法，比起文字说明，可能看实际的运行情况更好理解。
用以下代码覆盖welcome.js的内容，再上传到kintone，然后看一下运行情况(^^♪

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        window.alert('记录列表事件');
    });
    kintone.events.on('app.record.detail.show', function(event) {
        window.alert('记录显示事件');
    });
    kintone.events.on('app.record.create.show', function(event) {
        window.alert('记录添加事件');
    });
    kintone.events.on('app.record.edit.show', function(event) {
        window.alert('记录编辑事件');
    });
    kintone.events.on('app.report.show', function(event) {
        window.alert('图表显示事件');
    });
})();

怎么样？知道在什么情况下什么事件发生了吗？详情请参考事件处理的写法和各事件的介绍页面(^^)

最后

本章作为基础内容的【关键】，介绍了JavaScript的编写规则以及JavaScript上传到kintone并执行的一系列步骤。另外，还介绍了事件。对于在kintone上可以做些什么，是不是有一个大概的印象了？

最后可以参考JavaScript 导入的活用范例（仅提供日文），想象一下自己的应用可以变得多厉害。【cybozu developer network】中也有使用JavaScript进行自定义的范例，建议您务必查看一下。

另外，于4/14升级后的kintone可以指定CSS了，除此之外还不断推出其他各种各样便利的功能。简直如雨后春笋的感觉（笑） 

关于新功能，我将通过这一系列入门篇尽量简单易懂地介绍给大家。下一篇是【第2篇 在记录列表中设置按钮！】。下回见…

Let’s kintone customize＼(^o^)／

该Tips在2014年4月版中进行过确认。

<<第 0篇 开始kintone自定义之前需知晓的5点 | 第 2篇 在记录列表页面中放置按钮！>>