演劇の公演では、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ファイルを編集
<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」という名前でファイルを作成します。
<!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」というファイルが作成されていると思います。そこを以下のように編集してみてください。
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」を開きソースコードを以下のようにしてみましょう。
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を以下のように編集てみてください。
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」にアクセスしてみてください。最初は何もデータが入っていないはずです。
適当にデータを入れてみてください。
僕も適当に名前やら楽曲やら入れてみました。ヘルシンキラムダクラブは僕の好きなバンドです。他はかなり適当に入力したデータです。
以上です！間違いなどあればご指摘いただけると幸いです！
参考図書：初心者にも分かりやすくて助かります！
・掌田津耶乃「RubyOnRails5超入門」