見出し画像

デザイナーでもエンジニアでもない私が、LINE Messaging APIとParotを用いて自分用の勉強記録Botを作成したお話②

こんにちは。mugiです🦊🍮
前半では、LINE Developerを用いてアカウントを作成する方法や、リッチメニューに機能を割り当てる方法を紹介しました。

後半では、④〜⑤の説明をしていきたいと思います。

制作過程
①LINE Developerで勉強記録Botアカウントを作成する
②Canvaで「START・END」画像を作成する
③リッチメニューに「START・END」画像を割り当てる
④Parotと勉強記録Botアカウントを紐付ける
⑤Parot上でシナリオを設定する

④Parotに登録し、勉強記録Botアカウントを紐付ける

まずはParotに登録します。Parotは、今回の制作を進める中で初めて知ったのですが、他のサービスと比べてダントツでデザインが素敵だったこと、月1000通までなら無料で利用できるということから、今回のような個人制作にはピッタリだと思いました。(初期費用も無料👏)

スクリーンショット 2021-07-09 15.40.44

登録したあとは、添付のマニュアルに沿って進めていくだけです。(下記、添付の一部を参照しております。)

・Channel secretを確認

「LINE Official Account Manager」にアクセスし、「設定」から「Messaging API」を選択してください。

スクリーンショット 2021-07-09 16.01.42

こちらの「Channel secret」をコピーして、Parotのユーザー登録画面に記入してください。

・チャネルアクセストークンを確認

「LINE Developer」から、先ほど作成した勉強記録Botを選択します。
「Messaging API設定」の一番下にある「チャネルアクセストークン」をコピーします。

スクリーンショット 2021-07-09 23.13.09

・Webhook URLの設定方法

ユーザー登録後に届いたメールに記載してある「Webhook URL」をコピーします。次に、「LINE Official Account Manager」の「Messaging API設定」の「Webhook URL」にコピーして完了👏

スクリーンショット 2021-07-09 23.23.49

⑤Parot上でシナリオを設定する

Parotの基本的な使い方は、Parotの公式noteに詳しく解説されているので、こちらをご覧ください。


ここで改めて、チャットボットで実現したいことを順番に整理します。

①アンケート回答(これはデフォルトで入っています)
②「START」を押して勉強を開始
③「END」を押して勉強終了
④勉強内容ごとに内容を記録できるようにする
⑤お疲れ様でしたのメッセージと画像を送付

①アンケート回答
こちらはデフォルトで設定されている機能です。(変更不可)
私は追加質問で、今年最も力を入れたい勉強内容を選択できるようにしました。

②「START」を押して勉強を開始

スクリーンショット 2021-07-10 14.23.10

「シナリオ」の中の「ボタン」から作成します。選択肢には「END」を入力しました。
そして、Parotには「キーワード」というものがあります。「キーワード」とは、その文字が含まれるメッセージが送信されると、指定したメッセージが自動的に送信されるというものです。Parotには、テキスト以外でも「シナリオ」「画像」を返すことができるので、今回は「START」という文字が入力されると、上記の「勉強開始」のシナリオが送付されるようにしました。

スクリーンショット 2021-07-10 14.38.18

③「END」を押して勉強終了

スクリーンショット 2021-07-10 14.26.14

「END」を押すと、上記のテキストが送信されるようにしました。

④勉強内容ごとに内容を記録できるようにする

スクリーンショット 2021-07-10 14.28.20

勉強内容を入力するためには「カルーセル」を使用しました。私は、「英語・中国語・新聞・読書・デザイン」を作成しました。画像もCanvaで作りました👏そして、選択肢には「内容を入力する📔」を入れました。「内容を入力する📔」を押したあとは、それぞれのカルーセルに対して次のようなメッセージを送信するようにしました。

スクリーンショット 2021-07-10 14.34.12
スクリーンショット 2021-07-10 14.36.15
スクリーンショット 2021-07-10 14.36.27

⑤お疲れ様でしたのメッセージと画像を送付

いよいよ最後です。先ほど使用した「キーワード」の機能を使用して、「完了」が送信されるとメッセージと画像が送信されるようにしました。

スクリーンショット 2021-07-10 14.56.26
スクリーンショット 2021-07-10 14.56.56

これで完成です👏👏ちなみにシナリオはこんな感じです。

スクリーンショット 2021-07-10 15.01.25

今回は何もかも初めての状態で作り上げたので、スキル面ではまだまだなこともあるかと思いますが、エンジニアやデザイナーでなくても、ここまで作り上げることができた自分にまず拍手!👏👏

このあと友達数人に使ってもらった結果、直感で分かりやすい設計やデザインがとても好評でした。(素直に嬉しい)
友達がどのような操作をしたのかは、「レポート」で確認ができるので、一人じゃ勉強が続かない人や、誰かの監視の目が欲しい人に重宝して使ってもらっています。笑 

以下、今後の課題を踏まえて書き留めておきたいと思います。

●今回の学び
「自分が欲しい!」と思うものは意外と見つからなかった。(あってもデザインやインターフェースが好みじゃない🙅)
・世の中には既に便利なツールがあるので、私に必要なものは既存の知識を組み合わせて作る「アレンジ力」(NOT ゼロイチ🙅)
・難しいものから作るのではなく、「小さく作る」ことが大切

●今後の課題とやりたいこと
・勉強内容ごとの総勉強時間や平均時間をレポートで見れるようにしたい
・Parotでは決まった時間に配信をする機能がないので、勉強時間のフォローメッセージを毎日自動で配信できるようにしたい📧

ここまで読んでいただきありがとうございました🦊🍮
もし良かった「スキ」「コメント」いただけると嬉しいです。

この記事が気に入ったらサポートをしてみませんか?