これで若い子とのカラオケも安心？！COBOLしか経験なし！文系出身SE(23歳女)が若者の音楽を伝授します！

文系出身SE(23歳女)とは・・・

業務はもっぱらCOBOLオンリー。SE二年目文系出身＆プログラミング得意ではない、、、
そんな私がJavaScriptを初めて2週間。まだまだ何もできない、、、

これは、そんな私がJavaScriptやAPIに立ち向かいながら成長していく成長記録！
悪戦苦闘の様子をぜひご覧ください！！（笑）
(そしてうまくできなかったところは教えてください！大感謝します！)

そろそろ行きたいですよね！カラオケ！

コロナも落ち着き、そろそろ久しぶりに職場のみんなでパーッとカラオケにでも行きたい！
そんなあなたにこんな悩みありませんか？

今の若者って何聴いてるんだ？

このジェネレーションギャップはおそらく永遠の壁でしょう！
このLINE Botでは、これを歌ったら若い子に一目置かれる、そんな曲を返答してくれます。

仕様

LINE Botを使用し、アーティスト名を入力すると若者に人気の曲を返答してくれる。
(ネット上からデータを取得なんでことはまだできず、、、
私の主観です。私の趣味がわかることでしょう！)

今回使用した共通テンプレート

'use strict';

// ########################################
//               初期設定など
// ########################################

// パッケージを使用します
const express = require('express');
const line = require('@line/bot-sdk');
const axios = require('axios');

// ローカル（自分のPC）でサーバーを公開するときのポート番号です
const PORT = process.env.PORT || 3000;

// Messaging APIで利用するクレデンシャル（秘匿情報）です。
const config = {
    channelSecret: '作成したBotのチャネルシークレット',
    channelAccessToken: '作成したBotのチャネルアクセストークン'
};



// ########## ▼▼▼ サンプル関数 ▼▼▼ ##########
（この行をサンプル関数丸ごと全部と置き換えてね）
// ########## ▲▲▲ サンプル関数 ▲▲▲ ##########



// ########################################
//  LINEサーバーからのWebhookデータを処理する部分
// ########################################

// LINE SDKを初期化します
const client = new line.Client(config);

// LINEサーバーからWebhookがあると「サーバー部分」から以下の "handleEvent" という関数が呼び出されます
async function handleEvent(event) {
    // 受信したWebhookが「テキストメッセージ以外」であればnullを返すことで無視します
    if (event.type !== 'message' || event.message.type !== 'text') {
        return Promise.resolve(null);
    }
    // サンプル関数を実行します
    return sampleFunction(event);
}








// ########################################
//          Expressによるサーバー部分
// ########################################

// expressを初期化します
const app = express();

// HTTP POSTによって '/webhook' のパスにアクセスがあったら、POSTされた内容に応じて様々な処理をします
app.post('/webhook', line.middleware(config), (req, res) => {

  // 検証ボタンをクリックしたときに飛んできたWebhookを受信したときのみ以下のif文内を実行
  if (req.body.events.length === 0) {
    res.send('Hello LINE BOT! (HTTP POST)'); // LINEサーバーに返答します（なくてもよい）
    console.log('検証イベントを受信しました！'); // ターミナルに表示します
    return; // これより下は実行されません
  } else {
    // 通常のメッセージなど … Webhookの中身を確認用にターミナルに表示します
    console.log('受信しました:', req.body.events);
  }

  // あらかじめ宣言しておいた "handleEvent" 関数にWebhookの中身を渡して処理してもらい、
  // 関数から戻ってきたデータをそのままLINEサーバーに「レスポンス」として返します
  Promise.all(req.body.events.map(handleEvent)).then((result) => res.json(result));
});

// 最初に決めたポート番号でサーバーをPC内だけに公開します
// （環境によってはローカルネットワーク内にも公開されます）
app.listen(PORT);
console.log(`ポート${PORT}番でExpressサーバーを実行中です…`);

このアーティストだったら、この曲を歌えばチヤホヤされます！！

ということでアーティスト名を入れると若者受け（私受け）の良い曲が返ってくるLINE Botを作成。

// ########## ▼▼▼ サンプル関数 ▼▼▼ ##########
const sampleFunction = async (event) => {
    const userText = event.message.text;
    let replyText = '';
    switch (userText){
        case "BUMP OF CHICKEN":
            replyText = '天体観測';
            break;
    　　case "ASIAN KUNG-FU GENERATION":
            replyText = 'リライト';
            break;    
        case "My hair is Bad":
            replyText = '味方';
            break;
        case "aiko":
            replyText = '二人';
            break;
        case "あいみょん":
            replyText = '二人の世界';
            break;
        case "yonige":
            replyText = 'アボカド';    
            break;
        default:
        replyText = 'そのアーティストは興味ないです';
        break;
    }
    return client.replyMessage(event.replyToken, {
        type: 'text',
        text: replyText
    });
};

// ########## ▲▲▲ サンプル関数 ▲▲▲ ##########

ちゃんと返ってきました！
興味のないアーティストを売ったら「そのアーティストは興味ないです」と辛辣な返答が来ます（笑）

歌詞を取得するWebAPIがある！？歌詞表示はできないか！？

では続いてはWeb APIを使って役立つ情報を取得しよう！
ということで私が目を付けたのはLyrics.ovhという曲の歌詞を取得するAPI。

お！これで歌詞を表示させれば家でカラオケの練習もできるのではないか！！
まずはLINE Botと紐づけず、情報の取得からチャレンジ。

世界的超有名曲　Beatlesの「Let It Be」　の歌詞を取得してみよう！！

// axiosライブラリを呼び出す
const axios = require('axios');

// 実際にデータを取得する getRequest 関数
async function getRequest() {
  let response;
  try {
    response = await axios.get('https://api.lyrics.ovh/v1/Beatles/let it be');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

// getRequest を呼び出してデータを読み込む
getRequest();

Let It Be の歌詞を取得できた！

 lyrics: 'When I find myself in times of trouble\r\n' +
    'Mother Mary comes to me\r\n' +
    'Speaking words of wisdom, let it be\r\n' + 
    'And in my hour of darkness\r\n' +
    'She is standing right in front of me\r\n' +    'Speaking words of wisdom, let it be\n' +   
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Whisper words of wisdom, let it be\n' +    
    '\n' +
    '\n' +
    '\n' +
    'And when the broken hearted people\n' +    
    '\n' +
    'Living in the world agree\n' +
    '\n' +
    'There will be an answer, let it be\n' +    
    '\n' +
    'For though they may be parted\n' +
    '\n' +
    'There is still a chance that they will see\n' +
    '\n' +
    'There will be an answer, let it be\n' +    
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Yeah there will be an answer, let it be\n' 
+
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Whisper words of wisdom, let it be\n' +    
    '\n' +
    '\n' +
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Ah let it be, yeah let it be\n' +
    '\n' +
    'Whisper words of wisdom, let it be\n' +    
    '\n' +
    'And when the night is cloudy\n' +
    '\n' +
    'There is still a light that shines on me\n' +
    '\n' +
    'Shine on until tomorrow, let it be\n' +    
    '\n' +
    'I wake up to the sound of music,\n' +      
    '\n' +
    'Mother Mary comes to me\n' +
    '\n' +
    'Speaking words of wisdom, let it be\n' +   
    '\n' +
    'Yeah let it be, let it be\n' +
    '\n' +
    'Let it be, yeah let it be\n' +
    '\n' +
    'Oh there will be an answer, let it be\n' + 
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Let it be, yeah let it be\n' +
    '\n' +
    'Oh there will be an answer, let it be\n' + 
    '\n' +
    'Let it be, let it be\n' +
    '\n' +
    'Ah let it be, yeah let it be\n' +
    '\n' +
    'Whisper words of wisdom, let it be'        
}

日本のアーティストの曲の歌詞は取得できるか？！

// axiosライブラリを呼び出す
const axios = require('axios');

// 実際にデータを取得する getRequest 関数
async function getRequest() {
  let response;
  try {
    response = await axios.get('https://api.lyrics.ovh/v1/サカナクション/夜の踊り子');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

// getRequest を呼び出してデータを読み込む
getRequest();

結果は・・・

  code: 'ERR_UNESCAPED_CHARACTERS'
}

日本のアーティストの歌詞の取得はできなさそう・・・
（他にもメジャーな曲を試したが無理でした。）
邦ロック好きには残念すぎる結果です、、、！！

そんなあなたにも「ありのままでいてほしい」

「そのアーティストは興味ないです」と返してくる酷なBot...

若者の人気曲を全く知らないあなたにも、「ありのままでいてほしい」！＝「Let It Be 」
せめて励ましの歌詞を表示してあげることはできないか・・・！ということで

興味ないアーティストを打ったあなたには、Let It Be　の歌詞を表示して元気になってもらおう！
(Let It Beへの信頼が熱すぎます。)

defaultの命令文に追加してみた。

const sampleFunction = async (event) => {
    const userText = event.message.text;
    let replyText = '';
    switch (userText){
        case "バンプオブチキン":
            replyText = '天体観測';
            break;
    　　case "アジカン":
            replyText = 'リライト';
            break;  
        case "BUMP OF CHICKEN":
            replyText = '天体観測';
            break;
    　　case "ASIAN KUNG-FU GENERATION":
            replyText = 'リライト';
            break;    
        case "My hair is Bad":
            replyText = '味方';
            break;
        case "aiko":
            replyText = '二人';
            break;
        case "あいみょん":
            replyText = '二人の世界';
            break;
        case "yonige":
            replyText = 'アボカド';    
            break;  
        default:
        replyText = 'そのアーティストは興味ないです';
        const axios = require('axios');
        async function getRequest() {
            let response;
            try {
              response = await axios.get('https://api.lyrics.ovh/v1/Beatles/let it be');
              replyText = (response.data);
            } catch (error) {
              console.error(error);
            }
          }
        // getRequest を呼び出してデータを読み込む
        getRequest();

        break;
    }
    return client.replyMessage(event.replyToken, {
        type: 'text',
        text: replyText
    });
};

結果は・・・

やはり冷たいままだった。。。！！全国の吉幾三ファンを敵に回す結果になりました。。。

その後も関数定義などが誤っているのか？と5時間格闘するも初心者にはこれが限界でした、、、

親しみやすいが、、、

LINE Bot初めて製作してみましたが、結構すぐにいつも使ってるやつ！見たことあるやつ！
というものができるので、これはいけるんじゃ？と思った自分は舐めていました、、、

Web APIと組み合わせようとすると急に難易度アップ！成功できずに終わってしまいました。
また、トンネリングURLの変更がうまく行かなかったり、先ほどまで返ってきたLINE Botの返答が来なかったり...やはり新しいことは難しいです。

ただ今回の収穫としては歌詞取得APIで歌詞情報を取得できたこと！
ここは自分でもナイスな結果と前向きに行きたいと思います！伸びしろ万歳！

ここからの成長に乞うご期待！！