チャットアプリ実装中
チャットアプリのメインのチャット画面の実装
チャットの入力フォーム周りでかなり苦労したーーーーーーーーー。
結果的には、HTML/CSSのフォーム系の書式を知らなかったのが原因。
.form__mask
%input.message-input{ type: "text", placeholder: " type a message"}
%label.upload-label{for:"upload-icon"}
%i.fa.fa-picture-o
%input{type:"file",style:"display:none;",id:"upload-icon"}
- <form>タグ作って
- <input type="text">で入力フォーム作って
- <label>タグ用意して
- 「 font awesome 」でアイコン入れて
- <input type="file">でファイル添付用のウインドウ出して
さらに、オプション style="display:none;" で画面から表示を消して - <label>タグの機能で、４のアイコンを押したら５のファイル選択ウインドウ
が出るようにする。
まあ、それだけなら普通調べればわかるんだけど、
Haml / Scss使いたてだから余計に書式がごちゃごちゃに、、
特に、タグにオプションをつけるところの書式が上手く効いてなかった。
先生に言われたのは、
- インデントを正確につける
- 検証とかを使ってまず構成を掴む ってこと。
終えて自分で思ったのは、
- 書式を正確に書くこと
- 構成はいくつか考えられる場合もあるが、それぞれの実現可能性や後々の追加修正のしやすさを落ち着いて整理すること
特に、まずは書式かな。
公式リファレンスとかそれに近いもの、コンバーターを使って
とにかく書式で間違わない！
できれば、使ったことのないタグやオプションは、
一つ一つ記入のつど画面への表示のされ方を確認すること！
（知らない要素がいくつか含まれるコードをペースとして表示を見ても
それらが互いに関連して表示され、要素ごとの繁栄がわからない。）
丸１日はかかったな。。
〜つづく〜
