line bot上で数字を絵文字として表示したい

はじめに

line bot上で表示する数字を、絵文字の数字で表示させてみようと思い実装。
bot内で数字を表示したいと思ったときに使えると思い備忘録メモ。
動作イメージはこんな感じです、改行の文字数カウントの挙動を見るため、一桁の時は敢えて改行するようにしています。

備忘録

基本的なお作法

Visual Studio Codeで実装し、ngrokでトンネリングして実行。
この部分はline botとのやりとりをする上での基本的なコードです。

'use strict';

const express = require('express');
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 3000;

const config = {
    channelSecret: 'チャンネルシークレット',
    channelAccessToken: 'アクセストークン'
};

const app = express();

app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); //ブラウザ確認用(無くても問題ない)
app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);

    //ここのif分はdeveloper consoleの"接続確認"用なので削除して問題ない。
    if(req.body.events[0].replyToken === '00000000000000000000000000000000' && req.body.events[1].replyToken === 'ffffffffffffffffffffffffffffffff'){
        res.send('Hello LINE BOT!(POST)');
        console.log('疎通確認用');
        return; 
    }

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

const client = new line.Client(config);

async function handleEvent(event) {
  //ここに色々書く
}

数字を絵文字に変換する

ここが今回大事な部分。
数字を引数にして絵文字を返すようなmake_emoji_num関数を実装。
indexはtextの左から何文字目の$を置き換えるかの番号で、改行を意味する"\n"は1文字判定らしい。

async function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }

  var reply_dic = make_reply(event.message.text)
  return client.replyMessage(event.replyToken, reply_dic);
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);
![Screenshot_20201105-163114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/8cfc7cb2-3307-35dc-7445-579476e7f81c.png)

function make_reply(num){
  var reply_dic= {
        "type": "text",
  }

  var product_id = "5ac21b4f031a6752fb806d59"
  var emojiID_list = ["062","053","054","055","056","057","058","059","060","061"];
  var junokurai = Math.floor(num / 10);
  var ichinokurai = num % 10;
  var emoji_list = [];

  if (num >= 10){
    reply_dic["text"] = "$$"
    
    emoji_list.push(
      {
        "index": 0,
        "productId": product_id,
        "emojiId": emojiID_list[junokurai]  
      }
    )
    emoji_list.push(
      {
        "index": 1,
        "productId": product_id,
        "emojiId": emojiID_list[ichinokurai]  
      }
    )
    reply_dic["emojis"] = emoji_list;
    console.log(reply_dic);
  }else if (num < 10){
    reply_dic["text"] = "\n$"

    emoji_list.push(
      {
        "index": 1,
        "productId": product_id,
        "emojiId": emojiID_list[ichinokurai]  
      }
    )
    reply_dic["emojis"] = emoji_list;
  }

  reply_dic.text += "テスト"
  return reply_dic;

}

その他便利な資料たち

・よさげなline botを作るための自分用メモ
　https://qiita.com/canonno/items/bb71c3d7e308cb8337a1

・line bot絵文字IDリスト
　https://d.line-scdn.net/r/devcenter/sendable_line_emoji_list.pdf

・Textを送る場合のAPIリファレンス
　https://developers.line.biz/en/reference/messaging-api/#text-message