はじめに
初めまして。北の国の小売業に勤務しておりますやまぴと申します。
突然ですが、皆さん・・野球好きですか? 私は地元のプロ野球チーム・北海道日本ハムファイターズの大ファンです。
好きが高じて、現在球場ボランティアをやってまして(札幌ドーム時代から数えて7年)、休日を利用して今のホーム・エスコンフィールド北海道の中で場内案内や来場者プレゼントの配布などをしています。そんなボランティア活動の中で、来場されたゲストの方のお問い合わせに球場グルメについてのお問い合わせがあります。お店の場所、メニューについて(〇〇はどこに売ってるの?)などなど。冊子になったガイドブックも配布してるし、場内に掲示板もありますが、高齢の方などはちょっとわかりづらかったりします。
そこで「球場グルメを教えてくれるLINEBotを作ってみよう!」と思い、作ってみました。
果たして、どんなものができたのか・・?ご紹介いたします。
作成したものがこちらです。
再生速度を落とした動画なのですが、表示内容が多いので静止画面のスクリーンショットがこちらです。
①選手名で検索すると、その選手のメニューを教えてくれる。
②場所(フロア)で検索すると、そのフロアにある選手メニューを教えてくれる。
どんな内容で作るのかを考えた
球場グルメを教えてくれるもの・・といっても、エスコンフィールドは球場の内外に飲食を扱う店舗があり、全てを網羅したものを作るには今の私では無理!
「じゃあ、ファイターズは人気選手も多いし、選手グルメもあるから選手グルメを教えてくれるbotにしよう!」と考えました。
使用したツール
・Make
・LINE
・Googleスプレッドシート
作成にあたり助けてもらいました
・ChatGPT
・Gemini
何のモジュールを使うのか、エラーが出たときどこを修正すればよいのかなど、スクショを貼り付け(ChatGPTは上限があるので、途中からGeminiさんに頼りました)質問して、直して、動かして・・を繰り返し、何とか完成させました。できたときにめっちゃ喜んでくれるし、ほめてくれるし、ありがたかったです。(´;ω;`)
人間、ほめて伸ばすのが大事です。うんうん(^^♪
作成したシナリオがこちら
それでは作成手順を説明させていただきます。
Googleスプレッドシートの作成
まず、選手グルメの一覧をスプレッドシートで作成します。
必要項目は①選手名 ②メニュー名 ③価格 ④店舗 ⑤場所(フロア・球場外もあり)
ですが、メニューの画像もあったらいいかなと思い、画像のリンク先も付け加えました。(選手別)
それがこちらです。
Google Sheetsモジュールの作成
そして、Makeで新しいシナリオ作成を選択→LINEモジュールでオウム返しBotを作成。
動作確認をしたら、Google Sheetsモジュールを作成・つなげていきます。
モジュールはシートの行からほしい項目を探し出すので「Search Rows」にします。
まず、場所を入れて、メニュー名他の情報を教えてほしいと思い、モジュールの中身を登録していきました。
作成したスプレッドシートとつないで、シートID・シート名を選択。
Filterに指定するもの、この場合は「場所」なので、シートの「場所」の列を指定します。
続いて選手メニューが複数(一人の選手でメニューが2つ以上)の場合もあるので、Toolsモジュールを
Google Sheets モジュールとLINEモジュールの間に入れてつなぎます。
Toolsモジュールは複数の行をまとめて出したいので「Text Aggergator」にします。
Source ModuleはGoogle Sheetsモジュールを指定し、Textには質問した時に帰ってくる項目を表示したい順番に選んで並べていきます。
最後にLINEモジュール(Send a reply Message)の詳細を設定していきます。
TextはToolsの設定から「Text」を選択し、更に、店舗情報のリンクも貼り付け、メッセージも入力しました。
場所を入力して、答えてもらうものを作りましたが、選手名(きっとこっちのほうが多い)を入力しても答えてくれるようにもうひとつ作成することにしました。
ここで登場するのが「Router」です。
LINEモジュールとGoogle Sheetsモジュールの間に入れます。あと選手名で検索するために、先につくったモジュールをコピペして上と同じようにつなげ、こちらのGoogle SheetsモジュールにもRouterをつなげます。
そして、それぞれの接続線に Filter をセットし、入力された内容(場所または選手名)によって返される答えが分かれるように条件を設定していきます。
場所で検索するルートでは、スプレッドシートの「場所」列に記載されている内容(この場合、「1F」「2F」など)と一致するかどうかを確認し、いずれかに合致すれば、上のルートで答えを返します。
選手名で検索するルートでは、「場所」列のいずれにも合致しない場合、下のルートで答えを返すように設定します。
選手名のほうはこのように設定しました。
途中うまくいかず、エラーが出たりパニックになりましたが、なんとか動くようになりました。
作成してみての感想とこの先のこと
最初は順調に進むかと思いきや、分岐を作ろうというところで動かなくなり、エラーは出る・・
自分と似たようなの作った方(Googleスプレッドシート使用)いないかしらと思って、いろいろ探したり、動画(YouTube)も見てみましたが・・
初心者・・「わからないよう(´;ω;`) どうしたらいいんだああああ!!」と叫びそうになりました。
それでも、AIに励まされつつ(こんな同僚・上司がいたらと思ってしまいました)なんとか完成させました。
次は、このメニューの中から、自分が食べたい(飲みたい)ものがどこで販売されてるかを答えられるように(今はまとめて店舗の場所も出してるので)、また他の球場グルメも探せるようなものを作ってみたいです。
初心者のつたない作品ですが、「もっとこんな風にできるよ」とか「パリーグ全球場分も作ってほしい」
(やってみたいけど)などのご意見・アイデアなど教えていただけたら嬉しいです。
最後までおつきあいくださり、ありがとうございました!
追記
作成が完了して、無事Botが動くのを確認できたときは「やった!」と嬉しく思った私ですが、よくよく見てみると、選手グルメメニューは1人で1つの選手もいれば複数ある選手もいるため、選手名で検索したときの表示が見づらいことに気づきました。
そこで、今度はGeminiさんへ「見やすくしたいんだけど・・」と質問したところ
アプローチ1: 各アイテムを個別のテキストメッセージとして送信する(シンプルだがテキストのみ)
アプローチ2: 各アイテムを個別のFlex Messageカードとして送信する(推奨、見栄えが良い)
と2つ提案してもらえました。
そして、最も推奨するのがアプローチ2であるというご意見をいただきました。
「LINEが提供しているFlex Message Simulatorを使うと初心者でも簡単にできますよ」
それがこちらですね。(サンプル画面です)
JSONコードがこのように作られます。
簡単・・簡単・・????
更にバージョンアップして、かっこいい見栄えのBotを作るためにはまた、パソコンの前でうなりながら作業することとなりそうですが、「思い立ったら!・・」です。
バージョンアップ版をお楽しみに!
Geminiさんの提案を受けて、参考にできると読んだ記事です