Bubbleとキントーンで問い合わせを連携する（API連携方法）

2024年7月28日 14:53

はじめに

キントーンを運用をしていく中で社外の〇〇システムとデータ連携することができればもっと楽なのになぁ。。と思ったことはないでしょうか。
キントーンと外部サービスのAPI連携を行うことで社外のシステムとも連携でき、下記の動画のようにスムーズな業務に繋げることができます。

ここではノーコードツールのBubbleにて問い合わせ部分を作り、キントーンと組み合わせることで、ホームページへの問い合わせをキントーンに連携する仕組みを作ってみます。

前提

Bubbleとキントーンのアカウント作成は完了している前提で進めます。

連携方法：キントーン側の設定

キントーンの中から「問い合わせ管理」のテンプレートを選択します。

API連携を行うため設定から、APIトークンを選びます。

今回は登録のみなのでレコード追加だけにチェックをして保存します。
その後にアプリ更新をしてください（これをしないとAPIの公開が反映されません）

連携方法：Bubble側の設定

①問い合わせの入力フォームを作成します。

キントーンの画面に合わせて「顧客名」、「ご担当者名」、「問い合わせ種別」、「詳細」の部分をBubbleの問い合わせから連携します。

キントーン側の名称を使うと顧客からの問い合わせフォームとしては少し違和感があるので
・「顧客名」は「会社名」
・「詳細」は「お問い合わせ内容」
として、Bubble側では名称は変えるもののデータは紐づくようにします。

②API Connectorの設定

BubbleのプラグインAPI Connectorをインストールし、連携情報を設定します。登録時の連携方法は下記のマニュアルを参考にします。
https://cybozu.dev/ja/kintone/docs/rest-api/records/add-record/

上記の画像と同じになるように設定してください。
（A）の部分にはあなたのキントーンのドメインを設定してください（xxxx.cybozu.comとなっていてxxxxの部分はあなた固有の文字列）
（B）の部分には「連携方法：キントーン」のところで取得したAPIトークンを設定してください。

Bodyの部分には以下を設定してください。

{
	"app": 5,
	"record": {
		"Customer": {
			"value": "テスト会社"
		},
		"文字列__1行__0": {
			"value": "テスト担当者名"
		},
		"QType": {
			"value": "その他"
		},
		"Detail": {
			"value": "お問い合わせ詳細内容"
		}
	}
}

なお、「"app":5」となっている部分だけあなたのアプリの番号を設定してください。こちらもAPIトークンを取得する画面にて、「app=」と表示されているのでその部分の数字を取ってください。

recordの中が登録するデータです。キントーンの「フィールドコード」という部分と名前が同じにするとデータが紐づけられます。Customerは顧客名と紐づく。

「Initialize call」というボタンを押して、キントーンにデータが登録されていることを確認してください。

このままだと、同じ文字しか連携できないためBodyの部分を可変にします。
以下のように設定してください。

{
	"app": 5,
	"record": {
		"Customer": {
			"value": "<会社名>"
		},
		"文字列__1行__0": {
			"value":  "<お名前>"
		},
		"QType": {
			"value": "<問い合わせ種別>"
		},
		"Detail": {
			"value": "<詳細>"
		}
	}
}