中文
Index
概要
在上一篇“kintone插件开发入门【Part1: 优点篇】”中，介绍了不选择自定义，而是选择用kintone插件的优点。
kintone插件的优点有
批量上传JS, css文件
更改设置页面的设计
一次性应用于多个应用&一次性升级
隐藏重要信息
关于第4点的“隐藏重要信息”，在kintone插件中是如何隐藏信息的，有些部分很难简单表达清楚。
因此，本篇通过边演示边解说的方法介绍kintone插件是如何隐藏信息的。
推荐以下人员使用
想尝试kintone插件开发的人员
想进一步了解kintone插件优点的人员
想了解kintone插件JavaScript API使用方法的人员
演示环境
本次演示中，用到了
AWS EC2 ( Linux )
Node.js ( Express )
等。本次使用的是以上环境，但只要是可以确认请求的头部信息的环境，其他的也可以。
(比如：Apache ＋ PHP等)
另外，演示用的浏览器本次使用Google Chrome。
使用上面的环境搭建服务器，然后从kintone通过kintone插件JavaScript API发送请求，以此来演示并确认请求是如何发送的。
具体步骤
步骤1：在插件上使用kintone.plugin.app.setProxyConfig()把信息设置给头部（头部A）
↓
步骤2: 在自定义用的JavaScript文件上，把不同的信息设置给头部（头部B）
↓
步骤3：用kintone.plugin.app.proxy()把请求发送给服务器。
↓
步骤4：在步骤3中发送的头部信息里，是否是只能看到头部B信息，但看不到头部A的信息。
↓
步骤5：确认服务器。确认头部A,头部B的信息是否可以看得到。
↓
这样就可以确认插件保存的信息是被隐藏了的！
关于服务器端的环境
Node.js的开发环境是在AWS上，按照以下步骤进行搭建。
// 安装用于生成Express应用模板的“express-generator” $ npm i express-generator -g // 创建Express应用，命名为“kintone-app” $ express kintone-app // 切换目录 ＆ 安装包 $ cd kintone-app && npm install // 启动express $ node ./bin/www
在上面创建的应用中，本次只使用“./routes/index.js”。如下编辑index.js
var express = require('express');
var router = express.Router();
//从kintone接受请求
router.post('/api/data', function(req, res, next) {
//显示日志
console.log(req.headers);
res.send('send');
});
module.exports = router;这次URL的路径指定为“指定的URL/api/data”、HTTP方法为POST，设为显示日志。
到这里，服务器的准备就完成了。
关于Node.js,Express的详情，请参考官网的手册。
Express官网手册
关于kintone端的环境
接下来，在kintone端使用kintone插件JavaScript API保存上面构建的信息。
这次，做了一个简单的插件，可在插件设置页面保存信息，然后在kintone记录列表页面向服务器端发送API请求。我们就用这个插件来执行。
（本次使用的插件范例公开在此处。）
文件夹的构成如下。
kintoneProxySamplePlugin
/config_css
51-modern-default.css
/config_js
config.js
/contents
icon.png
setting.html
/desktops
desktop.js
manifest.json
kintone插件的设置页面
首先，在setting.html上创建文本字段，在文本字段内输入的信息用kintone插件JavaScript API的kintone.plugin.app.setProxyConfig()保存。
以下是范例代码。
<div> <div class="block"> <label class="kintoneplugin-label"> <span id ="container_label">插件设置页面</span> </label><br > <div class="kintoneplugin-desc">输入要保存在插件上的文本</div> <div class="kintoneplugin-input-outer"> <input id="inputText" class="kintoneplugin-input-text" type="text"> </div> <div class="block"> <button type="button" id="check-plugin-submit" class="kintoneplugin-button-dialog-ok"> 保存 </button> <button type="button" id="check-plugin-cancel" class="kintoneplugin-button-dialog-cancel"> 取消 </button> </div> </div> </div>
kintone插件设置用JavaScript文件
接下来，修改插件设置页面的JavaScript文件“config.js”的代码，使其可将信息保存在插件。
jQuery.noConflict();
(function($, PLUGIN_ID) {
'use strict';
$('#check-plugin-submit').on('click', function() {
var URL = '指定发送请求的URL';
// 路径
var PATH = 'api/data';
// 获取HTML的inputField的文本信息
var text = $('#inputText').val();
// 要保存的信息放在头部
var pluginHeader = {
'CUSTOM-REQUEST-HEADER': text
};
kintone.plugin.app.setProxyConfig(URL + PATH, 'POST', pluginHeader, {});
});
$('#check-plugin-cancel').on('click', function() {
history.back();
});
})(jQuery, kintone.$PLUGIN_ID);kintone自定义的JavaScript文件
接下来，修改PC上的自定义JavaScript文件“desktop.js”，使其在打开kintone的列表页面时，执行kintone插件JavaScript API的kintone.plugin.app.proxy()。
(function(PLUGIN_ID) {
'use strict';
kintone.events.on('app.record.index.show', function(event) {
var URL = '指定发送请求的URL';
// 指定路径
var PATH = 'api/data';
// 要保存的信息放到头部
var desktopHeader = {
'DESKTOP_HEADER': 'hoge'
};
// 向服务器发送请求
kintone.plugin.app.proxy(PLUGIN_ID, URL + PATH, 'POST', desktopHeader, {}, function(body, status, headers) {
console.log(status, body, headers);
}, function(error) {
console.log(error);
});
return event;
});
})(kintone.$PLUGIN_ID);设置演示用的变量
// 这是步骤2
var desktopHeader = {
'DESKTOP_HEADER': 'hoge'
};另外，像这样也要在自定义环境上保存信息。
在插件上保存的pluginHeader变量
在自定义环境上保存的desktopHeader变量
准备这两个变量，在开发者工具的console上确认这些是怎么显示的。
※注意点
在实际演示之前，介绍一下使用kintone插件JavaScript API时的注意点。作为通过 kintone插件JavaScript API发送请求的注意事项，正如保存外部API执行时所需的信息时所述，用“kintone.plugin.app.setProxyConfig()”设置的信息和用“kintone.plugin.app.proxy()”设置的信息中，
应用
插件
HTTP方法
API的URL的前面
这4各条件必须要一致。
演示
那么，我们就用上面的开发环境进行演示一下吧。
首先，在插件的设置页面的输入字段里，输入用proxy保存的文本。
比如本次输入“kintoneProxyTest”。
保存后，更新应用，返回记录列表页面时，将自动执行kintone.plugin.app.proxy()。
在记录列表页面，Google developer console的“Network”的“XHR"栏内，确认本次发送的请求头部。
(这是步骤4)
像这样，在自定义上保存的变量headers可以看到，但在插件上保存的变量看不到。但是，去看一下Node.js的console。
(这是步骤5)
可以看到在插件上保存的变量！！
总结
像这样，充分利用“kintone.plugin.app.setProxyConfig() ”和“ kintone.plugin.app.proxy() ”的话，就可以将API token等重要信息保存在kintone服务器上，在需要的时候再去取。
本次为了演示，使用了搭建的服务器，但是在实际中，跟Slack及Google等各种外部服务整合的情况比较常见。
其中，在后篇中就介绍了使用slack的API进行整合的范例，如您感兴趣，请务必阅读一下哦。
“kintone插件开发入门 【Part3: 信息的隐藏方法 实践篇】”
使用自定义也是可以跟外部服务整合的，但是就像本次演示的那样，在自定义页面上可以看到API token等重要信息。使用Google Developer Console等的话任何人都可以看到该信息。因此，如想要确保安全正常使用，请务必考虑一下插件哦。
本Tips在2018年11月版的 kintone中确认过。
