firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ③

前置き

チャットアプリシリーズ第三弾❤️
CSSを整えたいところですが、
まずは画像の投稿&取得から!

前回はこちら
【Nuxt.js】開発ブログ:firebaseでチャットアプリ②


画像の投稿

投稿フォームで
選択した画像を表示・確認し、
投稿できるようにします👀

参考: SVG Background Imageの色をCSSで変える方法


input type="file"のデザイン

これ自体にCSSが効かないため、
inputは非表示にし
labelに装飾をしていきます💫

アイコンは
iconmonstrpicture-1を使用🍒
background-image
svgを適応させています。
svgコードはiconmonstrコピペして
pathの後ろにfillを追加するだけです。

とりあえずdata:image/svg+xmlして
svgコードつけてfillで色つければOKです🙆‍♀️

該当コード部分はこんな感じです。

Sassでfillを変数にしようとしたが…

これが結構たいへんそうでした😩
カラーコードの#%23
エンコードする必要があるようです。

これで使えれば早いんですが、、、
fill="{$color-icon}"
$color-icon: #4169e1;

ここはまた時間つくってやります🍎

参考: 多分これが一番早い SVG Background Image の利用手順だと思います

⬇️Sassの導入などは
 こちらで解説しています🌟
【Nuxt.js】Sassの導入方法


選択した写真を表示する

とりあえず表示。
これを後ほどfirebaseの
storageに送信します。

⬇️まだ送信していませんが、
 表示だけでもこちらの解説で
 仕組みを解説していますので
 ぜひご覧ください💕
 主にFileReaderの確認あたりです💡
【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得

選択した画像は
width: 100px;
height: auto;
とかでとりあえず表示。


画像を投稿する

submit時にstorageに
urlデータに変換した
this.thumbnailを送信。
同時にメッセージなどと
一緒にpostData.thumbnail
RDBに送信📤

データがぐちゃぐちゃになったので
userにまとめます…

ここまでのコードはこちら

参考: スマホアプリ開発を加速する,Firebaseを使ってみよう 第10回[最終回] Firebaseの実践的なテクニックを使いこなそう


画像の取得

こちらを追記するだけです♪
<img :src="post.thumbnail" alt="">

CSSの調整は必要なものの、
かなり理想の機能が揃ってきました❤️

ただし今の段階では
storageにはfile.pngという名前の
1枚しか保存されていません💥
urlデータで透過、非透過の画像
2枚が取得できていますが
storageには1枚しか保存されていない
というちょっと奇妙な状態です😂笑

ということでログインした時の
data.user.emailを入れた
dataのthis.user.emailにしてみました🍒

これならユーザーのメールアドレスにつき
1枚保存になりますね💡
ここから更に
変数を使って分けると尚よし…!
何が良いのか考え中です🤔💭


まとめ

storageも事前知識があるので
やりやすかったです❤️
これが1から勉強して
コードも長くなってくると
初心者なら混乱するな…
と思いました🙄

1つ1つの
基礎を把握することの
重要さが分かります…🌟


そしてもうそろそろ
VuexもCSSも
やりたいところです!😂笑

それが終わったら
データの削除をやろうかと思っております💡

-firebase
-,

© 2021 aLiz Nuxt