チャットアプリで自分の気に入ったメッセージをお気に入りに追加しておくと、後から見返すこともできて何かと便利です。
今回は、お気に入りに追加するためのコード作成に取り組んでいきます。
！この記事は、私のFirebaseに関する学習経験を共有するものです。
同じくFirebaseを利用したボタンをクリックするたびに数値が増えるコードの作り方はこちら。
【保存】お気に入りのメッセージを保存する
データベース上では、お気に入りデータは次のような階層で保存されています。
favorites/${UID(ユーザーID)}/${messagesのID}
一方、dbdataでは、favorites[messagesのID]という形にします。
チャット画面上では、ユーザー自身がお気に入りに追加したい必要なメッセージだけを取得できれば十分だからです。
favorites/${UID(ユーザーID)}/${messagesのID}をもう少し具体化すると、ユーザーIDは、currentUID=user.uidとして定義しています。
メッセージの保存
firebaseへのメッセージの保存は、.set( )メソッドを利用してオブエクト形式で渡します。
.set({message:message});
として、message変数に格納した値を保存します。
message変数の中身は、以下フロントエンドコースで学習を積むと理解できるようになると思います。
オブジェクトのキーである左側のmessageは、データベース上の階層構造を構成します。
dbdata.favotitesに登録する
dbdata.favorites[messageId]=favorite;
は、dbdata.favoritesオブジェクトのmessageIdプロパティにアクセスしています。
データベースにおいてmessageIdは、それぞれのメッセージIdごとに、メッセージデータを持っています。
メッセージデータとは、プロパティとプロパティの値で構成されるものです。
従ってmessegaIdは、それらに対しては、オブジェクトとして扱われることになります。
ここまででのコードでの動作確認。
こちらのコードを無しで同作確認をすると、reaitimedatabase及びチャット画面共、お気に入りに追加は可能ですが、削除は両者ともできないようです。
【削除1】favoritesから該当のお気に入り情報を削除
冒頭の【保存】したデータを削除するには、remove( )を用います。
ここまでで、でのお気に入りへの追加機能と削除機能が整いました。
【削除2】該当するデータをdbdata.favoritesから削除する
削除するデータの参照場所としては、
.ref(`favotites/${messageId}`を参照しています。
dbdataでは、ユーザーIDを省力し、favorites[messagesのID]という形にしていることのおさらいになります。
お気に入りリンクのアイコンを、塗り潰しありに変更する
お気に入りのコードの要素を探し出して、塗りつぶしありを追加する作業です。
作業としては、指定された要素内で、特定の要素を探し出し、addClass('far-star')を使用して、塗り潰しを追加します。
塗り潰しにしたい要素を探し出すには、findメソッドを利用できます。
塗り潰しにしたい要素が実際に星マークをクリックした要素とどのようにリンクするのか学習しながら確認していきましょう。
お気に入りリンクのアイコンを、塗り潰しなしに変更する
塗り潰しありに変更する場合と、逆の操作が必要です。
お気に入りONのとき、お気に入りのリンクのアイコンを塗りつぶしあり（fa-star）に設定する
一度お気に入りに追加したメッセージは、ページの再読み込み時にもお気に入りマークにより一目で分かるようにします。
ページの読み込みが完了した後に、関数が実行されるようにします。
$(document).ready(function(){
})
でページが読み込まれた時の関数を指定し、処理を｛ ｝内に記述していきます。
以上がFirebaseを活用したチャットアプリの学習内容の共有です。
こちらのフロントエンドコースから学習できますので参考にご覧ください。
