素人が2020年までの1ヶ月でLINE BOTに挑戦する毎日note. 【Day 25：開発スタート！プログラムの骨格を作る】

2019年12月25日 19:46

メリークリスマスですね。

12月1日から2019年残り1ヶ月でスケジュール調整BOTの開発に挑戦している"くろ"です。

やっと今日から開発というフェーズに入れそうです！（残り6日、、、）

着手しながらやってもよかったかなと思いつつ、やはり一通りインプットをしてからとりかかった方が早いなと改めておもいました。

実はDAY21のインプット記事を書いていた時は時間が取れていなくて、昨日会社休めて時間がとれたので、ここぞとばかりにあのブログをざーっとしていったのですが、ここ数日悪戦苦闘していたことが嘘のようにWEBアプリケーションの動かし方がだいぶクリアになりました。LIFFやBOT、DBはまだまだですが。。。

ということで今日も張り切っていきましょう！

開発アプリ：Googleカレンダーと連動してスケジュールを調整してくれるLINEBOT

BOTの概要：Day 2の記事に書いています。

BOTの仕様：機能一覧やフローチャート Day 10の記事に書いています。

今日からはやっと開発に入っていきます。

なんとなくnodeとexpressが理解できた気がするので、（DBがちょっと不安だけど）、とりあえず作れる所から作っていきます。

まずはここまで学んだことを活かしてアプリケーションの骨格を作っていきます。

herokuやgithubなども繋がっているので、これまで作ってきたサンプルを改変していく形でやろうかなと思ったのですが、ファイル名とか色々変更していくと不具合があるかもと思ったので、0から作っていきます。

1，herokuのサンプルのclone

（DAY15で出てきたExpressのサンプルだとherokuでエラーが出ていたことも考慮してherokuサンプルを元にします。）

参考：https://note.com/96nz/n/nc31839db8b7a

$ git clone https://github.com/heroku/node-js-getting-started.git schedule-bot

herokuアプリ名がアンダーバー(_)使えなかったのと、色々名前が使われてて使えなかったので、フォルダ名やアプリ名は統一でscheduler-linebotにしました。

2，herokuアプリケーションの作成＆デプロイ

・ログインします。WEBサイトが開いてOK押したら戻ってこれます。

$ heroku login

・herokuアプリケーションをログインしているアカウント上に作成します。

$ heroku create shceduler-linebot

・herokuアプリケーションにさっきcloneしたレポジトリをプッシュします。

$ git push heroku master

3，githubのリポジトリ作成＆herokuと繋げる。

・まずgithubで空のリポジトリを作ります。

（空を先に作らなくていい方法もある気がしますが、時間がないので、無視します。）

名前はもちろんscheduler-linebotです。

・リモートリポジトリをリセット

(herokuをcloneしているからなのか、herokuにつなげているかなのかはわかりませんが、一回リセットしないと次がエラーになります。）

$ git remote rm origin

・githubにプッシュします。

git init
git commit -m "first commit"
git remote add origin https://github.com/username/scheduler-linebot.git
git push -u origin master

-uって何？って思ったのですが、git push -u origin master とすると次回から git push だけで勝手に origin master で push してくれるらしいです。

・herokuとgithubを繋げる。

heroku管理画面で必要情報を入れていきます。この記事を参考に進めて下さい。

初回のマニュアルデプロイと自動デプロイの設定もしておきました。

4，npm、Express、ejsなどのインストール

全てscheduler-linebotのルートディレクトリで実行

$ npm init
$ npm install express --save
$ npm install ejs

npmの設定は全部Enterしました。

5，LINEの公式アカウントの作成＆herokuアプリケーションと繋ぐ。

・LINE公式アカウントの作成

・LINE DevelopersでWebhookを設定

完了するとこんな感じになります。

これやってて気づいたんですが、こういう風に書いてあるのが今なら意味がわかります。

LINEプラットフォームから送信されたWebhookイベントを処理できるボットサーバーのエンドポイントのURLです。設定したURLがWebhookイベントを受け取るできることを確認するには「接続確認」ボタンをクリックします。

hookというパスにwebhookを送ってくるよって書いてるってことですね。だから、サンプルプログラムの中で"/hook/"が使われてたんですね。hookにpostリクエストがきたら、XXをやってねってことですね。

.post("/hook/", line.middleware(config), (req, res) => lineBot(req, res)) // 変更、middlewareを追加

・Herokuの環境変数にトークン情報をセットする

https://note.com/96nz/n/n82f0dbdc0905#XCnQU

$ heroku config:set SECRET_KEY=XXX --app scheduler-linebot

$ heroku config:set ACCESS_TOKEN=XXX --app scheduler-linebot

・linebot-sdkを入れる

$ npm install @line/bot-sdk --save

6,heroku PostgreSQLの設定

この記事の最後のパート「7：Node.js/ExpressでPostgreSQLを使おう」で出てきた形で組み込みました。

この記事も参考にして、やっていきました。

・パソコンにpostgreSQLをインストール

https://www.enterprisedb.com/downloads/postgres-postgresql-downloads

・環境変数Pathの設定

インストールしたPostgreSQLの「bin」フォルダのパスを、環境変数pathに追加し、「bin」内のコマンドが名前で呼び出せるようにしておいてください。Windowsであれば、PostgreSQL 9.2は標準で以下のパスにインストールされますので、これをPathに追加すればよいでしょう。
C:\Program Files\PostgreSQL\9.2\bin

環境変数Pathの設定方法はこちら。

・npm install pg
「pg」が、PostgreSQLをNode.jsで利用するためのアドオンプログラムになります。これでpgと、これに必要なプログラム類がインストールされます。
サンプルプログラムのルート（一番上の）ディレクトリで実行します。

・Heroku上のアプリにHeroku Postgresを導入
「Resources > Find more add-ons > Heroku Postgres」の順に移動。
「Install Heroku Postgres」でインストール。
「Hobby Dev」という無料プランを選択。
Heroku Postgresを導入するアプリケーションを選択し、「Provision addo-ons」をクリック。

・dotenvをインストール

コマンドプロンプトでサンプルフォルダのルートで下記を実行。

npm install --save dotenv

・herokuに環境変数を設定

$ heroku config:set [任意のKEY]=[環境変数を指定] --app [アプリ名を指定]

# 例えば、HOST情報を環境変数に設定したい場合
$ heroku config:set ENV_HOST=xxxxxxxxxxxxxxxx --app SAMPLEAPP
上記のようにして、Host, Database, User, Port, Passwordを環境変数に設定すれば、基本的にデータベース接続に必要な情報は十分。
もちろん、ENV_HOSTなどのKEYは自由に命名して問題ない。

⇛SAMPLEAPPの所はherokuアプリケーションの方の名前です。（DBの方の名前じゃなかったです。）

実行していくと、herokuアプリケーションの管理画面に追加されていきます。

7，前回まで使っていたオウム返しサンプルコードやnode入門で作ったコードを一部コピーしてきて、ページ遷移とオウム返しが出来る状態にする。

・index.jsを改変

index.js


const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000
const line = require("@line/bot-sdk")
const app = express()
const ejs = require('ejs')
const http = require('http');
const fs = require('fs');
const url = require('url');
const qs = require('querystring');

const config = {
 channelAccessToken: process.env.ACCESS_TOKEN,
 channelSecret: process.env.SECRET_KEY
};
const client = new line.Client(config);

const create = require('./routes/create')

app
 .use(express.static(path.join(__dirname, 'public')))
 .set('views', path.join(__dirname, 'views'))
 .set('view engine', 'ejs')
 .get('/', (req, res) => res.render('pages/index'))
 .use('/create', create)
 .post("/hook/", line.middleware(config), (req, res) => lineBot(req, res)) 
 .listen(PORT, () => console.log(`Listening on ${ PORT }`))

function lineBot(req, res) {
 res.status(200).end(); //200番をレスポンスとして返しておく
 const events = req.body.events;
 const promises = [];
 for (let i = 0, l = events.length; i < l; i++) {
   const ev = events[i];
   promises.push(
     echoman(ev)
   );
 }
 Promise.all(promises).then(console.log("pass"));
}

async function echoman(ev) {
 const pro =  await client.getProfile(ev.source.userId);
 return client.replyMessage(ev.replyToken, {
   type: "text",
   text: `${pro.displayName}さん、今「${ev.message.text}」って言いました？`
 })
}

・main.cssの中身を削除

・画像ファイルを削除

lang-logo.png、node.svg

・ルートにroutesフォルダを作成し、その中にcreate.js作る。

create.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
 res.render('pages/create');
});

module.exports = router;

・views/pagesにcreate.ejsを作成し、その中に簡単なhtml文を入れる。

create.ejs

<!DOCTYPE html>
<html>
<head>
 <% include ../partials/header.ejs %>
</head>

<body>

 <% include ../partials/nav.ejs %>

 <div class="center">
   <a href="/">
     <div class="button_red_big">戻る</div>
   </a> 
 </div>

</body>
</html>

・同じくindex.ejsも改変

index.ejs

<!DOCTYPE html>
<html>
<head>
 <% include ../partials/header.ejs %>
</head>

<body>

 <% include ../partials/nav.ejs %>

 <div class="center">
   <a href="/create">
     <div class="button_red_big">日程調整を作成する</div>
   </a> 
 </div>

</body>
</html>

・partials/nav.ejs

中身を削除

ここまで出来たらgitpushしてherokuのURLを叩いてみましょう。

トップページにアクセスするとこんな感じ。マイページにする予定の所。

日程調整を作成するを押すと

別ページに飛んで、戻るを押すと戻れるようになりました。

また、LINEで呼びかけると、ちゃんとオウム返しも動いていました！

今日はアプリケーションの骨格が出来たので、明日からは中身をどんどん作っていきます。

この記事が参加している募集

noteのつづけ方

37,844件

よろしければサポートお願いします！頂いたサポートはクリエイター活動に活用させて頂きます。