back numberのおすすめ動画を提供するLINE bot制作で挫折した話

# back numberの良さを布教したい
私は**back numberの良さを全国民に布教したい**、２５歳社会人だ。
本日はそんな私の願いを叶えるべく、back numberのおすすめ曲を提供してくれるLINE bot制作で、**挫折**した話をしたいと思う。

まずはでき上がったLINE botをみていただきたい。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">気分に合わせてback numberのおすすめミュージックビデオのURLを教えてくれるLINEbotを作りろうと思いましたが、挫折しました。詳細はQiitaの投稿をご確認ください。 <a href="https://t.co/Gs4XDwQH9m">pic.twitter.com/Gs4XDwQH9m</a></p>&mdash; Masahiro Nishiguchi (@Masa_Xedge) <a href="https://twitter.com/Masa_Xedge/status/1584330697157681152?ref_src=twsrc%5Etfw">October 23, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

一見うまくYouTubeのURLが送られてきているように思うが、実は、**全て同じ動画のURL**が送られてきてしまう。
さらには、**特定の文字列以外が送られてきた場合は、検索失敗という「逃げ」をしている**。

今回の投稿では、挫折した（けど素人なりに頑張って作った）フロー、挫折した経緯などをお伝えできればと思う。

# 環境
Heroku環境上でNode-REDを使用
YouTube API

# 挫折した（けど素人なりに頑張って作った）フロー
![スクリーンショット 2022-10-23 8.46.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884816/a4fd82f4-f90c-0c59-c3ee-de55d666d240.png)

◆JSONフロー
```
[{"id":"844d01e8be438440","type":"tab","label":"フロー 8","disabled":false,"info":"","env":[]},{"id":"df8173e631e73bcb","type":"http request","z":"844d01e8be438440","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://www.googleapis.com/youtube/v3/search?part=id,snippet&q=\"クリスマスソング\"&type=video&channelId=UCgipy6-EqjT-1BCDndXX1PA&key=YouTubeAPIキー","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"x":590,"y":240,"wires":[["3cbb0f51a07a1b76"]]},{"id":"46111e59c3e862fb","type":"Webhook","z":"844d01e8be438440","name":"","url":"/webhook","x":180,"y":160,"wires":[["f85dc1474b7cbeae"]]},{"id":"882565acbc25320b","type":"ReplyMessage","z":"844d01e8be438440","name":"","replyMessage":"","x":960,"y":160,"wires":[]},{"id":"3cbb0f51a07a1b76","type":"function","z":"844d01e8be438440","name":"","func":"msg.payload = 'クリスマスにはもちろんこの曲！'+'https://www.youtube.com/watch?v='+msg.payload.items[0].id.videoId ;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":240,"wires":[["882565acbc25320b"]]},{"id":"f85dc1474b7cbeae","type":"switch","z":"844d01e8be438440","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"恋人欲しい。。","vt":"str"},{"t":"eq","v":"恋人できた！","vt":"str"},{"t":"eq","v":"夏がきた！","vt":"str"},{"t":"eq","v":"クリスマスが来た！","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":5,"x":370,"y":160,"wires":[["c66b0b5a1e6d31aa"],["a9d83f551bf0ec88"],["c207cc5f207cda24"],["df8173e631e73bcb"],["4a386df2755396c0"]]},{"id":"c66b0b5a1e6d31aa","type":"http request","z":"844d01e8be438440","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://www.googleapis.com/youtube/v3/search?part=id,snippet&q=\"ヒロイン\"&type=video&channelId=UCgipy6-EqjT-1BCDndXX1PA&key=YouTubeAPIキー","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"x":590,"y":60,"wires":[["e7e89488cdfef276"]]},{"id":"c207cc5f207cda24","type":"http request","z":"844d01e8be438440","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://www.googleapis.com/youtube/v3/search?part=id,snippet&q=\"高嶺の花子さん\"&type=video&channelId=UCgipy6-EqjT-1BCDndXX1PA&key=YouTubeAPIキー","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"x":590,"y":180,"wires":[["67eb4a725d86676a"]]},{"id":"e7e89488cdfef276","type":"function","z":"844d01e8be438440","name":"","func":"msg.payload = '恋人が欲しい君にはこの曲！'+'https://www.youtube.com/watch?v='+msg.payload.items[0].id.videoId ;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":60,"wires":[["882565acbc25320b"]]},{"id":"6549cbf537b8af3c","type":"function","z":"844d01e8be438440","name":"","func":"msg.payload = 'おめでとう！そんな君にはこの曲！'+'https://www.youtube.com/watch?v='+msg.payload.items[0].id.videoId ;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":120,"wires":[["882565acbc25320b"]]},{"id":"67eb4a725d86676a","type":"function","z":"844d01e8be438440","name":"","func":"msg.payload = '夏にはこの曲！'+'https://www.youtube.com/watch?v='+msg.payload.items[0].id.videoId ;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":180,"wires":[["882565acbc25320b"]]},{"id":"4a386df2755396c0","type":"ReplyMessage","z":"844d01e8be438440","name":"","replyMessage":"ごめんね、最適なback numberの曲を見つけられなかった。。","x":600,"y":320,"wires":[]},{"id":"a9d83f551bf0ec88","type":"http request","z":"844d01e8be438440","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://www.googleapis.com/youtube/v3/search?part=id,snippet&q=\"花束\"&type=video&channelId=UCgipy6-EqjT-1BCDndXX1PA&key=YouTubeAPIキー","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"x":590,"y":120,"wires":[["6549cbf537b8af3c"]]}]
```
## 手順
### ①LINEサーバからの入力をswitchで分岐
<img width="300" alt="スクリーンショット 2022-10-23 8.48.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884816/b99de12c-5c47-0865-abfb-9c2fff53b74f.png">

今回はLINEサーバから受け付けたそれぞれのシュチュエーションに対して、back numberの各シチュエーションにふさわしい曲を返却する、というLINEbotの仕様とした。

今回設定したしたシチュエーションは4つ。
恋人が欲しい。。人には、『ヒロイン』
恋人ができた！人には、『花束』
夏がきた！と感じている人には『高嶺の花子さん』
クリスマスが来た！と浮かれている人には『クリスマスソング』

というそれぞれの曲のミュージックビデオの曲を返却するよう設定した。

### ②それぞれのシュチュエーションに応じてYouTubeから曲を検索
```js:http request
https://www.googleapis.com/youtube/v3/search?part=id,snippet&q="ヒロイン"&type=video&channelId=UCgipy6-EqjT-1BCDndXX1PA&key=YouTubeAPIキー
```
YouTubeAPIを使用するための設定、仕様の理解にかなり苦労した。
今回は以下のページを参考にした。
◆YouTubeAPIの設定
https://engineering.webstudio168.jp/2022/09/youtube-data-api-getapikeys/#toc1
◆YouTubeAPIの仕様理解
https://developers.google.com/youtube/v3/docs/search

http requestの内容だが、クエリにそれぞれのシチュエーションに対して返却したい曲名を設定する。
また、チャンネルコードにはback numberの公式チャンネルのチャンネルコードを設定した。

問題はここで発生する。**クエリに返却したい曲名、チャンネルコードに公式チャンネルのチャンネルコードを設定しても、一意のYouTube動画のURLを返却してくれるというわけではない**ことが判明した。

例えば、『花束』をクエリに設定し、チャンネルコードにback numberの公式チャンネルを設定したとしても、back numberの『花束』ではない曲のミュージックビデオのURLがAPIから返却されてしまう。
『花束』のミュージックビデオを狙い撃ちして返却するような設定は、APIではできないようなのである。

クエリ、チャンネルコードの他に、videoidを設定しても、結果は変わらなかった。現段階では思いついていないが、**何か改善点を見つけるのが課題**である。

### ③http requestから返却された内容を、msgに設定
```ｊｓ:function
msg.payload = '恋人が欲しい君にはこの曲！'+'https://www.youtube.com/watch?v='+msg.payload.items[0].id.videoId ;
return msg;
```
最後に、http requestからの返却されたURLを文言と同時にmsgに格納して（一応）完成である。
今回設定したシチュエーション以外の入力がLINEからされた場合は、「ごめんね、最適なback numberの曲を見つけられなかった。。」と返却するようにした。
これも今後の課題である。
**様々なシチュエーションに合わせて最適な曲を提案できる方法がないか、考えていきたい**と思う。

# LINEbot制作を終えて
まずはLINEbot制作が非常に面白かった、ことを伝えたい。
想定通り返信してくれないLINEbotが出来上がると、意思疎通できない赤ちゃんを相手にしているようだった。
なんとも言えない愛くるしさ（？）を感じた。

今回のback number総国民布教作戦は、不完全燃焼に終わってしまった。
何か解決策を見つけたら、このQiita記事もグレードアップしていきたい。