Contents
はじめに
mBaaSの醍醐味に切り込みます。
こんな感じのプロフィール一覧に見えているアカウントがプロフィール変更を行ったら、即時反映してやります。
実装してみましょう
var users_query = firebase.firestore()
.collection('users')
.orderBy('uid', 'asc');
// Start listening to the query.
users_query.onSnapshot(function(snapshot) {
snapshot.docChanges().forEach(function(change) {
var message = change.doc.data();
// 略
if(change.type == 'added'){
// change.type上記のようにfirestoreのスナップショットを取得していると思いますが、
change.type でデータに最初にアクセスしてからの変更種別を取得できます。
if(change.type == 'added'){
//画面を開いて最初に追加された
var line = users_parts; // 枠線込みのテンプレート
line = line.replace('replace_to_div_id', 'user_'+message.uid);
line = line.replace('replace_to_introduce', message.introduce);
line = line.replace('replace_to_gender', message.gender);
line = line.replace('replace_to_name', message.name);
line = line.replace('/assets/img/unnamed.png', message.picture);
getElemID('users_window').innerHTML += line;
} else if(change.type == 'modified'){
// 画面を開いてから変更された
var parent = getElemID('user_'+message.uid);
var line = users_replace_parts; // 枠線の中のテンプレート
line = line.replace('replace_to_introduce', message.introduce);
line = line.replace('replace_to_gender', message.gender);
line = line.replace('replace_to_name', message.name);
line = line.replace('/assets/img/unnamed.png', message.picture);
parent.innerHTML = line;
} else {
// 画面を開いてのち削除された
getElemID('user_'+message.uid).remove;
}なおmodifiedの際の書き換えについて最初以下のように試行したのですが、うまいこといきませんでした。
} else if(change.type == 'modified'){
// 画面を開いてから変更された
var parent = getElemID('user_'+message.uid);
parent.getElementsByClassName('user_list_name').innerHTML = message.name;
parent.getElementsByClassName('user_list_gender').innerHTML = message.gender;
parent.getElementsByClassName('user_list_introduce').innerHTML = message.introduce;
} else {innerHTMLに格納してもinnerTextに格納しても反映されず。
dom要素は見えるんですが、addedの際にそもそもStringで扱ったからなんでしょう。
addedの場合と同様に対応しました。
あとチャットウィンドウの中のプロフィール画像を変更するギミックを入れてやります。