Node.jsでSlack連携される問い合わせフォーム作ってみた


はじめに

今回Node.jsの勉強の一環で、問い合わせフォームを作成しましたのでその流れをまとめます。

また、問い合わせされたらメールが飛ぶのではなく、Slackに連携されるようにしました。

入力画面.png



Slack_-_えすぷりてっく_Tokyo.png


環境構築

環境構築は、様々な記事を参考に、下記の流れで行いました。

(Xcodeをインストール)

1.node.js管理ツール(nvs)をインストール

2.nvsを使ってnode.jsをインストール

3.npmをインストール


「便利なパッケージ管理ツール!npmとは【初心者向け】」

https://techacademy.jp/magazine/16105


↑こんな感じの流れで、node.jsがローカルで使えるようになりました。

そして、今回はnode.jsのフレームワーク「Express」を使います。

npm install express

また、「ejs」というテンプレートエンジンを使います。

express -e myapp

(-e:ejs、myapp:任意の名前)


実装

全体の流れとして、入力画面 → 確認画面 → 完了画面 → Slackに送信 という流れになります。

そのため、入力画面、確認画面、完了画面の3つのビューを作成する必要があります。

view

┗ ━ index.ejs

┗ ━ confirm.ejs

┗ ━ result.ejs


入力画面

まず、入力画面では、formタグを記述します。

action="/confirm" と書くことで、formがsubmitされたらconfirm画面に遷移するようにします。


index.ejs

<form action="/confirm" method="POST" name="contact">

<input type="text" name="name" value="" required>
<!-- 必要なinputタグなどを記述する -->
 <input type="submit" name="submit" value="入力内容の確認">

</form>



確認画面

そして、入力内容の確認ボタンを押されたら(submitされたら)、/confirm画面に遷移されます。

その時の動きを routes/index.js に描いてあげます。


index.js

/* POST : /confirm */

router.post('/confirm', function(req, res){

res.render('./confirm.ejs', {
name: req.body.name
});

});


router.post('/confirm', function(req, res){

→/confirm にPOSTされてきたら実行される(入力画面のフォームがsubmitされたら)

res.render('./confirm.ejs', {

→views/confirm.ejs を返す、表示する

name: req.body.name

confirm.ejs に変数を渡す

nameという名前の変数に「req.body.name」(formの<input type="text" name="name">に入力された値)を入れて渡す

なので、受け取る時は<%= name %>


confirm.ejs

<form action="/result" method="POST" name="contact">

 <%= name %>
 <input type="submit" name="submit" value="送信">
</form>

<%= name %>と書けば、入力画面で入力された値が表示されます。


完了画面

そして、入力内容の確認ボタンを押されたら(submitされたら)、/result画面に遷移されます。

確認画面の時と同じく、その時の動きを routes/index.js に描いてあげます。


index.js


router.post('/result', function(req, res){

var request = require("request")

// slack連携
request.post('https://slack.com/api/chat.postMessage', {
form: {
token: 'トークンを書く', // slackのトークン
channel: 'test', // slackのチャンネル名
username: '問い合わせ', // slackに投稿される名前
text: // slackに投稿される内容
'```名前:' + formdata.name + '```'
}
}, function (error, response, body) {
console.log(error)
})

res.render('./result.ejs', { title: '完了画面' });

});


ちなみに、slackのトークン発行は、こちらからログインして create taken で発行できます。

また、requestモジュールをインストールする必要があります。

npm install request


Slack連携のテストするところ

https://api.slack.com/methods/chat.postMessage



完成!

こんな感じの流れで、問い合わせフォームが作成できました。

何かの参考になれば幸いです。

ちなみにSlackのトークンは環境変数に入れて管理するなどして、GithubやHerokuなどにあげないように気をつけましょう!


参考:Node.jsでの環境変数の使い方:モジュール「dotenv」

https://numb86-tech.hatenablog.com/entry/2017/01/24/000940