#やりたかった事
LINEから送られてくるメッセージをFirebase CloudFirestoreに保存！
#材料
・Firebase CloudFirestore ・・・ １プロジェクト
・LINE Messaging API ・・・ １アカウント
・Visual Studio Code
・node.js
#下準備
##Firebase CloudFirestoreの設定
・【SDN】のメモ
・格納するデータの設定
こちらば別記事で詳しく解説しています
Firebase CloudFirestoreの使い方を初心者が解説してみた
##LINE Messaging APIの設定
・シークレットキー発行
・アクセストークン発行
１つ作成しておきます
##jsファイル作成
Visual Studio Codeで作業をします。
indexファイル１つ
jsファイルを１つ
作成しておきます。
#作り方
Visual Studio Codeで作業をしていきます。
##npm初期化
ターミナルを立ち上げてnpmを初期化します。
【ターミナル】＞【新しいターミナル】
npm i
##LINEのライブラリインストール
以下のコマンドでLINEのライブラリをインストールします。
npm i @line/bot-sdk express
##Firebase CloudFirestoreのライブラリインストール
以下のコマンドでFirebase CloudFirestoreのライブラリをインストールします。
npm i firebase
##Vue.jsでwebのフロント側を作成
htmlファイルに
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>リアルタイムにデータ取得</title>
</head>
<body>
<div id="app">
<ul v-for="data in allData" :key="data.id" class="menu-list">
<li>
{{data.name}} / {{data.age}}
</li>
</ul>
<p>
名前：<input v-model="name" placeholder="名前"> 所在地：
<input v-model="address" placeholder="所在地">
<button v-on:click='post'>送信</button>
</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "ご自身の情報を入力",
authDomain: "ご自身の情報を入力",
projectId: "ご自身の情報を入力",
storageBucket: "ご自身の情報を入力",
messagingSenderId: "ご自身の情報を入力",
appId: "ご自身の情報を入力",
measurementId: "ご自身の情報を入力"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const app = new Vue({
el: '#app',
data: {
allData: [],
name: '',
address: ''
},
mounted: async function() {
db.collection('memos').onSnapshot(snapshot => {
// データベースに変更があった場合実行される
console.log('on snapshot!');
// 更新されたデータだけでなく、全て取得される
this.allData = [];
snapshot.forEach(doc => {
// console.log(doc);
this.allData.push(doc.data());
});
});
},
methods: {
//データ追加
post: async function() {
await db.collection("Firebase CloudFirestoreコレクション名").add({
name: this.name,
address: this.address
});
}
}
})
</script>
</body>
</html>
Firebase CloudFirestoreコレクション名というのは
その下の
name: this.name,
address: this.address
も作成したデータベースの内容に変えます。
##webアプリ側完成
入力した内容は保存されています
##LINE接続
jsファイルに
'use strict'; // おまじない
// ########################################
// 初期設定など
// ########################################
// パッケージを使用します
const express = require('express');
const line = require('@line/bot-sdk');
const firebase = require("firebase/app");
require("firebase/firestore");
const firebaseConfig = {
apiKey: "ご自身の情報を入力",
authDomain: "ご自身の情報を入力",
projectId: "ご自身の情報を入力",
storageBucket: "ご自身の情報を入力",
messagingSenderId: "ご自身の情報を入力",
appId: "ご自身の情報を入力",
measurementId: "ご自身の情報を入力"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
// ローカル（自分のPC）でサーバーを公開するときのポート番号です
const PORT = process.env.PORT || 3000;
// Messaging APIで利用するクレデンシャル（秘匿情報）です。
const config = {
channelSecret: 'シークレットキーを入力',
channelAccessToken: 'アクセストークンを入力'
};
// ########################################
// LINEサーバーからのWebhookデータを処理する部分
// ########################################
// LINE SDKを初期化します
const client = new line.Client(config);
// LINEサーバーからWebhookがあると「サーバー部分」から以下の "handleEvent" という関数が呼び出されます
async function handleEvent(event) {
// 受信したWebhookが「テキストメッセージ以外」であればnullを返すことで無視します
if (event.type !== 'message' || event.message.type !== 'text') {
return Promise.resolve(null);
}
// データベースにデータを追加
await db.collection("コレクション名に変更").add({
name: event.message.text,
address: "所在地"
});
// 「テキストメッセージ」であれば、受信したテキストをそのまま返事します
return client.replyMessage(event.replyToken, {
type: 'text',
text: event.message.text // ← ここに入れた言葉が実際に返信されます
});
}
// ########################################
// Expressによるサーバー部分
// ########################################
// expressを初期化します
const app = express();
// HTTP GETによって '/' のパスにアクセスがあったときに 'Hello LINE BOT! (HTTP GET)' と返事します
// これはMessaging APIとは関係のない確認用のものです
app.get('/', (req, res) => res.send('Hello LINE BOT! (HTTP GET)'));
// HTTP POSTによって '/webhook' のパスにアクセスがあったら、POSTされた内容に応じて様々な処理をします
app.post('/webhook', line.middleware(config), (req, res) => {
// Webhookの中身を確認用にターミナルに表示します
console.log(req.body.events);
// 空っぽの場合、検証ボタンをクリックしたときに飛んできた"接続確認"用
// 削除しても問題ありません
if (req.body.events.length == 0) {
res.send('Hello LINE BOT! (HTTP POST)'); // LINEサーバーに返答します
console.log('検証イベントを受信しました！'); // ターミナルに表示します
return; // これより下は実行されません
}
// あらかじめ宣言しておいた "handleEvent" 関数にWebhookの中身を渡して処理してもらい、
// 関数から戻ってきたデータをそのままLINEサーバーに「レスポンス」として返します
Promise.all(req.body.events.map(handleEvent)).then((result) => res.json(result));
});
// 最初に決めたポート番号でサーバーをPC内だけに公開します
// （環境によってはローカルネットワーク内にも公開されます）
app.listen(PORT);
console.log(`ポート${PORT}番でExpressサーバーを実行中です…`);
##LINE接続用コードを実行
node ファイル名
localが実行されるので、もう１つターミナルを立ち上げて
npx ngrok http 3000
実行してwebhook用のURLを生成します。
LINE Developwerのwebhookへ入力して完成。
##LINEからFirebase CloudFirestoreへのデータ格納成功！
実際にLINEbotからメッセージを送ると、Firebase CloudFirestoreへデータが格納させていました。
#LINEとwebアプリ両方からの情報を保持
LINEとwebアプリ、両方から入力された情報を1つのFirebase CloudFirestoreで管理されました。
#今後の展望
LINEから予約を受け付けたり、電子カルテの仕組みも作ってみたいと思いました。
LINEからメッセージが送られてきた内容を、どのように複数のデータに保持していくのかを解決しないといけないと感じています。
また、最後にはiPassを利用してスプレッドシートにデータを保存出来たら良いなと考えています！