概要

非エンジニアビジネス職（カスタマーサクセス職）の@yuta_maruyamaが、動的でイケてるかっこよい入力フォームを自力で作ろうと思ったけれど難易度が高すぎたので米国産SaaSのTypeformを組み込んでWebhookで連携しようとした話です。
ちなみにカスタマーサクセスの話は一切なく、大好きなクラフトビールのテイスティングノートアプリを作ろうとしている中での話。

環境

• Ruby 2.6.2
• Rails 6.0
• heroku

作ろうとしているもの

BEER BASH

• ビールのテイスティングノートアプリ
• 飲んだビールに関する評価やコメントをnoteとして残す
• Rails練習用なので見てくれは勘弁
• 「ノートを残す煩わしさ」がないことをサービスのユニークな価値にしたかったのでそこにはこだわりたい

Typeformとは

• フォームやサーベイに特化した米国のサービス
• 無料で使える
• 有料版だとHidden Fields機能など色々使える
• 日本語対応も（一応）している

やったこと

Typeform側

フォームの作成

マグマパスタばりのすっ飛ばし方だが、まずはTypeformにアカウント作成し、フォーム作成をする。Googleフォームを作るのとほぼ変わらない。

Webhookの設定

WebhookなのでPOSTリクエストが前提となる。なので勝手にアクションを指定しなくとも勝手にPOSTになる。今回はPOST /notesで設定。保存。

hidden_filedの設定（オプショナル）

Hidden Fieldsは有料オプションなので有料化するつもりなければ飛ばして良い。Hidden Fieldsを用いない場合フォーム内で必要な値を入力してもらうのが良さそう（ユーザーにとってはひと手間だが）

今回の場合は、どこのBrewery（醸造所）のなんていうBeerのnoteを書いているかの値を渡して、

• Typeformに遷移した際にどのビールに関してのnoteかをはっきり示す
• わざわざTypeform側でユーザーがなんのビールについてのnoteか入力させないようにする

を実現したい。なのでbeer_id brewery_id beer_name brewery_name のフィールドを用意しておく

サービス側

Controller

notes#create をいじる。

データのもらい方

Typeformのフォームへの回答をイベントとし、JSON形式でwebhookは送られる。
要素としては大きく

• Event information
• definition
• answers

だが階層がややこしい。コードはこんな感じ。

  def create
    @note = Note.new()
    @note.beer_id = params["form_response"]["hidden"]["beer_id"]

    params["form_response"]["answers"].each do |answer|
      if answer["field"]["ref"] == "rating"
        @note.rating = answer["rating"]
      end

      if answer["field"]["ref"] == "sweetness"
        @note.sweetness = answer["number"]
      end

      if answer["field"]["ref"] == "bitterness"
        @note.bitterness = answer["number"]
      end

      if answer["field"]["ref"] == "sourness"
        @note.sourness = answer["number"]
      end

      if answer["field"]["ref"] == "aroma"
        @note.aroma = answer["number"]
      end

      if answer["field"]["ref"] == "comment"
        @note.comment = answer["text"]
      end

      if answer["field"]["ref"] == "serving_type"
        @note.serving_type = answer["choice"]["label"]
      end
    end

View

beer#showからTypeformにパラメータを渡しながら遷移する。こんな感じで書けばOK。

<%= link_to("Add note", "https://beerbash.typeform.com/to/******?beer_id=#{@beer.id}&beer_name=#{@beer.name}&brewery_name=#{@brewery.name}") %>

最後に

感謝

自分はカスタマーサクセス職としてSQLを業務中に書くことは多いが、Railsに関してはまさに勉強中といった感じ。
そんな中メンターとして色々教えてくれる勤め先のCTO @showwin には本当に感謝が尽きない。

SaaSとの共存

showwin先生には #write-code-or-die というSlackチャンネルでご指導いただいている。そのチャンネルでこんなことを述べたが

非エンジニアの自分でも、外部サービスをきちんと使えれば学習時間を大幅に節約してそれなりのアプリケーションを作れる実感がわいた。ZapierなどのノンコーディングでSaaSを連携できるSaaSのためのSaaSもどんどん進化を遂げており、非エンジニアでもプロトタイプレベルならガンガン自分で作ってみて欲しい

見た目

最後に、こんな感じの見た目になった。

beers#show

Typeformに遷移。ちゃんとビール名とブルワリー名が出ている。

元々Javascriptで自分でどうにかしようとおもってたがこれは無理

そして、Yorroco Beerが好きな人はぜひ連絡ください！！