車椅子の方々向けにLINEで飲食店選びを円滑にできるようしてみた

# 1.完成はこちら

LINEとホットペッパーグルメAPIを用いてバリアフリー店舗を選べるbotになります。


https://x.com/mts2024mts/status/1811019784894734689


みなさんこんにちは。
某小売業でECシステムに関わっています。
今回はECシステムではなく、LINEについて試行錯誤してみました。

# 2.問題点 
私の勤めている企業では、身体的ハンディキャップを負い、車椅子で働いている方がおります。そうした中で、懇親会を兼ねてレストランや居酒屋に行くこともしばしばあります。

 　　　　　　　　　　　　　**<font color="Red">しかしながら、問題が発生します！！</font>**
          
バリアフリーになってない店が多い～
エレベーターない建物だった～

どうするかというと、車椅子の方を抱きかかえて階段を上り下りするということが良くあります。そうした店を予約してしまう自分たちも悪いのですが、今回は、下半身のハンディキャップがある方向けにLINEで飲食店選びを円滑にできるようしてみました。

# 3.LINEbot
皆さんお馴染みの無料通話アプリLINEには、設定をするとユーザーのメッセージに自動応答してくれる便利な機能がありますので、今回はこれを使います。

# 4.構想
地名などのキーワードをLINEに入力すると、店舗情報が表示されるものにしたいと思います。例えば、「銀座」と入力すると、バリアフリーの店舗が表示されるイメージです。

# 5.使用したツール
・[LINE Developers](https://developers.line.biz/ja/)
・[Make](https://eu1.make.com/)
・ホットペッパーグルメAPI　Powered by [ホットペッパーグルメ Webサービス](http://webservice.recruit.co.jp/)
　　どのようなAPIを使えばよいか探すのに苦労しました。
　　今回は飲食店とバリアフリー有無が検索できるホットペッパーグルメAPIを使用します。
　　登録が必要ですが、現時点では無料で使えます。
# 6.設計
ホットペッパーグルメのAPI仕様書を深く読む必要があります。
　
　条件の絞り込み（今回はセットする項目に以下条件を入れます）
　・バリアフリー店舗：本目的
　・飲み放題：集まると皆さん飲むんですね！これは必要
　・ワイン充実：私個人がワインを飲むのでこれも必要

　表示の仕様
　・件数：１件だと満席で埋まっている可能性もあるので余裕をもって３件表示
　・表示項目：ある程度の店舗概要がわかるようにする
 　　　　　　　　店舗住所、交通情報、バリアフリー有無、URL（リンクが押せること）
　　　　　　　　　当初は店舗名も表示項目に入れていましたが、
　　　　　　　　　URL表示の際に店舗名が出るので外しました。

　エラーハンドリング
　・エラーのメッセージなどは必要

# 7.開発
### 7-1.Makeの構造
全体構造は比較的シンプルです。
![make2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809072/0d55b2f2-89d2-5724-99bc-b2399520b87e.png)

Makeのモジュール作成などは、ここでは触れませんので適宜検索してください。
モジュールを選んで配置すれば簡単に上記のように作成できます。

https://qiita.com/watanabe-tsubasa/items/8342595d641143b780f7

### 7-2.APIの設定
:::note info

APIレスポンスは初期値のXMLにしています。先ほどAPI仕様書を深く読んだ方が良いと書きましたが、自身があまりよく読んでいなく、レスポンスはXMLかJSONか選べたようです。JSONでも問題なくできると思います。
:::

##### 　7-2-1.APIキーの取得
　　ホットペッパーグルメの登録をするとキーが送られてきますので、それを使用します。
##### 　7-2-2.APIキーと接続のセット（HTTPモジュール）
　　カーソル当たっているところ(紫色)のKeyに送られてきたキーをセットします。
　　API Key parameter nameはkeyに変えてCreateします。
　　![key2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809072/2d1999a9-1387-6616-412a-9edbc1626b4e.png)

　　URLもセットします。
　　![url.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809072/f42269ee-cc4d-e60b-eec7-e701dd595b3a.png)


##### 　7-2-3.条件のセット（HTTPモジュール）
　　wine=1,free_drink=1,barrier_free=1でそれぞれセットします。
　　![zi.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809072/a5dad0d0-a3f2-d007-b2be-fffd1d12ab60.png)


##### 　7-2-4.ユーザー入力のセット（HTTPモジュール）
　　API項目のkeywordがフリー検索(部分一致)可能のようなのでセットします。
　　半角スペース区切りの文字列を渡すことでAND検索になり複数指定可能です。
　　![word.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809072/b98ac481-4aa2-894e-ea37-e256b16f2522.png)

##### 　7-2-5.Bot応答のセット（LINE応答モジュール）
　　応答部分は3件表示できるようにします。下記は2件目と3件目です。
　　![re.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809072/f205eeeb-6998-0d64-ca80-0efbb9215484.png) 

:::note warn
　8. Data.results.shop[の後は2または3を指定しないと、1件目と同じ情報が表示されてしまいます。私は都度APIで検索する必要があるのではないかと思ってしまったため、どう対処すべきかで時間を費やしてしまいました。2,3を指定してください。
:::



### 7-3エラーの設定（Routerモジュール）
　　ホットペッパーグルメのAPI仕様書にはエラーコードが複数ありましたが、
　　今回は200の通信でない場合、検索結果がない場合の分岐をそれぞれ作成します。
　　![200.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809072/f855ef9f-ee6e-db75-c2fc-a0a7460cdcf6.png)
　　![ken.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809072/6c2e7bbe-96a8-c59a-8764-b75cad4e6264.png)

# 8.動作確認
それでは動作確認になります。
キーワードを入れると、バリアフリーかつ飲み放題かつワイン充実のお店が３件見つかりました。めでたしめでたし！！

https://x.com/mts2024mts/status/1811019784894734689

動作確認した際の飲食店の詳細を見ると、バリアフリーあり、飲み放題あり、ワイン充実の店でした。

# 9.飲み会へGO
今回は、LINEとホットペッパーグルメAPIを用いたbotを作成しました。その他のAPIも試してみたいと思います。また、飲み会でもこのbotを使用したいと思います。
最後まで読んでいただき、ありがとうございました！


2024/7/15　一部修正しています