柳谷智宣のkintoneマスターへの道 第117回

“社外”もDXチームの一員に　kintoneと連携したコラボサイトがつくれる「グスク エブリサイト」を試してみた

　企業のDXが進む中で、その取り組みの多くは社内業務の改善であり、顧客や取引先といった「社外連携」の改善は手つかずの状況である。

　この課題を解決すべく、アールスリーインスティテュートが開発中の新サービスが「gusuku Everysite」（以下、エブリサイト）だ。kintoneなどのクラウドサービスと連携し、そのデータを入出力するウェブサイトを作成できるノーコードのフロントエンド開発サービスである。エブリサイトを活用することで、社内の業務システムを外部とつなぎ、DXを社外にまで広げることが可能だ。

　本記事では、現在展開されているプレビュー版をレビューする。

kintoneと連携してデータを入出力できる開発サービス「エブリサイト」

社内・外部システムの垣根をなくす「gusuku Everysite」

　多くの企業でDXが叫ばれて久しく、中小企業へのアンケートによれば、文書の電子化やペーパーレス化といった業務改善は着実に進んでいる。しかし、そのDXのほとんどが、社内の業務効率化にとどまっており、顧客や取引先といった「社外」との連携では、大きな課題を残しているのが現状だ。

　例えば、DXの取り組みとして「ホームページの作成」を挙げる企業は多いが、企業概要や事業内容を紹介するだけの「仕事をしていない」ホームページであることは少なくない。情報を一方的に発信するだけで、顧客との双方向のコミュニケーションや業務連携には至っていないのだ。これは、ホームページとkintoneのような社内業務システムをシームレスに連携させることが難しいことが原因で、「社内」と「社外」のシステムが分断される要因になっている。

　この社内と社外の壁を取り払うのがエブリサイトだ。最大の特徴は、ノーコードで直感的にウェブサイトを構築できること。ページのレイアウトは、まるで紙をハサミで切るように、画面を縦や横に分割し、それぞれの領域にナビゲーションバーやフォームといった部品（ウィジェット）をはめ込んでいくだけで完成する。

　プログラミングの知識は不要で、誰でも簡単に見栄えの良いページを作成できる。kintoneアプリとの接続設定もAPIトークンなどを入力するだけで完了。kintoneに蓄積されたデータをリアルタイムでウェブサイトに表示したり、逆にウェブフォームに入力されたデータをkintoneの新規レコードとして登録することもできる。

　エブリサイトを活用することで、単なる情報発信にとどまらない双方向のコミュニケーションを実現できる。例えば、ウェブサイト上に設置したセミナー申し込みフォームや問い合わせフォームから入力された情報は、直接kintoneのデータベースに登録される。問い合わせの進捗状況をkintoneで管理し、そのステータスを顧客のマイページに表示することも可能だ。

　取引先との受発注業務にも応用できる。取引先がエブリサイト上で商品の情報や納期回答を入力し、自社ではkintone上で発注登録や支払い処理を行う。互いにそれぞれのシステムを見ているだけで、リアルタイムに情報が連携され、円滑なサプライチェーンを構築できる。

　エブリサイトは顧客や取引先を単なる「社外」の存在ではなく、共に業務を進める「チーム」の一員として捉え、シームレスな連携を実現するプラットフォームである。

問い合わせフォームからkintoneにデータ登録するウェブページを作成してみる

　まずは、問い合わせフォームを設置し、送信されたデータをkintoneの新規レコードとして登録するウェブページを作成してみよう。まずは、新規サイトを作成し、その中に新規ページを作成する。

　「画面デザイン」タブに「シンプルパネル」がひとつだけあるので、クリックし、ウィジェットを選択。今回は「シンプル縦フォーム」を選んだ。あとは、kintoneアプリの作成と同じように、必要なパーツを左のメニューから中央にドラッグ＆ドロップして配置。右側のメニューでパラメータを設定する。

　ここでは、詐欺メールの報告フォームを作成するため、詐欺メールの種類を選ぶ「ラジオボタン」と本文を入力する「文字列入力（複数行）」、詐欺メールの画面を送信する「添付ファイル」を追加した。データを送信するためのボタンも追加しておく。

エブリサイトのレイアウト編集画面。画面を切り分けるユニークなUIだ

「シンプル縦フォーム」ウィジェットを追加する

パーツをドラッグ＆ドロップで並べる

　kintoneアプリとの連携は「接続設定」タブで行う。今回は不特定多数の人が利用するため、「認証可否」は「認証なしで利用可」を選択。あとは、ドメインやkintoneのアプリ番号、APIトークンなどを入力すればよい。

kintoneアプリとの接続設定を行う

　最後に、「ページ内処理」タブで、「kintoneにレコードを追加する」を選択し、具体的な処理を指定。設定済みの追加先アプリや接続設定を選択し、“ボタンを押したらkintoneにレコードを追加する”アクションを設定する。

　今回作成したアクションは「送信ボタンを押したらファイルをアップロードする」「続けて、レコードを登録する」「最後に登録完了メッセージを表示する」の3つだ。

　処理の選択やアクションの作成は同社の「カスタマイン」に似ている。カスタマイン同様、エブリサイトもノーコードでさまざまなことができるのがすごい。

「ページ内処理」タブで「やること」を選択する

カスタマインに似たUIで、やることと条件を設定する

　右上の「このページをテストする」をクリックすると、URLが発行され、テストできる。動作に問題がなければ、「画面デザイン」タブでロゴ画像をアップロードしたり、中央表示にするなど、見た目を調整すれば完成だ。

作成したフォーム画面

フォームに入力されたデータも見事kintoneに登録された

　今回は、kintoneへの入力を試したが、逆にkintone内のデータをウェブページに表示することもできる。こちらは後日レビューする予定だ。

■関連サイト

• gusuku Everysite
• kintone