#やりたかった事
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を利用してスプレッドシートにデータを保存出来たら良いなと考えています！