今朝のおススメの曲を届けてくれるLINE BOT #Node.js

はじめに

　朝は、一日のはじまりなので、良いスタートを切りたい。
　そんなとき、心地よい音楽を聴いて、気分を整えたいと思います。
　LINEは、起き掛けにメッセージが入っていないか見るので、
　おススメの音楽が届いていたら、うれしい気がします。

完成イメージ

環境

Node.js
LINE Messaging API
Spotify SDK SpotifiApi
VSCode
Github Actions

作り方

LINE Messaging APIの利用登録とチャネル作成*
LINEログイン APIの利用登録とLIFFアプリ作成*
Spotify APIの利用登録とWebアプリ作成*
Github Actionsの設定*

*ほかのQiita記事に掲載あり

ソースコード

3. Webアプリ

Webアプリについて紹介します。

サーバ

/**
 * 今朝のおススメの曲
 */
// ライブラリ
const express = require('./node_modules/express');

// Spotify用設定
const spotifyApp = express();
spotifyApp.use(express.json());
spotifyApp.use(express.urlencoded({ extended: true }));
const spotifyRouter = require('./spotify-router');
spotifyApp.use('/', spotifyRouter);

// LINE用設定
const lineApp = express();
const lineRouter = require('./line-router');
lineApp.use('/line', lineRouter);

// Spotify用ポート
spotifyApp.listen(8888, () =>
  console.log(
    'HTTP Server up. Now go to http://localhost:8888/login in your browser.'
  )
);

// LINE用ポート
lineApp.listen(8000, () =>
  console.log(
    'HTTP Server up. Now go to http://localhost:8000/line/login in your browser.'
  )
);

Line用ルータ

/**
 * LINE用ルータ
 */
// ライブラリ
const express = require('./node_modules/express/index');
const line = require('@line/bot-sdk');
const axios = require('./node_modules/axios');
var util = require('./node_modules/util');

// LINE用設定
const app = express.Router();
const config = {
  channelSecret: '<シークレットキー>',
  channelAccessToken: '<アクセストークン>'
};
const client = new line.Client(config);

function makeFlexMessage(data) {
  var flexMessage = {
    type: "flex",
    altText: "this",
    contents: {}
  };
  var flexCarousel = {
    type: "carousel",
    contents: []
  };
  flexCarousel.contents = makeBubbles(data);
  flexMessage.contents = flexCarousel;

  return flexMessage;
}

function makeBubbles(data) {
  var flexBubbles = [];

  for(let i = 0; i < data.length; i++) {
    if (i > 2) break;
    flexBubbles.push(makeBubble(data[i]));
  }

  return flexBubbles;    
}

function makeBubble(data) {
  var flexBubble = {
    type: "bubble",
    size: "",
    direction: "",
    hero: {},
    body: {},
    footer: {}
  };

  flexBubble.size = "micro";
  flexBubble.direction = "ltr";
  flexBubble.hero = makeHero(data); // FlexImage;
  flexBubble.body = makeBody(data); // FlexBox;
  flexBubble.footer = makeFooter(data); // FlexBox;

  return flexBubble;
}

function makeHero(data) {
  var flexImage = {
    type: "image",
    url: "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip10.jpg",
    size: "full",
    aspectRatio: "320:213",
    aspectMode: "cover"
  };
 
  return flexImage;
}

function makeBody(data) {
  var flexBox = {
    type: "box",
    layout: "vertical",
    contents: [],
    spacing: "sm",
    paddingAll: "13px"
  };
  flexBox.contents.push(makeBodyText(data)); //FlexComponent[]
  flexBox.contents.push(makeBodyHeader(data));
  flexBox.contents.push(makeBodyMain(data));

  return flexBox;
}

function makeBodyText(data) {
  var flexText = {
    type: "text",
    text: data.name,
    size: "sm",
    wrap: true,
    weight: "bold",
    style: "normal",
  };

  return flexText;
}

function makeBodyHeader(data) {
  var flexBox = {
    type: "box",
    layout: "baseline",
    contents: []
  };

 var stars = Math.round(data.popularity/10);
  if (stars > 5) {
    stars = 5;
  }

  for(let i = 0; i < stars; i++) {
    flexBox.contents.push(makeBodyHeaderEvaluationIcon(data)); //FlexComponent[];
  }
  flexBox.contents.push(makeBodyHeaderEvaluationNumber(data)); //FlexComponent[];

  return flexBox;
}

function makeBodyHeaderEvaluationIcon(data) {
  var flexIcon = {
    type: "icon",
    url: "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png",
    size: "xs"
  };

  return flexIcon;
}

function makeBodyHeaderEvaluationNumber(data) {
  var flexText = {
    type: "text",
    text: "",
    size: "xs",
    color: "#8c8c8c",
    margin: "md",
    flex: 0
  };
 
  var value = data.popularity;
  if (value === null || value === undefined) {
    value = " "; 
  }
  flexText.text = "'" + value + "'";

  return flexText;
}

function makeBodyMain(data) {
  var flexBox = {
    type: "box",
    layout: "vertical",
    contents: []
  };
  flexBox.contents.push(makeBodyMainContext(data)); //FlexComponent[];

  return flexBox;
}

function makeBodyMainContext(data) {
  var flexBox = {
    type: "box",
    layout: "baseline",
    spacing: "sm",
    contents: []
  };

  var flexText = {
    type: "text",
    text: data.artist,
    size: "xs",
    wrap: true,
    color: "#8c8c8c",
    flex: 5
  };

  flexBox.contents.push(flexText);

  return flexBox;
}

function makeFooter(data) {
  var flexBox = {
    type: "box",
    layout: "vertical",
    spacing: "sm",
    contents: []
  };

var flexButton = {
    type: "button",
    style: "primary",
    color: "#228b22",
    action: ""
  };

  var action = {};
  action.label = "Play";
  action.type = "uri";
  action.uri = data.url;
  flexButton.action = action;

  flexBox.contents.push(flexButton);

  return flexBox;
}

async function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }
  var msg = '今朝のおススメの曲';
  let url = "http://localhost:8888/getmusic";
  let response = await axios.get(url);

  var flexMessage = makeFlexMessage(response.data);
  console.log(util.inspect(flexMessage));

// ユーザーにリプライメッセージを送ります。
  return client.replyMessage(event.replyToken, flexMessage);
}

//=================
// ルータ
//=================

app.get('/', (req, res) => res.send('Hello LINE BOT! (HTTP GET)'));
app.post('/webhook', line.middleware(config), (req, res) => {

  if (req.body.events.length === 0) {
    res.send('Hello LINE BOT! (HTTP POST)');
    console.log('検証イベントを受信しました！');
    return;
  } else {
    console.log('受信しました:', req.body.events);
  }

  Promise.all(req.body.events.map(handleEvent)).then((result) => res.json(result));
});

module.exports = app;

Spotify用ルータ

/**
 * Spotify用ルータ
 */
// ライブラリ
const ServerMethods = require('./src/server-methods');
const SpotifyWebApi = require('./src/spotify-web-api');
const express = require('./node_modules/express');
var util = require('./node_modules/util');

// Spotify用設定
const app = express.Router();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 操作 ※ただし、Primeプラン限定あり
const scopes = [
  'ugc-image-upload',
  'user-read-playback-state',
  'user-modify-playback-state',
  'user-read-currently-playing',
  'streaming',
  'app-remote-control',
  'user-read-email',
  'user-read-private',
  'playlist-read-collaborative',
  'playlist-modify-public',
  'playlist-read-private',
  'playlist-modify-private',
  'user-library-modify',
  'user-library-read',
  'user-top-read',
  'user-read-playback-position',
  'user-read-recently-played',
  'user-follow-read',
  'user-follow-modify'
];

// Spotify API SDK 設定
SpotifyWebApi._addMethods(ServerMethods);
const spotifyApi = new SpotifyWebApi({
  redirectUri: 'http://localhost:8888/callback',
  clientId: process.argv.slice(2)[0],　// <クライアントID>
  clientSecret: process.argv.slice(2)[1] // <クライアントシークレット>
});

//=================
// ルータ
//=================
// ログイン
app.get('/login', (req, res) => {
  res.redirect(spotifyApi.createAuthorizeURL(scopes));
});

// Spotify からのコールバック
app.get('/callback', (req, res) => {
  const error = req.query.error;
  const code = req.query.code;
  const state = req.query.state;

  if (error) {
    console.error('Callback Error:', error);
    res.send(`Callback Error: ${error}`);
    return;
  }

  // トークン取得
  spotifyApi
    .authorizationCodeGrant(code)
    .then(data => {
      const access_token = data.body['access_token'];
      const refresh_token = data.body['refresh_token'];
      const expires_in = data.body['expires_in'];

      spotifyApi.setAccessToken(access_token);
      spotifyApi.setRefreshToken(refresh_token);

      console.log('access_token:', access_token);
      console.log('refresh_token:', refresh_token);

      console.log(
        `Sucessfully retreived access token. Expires in ${expires_in} s.`
      );
      res.send('Success! You can now close the window.');

      // トークン・リフレッシュ※期限の半分を過ぎたら
      setInterval(async () => {
        const data = await spotifyApi.refreshAccessToken();
        const access_token = data.body['access_token'];

        console.log('The access token has been refreshed!');
        console.log('access_token:', access_token);
        spotifyApi.setAccessToken(access_token);
      }, expires_in / 2 * 1000);
    })
    .catch(error => {
      console.error('Error getting Tokens:', error);
      res.send(`Error getting Tokens: ${error}`);
    });
});

// 今朝のおススメ曲取得※20曲
app.get('/getmusic', (req, res) => {

  spotifyApi
  .searchTracks('Good Morning')
  .then(function(data) {
    // Print some information about the results
    console.log('I got ' + data.body.tracks.total + ' results!');

    // Go through the first page of results
    var firstPage = data.body.tracks.items;
    console.log('The tracks in the first page are (popularity in parentheses):');

    let results = [];
    firstPage.forEach(function(track, index) {
        results.push({'index'       :index
                    , 'name'        :track.name
                    , 'duration'    :Math.round(track.duration_ms/60000)
                    , 'popularity'  :track.popularity
                    , 'url'         :track.external_urls.spotify
                    , 'preview_url' :track.preview_url
                    , 'artist'      :track.artists[0].name
                    });
    });
    results.sort(function(first, second){
        return second.popularity - first.popularity;
    });
    console.log(util.inspect(results));
    return res.json(results);
  }).catch(function(err) {
    console.log('Something went wrong:', err.message);
  });
});

module.exports = app;

おわりに

　LINE公式アプリを見ると、FlexMessage やメニューを上手く使用して UX を高めているのがわかります。
　見習いたいですね。
　デバッグについて書き添えます。
　FlexMessage は、
　1. LINE FlexMessage Simulator で作成して、コーディングして、
　2. コンソール等のログにメッセージのJSONを出力して、
　3. それを LINE FlexMessage Simulator で正しく表示されるかを確認するとよいと思います。
　コードだけだとエラーがわかりにくいです。

参考

LINE FlexMessage Simulator