今日はチャットアプリのフロント部分の仮実装。
カリキュラムは25時間とか書いてあるけど、11時スタートの18時には大体完成。
プルリクエスト出して、指摘された箇所を修正。
ぶっちゃけデモページを準備してくれている上に、仕様書をくれるので対応が非常に楽。自分で0から考えて作ったら25時間かかるかもね。
進捗もデータベースとフロント実装が簡単だったおかげで目論見通り追いついた。というか1日リードした。
7,8日を休む予定にしていたのでこれで安心してサボれる。
ruby
.sum
配列の中身を合計してくれる。
array.sum.inject
隣り合う要素に対して処理をする。reduceと同じ。
array.inject(:+)SCSS
calc
式中はスペースを挟む必要がある。
height: calc(100vh - 100px);
↑ 動く
↓ 動かない
height: calc(100vh -100px);
height: calc(100vh- 100px);変数
_variable.scssに変数を定義する。
$hogehogeと「$」で宣言し、呼び出す際も$hogehogeと呼び出す。
_variable.scss
$SidebarTextColor: #FFFFFF;
application.scss
.sidebar {
color: $SidebarTextColor;
}haml
font-awesomeのアイコンの使い方とリンクの貼り方
= link_to '/hogehoge' do
= fa_icon "cog", class:"sidebar__btn"link_to doで以下のインデントしたテキストにリンクを貼る。
icon “cog”はアイコン名称を書くだけでOK
クラスの指定
開始タグを打った後に連続して.class名を続ける。
%p.class名ファイル参照ボタンをアイコンに変更
ファイル参照はhtmlだと以下。（idやクラスは任意につけて下さい）
<input type="file" id="filesend">このままだとデフォルトのブサイクなファイル参照ボタンと文字列が出てしまうので、これをfont-awesomeなどのアイコンに置き換えたい。
解決方法はlabelタグでinputタグを囲んでラベルを表示し、
inputタグはcssでdisplay: none;を設定して隠してしまう。
HTML
<label>
<i class="fa fa-image"></i>
<input class='hidden' type='file'>
</label>
CSS
.hidden{ display: none; }さらにこれをhamlで書くとこうなる。
%label
= fa_icon "image"
%input.hidden{type: "file"}hamlのinputタグの書き方には慣れてないので難しいね。
厳密にはlabelではfor属性でラベルを貼る先のidを指定すべき。
なので
HAMLの属性の書き方
実は{}シンボルで書く方法と（）で書く方法の2通りある。
下の例は (for=”file”) と {type: “file”} で記載しているが、
どちらもきちんと属性に格納される。
%label.chat(for="file")
= fa_icon "image"
%input.hidden#file{type: "file"}<label class='chat' for='file'>
<i class="fa fa-image"></i>
<input class='hidden' id='file' type='file'>
</label>link_to
= link_to 'TEXT', 'URL'
= link_to 'ほげほげ', '/hogehoge'1つのみを記載した場合はtextとして認識する。
<a>タグ内にdivやその他の項目を含めて、配下の全てをクリック時にリンク先へ飛ばしたいような時はdoを用いる。
= link_to '#' do
%h2 title
%p first_messageHTML
<a href="#">
<h2>title</h2>
<p>first_message</p>
</a>application.scss では基本的にimportのみをする
リンク先が未定の場合はpathの仮置として#を置く
CSS
cursor: pointer;マウスオーバーでカーソルを変える。
aタグのような感じでカーソルが変わる。
コメント