More than 3 years have passed since last update.

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

Last updated at 2021-06-27Posted at 2021-06-12

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

##今回やったこと

前回記事でbootstrapを導入した際に、既存のCSSが適用されなくなってしまい、一時気力を失ってしまった。
しかし、これまで作ったものをbootstrapのスタイルに置換することで、見た目はこれまでと違うが以降の作業を継続できるようにした。
（未考慮の部分は時間ややる気があるときに整えることにする、後回しともいう）

以下、今回主にクラスなどの部分を編集したスケジュール機能とユーザー機能の画面を示す。

###スケジュール機能

####一覧画面

app/views/schedules/index.html.erb

<h1>チームの予定一覧</h1>
<div class="mx-3 d-block">
	<%= link_to '新規作成', new_schedule_path, class: 'btn btn-primary' %>
</div>
<% if @schedules.blank? %>
  <div class="container mx-auto"><%= "表示できる予定がありません。" %></div>
<% else %>
  <div class="container mx-auto table-responsive">
    <table id="schedules_table" class="table table-striped table-hover table-sm">
      <thead>
        <tr>
          <th scope="col">件名</th>
          <th scope="col">予定日</th>
          <th scope="col">予定の時間</th>
        </tr>
      </thead>
      <tbody>
        <% @schedules.each do |lst| %>
          <tr class="clickable-row" data-href="<%= schedule_path lst.id %>">
            <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>
  </div>
<% end %>

####新規画面

app/views/schedules/new.html.erb

<h1>予定の新規作成</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to '予定一覧へ', schedules_path, class: 'btn btn-primary' %>
  </div>

  <%= form_for @schedules, url: {action: "create"} do |f| %>
    <div class="form-group mb-3">
      <label class="form-label">件名：</label>
      <%= f.text_field :title, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-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="form-group mb-3">
      <label class="form-label">開始時間：</label>
      <%= f.time_select :start_time, class: 'form-control' %>
      &nbsp;～&nbsp;
      <label class="form-label">終了時間：</label>
      <%= f.time_select :end_time , class: 'form-control'%>
      &nbsp;（
      <label class="form-label">集合時間：</label>
      <%= f.time_select :meeting_time, class: 'form-control' %>
      ）
    </div>

    <div class="d-block">
      <%= f.submit "新規作成する", class: 'btn btn-success' %>
    </div>
  <% end %>
</div>

####編集画面

app/views/schedules/edit.html.erb

<h1>予定の編集</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to '予定一覧へ', schedules_path, class: 'btn btn-primary' %>
  </div>

  <%= form_for @schedules, url: {action: "update", id: @schedules.id} do |f| %>
    <div class="form-group mb-3">
      <label class="form-label">件名：</label>
      <%= f.text_field :title, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-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="form-group mb-3">
      <label class="form-label">開始時間：</label>
      <%= f.time_select :start_time, class: 'form-control' %>
      &nbsp;～&nbsp;
      <label class="form-label">終了時間：</label>
      <%= f.time_select :end_time, class: 'form-control' %>
      &nbsp;（
      <label class="form-label">集合時間：</label>
      <%= f.time_select :meeting_time, class: 'form-control' %>
      ）
    </div>

    <div class="d-block">
      <%= f.submit "保存する", class: 'btn btn-success' %>
    </div>
  <% end %>
</div>

####詳細画面

app/views/schedules/show.html.erb

<h1>予定の詳細</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to '予定一覧へ', schedules_path, class: 'btn btn-primary' %>
  </div>

  <div class="form-group mb-3">
    <label class="form-label">件名：</label>
    <%= @schedules.title %>
  </div>
  <div class="form-group mb-3">
    <label class="form-label">予定の日付：</label>
    <%= @schedules.date_of.strftime("%Y年%m月%d日") %>
  </div>
  <div class="form-group mb-3">
    <label class="form-label">開始時間 ～ 終了時間： </label>
    <%= @schedules.start_time.strftime("%H:%M") %>
    &nbsp;～&nbsp;
    <%= @schedules.end_time.strftime("%H:%M") %>
    &nbsp;（
    <label class="form-label">集合時間：</label>
    <%= @schedules.meeting_time.strftime("%H:%M") %>  
    ）
  </div>
  <div class="d-block">
    <%= link_to '編集', edit_schedule_path(@schedules.id), class: 'btn btn-success' %>
    <%= link_to '削除', schedule_path(@schedules.id), method: :delete, class: 'btn btn-danger' %>
  </div>
</div>

###ユーザー機能

####一覧画面

app/views/users/index.html.erb

<h1>メンバーの一覧</h1>
<div class="mx-3 d-block">
  <%= link_to '新規作成', new_user_path, class: 'btn btn-primary' %>
</div>
<% if @users.blank? %>
  <div><%= "表示できるメンバーがいません。" %></div>
<% else %>
  <div class="container mx-auto table-responsive">
    <table class="table table-striped table-hover table-sm">
      <thead>
        <tr>
          <th scope="col">ユーザー名</th>
          <th scope="col">メールアドレス</th>
        </tr>
      </thead>
      <tbody>
        <% @users.each do |lst| %>
          <tr class="clickable-row" data-href="<%= user_path lst.id %>">
            <td><%= lst.name %></td>
            <td><%= lst.email %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
<% end %>

####新規画面

app/views/users/new.html.erb

<h1>ユーザーの新規作成</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to 'ユーザー一覧へ', users_path, class: 'btn btn-primary' %>
  </div>

  <%= form_for @users, url: {action: "create"} do |f| %>
    <div class="form-group mb-3">
      <label class="form-label">ユーザー名：</label>
      <%= f.text_field :name, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">メールアドレス：</label>
      <%= f.email_field :email, size: "40", class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">パスワード：</label>
      <%= f.password_field :password, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">パスワード（確認欄）：</label>
      <%= f.password_field :password_confirmation, class: 'form-control' %>
    </div>

    <div class="d-block">
      <%= f.submit "新規作成する", class: 'btn btn-success' %>
    </div>
  <% end %>
</div>

####編集画面

app/views/users/edit.html.erb

<h1>ユーザーの編集</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to 'ユーザー一覧へ', users_path, class: 'btn btn-primary' %>
  </div>

  <%= form_for @users, url: {action: "update", id: @users.id} do |f| %>
    <div class="form-group mb-3">
      <label class="form-label">ユーザー名：</label>
      <%= f.text_field :name, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">メールアドレス：</label>
      <%= f.email_field :email, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">パスワード：</label>
      <%= f.password_field :password, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">パスワード（確認欄）：</label>
      <%= f.password_field :password_confirmation, class: 'form-control' %>
    </div>

    <div class="d-block">
      <%= f.submit "保存する", class: 'btn btn-success' %>
    </div>
  <% end %>
</div>

####詳細画面

app/views/users/show.html.erb

<h1>ユーザーの詳細</h1>
<div class="container mx-auto">
	<div class="mb-3 d-block">
	  <%= link_to 'ユーザー一覧へ', users_path, class: 'btn btn-primary' %>
	</div>

	<div class="form-group mb-3">
	  <label class="form-label">ユーザー名：</label>
	  <%= @users.name %>
	</div>
	<div class="form-group mb-3">
	  <label class="form-label">メールアドレス：</label>
	  <%= @users.email %>
	</div>
	<div class="form-group mb-3">
	  <label class="form-label">パスワード：</label>
	  <%= "（セキュリティに配慮し、パスワードは非表示です）" %>
	</div>

	<div class="d-block">
	  <%= link_to '編集', edit_user_path(@users.id), class: 'btn btn-success' %>
	  <%= link_to '削除', user_path(@users.id), method: :delete, class: 'btn btn-danger' %>
	</div>
</div>

ちまちましか進められなくて進みが遅いので、できればどこかで時間を作って作業したいと思う。
内容はゼロだけど今回はここまで。

次回の記事>>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

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