【HTMLとCSS】③ChatAppにおけるユーザー名とチャット作成ボタンの作成
◯上記のようなデザインを作成したい！！
【模範解答】
☆app/views/messages/_side_bar.html.erb
<div class="side-bar-header">
<div class="header-name">
<a href="#">Tom</a>
</div>
<div class="create-room">
<a href="#">チャットを作成する</a>
</div>
</div>
<div class="rooms">
</div>
3行目と6行目ですが、現時点ではリンクは仮置きのため「#」としている。
☆app/assets/stylesheets/messages.css
.wrapper {
display: flex;
}
.side-bar {
background-color: #253141;
width: 300px;
height: 100vh;
}
.side-bar-header {
height: 100px;
padding: 0 20px;
background-color: #253141;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-name a{
font-size: 16px;
color: #FAFAFA;
text-decoration: none;
}
.create-room a {
font-size: 10px;
border: 1px solid lightblue;
padding: 14px;
color: deepskyblue;
text-decoration: none;
}
.rooms {
background-color: #2F3E51;
height: calc(100vh - 100px);
padding: 0 20px;
}
中略
【自分への解説】
思考手順
１.side-bar-headerクラスの中に、「ユーザーネーム」と「チャット作成」のボタンの2つのクラスが必要であると認識する。
２.上記2つのクラスについてHTML上に記述する。
３.CSSを編集していく。
◯HTMLの編集について
【解答解説】
☆app/views/messages/_side_bar.html.erb
<div class="side-bar-header">
<div class="header-name">
<a href="#">Tom</a>
</div>
↑
ここでTomをa要素で表現し、リンクを設定している。
<div class="create-room">
<a href="#">チャットを作成する</a>
</div>
↑
チャット作成のリンクも同様に設定している
</div>
※そもそもa要素とは？
・a要素とは、<a>...</a>で囲ったテキストをリンクにすることができるというもの。a要素をクリックすると特定のページに移動する。aタグのhref属性に、移動させたいページのURLを指定する。
※href属性とは？
・href属性はリンクの移動先を指定する。
属性値としてURLや移動させたいページのHTMLファイルが置いてあるフォルダの場所を指定することで、特定のページへのリンクが作成できる。
◯CSSの編集について
【解答解説】
.side-bar-header {
height: 100px;
padding: 0 20px;
background-color: #253141;
display: flex;
↑
（復習） display: flex;はその中の子要素を横並びにするというもの
justify-content: space-between;
↑
・justify-contentプロパティとは、justify-content: 〇〇;といった形で、display: flex;と併せて使用する。主軸方向(初期値は水平方向)の配置の詳細を決めることができる。
これももちろん親要素で使用する。
今回は、両端に寄せるため「space-between」を使用している。
align-items: center;
}
↑
・ align-itemsプロパティとは、align-items: 〇〇;といった形で、display: flex;と併せて使用する。交差軸方向(初期値は垂直方向)の配置の詳細を決めることができる。
今回は、中央に寄せるため「center」を用いている。
◯子要素の編集について
【解答解説】
・まずはTom部分のCSSについて
.header-name a{
font-size: 16px;
color: #FAFAFA;
text-decoration: none;
↑
テキストの装飾しない時に用いる
}
・次に、チャットルーム作成部分のCSSついて
.create-room a {
font-size: 10px;
border: 1px solid lightblue;
↑
境界線について、1pxのラインを色指定している。
border:”サイズ” ”線のタイプ” ”線の色”;
というように記述できる。
padding: 14px;
↑
上下左右14pxずつ内側に余白を作っている
先程境界線を指定したので、その境界線までの距離をここで指定するイメージ
color: deepskyblue;
text-decoration: none;
}
↑
ここはわかるよね
ここで疑問！
・side-bar-headerの両サイドの20pxずつの余白についてはまだ記述していないような気がするけど…
side-bar-headerクラスの記述で
height: 100px;
padding: 0 20px;
background-color: #253141;
display: flex;
justify-content: space-between;
align-items: center;
↑
これの２行目で既に書いています！！
【HTMLとCSS】②ChatAppの大まかなレイアウトについて
◯上記のようにページをデザインしたい！
【模範解答】
☆app/views/messages/_main_chat.html.erb
<div class="chat-header">
</div>
<div class="messages">
</div>
<div class="form">
</div>
☆app/views/messages/_side_bar.html.erb
<div class="side-bar-header">
</div>
<div class="rooms">
</div>
☆app/assets/stylesheets/messages.css
wrapper {
display: flex;
}
.side-bar {
background-color: #253141;
width: 300px;
height: 100vh;
}
.side-bar-header {
height: 100px;
}
.rooms {
background-color: #2F3E51;
height: calc(100vh - 100px);
}
.chat {
background-color: #FFFFFF;
width: calc(100vw - 300px);
}
.chat-header {
height: 100px;
}
.messages {
background-color: #FAFAFA;
height: calc(100vh - 100px - 90px);
}
.form {
background-color: #DDDDDD;
height: 90px;
}
【自分への解説】
思考手順
１.まずは、side-barクラスとchatクラスの内部のデザイン編集と捉える
２._main_chat.html.erbと_side_bar.html.erbの編集が必要だと判断する
（部分レイアウトの内部を編集する）
３._main_chat.html.erbでは、3つのクラスが必要と判断し、それぞれ「chat-header」「messages」「form」と命名しHTMLを編集する（命名についてはなんでも良い）
４._side_bar.html.erbでは、2つのクラスが必要と判断し、それぞれ「side-bar-header」「rooms」と命名しHTMLを編集する（命名についてはなんでも良い）
５.CSSをクラスごとに編集していく
◯各HTMLの編集については、クラスを定義していくだけなので割愛します。
◯CSSの編集について（ここが理解できていないポイント）
・side-bar-headerクラスの編集について
.side-bar-header {
height: 100px;
}
↑
side-bar-headerの編集はこれのみ。
side-barクラスの色をそのまま使用するため、ここでは特に背景色は指定していない。
・roomsクラスの編集について
.rooms {
background-color: #2F3E51;
height: calc(100vh - 100px);
↑
ここではcalc()関数を用いる。
side-bar-headerが縦100pxのためroomsクラスはその残りの部分である。
・chat-headerクラスの編集
.chat-header {
height: 100px;
}
↑
ここでも、背景色についてはchatクラスを同じのため特に色は指定しない。
・messagesクラスの編集
.messages {
background-color: #FAFAFA;
height: calc(100vh - 100px - 90px);
}
↑
高さについて、messagesクラスはchat要素の真ん中に位置している。
calc()関数において例えば、要素の上下にへつの要素が存在するとき（headerとfooterがある際）は、height: calc(100vh - 100px - 90px);というような記述の仕方をとる。ここでいう「-100pxがheader」、「-90pxがfooter」を表している。
【HTMLとCSS】①ChatAppの大まかなレイアウトについて
○上記デザインになるようにHTMLとCSSを記述したい！
【模範解答】
☆app/views/messages/index.html.erb
<div class="wrapper">
<div class="side-bar">
<%= render "side_bar" %>
</div>
<div class="chat">
<%= render "main_chat" %>
</div>
</div>
☆app/assets/stylesheets/messages.css
.wrapper {
display: flex;
}
.side-bar {
background-color: #253141;
width: 300px;
height: 100vh;
}
.chat {
background-color: #FFFFFF;
width: calc(100vw - 300px);
}
【自分への解説】
このデザインを完成させるにあたって思考する順番
１.左と右の部分の色分けがしてある → クラスを2つ作成する必要がある
２.クラスを作成したら、それぞれのクラスについてCSSでデザインしていく
○下記記述について、分割して見ていく
☆app/views/messages/index.html.erb
<div class="wrapper"> → ここは元々の記述通り
<div class="side-bar">
<%= render "side_bar" %>
</div>
↑
ここで、画面左に位置するside-barクラスを定義する。（濃いグレーのところ）
<div class="chat">
<%= render "main_chat" %>
</div>
↑
ここでは、画面右側に位置するchatクラスを定義する。（実際のチャット画面のところ）
</div>
○次はCSSの編集
☆app/assets/stylesheets/messages.css
.wrapper {
display: flex;
}
↑
side-berとchatクラスを横並びにするため、親要素のwrapperにdisplay: flex;を記述する。
display: flex;は要素を横並びにする役割がある。
.side-bar {
background-color: #253141;
width: 300px;
height: 100vh;
}
↑
side-berクラスにて、背景色を指定（これはわかるね）
横幅を300pxに指定（これもわかるね）
高さを100vhに指定（開いているページの高さの100％ということ）
.chat {
background-color: #FFFFFF;
width: calc(100vw - 300px);
}
↑
chatクラスにて背景色を指定（これは余裕ね）
横幅をcalc関数を使って指定（横幅100％からside-barの300pxを引いた感じ）
※calc()関数とは、プロパティに設定する値を数式で計算することができるものである。「ボックスの高さを100%にしたいけど、その高さからヘッダーやフッターのピクセル(px)分だけ除きたい」というような時に便利である。
（補足）
ちなみに、CSSの記述の際先頭に「.」をつけているが、「.」をつけていると、そのクラスの記述がHTMLに何度も登場した場合全てのクラスにそのCSSのデザインが反映されるというイメージ
またCSSの先頭に＃をつける場合があるが、その際はHTMLにて作成したクラス一つ一つにidを付与する必要がある
【Ruby】部分テンプレートとは？
部分テンプレートとは、複数のビューファイルの中で使われている部分を一つのビューファイルとして管理する時に使う。
○部分テンプレートを作成する
・部分テンプレートとしてビューファイルを作成する時は「_sidemenu.html.erb」のようにファイル名の前に_（アンダースコア）をつける必要がある。
このようなファイル名で作成すると部分テンプレートとして使うことができる。
○renderメソッド （index.html.erbで使う？）
・指定したテンプレートを呼び出す時に使うメソッド。
下記のように記述する。
render 'ファイル名' # 指定したテンプレートファイルを呼び出す
render :アクション名 # 指定したアクションのテンプレートファイルを呼び出す
【Rails】コントローラーとビューを同時に作成する
（例）
ターミナル上
% rails g controller messages index
これは、コントローラー作成時に、コントローラー名に続けてアクション名を指定している。
% rails g controller messages（コントローラー名） index（アクション名）
これにより、コントローラーの作成だけでなく、以下の内容が行われる。
- messagesコントローラーにindexアクションが作られる
（その中身）
class MessagesController < ApplicationController
def index（これがアクション名）
end
end
- viewsのmessagesフォルダにindex.html.erbファイルが作られる
（これはビューの作成）
indexアクションの見た目ができている
【Rails】7つのアクションとその役割
○そもそもアクションとは？
controllerで定義されるメソッドを指してアクションと呼ぶ。
（例）
def index
〜
〜
end
↑
上記のものはindexアクション
7つのアクションとは下記のものを指す
|
index |
リソースの一覧を表示する |
|
new |
リソースを新規作成する |
|
create |
リソースを新規作成して追加(保存)する |
|
edit |
リソースを更新するためのフォームを作成する |
|
show |
レコードの内容を表示する |
|
update |
リソースを更新する |
|
destroy |
リソースを削除する |
（補足）
コントローラーとは？
Action Controllerは、 MVCモデルのCに相当する。リクエストを処理するコントローラがルーティング設定によって指名されると、コントローラはリクエストの意味を理解し、適切な出力を行なうための責任を持つ。幸い、これらの処理はほとんどAction Controllerが行ってくれる。しかも吟味された規則を使うので、リクエストの処理は可能な限り素直な方法で行われる。
【Ruby】メソッドの使い方について
price = 300
def calculate_price_with_tax
tax = 0.1
return price + price * tax
end
calculate_price_with_tax
上記プログラムを実行するとエラーが起こってしまう。
なぜでしょう？？
①エラーが起きた原因
②正しいソースコード（引数を用いたコードにしましょう）
をそれぞれ答えてください。
①エラーが起きた原因について
【模範解答】
メソッドの外側で定義した変数は、メソッドの内側では使えない。そのため、1行目のpriceはcalculate_price_with_taxメソッドの中では使えずにエラーが起きてしまった。
【自分への解説】
○メソッドついて
def〜endで囲まれているもののことをメソッドと呼ぶ。
メソッドとは、プログラミングにおける何らかの処理をまとめたもの。
Rubyのメソッド定義は、「def」と「end」の間に、実行したい処理を挟無というもの。
例えば「Hello World!」と表示するhelloメソッドは、次のように書く。
def hello
puts "Hello World!"
end
これは、「このhelloメソッドはHello World!と表示するよ」というイメージ。
そして、定義したメソッドはメソッド名を書くだけで呼び出して処理を実行することができる。
例えば、
def hello
puts "Hello World!" ここまでは先程のメソッド文と同じ
end
hello #=> Hello World!
②【模範解答】
price = 300
def calculate_price_with_tax(price)
tax = 0.1
return price + price * tax
end
calculate_price_with_tax(price)
【自分への解説】
改めて、メソッドの中では、メソッドの外の変数を使うことができない（変数の使える範囲をスコープと言う）。
よって今回の問題文のソースコードでは、変数priceの定義はメソッドの外で行なっていた（plice=300の部分）にも関わらず、メソッドの中（def〜endの中）で変数priceをそのまま使おうとしたことがエラーの原因。
スコープの問題を解決するのが、メソッドの中と外を繋ぐ役割を持つ「引数」と「返り値」。
①メソッドの外から中に値を渡す役割が「引数」
②メソッド内の処理を呼び出し元に渡す役割が「返り値」
今回は、メソッドの外から中に変数priceを渡すことで問題は解決する。つまり、解決に必要なのは①の「引数」。
※メソッドの外で、既に変数priceが決まっているので「引数」を用いてメソッドの中に渡すイメージ
引数の使い方は大きく2ステップ
- メソッドの呼び出しをメソッド名(渡したい値)と書く
- メソッドの定義をdef メソッド名(受け取った値を入れる変数名)と書く
1. メソッドの呼び出しをメソッド名(渡したい値)と書く
今回、calculate_price_with_taxメソッド（ def calculate_price_with_tax〜end で定義しているメソッドのこと）に渡したい値は変数priceなので、以下のようにメソッドを呼び出す。
calculate_price_with_tax(price)
2. メソッドの定義をdef メソッド名(受け取った値を入れる変数名)と書く
今回は値段の値を受け取りたいので、変数名はpriceにする。今回はメソッドの外の変数名priceと一緒ですが、別の名前（例えばproduct_price等）にしても大丈夫。
これらを踏まえると模範解答のコードが完成する。
price = 300
def calculate_price_with_tax(price)
tax = 0.1
return price + price * tax
end
calculate_price_with_tax(price)
