【Firebase】firebaseでアカウントを作ってチャットするだけのアプリ(2)

研究
OLYMPUS PEN E-PL9 (c)Maya
この記事は約9分で読めます。

UIに凝っていたら投稿の時間が空いてしまいSEO的によろしくない為、記事を分けました。
拙稿のリンク

テキスト他データの置き場としてCloud Firestoreを作ります。

言われるがままに作ります。

なんか下手打ってた?(´・ω・`)

できた。中身にデータを格納するのは実装で行います。

Add data to Cloud Firestore | Firebase

No Description

公式を参照しながら、やはり利用するjs群に以下を追加します。

<script src="/__/firebase/7.22.0//firebase-firestore.js"></script>

プロフィール更新フォームにいったん退いてもらって、こんなフォームにしました。

            <div id='chat_area'>
              <div id='chat_window'></div>
              <form id='chat_form'>
                <textarea class="form-control col-12" id='chat_message' placeholder='メッセージ...'></textarea>
                <button class="btn btn-primary" type='submit'>ポスト</button>
              </form>
            </div>
document.querySelector("#chat_form").addEventListener("submit", function(event) {
  var user = firebase.auth().currentUser;
  var db = firebase.firestore();
  var date = new Date();
  var datetime = date.getFullYear() + '-' +
                (date.getMonth() +1 ) + '-' +
                date.getDate() + ' ' +
                date.getHours() + ':' +
                date.getMinutes() + ':' +
                date.getSeconds() ;

  // Add a new document in collection "cities"
  db.collection("openchats").doc().set({
    uid: user.uid,    
    name: user.displayName,
    message: getElementValue('chat_message'),
    picture: user.photoURL,
    datetime : datetime
  })
  .then(function() {
    console.log("Document successfully written!");
  })
  .catch(function(error) {
    console.error("Error writing document: ", error);
  });
  event.preventDefault();
});

これらにてfirestoreに書き込まれているのを確認できました。

さてここから登録されたものをchat_windowに整形しながら取ってきます。

UI慣れないといいながらこんな感じで作りました。
ここから技を使います。

めいめいのUIのHTMLは以下のように作ってあります(CSS省略)

                <span id='any_chat_parts_template'>
                <div class='any_chat_parts chat_parts'>
                  <div class='chat_message col-6'>replace_to_message</div>
                  <div class='chat_datetime col-4'>replace_to_datetime<br>
                    <img class='profile_picture' src='./unnamed.png'><br>replace_to_name
                  </div>
                </div>
                </span>

                <span id='my_chat_parts_template'>
                <div class='my_chat_parts chat_parts'>
                  <div class='chat_message col-6'>replace_to_message</div>
                  <div class='chat_datetime col-4'>replace_to_datetime<br>
                    <img class='profile_picture' src='./unnamed.png'><br>replace_to_name </div>
                </div>
                </span>

これらをこうしてjavascriptに読み込み、画面からは削除

var any_chat_parts = getElemID('any_chat_parts_template').innerHTML;
var my_chat_parts = getElemID('my_chat_parts_template').innerHTML;

getElemID('any_chat_parts_template').remove();
getElemID('my_chat_parts_template').remove();

Cloud Firestore でリアルタイム アップデートを入手する | Firebase

onSnapshot() メソッドを使用すると、ドキュメントをリッスンできます。コールバックを使用した最初の呼び出しでは、単一のドキュメントの現在のコンテンツですぐにドキュメント スナップショットが作成されます。次に、コンテンツが変更されるたびに、別の呼び出しによってドキュメント スナップショットが更新されます。 注: リアルタイム リスナーは、PHP クライアント …

上記の通りリアルタイムアップデートを取得する箇所で以下の通りに当て嵌めます。

    query.onSnapshot(function(snapshot) {
      snapshot.docChanges().forEach(function(change) {
        console.log(change.type);
        var message = change.doc.data();
        console.log(change.doc.id);
        console.log(message.uid);

        var line = '';

        if(message.uid == user.uid){
          line = my_chat_parts;
        } else {
          line = any_chat_parts;
        }

        line = line.replace('replace_to_message', message.message);
        line = line.replace('replace_to_datetime', message.datetime);
        line = line.replace('replace_to_name', message.name);
        line = line.replace('./unnamed.png', message.picture);
        getElemID('chat_window').innerHTML += line;

      });
      getElemID('chat_window').scrollTop = getElemID('chat_window').scrollHeight;
    });

よし、ラリーっぽくなりました。

ここまで満たした仕様は以下の通り。

  • サインアップ
  • サインイン
  • サインアウト
  • パスワード再設定リンク請求
  • サインイン後プロフィール更新
  • ログインメールアドレス変更
  • ログインパスワード変更
  • アカウント削除
  • アカウント全体でのチャット

最終的に

  • さっき隠したプロフィール更新フォームをパタパタ
  • 個人間チャットを積む
  • チャットメッセージが消された際のリフレッシュを行う
  • アカウントが削除された際にチャットデータも削除

など細かい調整を行います。
なおfirebaseプロジェクトはこちら。

firebaseチャット試作品 – maya.pg.

firebaseチャット試作品 – maya.pg.

参考リンク

overflow:scroll/auto; を指定した要素の中身を一番下までスクロールする – Qiita

More than 5 years have passed since last update. 自分がつまづいたいた石ころを取り除くための場所にしてます Why not register and get more from Qiita?

String.prototype.replace()

メソッドは、 pattern にマッチした文字列の一部またはすべてを replacement で置き換えた新しい文字列を返します。 pattern は文字列または 、 replacement は文字列または各マッチで呼び出される関数です。 pattern が文字列の場合、最初に一致した箇所のみを置き換えます。 元の文字列は変更されません。 regexp (pattern) オブジェクト、またはリテラルです。マッチすると、第2引数の newSubStr または function の戻り値と置き換えられます。 substr (pattern) newSubStr に置き換えられる です。これは逐次的な文字列として扱われ、正規表現としては解釈されません。最初に出てきたものだけが置き換えられます。 newSubStr (replacement) regexp や substr パラメーターで指定される部分文字列を置換する です。数々の特別な置換パターンがサポートされます。下記の「引数としての文字列の指定」節を見てください。 function (replacement) 新しい部分文字列を生成するために実行される関数で、regexp や substr でマッチしたものを置き換えるのに使われます。この関数に渡される引数は下記の「引数としての関数の指定」で述べられています。 パターンにマッチした部分文字列の一部またはすべてを置換文字列で置き換えた新しい文字列です。 このメソッドは、それを呼び出した オブジェクトを変化させません。戻り値として新しい文字列を返します。 グローバルな検索と置換を動作させるためには、正規表現に g フラグを含める必要があります。 置換文字列には以下の特殊な置換パターンを含めることができます。 第二引数として関数を指定することができます。このとき、関数はマッチが完了された後に実行されます。関数呼び出しの結果(返り値)は、置換文字列として使われます(注記: 上記の特殊な置換パターンはこの場合には適用 されません )。第一引数の正規表現がグローバルだと、置換されるべきマッチごとに関数が複数回実行されうることに注意してください。 関数に与えられる引数は次の通りです。

コメント

タイトルとURLをコピーしました