はじめに
ハッカソンで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へデータを登録する場合は、こちらのやり方を参考にぜひお試しください〜
それでは！≧(+･` ཀ･´)≦