チャットアプリを作成する⑶HamlでHTMLを書く
今日は新しく習ったHamlでHTMLを書いて、
フロントビュー画面の作成をしました。
実装するビュー画面はこんな感じ。比較的シンプルですね。
HTMLを書く時のポイント
HTMLを書く時のポイントは、
ボックスに分けて実装していく、ということです。
このように左がサイドバー、右がメインコンテンツ、ボトムにメッセージ送信ボックスがあります。
そして左のサイドバーも、詳しく分割していくと一番上にユーザーボックス、
その下にグループボックスがリストで並んでいきます。
メインコンテンツは一番上にグループ名のボックス、その下にチャットメッセージのボックスがリストで並んでいます。
このように再分割したら、
ボックスごとにどんどんHTMLを書いていきます。
再分割したHTMLをHamlで書いていく。
実際に新しく習ったHamlで書いて行きましょう。
Hamlでの書き方は比較的簡単ですぐ慣れました。
わざわざタグを書く必要がなくて「％」で表すことができます。
めちゃくちゃかんたんですね！
一応参考にしたHamlの書き方を詳しく教えてくれるサイトを引用しておきます。
ちなみに「これどうやってHamlで記述すればいいんだっけ、、、？」って
思ったやつは以下のサイトでHTMLタグから変換させて覚えて行きました！
このサイトでHTMLタグからHaml記法に変換してくれます。
実際に記述したHTML
一応作成できたんですが、
いろんなページに移ったときに共通するHTMLのブロック部分は部分テンプレートを使った方が楽なので、部分テンプレートを使ってファイルを分けていくと思いますが、
とりあえずはHTMLが完成しました。
