kintoneをもっと便利に! プラグイン・連携サービスの活用術 第5回 Webフォームからアプリにデータ入力しよう!「フォームブリッジ」の活用術

kintoneそのものの機能を拡張するのではなく、他のサービスと連携することにより新しい使い方を提供してくれるツールもある。その一例としてトヨクモの「フォームブリッジ（FormBridge）」というツールの使い方を紹介していこう。このツールを使うと、「Webフォーム」から「kintoneアプリ」にデータを入力することが可能となる。
Webフォームとkintoneを連携する「フォームブリッジ」
これから紹介する「フォームブリッジ」は、インターネットに公開した「Webフォーム」から「kintoneアプリ」へのデータ入力を実現してくれるツールとなる。
通常、kintoneで作成したアプリは、社内のユーザーだけで利用するのが一般的な使い方となる。社外のユーザーは、ゲストユーザーなどの特別な場合を除いて、基本的にkintoneにアクセスできない仕組みになっている。しかし、用途によっては「外部からのデータ入力」が便利に活用できるケースもある。
例えば、「問い合わせフォーム」に寄せられた意見、質問、要望などをkintoneで管理する場合を考えてみよう。「問い合わせフォーム」から送信された内容は、特定のメールアドレスや専用のシステムに届くのが一般的だ。この場合、送信された内容を管理者が確認し、それをkintoneアプリに書き写す、といった手間が発生してしまう。
このような場合に「フォームブリッジ」を活用すると、Webフォームに入力された内容を直接、kintoneアプリにデータとして保存することが可能となる。「フォームブリッジ」の概要は、kintoneの「プラグイン・連携サービス」のページにも紹介されているので、あわせて確認しておくとよいだろう。
「Webフォーム」から送信された内容がそのまま「kintoneアプリ」に自動保存される、ということは、社内のkintoneユーザーが「誰でも即座に内容を確認できる」ということにつながる。Webフォームの管理者が「いちいち担当者に内容を伝えて、その回答を待つ……」といったプロセスを大幅に効率化できる可能性を秘めている。
もちろん、問い合わせ内容をkintoneアプリに書き写す手間もなくなるし、その対応（回答文）までをkintoneで管理して、みんなで共有する、といった使い方も可能となる。このように「Webフォーム」と「kintoneアプリ」を連携することにより、kintoneの新しい使い方を実現してくれるツールが「フォームブリッジ」となる。
もちろん、問い合わせフォーム以外にも、さまざまな用途に「フォームブリッジ」を活用できる。アンケート調査をはじめ、イベントの受付、採用の窓口などにも応用できるだろう。ということで、今回は「フォームブリッジ」の導入手順と基本的な使い方を紹介していこう。
「フォームブリッジ」の導入手順
「フォームブリッジ」は、月額（または年額）で契約して使用するサブスク型のサービスとなる。30日間の無料お試しも用意されているので、まずはこちらで機能や使い勝手を確認してみるとよいだろう。30日間の無料お試しは、先ほど示した紹介ページなどから申し込むことができる。
申し込みが完了すると、「フォームブリッジ」を提供するトヨクモからメールが届くので、このメールに記されているURLをクリックして開く。すると、以下の図のようなログイン画面が表示される。ここでは、申し込み時に登録したメールアドレスを入力し、「送信」ボタンをクリックすればよい。
再度、トヨクモからメールが届くので、このメールに記されているリンクをクリックする。
すると、トヨクモが提供するサービスを一元管理する画面がブラウザに表示される。FormBridgeの項目にある「開く」ボタンをクリックする。
初回に限り、以下のような画面が表示される。ここでは、自社で運用しているkintoneのURLを登録すればよい。「https://サブドメイン.cybozu.com」という形でURLを入力し、「保存」ボタンをクリックする。
すると、「フォームブリッジ」の管理画面が表示される。これで準備は完了。続いては、「kintoneアプリ」と連携する「Webフォーム」の画面を作成していこう。
Webフォームの作成手順
「フォームブリッジ」を利用するには、あらかじめ「Webフォーム」と連携させるアプリをkintoneで作成しておく必要がある。今回は例として、以下の図に示したようなアプリを作成した。また、この時点でアプリのURLをコピーしておくとよい。
先ほど作業していた「フォームブリッジ」の管理画面に戻ると、以下の図のような画面が表示されているのを確認できる。この画面にある「フォームを作成」ボタンをクリックする。
Webフォームの作成方法を選択する画面が表示される。ここでは、「はじめから作成」をクリックした場合の操作手順を解説していこう。
まずは、連携させるkintoneアプリのURLを入力する。先ほどコピーしたURLのうち「……cybozu.com/k/数字/」の部分までがアプリのURLに相当する。URLを入力すると、「APIトークン生成はこちら」というリンクが表示されるので、これをクリックする。
新しいタブにkintoneが表示され、APIトークンの管理画面が表示される。APIトークンは、外部からkintoneアプリを操作可能にするためのパスワードのような存在、と考えると理解しやすいだろう。今回の例の場合、「Webフォーム」から「kintoneアプリ」を操作できるように設定を変更してあげるわけだ。「生成する」ボタンをクリックする。
ランダムな文字列のAPIトークンが生成される。このAPIトークンを「Ctrl」＋「C」キーでコピーする。続いて、アクセス権（Webフォームから実行可能な操作）を指定する。ここでは、必ず「レコード追加」をONにしておく必要がある。設定できたら「保存」ボタンをクリックする。
アプリの設定画面に移動するので、「アプリを更新」ボタンをクリックし、先ほどの設定変更（APIトークンの生成）を反映させる。
フォームブリッジの画面に戻り、先ほどコピーしたAPIトークンを「Ctrl」＋「V」キーで貼り付ける。続いて、「保存」ボタンをクリックする。
次は、Webフォームの画面を編集する作業を進めていく。以下の図のような画面が表示されるので、左側のメニューから「フォームのデザイン」を選択する。
Webフォームの画面が自動作成される。このフォーム画面には、先ほど連携させた「kintoneアプリ」と同じフィールドが自動配置される仕組みになっている。
※「ユーザー選択」フィールドのように、Webフォームには配置されないフィールドもある。各フィールドの対応状況は、このページで確認できる。
必要に応じて、Webフォームの画面を編集していこう。各フィールドをクリックして選択すると、右側にハンドルが表示される。このハンドルをドラッグすると、各フィールドのサイズ（幅）を調整できる。各フィールドの位置を変更したいときは、そのフィールドをドラッグ＆ドロップして移動すればよい。
また、この時点で不要なフィールドを削除しておくとよい。今回の例の場合、「補足事項（回答文）」は社内で管理するためのフィールドであり、Webフォームの利用者に入力してもらう項目ではない。フィールドの削除は、左側に表示される「削除」ボタンをクリックすると実行できる。
Webフォームの画面を編集できたら「保存」ボタンをクリックして編集内容を保存し、「プレビュー」ボタンをクリックする。
新しいタブに「Webフォームの画面」がプレビューとして表示される。確認できたらタブを閉じて、元の編集画面に戻る。
あとは「公開」ボタンをクリックするだけ。これで作成したWebフォームをインターネットに公開できる。
左上の文字が「非公開中」から「公開中」に変化する。その右側に表示されている文字が「WebフォームのURL」となる。このURLをクリックすると……、
Webフォームのページへ移動できる。実際にWebフォームを利用してもらうときは、このURLを利用者に伝えるか、もしくは自社のホームページからリンクして活用していけばよい。
なお、「無料お試し」の時点では、URLはランダムな文字列のままで変更不可になっている。「フォームブリッジ」のプレミアムコース以上を正式に契約すると、このURLをカスタマイズできるようになる。
Webフォームの動作テスト
ここまでの作業が済んだら「Webフォームが正しく機能しているか？」をテストしてみるとよいだろう。Webフォームに適当な文字を入力し、「回答」ボタンをクリックする。
その後、kintoneを起動すると、連携したアプリに「Webフォームに入力した内容」が自動入力されているのを確認できるはずだ。
このように、Webフォームに入力された内容を、そのままkintoneアプリに自動保存できる機能が「フォームブリッジ」となる。今回、紹介したのは最も基本的な使い方であり、Webフォームの画面を自社用にカスタマイズする、自動返信メールを送信する、データを加工してからkintoneアプリに保存するなど、「フォームブリッジ」にはさまざまな機能が用意されている。
ということで、次回はWebフォームの画面をカスタマイズする方法を詳しく紹介していこう。