Typeformのかっこいい入力フォームを自作アプリに実装した話

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

## 環境
- Ruby 2.6.2
- Rails 6.0
- heroku

## 作ろうとしているもの
[BEER BASH](https://beerbash.herokuapp.com/)

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

## [Typeform](https://www.typeform.com/)とは
- フォームやサーベイに特化した米国のサービス
- 無料で使える
- 有料版だとHidden Fields機能など色々使える
- 日本語対応も（一応）している

# やったこと
## Typeform側
### フォームの作成
[マグマパスタ](https://www.youtube.com/watch?v=ewQj-5BK0ls)ばりのすっ飛ばし方だが、まずはTypeformにアカウント作成し、フォーム作成をする。Googleフォームを作るのとほぼ変わらない。

### Webhookの設定
WebhookなのでPOSTリクエストが前提となる。なので勝手にアクションを指定しなくとも勝手にPOSTになる。今回は`POST /notes`で設定。保存。 
![Connect___Tasting_note___Typeform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242075/5556c467-b806-485f-fb13-dcf025e7399f.png)

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

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

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

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

![Fullscreen_2020_03_30_21_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242075/484c1d1d-dc49-5bd9-69fc-89168c5f998d.png)
![Create___New_typeform___Typeform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242075/aec1b65c-e161-5e75-fa33-e8fe2d37754f.png)

## サービス側
### Controller
`notes#create` をいじる。

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

- Event information 
- definition
- answers 

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

```rb
  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。

```erb
<%= 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](https://twitter.com/showwin) には本当に感謝が尽きない。

## SaaSとの共存
showwin先生には `#write-code-or-die` というSlackチャンネルでご指導いただいている。そのチャンネルでこんなことを述べたが
![Slack___write-code-or-die___LAPRAS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242075/d199df03-ee68-749b-17bf-bcbaba294914.png)
非エンジニアの自分でも、外部サービスをきちんと使えれば学習時間を大幅に節約してそれなりのアプリケーションを作れる実感がわいた。[Zapier](https://zapier.com/home)などのノンコーディングでSaaSを連携できるSaaSのためのSaaSもどんどん進化を遂げており、非エンジニアでもプロトタイプレベルならガンガン自分で作ってみて欲しい

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

beers#show
![好みのビールが見つかるテイスティングノートサービス___BEER_BASH.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242075/9d2c6189-6f60-4c8b-4232-34024f460625.png)

Typeformに遷移。ちゃんとビール名とブルワリー名が出ている。
![Tasting_note.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242075/efed7832-7574-10af-616c-4cd226c69b3e.png)

元々Javascriptで自分でどうにかしようとおもってたがこれは無理
![Tasting_note.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242075/5258ef7e-c988-24d7-3fd6-324b020a41fb.png)

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