Tips

Ruby用kintone REST APIクライアント（kintone_rb）を使って、サイトからの問い合わせを管理しよう！

著者名：Mamoru Fujinoki（ Fuji Business International (External link) ）

目次

はじめに

固定リンクがコピーされました

自社のWebサイトから問い合わせやコンタクトフォームを設置して管理しているケースは多いと思います。
今回はRuby on Railsで作成されたWebサイト上の問い合わせフォームから、 kintone_rb (External link) を利用してkintoneの問い合わせ管理アプリと連携して管理する方法を紹介します。

利用しているSDKは、有志の開発者により作成されたものです。
サイボウズではサポート対象外となりますので、ライセンスや機能などをご確認のうえ利用してください。

下準備

固定リンクがコピーされました

  • Rails開発環境
    Railsが初めての方は Railsをはじめよう (External link) を参考に設定してください。
  • Ruby 2.1.0以上
    本TipsはRuby 3.1.2とRails 7.0.3で動作を確認しています。
  • kintoneアカウント

問い合わせ管理アプリの設定

固定リンクがコピーされました

STEP 1：アプリの準備

固定リンクがコピーされました

kintoneアプリストアより「問い合わせ管理」アプリを追加します。

「問い合わせ管理」アプリを開き、「アプリの設定を変更する」アイコンをクリックします。

以下の表を参考に、フォームの設定画面でフィールドコード等を変更します。

フィールドの種類 フィールド名 フィールドコード
文字列（1行） 顧客名 Customer
文字列（1行） ご担当者名 Customer_name
ラジオボタン 問い合わせ種別 QType
文字列（複数行） 詳細 Detail

STEP 2：APIトークンの設定

固定リンクがコピーされました

次に「設定」タブを開き、「APIトークン」をクリックします。

「生成する」ボタンをクリックし、「レコードの追加」にチェックを入れます。 その後、設定を保存します。

生成したAPIトークンは、コーディングの際必要になるのでメモしておきます。
また、アプリのIDも控えておきます。
以下のサンプルアプリの場合は103です。

最後にアプリの設定を反映させるために「アプリの更新」をクリックします。

以上で「問い合わせ管理」アプリの設定は終了です。

問い合わせフォームの作成

固定リンクがコピーされました

STEP 1：Ruby on Railsの開発環境準備

固定リンクがコピーされました

それではRuby on Railsによる問い合わせフォームを作りましょう。
Ruby on Railsの開発環境がない場合は、 Railsをはじめよう (External link) を参考に設定してください。

ターミナルを開き、次のコマンドを実行します。

1

rails new contact

これによりContactというRailsのアプリケーションが作成されます。
これ以降のコマンドは、作成されたcontactディレクトリ内で実行するので、以下のコマンドでディレクトリを移動してください。

1

cd contact

STEP 2：kintone_rbのインストール

固定リンクがコピーされました

フォーム作成の前にkintone_rbをインストールします。

Gemfileを開いてコマンドを追加します。
ファイルの最後に、次の内容を記載します。

1

gem 'kintone_rb'

ファイルを保存後、次のコマンドを実行します。

1

bundle install

STEP 3：コントローラーの作成

固定リンクがコピーされました

次のコマンドでコントローラーを作成します。

1

rails generate controller inquiries

コントローラー名は例として「inquiries」とします。

STEP 4：コードの編集

固定リンクがコピーされました

次に「Config」フォルダー内の「routes.rb」ファイルを開いて、次のコードを参考に編集します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

=begin
RoR Route Config Sample
Copyright (c) 2018 Cybozu
Licensed under the MIT License
=end

Rails.application.routes.draw do
  get '/inquiries', to: 'inquiries#new'
  post '/inquiries', to: 'inquiries#create'
  resources :inquiries

  root 'inquiries#new'
end
コードの解説

今回は問い合わせフォームのみ作成するため、以下のようにルーティングを定義しました。

HTTPメソッド パス アクション 目的
GET /inquiries inquiries#new 問い合わせを1つ作成するためのHTMLフォームを返す
POST /inquiries inquiries#create 問い合わせを1つ作成する

リソース名は先ほど作成した「inquiries」を指定しています。

10

resources :inquiries

また、ホームページには問い合わせ作成のフォームを設定します。

12

root 'inquiries#new'

STEP 5：new.html.erbファイルの作成

固定リンクがコピーされました

「views」フォルダー内の「inquiries」フォルダー内に「new.html.erb」ファイルを作成します。

次のコードを参考にform builderを使って、問い合わせフォームを作成します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<%#
# RoR Webform View Sample
# Copyright (c) 2018 Cybozu
# Licensed under the MIT License
%>

<h1>お問い合わせ</h1>
<%= form_for :inquiry, url: inquiries_path do |form| %>
  <p>
    <%= form.label :company_name, "会社名:" %><br>
    <%= form.text_field :company_name %>
  </p>
  <p>
    <%= form.label :client_name, "お名前:" %><br>
    <%= form.text_field :client_name %>
  </p>
  <p>
    <%= form.label :contact_type, "問い合わせ種別:" %><br>
    <table style="border: 1px solid black;">
      <tr>
        <td>
    <%= form.radio_button :contact_type, "製品について"%>
    <%= form.label :product, "製品について" %>
    <%= form.radio_button :contact_type, "受発注について"%>
    <%= form.label :order, "受発注について" %>
    <%= form.radio_button :contact_type, "お客様対応について"%>
    <%= form.label :claim, "お客様対応について" %>
    <%= form.radio_button :contact_type, "その他"%>
    <%= form.label :misc, "その他" %>
        </td>
      </tr>
    </table>
  </p>
  <p>
    <%= form.label :details, "詳細:" %><br>
    <%= form.text_area :details, size: "50x6" %>
  </p>

  <p>
    <%= form.submit "送信" %>
  </p>
<% end  %>

以下のようなフォームが生成されます。

STEP 6：モデルの生成

固定リンクがコピーされました

次にさきほど指定したresource名のモデルを生成します。
次のコマンドを実行し、「inqury」モデルを生成します。

1

rails generate model Inquiry company_name:string client_name:string contact_type:string details:text

これで次のモデルが生成されます。

フィールド名 フィールドタイプ
company_name string
client_name string
contact_type string
details text

以下のコマンドでマイグレーションを実行して、データベースにテーブルを作成します。

1

rails db:migrate

これでInquiriesテーブルがデータベース上に作成されます。
今回はデフォルトのデータベース「sqlite3」を使用しています。
まだインストールされていない場合は次のコマンドを実行してインストールしてください。

1

gem install sqlite3

STEP 7：コントローラーの編集

固定リンクがコピーされました

次にさきほど作成したコントローラーを編集します。
「Controllers」フォルダー内の「inquiries_controller.rb」をエディターで開きます。

下記を参考にコードを作成します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

=begin
RoR Controller Sample
Copyright (c) 2018 Cybozu
Licensed under the MIT License
=end

require 'kintone_rb'
class InquiriesController < ApplicationController

  def new
  end

  def create
    @inquiry = Inquiry.new(inquiry_params)
    if @inquiry.save
      # Use token authentication
      api = Kintone::Api.new("{サブドメイン名}.cybozu.com", "{APIトークン}")
      app = {アプリケーションID}

      # Record register(single record)
      # Use Hash
      record = {"Customer" => {"value" => inquiry_params[:company_name]},
                "Customer_name" => {"value" => inquiry_params[:client_name]},
                "QType" => {"value" => inquiry_params[:contact_type]},
                "Detail" => {"value" => inquiry_params[:details]}
                }
      api.record.register(app, record)
      redirect_to root_path
    else
      render 'new'
    end
  end

  private
    def inquiry_params
      params.require(:inquiry).permit(:company_name, :client_name, :contact_type, :details)
    end
end
コードの解説

今回は簡素化するためにコントローラーのアクションはnewとcreateのみ定義しています。
newメソッドで問い合わせフォームを表示し、createメソッドで入力データを保存します。
newメソッドは特に処理が必要ないのでメソッド内は空です。

10
11

def new
end

フォームのデータをデータベースに保存後、kintoneへ登録します。

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

if @inquiry.save
  # Use token authentication
  api = Kintone::Api.new("{サブドメイン名}.cybozu.com", "{APIトークン}")
  app = {アプリケーションID}

  # Record register(single record)
  # Use Hash
  record = {"Customer" => {"value" => inquiry_params[:company_name]},
            "Customer_name" => {"value" => inquiry_params[:client_name]},
            "QType" => {"value" => inquiry_params[:contact_type]},
            "Detail" => {"value" => inquiry_params[:details]}
            }
  api.record.register(app, record)
  redirect_to root_path
else
  render 'new'
end

kintone_rbの読み込みとインスタンスの作成部分です。

7

require 'kintone_rb'

お使いのサブドメイン名、上記で控えておいたAPIトークン、アプリケーションIDを指定します。
詳細は、 GitHub上のReadme (External link) を参照してください。

16
17
18

# Use token authentication
api = Kintone::Api.new("{サブドメイン名}.cybozu.com", "{APIトークン}")
app = {アプリケーションID}

ハッシュ形式でフォームレコードを設定し、APIでkintoneに登録します。

21
22
23
24
25
26
27

# Use Hash
record = {"Customer" => {"value" => inquiry_params[:company_name]},
          "Customer_name" => {"value" => inquiry_params[:client_name]},
          "QType" => {"value" => inquiry_params[:contact_type]},
          "Detail" => {"value" => inquiry_params[:details]}
          }
api.record.register(app, record)

以上でRuby on Railsによる問い合わせフォームの作成は終了です。

動作確認

固定リンクがコピーされました

以下のコマンドでローカルのRailsサーバーを起動してください。

1

rails server

ブラウザーでhttp://localhost:3000をURLに指定すると以下の問い合わせフォームが表示されます。

適当にデータを入力し、「送信」ボタンをクリックするとkintoneに新しいレコードが追加されます。

最後に

固定リンクがコピーされました

問い合わせフォームやコンタクト履歴、アンケートの実施など社外のデータを収集する際にRuby on Railsで作成されたWebサイトを利用される方は多いと思います。
そのシステムとkintoneを連携して管理する際に、今回使用したRuby用REST APIクライアントの「kintone_rb」が非常に便利です。
簡単なコーディングでkintoneとの連携できるのでお試しください。

更新履歴

固定リンクがコピーされました

  • 2022年6月30日
    利用するkintone REST APIクライアントをkintone REST API client for Rubyからkintone_rbに修正
information

このTipsは、2022年6月版kintoneで動作を確認しています。