はじめに

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

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

はじめに

サンプルコード

おわりに