【Rails】データベースを使わずお芝居のMリストを作る

演劇の公演では、bgmやオープニングの際に音楽、通称M(Musicの略)を使います。
お芝居を見ていると、「この曲良いな、また聞きたいな」って思うことが多々あります。
きっと、これは演劇だけでなく映画などについても同じことが言えますよね。
ということで、いつかユーザー投稿型のWEBアプリを作るためにまずは簡単なMリストアプリを作ろうと思います。モデルとかも使っていない初歩的なものです。


#Step1.Railsアプリを作成

```
 $ cd desktop
 $ rails new Mlist
```

Railsアプリケーションを作成しておきます。

#Step2.コントローラーを作成

```
 $ rails generate controller music index 
```
dengonbanと言う名前でコントローラーを作っています。名前の後に、indexと言うものがありますが、これはデフォルトで用意しておくアクションです。

#Step3.Viewsフォルダのindex.html.erbファイルを編集

```Views/music/index.html.erb
<table class="form">
 <%= form_tag(controller: "music", action: "index") do %>
  <tr>
   <td>名前：</td>
   <td><%= text_field_tag("name") %></td>
  </tr>
  <tr>
   <td>公演名</td>
   <td><%= text_field_tag("performancename") %></td>
  </tr>
  <tr>
   <td>楽曲</td>
   <td><%= text_area_tag("msg",'',size: "50x3") %></td>
  </tr>
  <tr>
   <td></td>
   <td><%= submit_tag("Click") %></td>
  </tr>
 <% end %>
</table>

<table class="dengon">
  <tr>
   <th style="width:50%">楽曲</th>
   <th>名前</th>
   <th>公演名</th>
   <th>投稿日時</th>
  </tr>
 <% @dengon_data.each do |key,obj| %>
  <tr>
   <td class="msg"><%= obj['msg']%></td>
　　　　　　<td class="name"><%= obj['name']%></td>
   <td class="performancename"><%= obj['performancename']%></td>
   <td class="time"><%= Time.at(key.to_i) %></td>
  </tr>
 <% end %>
</table>
```

ここでは、@dengon_dataと言うインスタンス変数の中身を取り出してテーブルのセルとして記述するといったことを繰り返しています。
@dengon_dataは「ハッシュ」のデータです。ハッシュというのは、それぞれの値に名前をつけて保管する配列のようなもの。

投稿したデータはハッシュとしてまとめて保管されています。このハッシュから順にキー(名前)と値を取り出し処理していくのに、ここではeachというメソッドを使っています。

```
<<ハッシュ>> .each do |変数1 , 変数2|
 -----------取り出した値の処理----
end
```

ハッシュから順に値を取り出し、その値のキーを変数１に、取り出した値を変数２に代入してendまでの処理を実行します。

###【おまけ】ハッシュをテーブルに表示する基本コード

```
<table>
<<ハッシュ>> .each do |key , obj|
 <tr>
     <td><%= obj[ 表示する項目 ] %></td>
　　</tr>
end
</table>
```
Time.atについて補足します。

```
<%= Time.at(key.to_i) %>
```
@dengon_dataではキーはその投稿がされた日時のタイムスタンプを示す整数が設定されます。
「Time.at」というメソッドは、引数のタイムスタンプからTimeオブジェクトを生成するものです。引数にキーのタイムスタンプを整数として渡すと、その値を元にオブジェクトを作成し、それを書き出します。ちなみに、「to_i」は整数として値を取り出すメソッド。

#Step4.レイアウトを作る

「layouts」フォルダの中に新たに、「mlist.html.erb」という名前でファイルを作成します。

```layouts/mlist.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Mlist</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <h1 class="title">Mlist</h1>
    <%= yield %>
    <div class="footer">copywriter Godzilla.2018</div>
  </body>
</html>

```

#Step5.スタイルシートを用意する

「stylesheets」フォルダの中に、「music.scss」というファイルが作成されていると思います。そこを以下のように編集してみてください。

```stylesheets/music.scss

h1.title{
 font-size: 20pt;
 color: #999;
}

.form{
 margin: 50px 0px;
}

.form tr td{
 color: #999;
 padding: 0px 10px;
 font-size:14pt;
}

th {
 background-color: #999;
 color: #eee;
 font-size: 14pt;
 padding: 2px;
}

.dengon tr td{
 background-color: #eee;
 color: #666;
 padding: 2px;
}

td.msg{
 font-size:12pt;
}

td.name{
 font-size:12pt;
}

td.performancename{
 font-size:12pt;
}

td.time{
 font-size:9pt;
}

div.footer{
 border-style:solid;
 border-width: 1px 0px 0px 0px;
 border-color: #999;
 margin: 50px 0px 0px 0px;
 padding: 3px 0px 0px 0px;
 font-color: #999;
 font-size: 12pt;
 text-align:right;
 font-size:9pt;
}
```

#Step6.コントローラーを作成する

次に、コントローラーファイルの編集に移ります。
「controllers」フォルダ内にある「music_controller.rb」を開きソースコードを以下のようにしてみましょう。

```music_controller.rb
class MusicController < ApplicationController
  layout 'mlist'
 
  def initialize
      super
      begin 
         @dengon_data = JSON.parse(File.read("data.txt"))
      rescue
         @dengon_data = Hash.new
      end
      @dengon_data.each do |key,obj|
         if Time.now.to_i - key.to_i > 24*60*60 then
           @dengon_data.delete(key)
         end
      end
       File.write("data.txt" , @dengon_data.to_json)
      end

      def index
        if request.post? then
          obj = MyData.new(msg:params['msg'], name:params['name'],performancename:params['performancename'])
          @dengon_data[Time.now.to_i] = obj
          data = @dengon_data.to_json
          File.write("data.txt",data)
          @dengon_data = JSON.parse(data)
        end
      end
end

class MyData
 attr_accessor :name
 attr_accessor :performancename
 attr_accessor :msg

 def initialize msg:msg, name:name, performancename
    self.name = name
    self.performancename = performancename
    self.msg = msg
 end

end

```


#Step7.ルーティングを設定する

config/routes.rbを以下のように編集てみてください。

```config/routes.rb
Rails.application.routes.draw do
  get 'music', to: 'music#index'
  post 'music', to: 'music#index'
  get 'music/index'
  post 'music/index'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end


```

以上完了したら、「rails s」をして、「localhost:3000/music」にアクセスしてみてください。最初は何もデータが入っていないはずです。
適当にデータを入れてみてください。

![Mlist_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/200663/3f4643f8-9d72-c3c9-dfb1-3899ce0b3c48.png)

僕も適当に名前やら楽曲やら入れてみました。ヘルシンキラムダクラブは僕の好きなバンドです。他はかなり適当に入力したデータです。

以上です！間違いなどあればご指摘いただけると幸いです！

>参考図書：初心者にも分かりやすくて助かります！
・掌田津耶乃「RubyOnRails5超入門」