LINE で注文フォームをつくりたい
やりたいこと
LINE をインターフェースとして商品の予約や注文を行うために、次の機能をつくります。
- LINE からユーザーにフォームのリンクを送る
- ユーザーがそのフォームを入力し終えたら LINE で入力完了を連絡する
一見、シンプルな機能ですが、フォームの回答完了ボタンをきっかけにして LINE でメッセージを送るため、LINE アカウント側は返信すべきユーザーの情報を保持している必要がある、という訳です。
既存サービスのモヤモヤ
入力完了の通知は Google Form や Notion のフォームを使うことでユーザーのメールアドレスに送信することはできますが、せっかく LINE を使ってユーザーとやり取りしているので、やり取りは LINE のみで完結したいです。
- Google Form のメール設定
回答者のメールアドレスに回答内容を送れる
- Notion のフォーム
回答者は回答後にメールで回答内容を受け取れる
- LINE のメッセージをフォームとして使う
応答メッセージを設定しながら LINE で選択肢のある質問をいくつか送ることで疑似的にフォームのふるまいをしますが、これはメッセージの設計や回答結果の解析が大変なのでやはりフォームを活用したいです。
クエリパラメータで ユーザー ID 付きのフォームをつくれば解決
フォームの URL にクエリパラメータとしてユーザー情報を追加し、回答データとしてユーザー情報を記録します。
イメージはこのようなフォームの URL です。
https://formurl?userid=【ユーザー ID】
Tally というフォームビルダーを使って、フォームの回答時に LINE で通知が来るような設計をしました。
Tally の代わりに Google Form を使えますが、ユーザー体験的には Tally が良いです（後ほど説明します）。
制作の前提
- LINE のアクセストークンがある
- Make のアカウントがある（慣れている他の iPaaS でも OK）
- Tally のアカウントがある
実装
1. まずはフォームを用意
Tally でフォームをつくります。UI は Notion に似ています。
Hidden field というブロックを用意し、"userid" という名前を付けます。名前は何でも良いです。
Hidden field のブロックはインデントが入っており、回答時にはブロックは回答時には見えません。
この状態で、フォームのリンクを取得すると URL はこのようになります。
https://tally.so/r/12a3bc
ここでクエリパラメーターとして先ほど Hidden field のブロックに設定したパラメーター ("userid") を使います。
"userid" の値に 12345 を入れ、フォームで回答してみます。
https://tally.so/r/12a3bc?userid=12345
先ほど試したように Hidden field の質問は見えませんが、回答結果には 12345 が反映されています。 
あとはこの値を Make などで受け取り、LINE の返事に使います。
2. Make で LINE からフォームを送る
Make で次のように LINE のモジュールを繋げます。
- LINE ：
Watch Events
アクセストークンを使い、LINE アカウントと紐づけます。
- LINE ：
Send a Reply Message
Watch Eventsモジュール で手に入れたEvents[]: Reply TokenをReply Tokenに入れます。
そして、ユーザーに送るフォームの URL をメッセージに追加します。
ここが大事です
この時、Tally のフォームの末尾には Events[].source.userId を使います。
3. Make でユーザー ID をフォームから LINE に渡す
Make で次のように Tally と LINE のモジュールを繋げます。
- Tally ：
Watch New Responses
先ほどのフォームのアカウントと紐づけます。
- LINE ：
Send a Push Message
Tally のフォーム回答にトリガーしてプッシュメッセージを送ります。
ToにはHidden fieldに仕込んでおいたユーザー ID を Tally から持ってきます。
これで LINE から送ったフォームにユーザーが回答した時にメッセージが自動で送られます。
実装はこれで終了です！
余談：Google Form より Tally が良い！
実は Google Form でもクエリパラメーターによる事前入力は可能です。
リンクを取得するとこのような URL がコピーされます。
https://docs.google.com/forms/d/e/1FA…6Lg/viewform?usp=pp_url&entry.987654321=123456
この URL では entry.987654321=123456 がユーザー ID の質問に対応するクエリパラメーターなので、ここを例えば 000001 とするとフォームへ自動で転記されます。
ただし、ユーザーが回答している途中でこの設問が見えてしまうのが難点です。仮に、ユーザーが ID を書き換えてしまうと LINE の返事ができません。
フォームのつくりを工夫して、回答者がこの設問へたどり着かないようにする方法もあります。
残念ながら、この場合は回答結果に ID が反映されませんでした。
Tally の隠し設問がこのような ID の受け渡しに便利でした。
参考