草野球の出欠確認Webアプリを作ろう！　part.4

これから作っていく簡単なWebアプリの作成メモ（自分の備忘）です。
自分用なのであまり凝りすぎないように書いていきたい。

[<<前回の記事](https://qiita.com/tomodachi_uec/items/a8438a0f027260b8578d)

##今回やったこと

###スケジュールのデータを作って見た目を確認

コンソール経由で`Schedules`モデルのデータを準備する。
（date型やtime型は手入力できるか自信なかったので、`Date`クラスなどを利用した）
※以下の記事を参考にした。
[Railsタイムゾーンまとめ](https://qiita.com/aosho235/items/a31b895ce46ee5d3b444)

```rb:config/application.rb
class Application < Rails::Application
    （略）
    config.time_zone = "Tokyo"
    config.active_record.default_timezone = :local
    （略）
  end
```

```bash
$ rails c
> date = Date.today + 365
> time1 = Time.zone.now
> time2 = time1 + (3600 * 3)
> time3 = time1 - 1800
> schedule1 = Schedule.new(title:"テスト予定１",date_of:date,start_time:time1,end_time:time2,meeting_time:time3)
> schedule1.save
```

（`title`を変えてコンソールでの入力を繰り返すことで、スケジュールのデータを複数作れる）
（私はそこまで徹底できないけど、大量のスケジュールデータを作成したい方向けにコピペできるスクリプト例も用意した）

```rb:app/helpers/schedules_helper.rb
module SchedulesHelper
  
  # 動作確認用のスケジュールデータを複数個作成するメソッド
  def create_demo_schedules(n)

    # 引数が数字以外だったら終了
    if n =~ /^\d+$/
      n = n.to_i
    elsif n.class == "String".class
      return false
    end

    count = 0

    n.times do
      count += 1

      date1 = Date.today + 364 + count
      time1 = Time.zone.now
      time2 = time1 + (3600 * 3)
      time3 = time1 - 1800
      title = "テスト予定#{count.to_s.tr("0-9","０-９")}"

      demo_schedule = Schedule.new(
                                    title:        title,
                                    date_of:      date1,
                                    start_time:   time1,
                                    end_time:     time2,
                                    meeting_time: time3
                                  )
      demo_schedule.save
    end

    return true
  end
end
```

```bash
$ rails c
> include SchedulesHelper
> create_demo_schedules(100)
```

上のようにして１００件のダミーデータを作成できる。
※ほんとうは自動テストとして、RspecのFactoryBotで作成して動かすのがいいのでしょう。
　あとでやるつもりです。

この状態で動作確認すると、以下のようになった。
![Web キャプチャ_29-4-2021_173214_localhost.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/8dff73a5-c33c-389b-38a9-4b2926c8f849.jpeg)

時間が確認できないので、すこしviewを変更する。
時間の表示について以下の記事を参考にした。
[Time型のデータの値を、時刻部分だけ表示する](https://qiita.com/kota-shidara/items/d26ea376023c2ab50573)

```erb:views/schedules/index.html.erb
<table align="center">
  <thead>
    <tr>
      <th>件名</th>
      <th>予定日</th>
      <th>予定の時間</th>
    </tr>
  </thead>
  <tbody>
    <% @schedules.each do |lst| %>
      <tr>
        <td><%= lst.title %></td>
        <td><%= lst.date_of %></td>
        <td><%= lst.start_time.strftime('%H:%M') %> ～ <%= lst.end_time.strftime('%H:%M') %></td>
      </tr>
    <% end %>
  </tbody>
</table>
```

これで以下のような見た目になる。
![Web キャプチャ_29-4-2021_1836_localhost.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/8eeeb657-7b06-43ba-c8b9-05a34cfb45d5.jpeg)

まあ最低限ならこれでよしとする。
つぎは、予定の新規作成や編集をさせたい。

###スケジュールの新規作成
　
まずはviewから、つながりを用意しておく。

```erb:views/schedules/index.html.erb
<h1>チームの予定一覧</h1>
<div class="row_line">
  <%= link_to '新規作成', new_schedule_path, class: 'btn primary-btn' %>
</div>
<% if @schedules.blank? %>
（以下略）
```

![Web キャプチャ_29-4-2021_19935_localhost.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/af2c0bc0-c511-a883-19b4-2885b123855d.jpeg)

新規作成側のviewも作成する。

```erb:views/shedules/new.html.erb
<h1>予定の新規作成</h1>
<div class="row_line">
  <%= link_to '予定一覧へ', schedules_path, class: 'btn primary-btn' %>
</div>

<%= form_for @schedules, url: {action: "create"} do |f| %>
  <div class="row_line">
    <label>件名：</label>
    <%= f.text_field :title %>
  </div>
  <div class="row_line">
    <label>予定の日付：</label>
    <%= f.date_select :date_of %>
  </div>
  <div class="row_line">
    <label>開始時間：</label>
    <%= f.time_select :start_time %>
  </div>
  <div class="row_line">
    <label>終了時間：</label>
    <%= f.time_select :end_time %>
  </div>
  <div class="row_line">
    <label>集合時間：</label>
    <%= f.time_select :meeting_time %>
  </div>
  <div class="row_line">
    <%= f.submit "新規作成する" %>
  </div>
<% end %>
```

```rb:controllers/schedules_controller.rb
def new
  @schedules = Schedule.new
end
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/78d0603a-8956-0106-2195-11cbc9061537.png)

これだと表示が落ち着かないので、さすがに私でもパッとできる程度に整える。
※以下の記事を参考にした。
[【Rails】date_selectタグの使い方メモ](https://qiita.com/ozackiee/items/3c027d07cdeb61df6029)
[Rails の date_select でつくるセレクトボックスを「年」「月」「日」で区切る](https://blog.inouetakuya.info/entry/2014/01/31/233000)

```erb:views/shedules/new.html.erb
<%= form_for @schedules, url: {action: "create"} do |f| %>
  <div class="row_line">
    <label>件名：</label>
    <%= f.text_field :title %>
  </div>
  <div class="row_line">
    <label>予定の日付：</label>
    <%= raw sprintf( f.date_select(:date_of, 
                                    use_month_numbers: true,
                                    order:             [:year,:month,:day],
                                    selected:          Time.zone.now,
                                    start_year:        Time.zone.now.year + 5,
                                    end_year:          Time.zone.now.year,
                                    date_separator:    '%s'
                                  ),'年','月') + '日'
                                %>
  </div>
  <div class="row_line">
    <label>開始時間：</label>
    <%= f.time_select :start_time %>
    &nbsp;～&nbsp;
    <label>終了時間：</label>
    <%= f.time_select :end_time %>
    &nbsp;（
    <label>集合時間：</label>
    <%= f.time_select :meeting_time %>
    ）
  </div>

  <div class="row_line">
    <%= f.submit "新規作成する" %>
  </div>
<% end %>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/2d1716e7-a7ff-f077-c209-95b3494e9855.png)

CSSやbootstrapを入れていないなりに、最初よりはマシになった（感じ方には個人差があります）。

あとはviewに入力した値をDBに登録できるようにする。
そのために以下を実施した。
※以下は参考にしたWeb記事。
[【Rails】permitメソッドを使ってストロングパラメーターにしよう](https://pikawaka.com/rails/permit)

```rb:controllers/schedules_controller.rb
（略）
def create
  @schedules = Schedule.new(schedules_params)
  if @schedules.save
    redirect_to schedule_path(@schedules), notice: "予定を新規作成しました。"
  else
    render :new
  end
end
（略）
private
  def schedules_params
    params.require(:schedule).permit(
                                     :title,
                                     :date_of,
                                     :start_time,
                                     :end_time,
                                     :meeting_time
                                    )
  end
（略）
```

せっかくなので、登録後に表示するshowアクションとそのviewも整える。

```rb:controllers/schedules_controller.rb
（前後略）
def show
  @schedules = Schedule.find(params[:id])
end
```

```erb:views/schedules/show.html.erb
<h1>予定の詳細</h1>
<div class="row_line">
  <%= link_to '予定一覧へ', schedules_path, class: 'btn primary-btn' %>
</div>

<div class="row_line">
  <label>件名：</label>
  <%= @schedules.title %>
</div>
<div class="row_line">
  <label>予定の日付：</label>
  <%= @schedules.date_of.strftime("%Y年%m月%d日") %>
</div>
<div class="row_line">
  <label>開始時間 ～ 終了時間： </label>
  <%= @schedules.start_time.strftime("%H:%M") %>
  &nbsp;～&nbsp;
  <%= @schedules.end_time.strftime("%H:%M") %>
  &nbsp;（
  <label>集合時間：</label>
  <%= @schedules.meeting_time.strftime("%H:%M") %>  
  ）
</div>
```

showアクションまわりの動作を確認する。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/81345235-5245-38d9-14d8-cf4dfbca640b.png)

まあ動いたので、ひとまずよしとする。
（個人的には「04月」の表記が気に入らないが、修正の労力があったら機能実装に振りたい気持ち）

疲れたので今日はここまで。
（BootstrapやRspecをはやく導入しなければ...）

[次回の記事>>](https://qiita.com/tomodachi_uec/items/2dab415fe63f91b116bf)