おはようございます。現在、JRuby on Railsにてチャットアプリの作成中です。

毎日作りながら書くというのは、それなりに頭と体を使うようで、なかなか大変だなあと今更ながら実感しました。エネルギーをなるべく節約しつつも、少しだけ書いていきます。
今日は見た目の部分を作ってみようと思います。

0. まず、どこから手を付けるか

見た目の部分についてどこから手を付けるかですが、先日、以下の記事の中でも触れたように、

最初、以下の感じの画面を作ろうと思っていて、画面の右側部分から手を付けようと思います。

それで、まずはこんな感じの簡単な画面を作ろうと思いますので、よかったらご覧ください。

1. chatコントローラーの作成

今日はchatというコントローラーを作成します。コントローラーについては以前に記事を記載したことがありますので、良ければそちらの記事もご覧いただけましたら幸いです。（以下にリンクを貼ります。）

コントローラーを作成するときは、コマンドプロンプトを起動し、作業場所（カレントディレクトリ）をRailsアプリケーションのプロジェクトデータまで移動させた後、以下のコマンドを入力します。

jruby -S bundle _1.17.3_ exec rails generate controller chat index

コマンド中の「chat」はコントローラー名、「index」はアクション名です。
コマンドプロンプトから実際にコマンドを入力すると以下のような表示が出るかと思います。

Visual Studio Codeを起動して、Railsアプリケーションのプロジェクトデータのある場所を開くと、「app」⇒「controllers」フォルダの下に「chat_controller.rb」が追加されています。

また、「app」⇒「views」⇒「chat」フォルダの下に「index.html.erb」が追加されていますが、この辺りはHTML（＆Ruby）部分を書くところになります。

さらに、「app」⇒「assets」⇒「stylesheets」フォルダの下に「chat.scss」が追加されています。この辺りはCSS部分を書いていくところになりますが、CSSはCSSでもSCSSであり、CSSより高機能なものになっています。

※SCSSについては以下の記事にて解説があります。

なお、「app」⇒「assets」⇒「javascripts」フォルダの下にも「chat.coffee」が追加されていますが…
わたしはいつも「coffee」を利用せずに「javascript」を直接書いているため、今回は利用しないことにします…。

2. HTML部分の編集

前述の1章でchatコントローラーを作成したら、HTML部分を編集します。
先ほども載せましたが、以下に再掲しますね。

上のような画面の構造を実現する際、HTMLの書き方に合わせると、以下のようなHTML構造図（※わたしが作った造語です）になります。（横方向に並べていたものが、縦方向に揃えるように改めて並べ直したような感じです。）

上の図を見ていただくと、「自由スペース」の下に「入力テキストボックス」を直接配置せず、間に「入力テキストボックスを配置するための領域」を1クッション挟んでいますが、今までの経験上、そうした方が、後で自由に変更が効きやすくなるというのがあるため、そのようにしております。（詳しくはどこかで解説できればと思います。）

「履歴スペース」の下にも「テーブル」を直接置かずに、間に「入力結果を表示するための領域」を1クッション挟んでいますが、上記と同様の理由です。

HTML部分の編集は、前章の1で開いたVisual Studio Codeの画面から、「app」⇒「views」⇒「chat」フォルダの下の「index.html.erb」に対して編集を行ないます。

「index.html.erb」は最初、以下のような内容になっているかと思いますが、

1  <h1>Chat#index</h1>
2  <p>Find me in app/views/chat/index.html.erb</p>

それらの内容は一旦全部消してしまっておいて、以下のように変更します。

1  <div class = "real_chat">
2      <div id = "free_space">
3          <div id = "input_area">
4              <textarea name="comment"></textarea>
5          </div>
6      </div>
7  
8      <div id = "history_space">
9          <div id = "output_area">
10             <table id = "result">
11             </table>
12         </div>
13     </div>
14 </div>

各行のコードは先ほど載せたHTML構造図ともリンクしております。また、コードの中にdivタグなど使っていると思いますが、以下にそれぞれのタグの概要を載せます。

・divタグ・・・各コントロール（テキストエリアやテーブル等）をひとまとめする（グループ化する）ための区切りに使用するもの。

・textareaタグ・・・テキストエリアを配置するときに使用するもの。文字を複数行で入力可能。

・tableタグ・・・テーブル（表）を配置するときに使用するもの。tableタグの中に、ヘッダーやセルなど色々と挿入する。

HTML部分の編集については以上となります。

おわりに

ここまで読んでくださってありがとうございました。
次回はCSS部分の編集を行なおうと思います。
次回もよろしくお願いいたします。