firebase

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

前置き

チャットシリーズ
ようやくCSSです✨笑

初めにデザインを決めていなかったので
ざっくりですが、整理していきました。
そのためSP対応も未完ですが、
⬆️上の画像イメージを元に
作成しています🍎

今後はこの辺をやっていきたいですね🎈🧸
・SP対応
・スクロール、スクロールボタンの実装

・エディタの使用
 (選択テキストをコード化させる)
・日付に応じて「今日」「昨日」の表示


メッセージを吹き出しにする

チャットインターフェイスなどでググって
出てきた画像を参考にしました。
アプリのチャットインターフェース設計に役立つアイディア48選

max-width
400pxにしています。
SPだと280pxくらいが良さそう。

border-radiusって
一律で設定するのが
一般的なので、
1箇所だけ0にすることで
吹き出しを作る発想が
面白いなと思いました💫😁

これを使う場合は
他の値を少なくとも
10pxにはしないと
尖った部分との差が分かりにくいな
と感じました🤔💭

⬇️こういう吹き出しも
 素敵だなと思ったので
 これはこれでやってたいですね🌟


画像と吹き出しを切り離す

画像の場合は
吹き出し不要だなと思っていますが…
前回の記事でエディタ導入を
検討し始めたので
こちらの挙動などを確認しながら
今後、進めていきます。
textareaの選択した文字に装飾(ボツネタ)

現段階ではここまで。
エディタだけの記事が
あっても良さそう。


メッセージ入力form部分を調整する

名前の入力を消す

そういえば
Firebase Authentication
アカウント作成時に
表示用の名前を作る機能って
あるのかな…🤔💭
と思っていたらありました!!!
[Firebase][iOS] Firebase Authentication で会員機能を作ってみよう

ということで
ログインできれば
いちいち表示名を入力する必要がないことが
わかりました💡

Firebaseで表示名を
作れないわけがないですよね…!😂笑
ということで今回はそこの実装は省き、
とりあえずCSSを優先し、
名前入力のinputを非表示にしています。


fill変更

画像アップロードボタンの
主張が強かったので
色を変更しています。
#888888にするため
#%23にし
%23888888と書き換えればOKです。


message入力部分の変更

spanを取る

名前とメッセージを区別する必要が
なくなったので取り除きます🤏

右下の//を消す

リサイズするための物なので
resize: none;
でなくなります。
リサイズできなくなるので
入力部分の大きさを決めておきます💫

placeholder
中央にするために
paddingで調整してます。

placeholder
iPhoneとAndroidでの
調整が必要そうです。
2016年の記事なので
変わっているかも❓
iPhoneとAndroidのブラウザによるplaceholderの上下位置


1番下に固定

fixedで固定します。


コード

Vuex部分は調整中のため
HTML/CSSのみ
参考になればと思います🙏

まとめ

まずはやってみる、
で進めてきました❣️

案外できることは分かりましたが…
後からVuexの移行をしたり
デザインで迷ったり🎨💦
非効率だなと思いました🤣笑

事前に決めることの
大切さを実感しております。

とはいえ、
「background-imageでSVG使えるんだ🤭」
「エディタ使わなきゃダメなんだ😯」
「ユーザーの表示名つくれるんだ😀」
など新しい発見もあって良かったです❣️

現実的にできる部分が見えてきたことが
私にとっての報酬でした🍎
実装までのイメージが湧かず
ググっても無理だろうな…
現実的じゃないな…
となってしまうと、
やる気が微塵も起きないので…😂笑

事前の要件定義、設計、デザインを含めて
記事にしてみるのも面白いな〜
と思っています🎈🧸
デザインのトレンド、
進化が凄い(語彙力。。。)
ついに出た!2021年注目のWebデザイン人気トレンド9個まとめ

実装については、
全工程をスムーズにまとめて
別記事や動画などに
できれば良いなと思っています♪

-firebase
-,

© 2021 aLiz Nuxt