ホームページをさくっと作って申込みをkintoneで管理する方法 – cybozu developer network

はじめに

こんにちは。クローバの門屋です。kintone は社内で使うにはとても便利なWebデータベースであり、コミュニケーション基盤となるサービスです。ただグループウェアという性質上、不特定の人々に情報を公開してやりとりをするという用途には向いていません。そこで今回は弊社サービスで恐縮ではありますが、クローバ PAGE を使ってホームページを公開し、申込みをkintoneで管理する方法について紹介してみたいと思います。

クローバ PAGE とは

クローバ PAGE は、コーディング不要でかんたんに「つながる」ホームページを作成、運用できるクラウドサービスです。2016年の8月にサービスを公開して現在までに1500名以上のユーザーが利用しています。2ページまででしたら無料で利用することができます。一般的な無料ホームページサービスと異なり、申し込みフォームやタイムライン機能を使ってSNSのように他のユーザーとつながりが持てることが特徴です。実際の利用例からもわかるように、様々な用途で活用されています。

ここでは、クローバ PAGE でイベントのためのランディングページを作成し、Webフック機能を使って、クローバのフォームからの申込みデータをkintoneと同期してみたいと思います。

「つながる」無料ホームページ　クローバ PAGE

アカウントの作成

まず最初にクローバ PAGEのアカウントを作成します。クローバPAGEに入って、右上にある「アカウントを作成」ボタンをクリックします。以下のような画面が表示されると、必要な情報を入力して、「アカウントを作成する」をクリックします。その後、記入したメールアドレスに送られてきたメールに記載された手順にしたがって、アカウントを有効化します。(「Facebookではじめる」を利用しても問題ないです！)

イベントページを作成してみる

アカウントを有効化したら、ログインして表示された画面の左上にある「ページを作成する」をクリックして、ページを新規作成します。

表示された画面で、まず最初に「名称」と「カテゴリー」を記入します。（ここはあとから修正することもできます。）そのあと、今回はイベントページを作成するので、「デザイン/テンプレート」で「テンプレートから作成」を選択し、「IT勉強会」テンプレートをクリックします。ここまでできたら、右下の「次へ」をクリックします。

カバー写真を設定する

次にカバー写真を設定します。先ほど「テンプレートから作成」を選択したので、今回はあらかじめカバー写真が設定されていますが、「デザインを選んで初めから作成」を選択すると、自分で撮った写真をアップロードしたり、画像ライブラリから好きな写真を選んでカバー写真にすることもできます。

また、画像をアップロードすると自動的に画像を解析してカラーパレットが生成されます。ホームページで使う色の設定にはこのカラーパレットが利用できるので、配色に悩まなくても済むしくみになっています。今回はあらかじめ設定されているカバー写真を利用するので、そのまま「次へ」をクリックします。

ページを編集する

続いてページの編集を行います。基本的な使い方としては、kintoneと同じように画像やテキストなどのパーツをドラッグ・アンド・ドロップで追加することでページを作成することができます。画面を見るとどことなくkintoneに影響されている感じがするのではないでしょうか（笑）。

今回はあらかじめ作成されているテンプレートをもとにして、テキストのみの変更にとどめておくことにします。地図の挿入やメニューの作り方などについては、こちらのTipsを参考にしてみてください。プレビューをクリックすると、リアルタイムに実際のページの出来栄えを確認することができます。ページの編集が終わったら、「次へ」をクリックします。

申し込みフォームを作成する

いよいよkintoneと連携するための申し込みフォームを設定します。「フォーム」タブでフォームの基本的な情報を設定したら、「入力項目」タブで「入力項目を追加する」をクリックし、フォームに配置する項目を追加していきます。今回は、以下の画像のように表示名「年齢」＆入力タイプ「リスト」の項目を追加することにします。その後、「選択肢」には選択肢の内容を1行1項目づつ記入します。最後に「年齢」項目をもともとあった「コメント」項目の上に配置させるために、右下の「上へ」をクリックして項目の順番を変更します。設定が完了したら「次へ」ボタンをクリックします。

kintone アプリを作成する

ここまでできたらページを公開することができます。が、その前に肝心のkintoneとの連携設定を行わないといけません。そのため、ここからはひとまず、kintoneのアプリを作成して、そのアプリのIDとAPIトークンを利用してkintoneとクローバPAGEを連携する設定を行いたいと思います。

いままで設定していたクローバPAGEはそのまま置いといて、kintoneでアプリの作成画面を開いて、フォームには以下のフィールドを配置します。

フィールド名	フィールドタイプ	フィールドコード
氏名	文字列（１行）	name
申し込み日時	日時	created_at
メールアドレス	文字列（１行）	email
クローバのURL	リンク	url
年齢	文字列（１行）	field_1
コメント	文字列（複数行）	field_2

※ここで一つ注意する点としては、クローバとkintoneとでフィールドコードをあわせる必要があるということです。クローバのフォームで設定した入力項目には、field_1, field_2...というように "field_" + <連番>のフィールドコードが対応するようになります。詳しくはクローバ PAGE のドキュメントを参照してください。

フィールドを配置した後の画面がこちら▼

フォームが作成できたら、フォームを保存して置いて、「設定」＞「APIトークン」でAPIトークンを生成します。「レコード追加」のアクセス権を忘れずにチェックしてください。

kintoneのアプリが作成できたら、右上の「アプリを公開」ボタンをクリックして、先ほどのクローバPAGEに戻ります。

Webフックの設定を行う

ここからは連携設定を行うために、先ほどのクローバPAGEに表示された画面の左メニューで「サービス連携」をクリックします。

その後表示された「Webフック一覧」で「Webフックを追加」をクリックすると、Webフックを追加する画面が表示されます。クローバPAGE にはあらかじめkintoneとの連携機能が備わっているため、kintoneの情報を入力するだけで連携の設定を行うことができるようになっています。このページでは下記の表を参考にしながら、情報を入力ます。

項目名	説明
サービス	「kintone」を選択します。
エントリーフォーム	エントリーフォームが複数ある場合に設定します。
URL	kintoneのURLを設定します。例：https://{subdomain}.cybozu.com
BASIC認証ユーザー	BASIC認証ユーザーを設定します（省略可）
BASIC認証パスワード	BASIC認証パスワードを設定します（省略可）
アプリID	連携するアプリのアプリIDを設定します。
APIトークン	連携するアプリのAPIトークンを設定します。

情報の入力が完了した画面がこちら▼

入力が完了したら、最後に「保存する」をクリックします。

公開設定を行う

ここからはついにページの公開設定を行います。まずはページのURLとなるサブドメインを設定します。その後、公開前に「プレビューを見る」をクリックし、PCやスマートフォンの表示を確認します。そこで問題なければ、「公開する」をクリックしてページを公開します。

申し込みのテストを行う

さて、これですべての準備が整いました。ここからは、クローバPAGEで申し込んだ内容がちゃんとkintoneに登録できるかの動作確認をしてみたいと思います。

先ほど公開したページを開いて、右側の「参加を申し込む」をクリックします。

表示されたフォームに情報を入力して、「送信する」をクリックします。

その後、kintoneのアプリを開いて、レコードが追加されているかの確認を行います。
以下の画像ようにちゃんとkintoneにも反映されていたら成功です！

おわりに

いかがだったでしょうか。クローバ PAGE では、フォームから申込みのあったユーザーとクローバ PAGE上でやりとりをすることができます。kintoneと連携することで、参加者とのやりとりは決められたメンバーだけが行うけれども、申込みの状況は社内の他の人たちも確認したいというような状況に対応できます。イベントだけでなく、問い合わせフォームと連携すれば、問い合わせに対する社内のディスカッションや承認などのプロセス管理をkintone上で行うことができるようになります。コンテスト形式のキャンペーンなどにも利用できるでしょう。社内向けの情報共有と社外向けの情報発信、性質の違うふたつのサービスですが組み合わせて使うことでより活用の幅が広がると思うので、ぜひお試しください！