【kintone外部連携サービス徹底比較!!】フォームブリッジ・kViewer・じぶんページ・じぶんフォーム・Chobiit for kintone を使ってみた

kintoneとの外部連携を行うサービスは様々あります。
弊社が提供している**Chobiit for kintone**もその1つです。
一見違いがわかりにくのか、よくお客様から他のサービスとどう違うの？とご質問をいただきます。
そこで外部連携を行う代表的なサービス４つ（+Chobiit）をそれぞれどんな機能があるのか、
どのように設定していくのかなどをまとめました！

## 簡単なサービス概要

<a href="https://fb.kintoneapp.com/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/9c80aa3e-92b2-5088-389c-43c118becc11.png" width="30%"></a>
Form Bridge（フォームブリッジ）：kintoneに接続する高機能なwebフォームが作成できるサービス


<a href="https://kv.kintoneapp.com/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/23b5f639-4d43-1e81-9d61-d11a3831b126.png" width="30%"></a>
kViewer（ケイビューワー）:kintoneの情報を外部の人に多様なビューで公開ができるサービス


<a href="https://www.jibun-apps.jp/page"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/38ec76dd-b5c3-c2f9-eea6-1ee4d00074f9.png" width="30%"></a>
じぶんページ：kintoneの情報をじぶんページにログインした外部の人に公開ができるサービス

<a href="https://www.jibun-apps.jp/form"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/1ef7b90d-a7ac-1953-a158-182c53fc6016.png" width="30%"></a>
じぶんフォーム：kintoneと連動したwebフォームの作成ができるサービス

<a href="https://www.novelworks.jp/chobiit/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/27d516ca-651c-69da-5ab3-2876e7f1f834.jpeg" width="40%"></a>
Chobiit for kintone（チョビットフォーキントーン）：kintoneの情報を外部の人に公開、webフォームの作成もできるサービス




# 料金比較
Form Bridge（フォームブリッジ）、kViewer（ケイビューワー）、じぶんページ、じぶんフォームは月額固定料金です。
利用したい機能や人数に応じてプランが異なります。
Chobiit for kintoneは、使った分だけ(Chobiitでの操作に対しての課金）料金となっています。
※2022/8/22更新
![料金比較.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/55239b4b-752c-eded-7c52-59219e75fb9c.png)



# 実際に使ってみた

### Form Bridge（フォームブリッジ）

kintoneに接続する高機能なwebフォームが作成できるサービス
➡<a href="https://fb.kintoneapp.com/">製品ページ</a>から無料試用の申し込みができます。

１）専用のページにログインしてフォームを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/8b59dc5d-9a91-ba61-9348-2c6a75044aa8.png" width="60%">
２）フォーム作成画面
作成できるフォームの種類がとても多いです！
kintoneの複数アプリにデータを保存できるフォーム（プレミアムコースのみ）など
様々なニーズに対応しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/8557e1c2-9352-096e-bd0e-a900395690da.png" width="70%">

３）実際にフォームを作成してみる。
はじめから作成を選びました。
連携したいkintoneアプリのAPIトークンを作成し、フィールドをひとつひとつ
連携させていきます。
計算フィールド、リッチエディターなどのフィールドも選択可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/f4437ab7-0560-f31e-05ee-eff7256ab06c.png" width="70%">

▼kintoneと同じようにドロップ＆ドラッグでフィールドの表示位置を自由に設定可
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/adc23cf9-48fa-93f2-8624-bfb52fb65c8e.png" width="70%">

▼スマートフォンで表示する場合の位置設定も可能!!（スタンダードコース以上）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/91407cff-76a7-ca77-d083-93ae9e2a54c4.png" width="70%">

▼条件分岐の設定が可能なので回答によって表示するフィールドを変更できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/b9681dee-683e-99f3-01b7-ed52cedfddc7.png" width="70%">


４）フォーム完成！
マウス操作のみで、問い合わせフォームが完成しました。
設定時間は約30分くらいでしょうか。設定項目が充実しているので迷ってしまいますが、操作間はkintoneと同じなので詰まる所なく設定できた、という感じです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/5f75601d-f264-72a0-1949-3185520da041.png" width="70%">

### POINT
- **オリジナルに近いフォームが作成できる**
フォームのヘッダー/フッターの色、背景色、ロゴ、タイトル、faviconの設定ができるので、webページの問い合わせフォームにする場合は、ページデザインに雰囲気を近づけることができます。

- **動的なフォームが作成できる**
条件分岐の設定が可能なので回答によって表示するフィールドを変更できました。（「or条件」と「and条件」どちらにも対応しています）
またステップフォーム（回答が複数画面にわたるようなwebフォーム）の作成も可能です！
※どちらもスタンダードコース以上

- **自動返信機能**
フォーム入力後の自動返信メール機能（スタンダードコース以上）、入力途中で一時保存できる機能（プレミアムコース）この2つの機能もとても便利でだと感じました！


## kViewer（ケイビューワー）

kintoneの情報を外部の人に多様なビューで公開ができるサービスです。
フォームブリッジと同じトヨクモ株式会社が提供しています。
➡<a href="https://kv.kintoneapp.com/">製品ページ</a>から無料試用申込が可能です。

１）専用のログインページから設定を行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/55396031-6d9d-413d-8281-26cbdc59e89d.png" width="50%">

２）初期設定
ログイン後、作成したいビューを上記から選択してビューのタイトル、
連携するkintoneアプリのURL,APIトークンを入力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/addd1d93-aaaa-ec14-7295-1564c1c1a96b.png" width="60%">

３）表示ビューの作成
今回はリストビューを作成しました。
表示するkintoneのフィールドをひとつひとつ選んでいきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/b24775ae-53cf-ce6f-17ef-dbf55283775c.png" width="60%">

４）リストビュー完成！
リストビューはこんな風な表示になりました。もちろんレコードの詳細もチェックできます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/054a4e8f-0d70-2145-b53f-c765d1da43bb.png" width="60%">

### POINT

- **ビュー形式が豊富**
kintoneの情報を外部の方にどのように表示するか、表示の形式がとても豊富です。
kintone同様のリスト形式のビューから、カード型、カレンダー、グラフなどが表示可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/8ebcb381-8611-3833-de10-1cc632a8e5d0.png" width="30%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/a3aa0c19-d991-185e-bd21-abd9326ebf91.png" width="30%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/eac002d5-ddc3-f400-3466-959c1ecd1649.png" width="30%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/da3f0101-6705-03e6-d104-383cf8f84a64.png" width="30%">


- **フォームブリッジとの組み合わせで編集も可能**
kViewerは基本的に閲覧のみ、外部からは編集などができない仕様ですが、フォームブリッジと連携することで編集などが可能になります。
また、ログインしないとビューが見れないようなメールアドレスでの簡易認証設定も可能です。
（どちらもプレミアムコース以上）


## じぶんページ

kintoneの情報をじぶんページにログインした外部の人にマイページとして公開ができるサービスです。
➡<a href="https://www.jibun-apps.jp/page">製品ページ</a>から無料試用申込可能です。


１）専用のログインページから設定を行います。（ログインページのロゴの設定も可能です）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/4700e4a3-76f2-a147-fe60-9fa070b00605.png" width="60%">

２）初期設定
kintoneのドメイン名・ログイン名・パスワードを入力し、じぶんページとkintoneを紐づけます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/507cd03d-d7e7-825f-7c16-5d362016ab44.png" width="60%">

３）アプリの紐づけ
じぶんページに連携するkintoneアプリをじぶんページ側から選択します。
一覧画面、詳細画面、フォーム画面それぞれで細かい設定が可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/2043a571-0e4a-6119-0c0a-39fcd124c4d7.png" width="60%">

４）じぶんページのユーザー登録
ユーザーの登録をしていきます。
名前とメールアドレスでユーザーの登録します。
ユーザー毎に共有したいアプリを選択することができます。
またレコードの編集や複製、コメント、削除の権限をユーザー毎に設定することもできます！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/bf2656dc-eca0-4e44-5a41-db84bde9de2b.png" width="60%">


５）設定完了！じぶんページを使ってみる
kintoneの情報がどんな風に紐づくのかイメージするのに時間がかかりましたが、一度設定してしまえば変更することはないので、利用ユーザーは特に意識することなく、自分専用のページが持てた！という感じです。
▼ユーザーのログイン画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/7aa5794a-c00f-4f16-84f7-ed9762cbd9ab.png" width="60%">

▼ログイン後のアプリのレコード一覧画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/cd77ae1f-6154-2e31-dd55-004161346625.png"width="60%">


### POINT
- **公開したいフィールドを選べる**
表示するフィールドを一つ一つ選択し設定するので、kintoneとは異なったフィールドの並びのページが作成できます。

- **連携できるフィールドが豊富**
ルックアップ、関連レコード（表示のみ）機能やリッチエディター、計算、ユーザー選択フィールドの表示も可能です。
フィールド毎に編集不可の設定ができ、メールアドレスの入力チェックといった
機能もついています。

- **サービス単体での閲覧・編集・追加が可能**
アプリごとに閲覧、追加、編集、コメント機能の有無を選択することができます。


## じぶんフォーム
kintoneと連動したwebフォームの作成ができるサービスです。
じぶんページと同じ株式会社ソニックガーデンが提供しています。
➡<a href="https://www.jibun-apps.jp/form" width="60%">製品ページ</a>から無料試用が可能です。

１）ログイン
同じように専用のログインページから設定をします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/ad74542a-ef0f-8f10-e64a-e9cae375319a.png" width="60%">

２）初期設定
kintoneのドメイン名、ログインID、パスワードを入力し、連携します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/9bc80ddc-8263-1ac5-f16f-35067a18c137.png" width="60%">

３）アプリの紐づけ・フォーム設定
フォームと連携したいkintoneアプリを選んで作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/5dffcbbd-c1bf-7bd3-58c8-66f41ddf45a2.png" width="60%">

４）フォーム設定
フォームに配置するフィールドを選択していきます。
表示させるフィールドをひとつひとつ選択、順番を入れ替えたり、横並びにしたり自由に設定できます。
マウス操作で設定が可能なので、kintoneと同じように感覚的に操作が可能でした。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/3b9c7a8a-a54b-043a-951e-2a24f57174e6.png" width="60%">

▼自動返信メールの設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/4860c2fd-54c0-4365-f6b8-92911af4238b.png" width="60%">

５）完成したフォームがこちら
作成してみたフォームの画像です。設定時間もこちらは約３０分くらいだったでしょうか。
操作間はkintoneと同じなので詰まる所なく設定できた、という感じです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/e071db45-aee6-de3c-9810-55363eff2158.png" width="60%">



### POINT
- **オリジナルに近いフォームが作成できる**
背景色や、表示するロゴ、背景の画像を選択できるので、webページの問い合わせフォームにする場合は、ページデザインに雰囲気を近づけることができます。

- **細かなフィールド設定**
フォームは、フィールド毎に表示するけど、編集は不可・確認用に2回入力など、細かい設定が可能です。
※ユーザー選択、グループ選択、リッチエディターフィールドは非対応でした。（2020/08/24時点）
ただ、今後のアップデートで機能追加の予定があるとの事です！期待ですね！

- **自動返信機能**
フォーム入力後の自動返信メール機能があり、返信内容にフィールドの値を入力することもできるので便利だと感じました!


## Chobiit for kintone（チョビットフォーキントーン）
kintoneの情報を外部の人に公開したり、外からkintoneへ情報の登録ができるkintoneデータ外部共有サービスです。

➡<a href="https://www.novelworks.jp/chobiit/">製品ページ</a>から無料試用申込可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/ddf982f8-60b1-5948-5135-0fe78dd9ade1.png" width="60%">

１）連携設定
kintone上に配布しているChobiitプラグインとアプリテンプレートを読み込み、Chobiitプラグイン設定画面から各種設定を行います。
Chobiit for kintoneはプラグインなのでkintoneにインストールして利用します。
他サービスと違い、設定・変更などすべてkintone上で行います。
▼Chobiit設定画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/364dc6dc-9b47-1d31-5fa6-bb5b316a1117.png" width="60%">

２）アプリの紐づけ
連携したいアプリを選択し、詳細を設定していきます。
Chobiitはアプリ毎に認証機能・外部公開機能・または両方が選べます。
ログインして共有したい場合は認証機能、webフォームやレコードの内容を外部に公開する場合は外部公開を選択します。
※認証設定・両方を利用する場合は、kintoneアカウントとの紐づけ設定[kintone設定]が最初に必要です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/36fee671-b13a-d0ff-ee46-3332f98e3927.png" width="60%">

３）Chobiitにログインしてみる
プラグイン内の設定が完了すると、自動でChobiitページが開設されます。
認証機能を利用した場合は、Chobiitのログイン画面を挟みます。

▼認証機能をONにした場合のユーザーのログイン画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/999beaf7-857b-4ab2-0a94-5225e2caae8b.png"width="60%">

▼ログイン後画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/6a41220d-5eaf-2ab8-417c-f06ca8e4d567.png"width="60%">

▼外部公開機能の入力フォーム。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/b6b78162-d007-7d48-09ad-c9f7ff32593d.png" width="60%">
**※2020年11月のアップデートで自動返信メール機能が追加されました!**

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/0def2b81-62d7-c497-68b4-825f1ba54e88.png" width="50%">


▼外部機能でレコード情報を公開
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/aa1c3cce-ddd1-e9be-3630-a67bd0bb469a.png" width="60%">



## POINT
- **手早く簡単に外部連携が可能**
Chobiitはkintoneのアプリの情報（フィールドの並び順）・アクセス権限をそのまま継承するため、別途サービス側でのフィールドの設定は不要です。

- **kintoneの主要フィールドに対応**
kintoneでよく利用する「ルックアップ」「関連レコード」「サブテーブル」フィールドにも対応。
アクション機能やコメントの連携も可能です。
また、Chobiit独自の機能として、登録地点の緯度経度（GPS)情報の自動取得も可能です。

- **オリジナルに近いフォームが作成できる**
フォームのボタンの色や文字の色を変更することができるので、webページの問い合わせフォームにする場合は、ページデザインに雰囲気を近づけることができます。


# 各サービス特徴のおさらい

### kintoneと連携するwebフォームを作成したい
- **Form Bridge（フォームブリッジ）**
<a href="https://fb.kintoneapp.com/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/9c80aa3e-92b2-5088-389c-43c118becc11.png" width="30%"></a>
・回答に時間がかかるようなボリュームの多いフォームを作成したい。
・条件分岐や複数ページにわたるようなフォームを作成したい。
・毎月かなりの量の問い合わせが発生している
こういった用途で利用したい場合は**フォームブリッジ**がぴったりです！
💡コースによって利用できるサービスが細かく分かれているため、無料試用期間は全機能を利用してから必要な機能を見極めるのがいいですね！

- **じぶんフォーム**
<a href="https://www.jibun-apps.jp/jibun-form/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/1ef7b90d-a7ac-1953-a158-182c53fc6016.png" width="30%"></a>
・kintoneアプリとは項目の並びは変えたフォームにしたい
・月間の問い合わせ数が１０００件未満
こういった用途で利用したい場合は**じぶんフォーム**がぴったりです！
💡条件分岐が発生しない、自動返信機能を持った簡単なフォームを作成したい場合におすすめです。

- **Chobiit for kintone（チョビットフォーキントーン）**
<a href="https://www.novelworks.jp/chobiit/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/27d516ca-651c-69da-5ab3-2876e7f1f834.jpeg" width="40%"></a>
・簡単なwebフォームをサクっと公開したい。
・時期やタイミングなど一時的なwebフォームを開設したい
こういった用途で利用したい場合は**Chobiit for kintone**がぴったりです！
💡連携した情報をさらに外部と共有したい場合や、ログイン認証が必要な場合。利用ユーザーは多いけど利用数は少ないといった場合におすすめです。
 
## kintoneの情報を外部の人と共有したい
- **kViewer（ケイビューワー）**
<a href="https://kv.kintoneapp.com/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/23b5f639-4d43-1e81-9d61-d11a3831b126.png" width="30%"></a>
一番の特徴は表示ビューが豊富ということだと思います。
kintoneの情報をレコードという形だけではなく、グラフやダッシュボード、カードビューなど
多様な見せ方で（例えばブログやニュースなど）利用したい場合に最適ではないでしょうか。
なお、基本的に**閲覧のみで情報を外部公開する**サービスです。
編集を可能にする場合はフォームブリッジとの組み合わせが必要です。
また、ログインユーザーのみに情報を共有するにはプレミアムコース以上の申し込みが必要です。

- **じぶんページ**
<a href="https://www.jibun-apps.jp/jibun-page/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/38ec76dd-b5c3-c2f9-eea6-1ee4d00074f9.png" width="30%"></a>
設定し**ログインしたユーザーのみにkintoneの情報を共有**できます。
ユーザーごとにレコードの編集権限などの細かい設定ができるのも魅力です。
（レコードの新規追加・編集・コメントはスタンダードコースで利用可能）
クローズドの情報を会社間で共有する、スタッフとの限定的な情報共有に利用するという用途の場合
じぶんページの方があってるかもしれません！

- **Chobiit for kintone（チョビットフォーキントーン）**
<a href="https://www.novelworks.jp/chobiit/"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/27d516ca-651c-69da-5ab3-2876e7f1f834.jpeg" width="40%"></a>
Chobiit for kintoneの最大の特徴は**外部から登録・外部への公開、ログイン認証を挟んだ情報共有**の
3つが１つのサービスとして備わっていることです。
その代わり、他のサービスに比べて入力フォームの条件分岐や並び替えなど細かいところの設定できませんが、基本的な機能を手軽に利用したい・まずはkintoneを外部の人たちにちょびっと利用してほしい時にとてもおすすめです。
また、料金体系も他サービスと異なり、完全従量課金サービスのため、
**利用しなければ料金はかかりません**。
とりあえず契約だけ行い、必要な時に必要なものを公開するなど、限定的な利用も可能ですので、自社にあった利用方法を模索していくという使い方もできそうです。

![サービスまとめ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/339d3911-77f2-1bce-d0b6-1cf0f9bf7fe7.png)




# 最後に
Form Bridge（フォームブリッジ）・kViewer（ケイビューワー）・じぶんページ・じぶんフォーム・Chobiit for kintone（チョビットフォーキントーン）を比較しました。
一見サービス内容が似ているように見えますが比べてみるとそれぞれできる事や特徴が異なります。
是非実際に試してみて自分のやりたいこと、予算感にあうサービスを見つけてください！