1時間でLINE Botを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest

last updated 2023/6/04

この資料について

• 東京Node学園祭2017の2日目(2017/11/26)に開催したハンズオンの資料です。

• この資料をハンズオンなどに活用してNode.js普及を促進させてもらえたら幸いです。
  • 使うときにコメント欄にコメント貰えると嬉しいです！
  • ハンズオン進めてみた感想などもコメント貰えると嬉しいです！
• 会の流れとしてはハンズオン -> もくもく会 -> (可能な人は)もくもく会で作ったBOTを発表という流れです。
  • 当日のツイートはこちら -> 東京Node学園祭2017 LINE BOTハンズオンツイートまとめ！
  • 参加者の人が作ったBOTについては最後に掲載します。
    • 参加者の方々が作ったBOTたち
• どこまでやるか
  • 手元で確認するだけであればSTEP3まででOK
  • ホスティングしてハンズオン後も使いたいならSTEP4まで

はじめに

• 対象者: Node.js初心者向け
• 目的: LINE BOTを作ってNode.jsに触れる
• ゴール目標: LINE BOTを作ってデプロイする
• 性質上、Node.js以外の話の方が多いかも
• 1Hしかないのでコード理解よりも動くものを
• 早く終わった人はもくもくタイム

自己紹介

• のびすけ (@n0bisuke)
• プロトアウトスタジオ
  • https://twitter.com/protooutstudio <- フォローしてね！笑
• 国内最大のIoTコミュニティIoTLT主催
• 認定など
  • LINE API Experts
    • LINE API Expert第一期メンバーを発表します
    • LINE BOOT AWARDS運営
  • Microsoft MVP (Node.js)
  • IBM Champion

LINE Bot

• LINE上で動作するBOT
• 様々なプログラムと連携させることができる
• LINE自体のユーザー数が多いことで、追加でアプリインストールがほぼ不要なことが利点
• LINEがUIになるのでUIを考える手間が少なく、サーバーサイドエンジニア的に嬉しい

事例: みずほ、出前館

事例: ヤマト運輸

行政事例: 市川市

LINE Messaging API

LINE BOTを作るためのAPIです。

• https://developers.line.biz/ja/docs/messaging-api/overview/

Messaging APIを利用することで、あなたのサービスをLINEのトークルーム上で提供することができます。
LINEユーザー一人一人に合わせたユーザー体験を提供できます。

Push APIとReply API

基本的にPushとReplyの二つのAPIがあります。

PushはBotアプリケーション側が起点となってユーザーにアクションします。
Replyはユーザーの発言を起点としてBotアプリケーションを呼び出します。

作ってみよう

1. Botアカウントを作成する

LINEのBotはTwitterなどと違い、通常のユーザーのアカウントをBot化することは出来ず、専用のアカウントを作る必要があります。

LINEディベロッパーサイトへログイン

まずはLINE developersのサイトにアクセスし、ログインしましょう。

LINEアカウントでのログインを求められます。メールアドレスとパスワードもしくはQRコードでログインできます。ログインできない場合はLINEのスマートフォンアプリ側で設定を確認しましょう。

設定がまだの方はLINEのスマートフォンアプリ画面から 設定>アカウントでメールアドレスを設定できます。
LINEでメールアドレスを新規登録・確認・変更・登録解除（削除）する方法

プロバイダーの作成

ログインしたらプロバイダーの作成を行います。プロバイダーは自分が作るLINE BOTなどの開発者名やチーム名、企業名になります。初回だけディベロッパー登録で個人情報を聞かれると思うので回答してから進めましょう。

新規プロバイダー作成ボタンを押して進み、プロバイダー名を入力して進めましょう。

Messaging APIの新規チャンネルを作成

チャンネルを作成します。今回はLINE BOTを作るMessaging APIを選択します。

Messaging API を選択しましょう。

BOTの情報入力

BOTの情報を入力していきます。

※昔はここでプラン設定(Developer Trial or FREE)をしていましたが、公式アカウントへの統合に伴って選択肢がなくなりました。

• 規約を確認、チェックして「作成」

• 内容を確認して「OK」

• 規約を読んで「同意する」
  

BOTの設定確認

作ったBOTの設定画面が開かれます。

「Message API設定」のタブを開き、「LINE公式アカウント機能設定」を変更します。

「編集」を押すとLINE公式アカウントマネージャーに遷移し、そちらで「応答設定」を選択します。
次のように設定を変更します。

• あいさつメッセージ: オフ
• 応答メッセージ: オフ
• Webhook: オン

変更は自動で保存されます。

BOTと友達になろう

LINE Developersのタブに戻り、画面上の方にあるLINEアプリへのQRコードを確認します。

ここで表示されるQRコードを使って、自分が作成したBotアカウントと友達になりましょう。

ここからはスマートフォン画面のキャプチャになります。

QRコードリーダーを開きBotを友達追加しましょう。

**「追加」**を選択します。

**「同意する」**を選択します。

Botが友達に追加されました。

2. Node.jsでBOT開発

ここからは手元のターミナルなどでの作業がメインになります。
Node.jsのインストールがまだの方は参考記事などをもとに準備をして下さい。

• nvm編: いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
• nodebrew編: 僕がMacを買い換えてすぐにいれるツール&すぐにする初期設定【2016年9月版】

ちなみに、筆者の環境は以下になります。 (2019/5/14時点)

• Node.js v12.2.0
• npm v6.9.0
• macOS Mojave 10.14

プロジェクトを作成とハローワールド

Node.jsのプロジェクトはpackage.jsonがあるディレクトリが起点となります。
まずはnpm initコマンドでpackage.jsonを作成します。

$ mkdir mylinebot
$ cd mylinebot
$ npm init -y

Wrote to /Users/n0bisuke/dotstudio/2_events/20171125_nodefest/linebot/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"
}

次に依存モジュールを追加します。 今回はこちらのSDKを利用します。

ちなみに以前は公式のNode.js SDKが無かったので依存なしでも書いてました。

$ npm i @line/bot-sdk express

次にプログラムのメインとなるserver.jsをmylinebotフォルダ内に作成します。

• Macだとtouchコマンド

$ touch server.js

• windowsだとnulコマンド(らしい)

$ type nul > server.js

コマンドじゃなくてもエディタの新規作成などで大丈夫です。

ディレクトリ内は現状こんな感じです。 (Windowsの人はlsが使えないのでdirを使いましょう)

$ ls
server.js            node_modules      package-lock.json package.json

エディタでserver.jsを編集します。
以下をコピー&ペーストしましょう。

'use strict';

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

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

const app = express();

app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); //ブラウザ確認用(無くても問題ない)
app.post('/webhook', 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();
      });
});

const client = new line.Client(config);

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

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: event.message.text //実際に返信の言葉を入れる箇所
  });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);

後ほどの書き換えに備えてfunction handleEvent()の箇所はasyncにしました。 (2020/4/4)

Channel Secretとアクセストークンの確認

先ほどの「LINE developers」の画面でチャネルシークレットとチャネルアクセストークンを確認し、コピーしておきます。
この値は他の人に教えないよう注意しましょう。

• 「チャネル基本設定」で チャネルシークレット確認
  

• 「Messaging API設定」でチャネルアクセストークン発行

「発行」を押すと次のように表示されます。

server.jsのソースコードのchannelAccessTokenとchannelSecretの部分に、上でコピーしたチャネルアクセストークン、チャネルシークレットの値を指定しましょう。

アプリケーションを起動してみます。

$ node server.js

起動すると以下がターミナルに表示されることを確認しましょう。

Server running at 3000

↓↓↓↓↓↓↓ あなたの記事の内容
ここで問題なければブラウザで http://localhost:3000 にアクセスするとHello LINE BOT!と表示されると思います。
───────
ここで問題なければブラウザでhttp://localhost:3000にアクセスすると Hello LINE BOT!と表示されると思います。
↑↑↑↑↑↑↑ 編集リクエストの内容

3. ngrokでトンネリング

LINE Botを作るためにはWebhookURLをLINE developersに登録する必要があります。

この際SSLが必須になるのですが証明書取得などの手間もありますし、PaaSなどにホスティングして試すのはデバッグが大変なので、手元のPCのlocalhostにグローバルからアクセスできるようにするトンネリングツールを利用しましょう。

• ngrok
• localtunnel
• serveo

などが有名です。今回はngrokを利用します。

まずはngrokのサイトにいき、本体をダウンロードして解凍します。

この辺の手順を更新しました。(2018/3/14)

npm経由でngrokをインストールできます。

https://www.npmjs.com/package/ngrok

$ npm i -g ngrok

次にトンネリングサーバーを起動します。 ngrok http ポート名と指定します。
今回はNode.jsアプリケーションを3000番ポートで利用するので3000を指定しましょう。

$ ngrok http 3000

ngrok by @inconshreveable                                    (Ctrl+C to quit)

Session Status                online
Account                       n0bisuke (Plan: Free)
Version                       2.1.18
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1148cbd9.ngrok.io -> localhost:3000
Forwarding                    https://1148cbd9.ngrok.io -> localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

起動すると表示されるhttps://で始まるアドレスを利用します。
この場合はhttps://1148cbd9.ngrok.ioです。このアドレスは起動の度に変わるため、ngrokは起動し続けて開発を行うことをおススメします。

以下のように、ngrokのプロセスとNode.jsアプリケーションのプロセスを並行して実行しての開発になります。

Webhook URLの更新

https://1148cbd9.ngrok.io/webhookがWebhook URLになります。

LINE developersに戻り、「Messaging API設定」のタブに移動して、Webhook URLを更新します。

ここに先ほどのアドレスを指定しましょう。 URLの末尾に/webhookをつけるのを忘れずに

この状態でBotに話しかけてみて下さい。

Botがおうむ返ししてくれます。

補足: serveoの利用 - ngrokのインストールがうまくいかない場合など

2019年7月頃、ngrokよりserveoがすごい。０秒で localhostを固定URLで公開
の記事がバズってました。

serveoでのやり方も紹介します。そのうちこの記事もngrokから差し替えるかもしれません。

ポリシー的にどうなん？みたいな会話もあるのでとりまこれくらいの追記で......笑

serveoはインストールなど不要です。利用したいドメイン名を指定してngrokを立ち上げるようにNode.jsのプロセスとは別タブや別ウィンドウを新規に立ち上げて以下を実行しましょう。

$ ssh -o ServerAliveInterval=60 -R <利用したいドメイン名>:80:localhost:<Node.jsなどのプログラムを立ち上げてるポート> serveo.net

例えばlocalhost:3000をhttps://n0bisuke.serveo.netで利用したい。とかであれば以下のように実行します。

$ ssh -o ServerAliveInterval=60 -R n0bisuke:80:localhost:3000 serveo.net

Forwarding HTTP traffic from https://n0bisuke.serveo.net
Press g to start a GUI session and ctrl-c to quit.

あとは今回のプログラムだとhttps://n0bisuke.serveo.net/webhookをLINEの管理画面に設定すればOKです。

4. プログラムをデプロイして永続化する

ngrokだと、手元のパソコン上でプログラムが動作するため、パソコンを閉じると動作しなくなってしまいます。

永続的にLINE BOTを動かすために何かしらのサーバーにデプロイしましょう。

Vercelにデプロイ (2020/5/22更新)

今回は、Vercelを使ってみます。

Vercelとは

• Node.js向けのPaaS / FaaS
  • RubyやGoなども使える
  • Docker対応した模様なのでかなり色々使える
• 旧名称はnow.sh
• CLIからコマンド一つでデプロイできる
• Herokuなどよりもデプロイ手順が簡単

こちらの手順↓で進めてみましょう。

VercelでLINE BOTを動かす 2020年5月版

補足資料

補足内容です。

補足資料その1 - if文で条件分岐

• event.message.textがユーザーから送られてきた文字列
• こんにちはとBOTに送るとこんばんわの時間ですよと言われて、それ以外だとうざと返されるプログラムが以下になります。
• client.replyMessage()でBOTのリプライになります。

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

  let replyText = '';
  if(event.message.text === 'こんにちは'){
    replyText = 'こんばんわの時間ですよ';
  }else{
    replyText = 'うざ';
  }

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

補足資料その2 - 天気APIを使う応用 (2021/6/14更新)

天気を教えてくれるBOTを作ってみましょう。

ライブドアの天気APIを利用してみます。

http://weather.livedoor.com/weather_hacks/webservice

ライブドアの天気APIが2020年7月にサービス終了してしまい、利用できなくなっていたのですが、互換APIを公開してくれている方がいました。こちらのAPIを利用してみましょう。

https://weather.tsukumijima.net/
livedoor 天気互換の天気予報 API をリリースした話

• axiosのインストール

外部のAPIにアクセスするためにaxiosをmylinebotのプロジェクトにインストールします。

npm i axios

• server.jsの冒頭箇所にconst axios = require('axios');を追記します。

'use strict';

const axios = require('axios'); //追記
const express = require('express');
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 3000;
・
・
・
(省略)

• server.jsの該当箇所(async function hendleEvent(){}の中)を書き換えます。

・
・
省略
・
・

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

  //"天気教えて"以外の場合は反応しない
  if(event.message.text !== '天気教えて') {
    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: '"天気教えて"と言ってね'
    });
  }

  let replyText = '';
  replyText = 'ちょっと待ってね'; //"ちょっと待ってね"ってメッセージだけ先に処理
  await client.replyMessage(event.replyToken, {
      type: 'text',
      text: replyText
  });

  //axiosを使って天気APIにアクセス
  const CITY_ID = `400040`; //取得したい地域のIDを指定
      const URL = `https://weather.tsukumijima.net/api/forecast?city=${CITY_ID}`;
  const res = await axios.get(URL);
  const pushText = res.data.description.text;
  return client.pushMessage(event.source.userId, {
      type: 'text',
      text: pushText,
  });
}

・
・
省略
・
・

地域ごとのIDもライブドアのAPIで利用されていた値がそのまま使えるように作られてるAPIなのでドキュメントページを元に利用したい地域のIDを調べましょう。

補足資料その3 - スクレイピングと組み合わせる

APIが無いサイトでもスクレイピングすると情報を取得できます。
が、ご利用は自己責任でお願いします。

花粉ボットと実装サンプル

応用

• Node.jsの最新バージョンを教えてくれるBOTを作ってみよう
• 時間までもくもくLINE BOT開発しましょう！
• もっと色々な機能を使い多人はLINE BOOT AWARDS 公式夏期講習 ～2018 年 7 月時点での LINE Bot の機能を振り返る～の記事を見ましょう。この記事のチュートリアルの続きとなる実装です。
  • リッチメニュー
  • URLスキーム
  • FlexMessage
  • LINE Pay
  • などの機能が紹介されています。

応用回答例: Node.jsの最新を教えてくれるBOT 答え合わせ

• Node.jsの最新バージョン教えて！と言われたらとりあえずちょっと待ってねとリプライメッセージ
• https://nodejs.org/ja/ にスクレイピングしにいって、完了したらプッシュメッセージで教えてくれる
• async/awaitでaxiosのHTTPリクエストとLINE MASSAGING APIへのリクエストを同期処理的に記述

axiosを追加インストール

npm i axios

'use strict';

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

const config = {
    channelSecret: '',
    channelAccessToken: ''
};

const app = express();

app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});

const client = new line.Client(config);

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

  let mes = ''
  if(event.message.text === 'Node.jsの最新バージョン教えて！'){
    mes = 'ちょっとまってね'; //待ってねってメッセージだけ先に処理
    getNodeVer(event.source.userId); //スクレイピング処理が終わったらプッシュメッセージ
  }else{
    mes = event.message.text;
  }

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

const getNodeVer = async (userId) => {
    const res = await axios.get('https://nodejs.org/ja/');
    const item = res.data;
    const version = item.match(/最新版"  data-version="(.*?)">/)[1]; //正規表現で(無理やり)取得
    console.log(version);

    await client.pushMessage(userId, {
        type: 'text',
        text: `今の最新は${version}だよ！`,
    });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);

Node.jsの最新バージョンを教えてくれる会長BOT @yosuke_furukawa#nodefest pic.twitter.com/JSNKGkyFKU

— のびすけ / sugawara (@n0bisuke) 2017年11月26日

レポート: 参加者の方々が作ったBOTを紹介(ハンズオン後に追記)

もくもくタイムは20min程度でしたが、皆さんすごいです。

1. Node.jsの最新バージョン+ヤフー検索ができるBOT

LINE BOTハンズオン作品1

Node.jsの最新バージョンを教えてくれてYahoo検索もできるBOT！#nodefest pic.twitter.com/paBzzivTLG

— のびすけ / sugawara (@n0bisuke) 2017年11月26日

応用課題で出していたNode.jsのバージョンを教えてくれる機能もLTSと最新版の両方に対応してくれました。
スクレイピングの勢いでヤフー検索まで繋いでいます。

2. 調べたい単語を入れるとWikipediaの検索結果を返してくれるBOT

LINE BOTハンズオン作品2

調べたい単語を入れるとWikipediaの検索結果を返してくれるBOT！#nodefest pic.twitter.com/BM1sXyYH2p

— のびすけ / sugawara (@n0bisuke) 2017年11月26日

これめっちゃ便利です。
Wikipediaまでわざわざ調べに行かなくても色々な言葉の概要を知ることができます。

3. URLを入れると話題のdev.toとどっちが速いかを教えてくれるBOT

LINE BOTハンズオン作品3

URLを入れると話題のdev.toとどっちが速いかを教えてくれるBOT！#nodefest pic.twitter.com/6sfwn6QUYq

— のびすけ / sugawara (@n0bisuke) 2017年11月26日

話題ですね。

dev.toと阿部寛のホームページについてちゃんと計測させてくれ

dev.toと入力したサイトのどちらが早いか計測してくれます。
トレンドを捉えるアイディアの柔軟性がすごい。

4. 今日のご飯何にするかを絵文字で提案してくれるBOT！

LINE BOTハンズオン作品4

今日のご飯何にするかを絵文字で提案してくれるBOT！#nodefest pic.twitter.com/y1a0uOIMpq

— のびすけ / sugawara (@n0bisuke) 2017年11月26日

ご飯何にしようか迷いますよね。
絵文字で推薦してくれるのでもう迷わない......!

コード指定すればNode.jsからも絵文字扱えるんだよっていう良い例だと思います。

5. 何でも人に聞く人にググらせるBOT

LINE BOTハンズオン作品5

何でも人に聞く人にググらせるBOT！#nodefest pic.twitter.com/WikKQqehr4

— のびすけ / sugawara (@n0bisuke) 2017年11月26日

**「調べる前になんでも人に聞く人を駆逐したい」**らしいです笑

検索ワードを入れるとググれってことでGoogleに飛ばされます。
ハンズオンで触れていないリッチメニューまで活用してくれました。

6. Polymerと会話？できるBOT

LINE BOTハンズオン作品6

Polymerと会話？できるBOT！#nodefest pic.twitter.com/sQPTfg1hWA

— のびすけ / sugawara (@n0bisuke) 2017年11月26日

Polymerが好きすぎてPolymerちゃんと会話できるBOTを作ったそうです笑

7.検索ワードを入れるとunsplash.comから画像を取得してくるBOT

LINE BOTハンズオン作品7

検索ワードを入れるとhttps://t.co/wlaiKRxOydから画像を取得してくるBOT！#nodefest

— のびすけ / sugawara (@n0bisuke) 2017年11月26日

画像検索も出て来ました。
画像扱えるとビジュアルが圧倒的に良くなりますね。

まとめと所感

Node.jsとNowを使うと爆速でLINE BOTを作れますし、細かいものを作るときにこの組み合わせはかなり使えます。 (デバッグの際はngrokがおすすめ)

応用してどんどん開発していきましょう。

見て回った限り、大半の人がデプロイまでたどり着くことができて、7人もオリジナルBOTを作って発表までできるのはさすがの学園祭的なレベルの高さを感じます。

時間内に終わらなかった人もこの記事を見直してチャレンジしてもらえたら幸いです。

参加してくださった皆さんありがとうございました！