LINE Botのアイコンや表示名をNode.jsから変える


少し前にBOTのアイコンや名前を変更する追加されていて、APIで操作できるのでNode.jsからやってみました。

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">表示名 form &quot;元々のBOT名&quot; という表記に <a href="https://twitter.com/hashtag/linedc?src=hash&amp;ref_src=twsrc%5Etfw">#linedc</a> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/cx3IBft5su">pic.twitter.com/cx3IBft5su</a></p>&mdash; 菅原のびすけ （プロトアウト9期募集中) (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/1732696339837014264?ref_src=twsrc%5Etfw">December 7, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

> ![スクリーンショット 2023-12-07 18.15.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/5717f0a7-a596-703f-8125-d6e7c5aca826.png "スクリーンショット 2023-12-07 18.15.36.png")
> https://developers.line.biz/ja/docs/messaging-api/icon-nickname-switch/

## 表示名とアイコンを変える別のAPIではない

公式を見ると以下の様な形で変えられる模様です。

API自体はPUSHなり、Replyなりメッセージを送る時に付随するような感じぽいです。

**MessagingAPIの中に組み込まれている**と言った方がイメージが合ってると思います。

なので、 **メッセージを送る時に変わるだけ**で変えた状態の保持は出来なさそうな印象です。

```
curl -v -X POST https://api.line.me/v2/bot/message/push \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {CHANNEL_ACCESS_TOKEN}' \
-d '{
    "to": "U1234....",
    "messages": [
        {
            "type": "text",
            "text": "Hello, I am Cony!!",
            "sender": {
                "name": "Cony",
                "iconUrl": "https://line.me/conyprof"
            }
        }
    ]
}'
```

senderというキーに渡してあげたら良さそうですね。

```json
"sender": {
                "name": "Cony",
                "iconUrl": "https://line.me/conyprof"
            }

```


### 仕様1: 名前は最大20文字

- 表示名の文字は`LINE`って言葉は入れてはダメ
- 20文字まで

とのことです。

> ![スクリーンショット 2023-12-07 18.28.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/4638ff8c-7b46-756b-a52e-10e3ec7ce464.png "スクリーンショット 2023-12-07 18.28.44.png")

### 仕様2: アイコン画像は1MBでPNG

> ![スクリーンショット 2023-12-07 18.29.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/be2a1272-ea0e-f4ff-08ac-bb40e9f573d8.png "スクリーンショット 2023-12-07 18.29.31.png")


今回は試しに画像はこちらを使ってみます
> https://i.gyazo.com/a84c585225af440bd0d5fff881152792.png
> ![](https://i.gyazo.com/a84c585225af440bd0d5fff881152792.png)


## 実際に作ってみる

### 準備、まずはおうむ返し

こちらの記事などをみながらアカウントを作ってLINE Botをつくります

https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

ライブラリのインストールをします。

```bash
$ npm i express @line/bot-sdk
```

```js
'use strict';

const line = require('@line/bot-sdk');
const express = require('express');

// create LINE SDK config from env variables
const config = {
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.CHANNEL_SECRET,
};

// create LINE SDK client
const client = new line.messagingApi.MessagingApiClient({
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
});

// create Express app
// about Express itself: https://expressjs.com/
const app = express();

// register a webhook handler with middleware
// about the middleware, please refer to doc
app.post('/callback', line.middleware(config), (req, res) => {
  Promise
    .all(req.body.events.map(handleEvent))
    .then((result) => res.json(result))
    .catch((err) => {
      console.error(err);
      res.status(500).end();
    });
});

// event handler
function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    // ignore non-text-message event
    return Promise.resolve(null);
  }

  // create an echoing text message
  const echo = { type: 'text', text: event.message.text };

  // use reply API
  return client.replyMessage({
    replyToken: event.replyToken,
    messages: [echo],
  });
}

// listen on port
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`listening on ${port}`);
});
```

### 実際に変える部分のコード

コニーに代わってというとコニーに、代わって、のびすけに代わってというとのびすけに変わります。

```js

//handleEventの部分だけ抜粋

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

  if(event.message.text === 'コニーに代わって') {
    const echo = {
        type: 'text',
        text: 'OKです。コニーに変わるよ',
        sender:{
            "name": "Cony",
            "iconUrl": "https://line.me/conyprof"
        }
    };
    
    return client.replyMessage({
      replyToken: event.replyToken,
      messages: [echo],
    });
  }

  else if(event.message.text === 'のびすけに代わって') {
    const echo = {
        type: 'text',
        text: 'OKです。のびすけに変わるよ',
        sender:{
            "name": "のびすけ",
            "iconUrl": "https://i.gyazo.com/a84c585225af440bd0d5fff881152792.png"
        }
    };
    
    return client.replyMessage({
        replyToken: event.replyToken,
        messages: [echo],
    });

  }else{
    // create an echoing text message
    const echo = { type: 'text', text: event.message.text };

    // use reply API
    return client.replyMessage({
        replyToken: event.replyToken,
        messages: [echo],
    });
  }

}
```

これでOKです。話しかけると代わってくれます。

> ![](https://i.gyazo.com/0072367c90b8160e146fb3fe49da832f.png)


## 所感

割と楽しいですね、一人何役かを裏でやれてグループ内とかで複数の役割をBOTに持たせたり出来そうです。

しかも割と簡単に出来て良いですね。

何か作る時のエッセンスに入れ込みたいと思います。

## 参考

https://dev.classmethod.jp/articles/messaging-api-icon-nickname-switch/