Posted at

自作Webフォームからkintoneへデータを登録する方法


はじめに

ハッカソンでkintoneを使う際、よく自作Webサイトから登録 というシナリオを耳にします。

クリックイベントでaxios等を用いてデータをkintoneへ投げればいけそうなのですが、実は直接はやりとりができません。


▼ セキュアコーディング ガイドライン 【クロスドメイン制約】

https://developer.cybozu.io/hc/ja/articles/201919400#step6

クロスドメイン制約のため、XHR(XMLHttpRequest) を使用したcybozu.comと外部サイトとの通信はできません。Access-Control-Allow-Origin ヘッダーは付与できません。


そのため、上記のシナリオを実現させるためには、サーバを経由 しないといけないわけです。


サンプルコード


  • html

Webフォームは普通に作ればOKです。リクエストの送信機能には axios を利用しています。


index.html

<body>

<label>テキスト</label>
<input id="text" type="text">
<div>
<button id="submit">送信</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script src="script.js"></script>
</body>


  • script.js


script.js

(() => {

'use strict';

document.getElementById('submit').onclick = () => {
const params = {
text: document.getElementById('text').value
};
axios.post("{Server's URL}", params);
};
})();



  • サーバ (Node.js)


handler.js

'use strict';

module.exports.main = async event => {
console.log(event);
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify({
message: '成功!'
}),
};
};


サーバに AWS Lambda を利用する場合、Serverless Framework を使うととても楽です!!

# create dir and move

$ mkdir my_project;cd $_

# create aws lambda
sls create -t aws-nodejs

# ~
# edit serverless.yml and handler.js
# ~

# deploy
$ sls deploy


おわりに

自作Webサイトからkintoneへデータを登録する場合は、こちらのやり方を参考にぜひお試しください〜

それでは!≧(+・` ཀ・´)≦