概要
耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
これまでカレンダーを表示して予定を入れることと、ユーザー認証の実装、LINEのデータをFirebaseに貯めるところまで行ってきました。
Vue.js×FullCallendarでWEBカレンダー作成（花粉カレンダー作成①）
Auth0で簡単にユーザー認証を実装（花粉カレンダー作成②）
花粉症LINE Botのデータをnode.jsを使ってFirebaseに出し入れする（花粉カレンダー作成③）
今回はLINEBotのデータが記録されているFirebaseのdatabaseのデータをカレンダーに表示することに挑戦しました。
LINEBotの記事はこちら
花粉症の重症度を判定し自分に合う市販薬を教えてくれるLINE Botの作成
完成動画
作成
１．FirebaseのRealtime Databaseの確認
LINEのデータはFirebaseのRealtime Databaseに記録されています。
データは以下のように収納されています。
今回は以下の情報を取得して重症度や薬剤名、緯度経度をリアルタイムでカレンダーに記入していきたいと思います。
・postback.data（花粉症の重症度や使用している薬剤の情報）
・postback.params.datatime(重症度判定を行った日や薬剤使用開始した日の情報）
・sorce.userID（LINEのユーザーID）
個別の花粉飛散情報を表示するため
・message.latitude（ユーザー位置情報 緯度）
・message.latitude（ユーザー位置情報 経度）
データは.(ドット）で深堀していくことができるようです。
2.実装
以前作成したCalendar.vueに追記していきます。
Vue.js×FullCallendarでWEBカレンダー作成（花粉カレンダー作成①）
methods: { }の中に以下を追記します。
緯度や経度は本当はデータが取得できるだけでいいのですが、今回は本日の日付で表示してみました。
childAdded(snap) {
const message = snap.val();
const mes = message.events[0];
if (mes.type == "postback") {
console.log(mes.postback.data);
console.log(mes.postback.params.datetime);
console.log(mes.source.userId);
this.calendarEvents.push({
title: mes.postback.data,//重症度や薬剤
start: mes.postback.params.datetime,
end: mes.postback.params.datetime
});
}
if (mes.type == "message") {
if(mes.message.type=="location"){
console.log(mes.message.latitude);
console.log(mes.message.longitude);
userlat = mes.message.latitude;// 緯度
userlong = mes.message.longitude;//経度
};
this.calendarEvents.push({
// title: mes.message.text,
title: `緯度${userlat}`,
start: "2020-01-19T09:00:00",
end: "2020-01-19T10:30:00"
},
{
title:`緯度${userlong}`,
start: "2020-01-19T09:00:00",
end: "2020-01-19T10:30:00"
}
);
}
},
async created() { }の中に以下を追記して完成です。
const ref_message = firebase.database().ref("protoout/studio/messageList");
//新しいメッセージ2件だけ表示する
ref_message.limitToLast(2).on("child_added", this.childAdded);
LINEから位置情報を送ると緯度と経度が表示されます。
考察
Firebaseのデータをカレンダーに表示することが出来ました。
次は気象APIから花粉情報を表示できるようにしたいと思います。