概要
非エンジニアビジネス職（カスタマーサクセス職）の@yuta_maruyamaが、動的でイケてるかっこよい入力フォームを自力で作ろうと思ったけれど難易度が高すぎたので米国産SaaSのTypeformを組み込んでWebhookで連携しようとした話です。
ちなみにカスタマーサクセスの話は一切なく、大好きなクラフトビールのテイスティングノートアプリを作ろうとしている中での話。
環境
- Ruby 2.6.2
- Rails 6.0
- heroku
作ろうとしているもの
- ビールのテイスティングノートアプリ
- 飲んだビールに関する評価やコメントを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が好きな人はぜひ連絡ください！！