2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

初めてのLINE BOT〜Node.js〜

Posted at

#0.前提

  • レベル:超初心者

#1.準備
###1-1.LINE Developerアカウントを作成、ログイン

###1-2.LINE Bot Designerをインストール

###1-3.[こちらのQiita](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#line-bot) にそって
BOT情報の入力と設定確認をする。

###要注意の設定
1.
image.png
[LINE Official Account Manager]をクリック

image.png
応答設定ページの詳細設定で、 応答メッセージ:オフ Webhook:オン へ 変更する

  • 応答メッセージとは
    BOTに話しかけたときに、「ご相談ありがとうございます。」などのように、一律でメッセージを返す機能
    (ここでオフにした理由: 今回は問い合わせ内容をそのままオウム返しするようなプログラムを書きたいから)

###1-4. BOTと友達になる
Messaging API設定のQRコードを携帯で読み込んで、友だち追加する。
すると、早速(何も設定していないのに) 、携帯にメッセージが飛んできた

〜〜〜〜〜〜さん、はじめまして(くま)!
友だち追加ありがとうございます。(チャンネル名)です。
(以下略)

以上で、[こちらのQiita](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#line-bot) STEP1まで終わった。

#2.プッシュメッセージ(ブロードキャストメッセージ)を送ろう
###2-1.

  1. プロジェクトフォルダ linebotを作成
$ mkdir mylinebot
$ cd mylinebot

2.SDKインストール

tomoko@MB mylinebot % npm init -y
Wrote to /Users/tomoko/Desktop/mylinebot/package.json:

{
  "name": "mylinebot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

tomoko@MB mylinebot % npm i @line/bot-sdk
⸨░░░░░░░░░░░░░░░░░░⸩ ⠇ fetchMetadata: sill resolveWithNewModule @line/bot-sdk@7.3.0 checking inpm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN mylinebot@1.0.0 No description
npm WARN mylinebot@1.0.0 No repository field.

+ @line/bot-sdk@7.3.0
added 42 packages from 86 contributors and audited 42 packages in 68.904s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3.フォルダ内に 新しいファイル app.js を作成

この時点でファイル構成は↓
image.png

app.js
'use strict';

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

const config = {
    channelSecret: 'チャンネルシークレット',
    channelAccessToken: 'チャンネルアクセストークン'
};
const client = new line.Client(config);


const main = async () => {

    const messages = [{
        type: 'text',
        text: 'いっせい送信です!'
    }];

    try {
        const res = await client.broadcast(messages);
        console.log(res);        
    } catch (error) {
        console.log(`エラー: ${error.statusMessage}`);
        console.log(error.originalError.response.data);
    }
}

main();

チャネルシークレット:LINE Developers > チャネル基本設定 下から2つ目
チャネルアクセストークン:LINE Developers > Messaging API設定 最下部  から発行
 それぞれに記載されている文字列をそのままコピペして `` 内に挿入 (注:シングルコーテーションを残す)
 それぞれ、秘密なので、公開禁

4.実行

tomoko@MB mylinebot % node app.js
{ 'x-line-request-id': '*****************************' }

5.結果
携帯のLINEアプリに いっせい送信です と メッセージがきた。
送られた内容は

app.js
const messages = [{
        type: 'text',
        text: 'いっせい送信です!'
    }];

に反映された中身。
今回は、type: 'text' なので、テキストメッセージが送られる。

text 以外にも、 ↑の決まった型(=メッセージオブジェクト)を変えれば、様々なものを送信できる。
決まった型は、LINE公式ドキュメント:メッセージタイプ 参照
image.png

###  テキスト以外にスタンプを送信したいとき
公式ドキュメントの  Messaging APIリファレンス にあるように
スタンプや
image.png
動画も
image.png
送ることができる。

ただし、その都度確認しているのも手間なので、LINE Bot Designerを使うと、 ↑のjasonを発行してくれる

  1. LINE Bot Designerをダウンロード&インストールしてください。
  2. ログイン
    image.png

<ハマったところ>
なぜかLINE Business IDで登録したメールアドレスとPWでログインできず、困った。
携帯端末にそのメールアドレスとPWを紐つけたら無事ログインできた。

image.png
「許可する」 を選択

image.png
「プロジェクト作成」を選択

image.png
デフォルトのプロジェクト設定のまま「OK」

image.png
メッセージ>スタンプメッセージを選択して、任意のスタンプを選択すると、

{
  "type": "sticker",
  "packageId": "11537",
  "stickerId": "52002740"
}

↑のようにメッセージオブジェクトが自動生成される。

これを

app.js
const main = async () => {
        //↓に埋め込む
    const messages = [{  
        "type": "sticker",
        "packageId": "11537",
        "stickerId": "52002740"
      }];

    try {
        const res = await client.broadcast(messages);
        console.log(res);

のように埋め込むと、選択したスタンプが表示された。
IMG_8434.jpg

なぜ、このようにmessagesの内容をかえると様々な表示ができるかというと、 client.broadcast というLINEが提供しているライブラリーの関数にmessages渡すことで処理してくれているから。

因みに、複数個送ることも可能
カンマくぎりで、最大5こまで可能

app.js

const main = async () => {
    const messages = [
        {
        "type": "sticker",
        "packageId": "11537",
        "stickerId": "52002740"
        }
        , // カンマ区切りすることで、最大5つまで連続送信可能
        {
        type: 'text',
        text: 'いっせい送信です!'
        }
    ];

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?