Typeform＋kintoneでお手軽登録フォームを作ったよ

# はじめに
仕事関係で某サービスの契約申込フォームを作ったのですが、フォームでTypeformを使っており、契約管理をkintoneで行っているという環境なので、Typeformから新規エントリー（申込）があったら、kintoneにレコードが登録されるように連携しました（なんだか既出感…

> ざっとggr先生に聞くと意外と？記事がなかった？（もしかしたら検索スキルが皆無なだけかもしれない…


連携部分には鉄板のZapierを使ってます。
No-codeということを考えるとわりとはずせない。
サポートしているサービスも1000+。いやーすごいね。

[Zapier | The easiest way to automate your work](https://zapier.com/)
<img max-width="100%" alt="2018-12-22 16-24-59.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/3b843b3b-55ef-3aaa-4e3a-054a03dbb691.png">


# 構成図
構成的にはこんな感じ。シンプル。
<img max-width="100%" alt="nocode_integration.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/1d145925-619e-8d81-f7ea-1dc31225e715.png">

TypeformもkintoneもZapierでサポートされているので、選んでぽちぽちするだけです。

* [Kintone Integrations | Zapier](https://zapier.com/apps/kintone/integrations)
* [Typeform Integrations | Zapier](https://zapier.com/apps/typeform/integrations/)

シンプルな連携ならfreeプランで十分。
この画像にはないけど、これ以外にもTeamプランもある。
<img max-width="100%" alt="2018-12-22 16-42-29.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/c2a343f5-369b-30b6-4005-8b586ab12cab.png">

# 事前準備
Zapierでアカウントを登録します。
あと当然ですが、Typeformで作成済みのフォーム、kintoneで作成済みのアプリがある前提。
なければ先に作成が必要。

kintoneアプリへはAPIトークンでアクセスするので、連携するアプリであらかじめトークンを発行しておきます。
<img max-width="100%" alt="2018-12-19 15-03-39.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/ad3c5bd0-ea85-4a21-17a8-0913d1368596.png">


# Zapier設定
Zapierでは、サービス同士の連携の設定を<strong><font color="red";>Zap</font></strong>と呼びます。

トリガー→アクションの順にウィザードに沿ってぽちぽち設定をしていきます。
今回のパターンでは、

* Typeformから新規エントリー（申込）があったら　<strong><font color="blue";>【=トリガー】</font></strong>
* kintoneに新規レコードを登録する　<strong><font color="blue";>【=アクション】</font></strong>

というような設定になります。

## トリガーの作成
まずはトリガーとなるTypeformの設定をしていきます。
**「Make a Zap!」** をクリックしたら、ウィザードに沿って設定を進めるだけ。
<img max-width="100%" alt="2018-12-22 17-03-36.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/3f67eba7-707f-036c-c166-4bfe758013f8.png">

トリガーとなるアプリを選択する画面が出てくるので、Typeformを選択。
Zap名も忘れないうちに設定しておくことをお勧めするよ！（画像左上）
<img max-width="100%" alt="2018-12-22 13-32-23.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/8ffa0d0c-1ec8-89a1-1c4d-37b5e92b9116.png">

トリガーのタイプは「New Entry」しかないのでそのまま次へ。
<img max-width="100%" alt="2018-12-22 13-31-47.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/08ee7403-fe47-81c6-9930-fca1918770c9.png">

Typeformのアカウントを紐づけます。
連携済みのアカウントがあればすでに出てきますが、新規の場合は「Connect an Account」をクリック。
<img max-width="100%" alt="2018-12-22 17-20-31.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/4a9080ac-d857-7b91-ce77-dbfbc5a67ccb.png">

Typeformのログイン画面が出るので、Typeformのアカウントでログイン。
その後アクセス権などもにょもにょ聞かれますが、ウィザードに沿って画面を進めていくと紐づけができます。

登録が完了したので次へ。
<img max-width="100%" alt="2018-12-19 14-23-12.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/d62d155a-1c39-208a-cbaf-7823b1998eef.png">

Typeformのどのフォームを連携対象にするかを選択。
<img max-width="100%" alt="2018-12-19 14-25-06.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/25f15783-8610-c5f1-7bd9-3822a61337f2.png">


トリガーの作成が完了したら、次は **「Add a Step」** をクリックしてアクションの設定に進みます。
<img max-width="100%" alt="2018-12-22 17-46-34.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/a85e5a7e-b2c9-09e3-517d-a5890187e44c.png">

## アクションの設定
**「Action/Search」** でアクションを登録していきます。
<img max-width="100%" alt="2018-12-22 17-47-34.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/41cab120-5ad7-2b39-c970-661fc1de0196.png">

アクションを行うアプリとしてkintoneを選択。
<img max-width="100%" alt="2018-12-22 13-49-52.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/a87328ca-1a83-5357-b303-c6c5d009c5a7.png">

アクションのタイプを選択します。今回は新規でレコードが追加されるようにしたいので「Create Record」を選択。
<img max-width="100%" alt="2018-12-22 13-50-43.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/76fde86c-386c-a8b8-158a-5aeed5e4d3d0.png">

Typeformと同様に、kintoneのアカウントの紐づけをします。
<img max-width="100%" alt="2018-12-22 13-51-43.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/13fd3f2c-7f77-db0a-13ce-7a3048276b81.png">

kintoneはAPIトークンを使ってアクセスを行うので、事前準備で作成しておいたAPIトークンをここで入力。
<img max-width="100%" alt="2018-12-19 14-57-39.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/7c7b7644-7c36-ab94-463c-1986c91c980d.png">

アカウントの紐づけができたら、フィールドのマッピング。
ここでkintoneのフィールドと、Typeformの項目をマッピングします。
<img max-width="100%" alt="2018-12-22 13-52-48.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/7654e240-d425-5181-799c-6a8ac742092f.png">

これで完成。
<img max-width="100%" alt="2018-12-19 16-05-29.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/ef322a90-d56a-9bd6-617d-b224657af669.png">

あとは、実際にTypeformから申込のテストをしてみて、レコードの中でうまく登録されないフィールドなどがあったら適宜調整していく感じ。


# おわりに
サービスをうまく組み合わせることでコードを極力書かずに連携が実現できたりするものも増えてきているので、アイデアと意欲次第でいろいろできるんじゃないかなー。
もうちょっとチラ裏的な記事にしたかったけど、仕事の延長みたいな記事になったでよ…(；∀；)