成果物の作成2作品目⑥ 予定管理サービス 全体のレイアウトを整理、そしてバグの改善
前々回のモデル作成は3回ほど作り直したり、グラフ部分の作成もも試行錯誤の連続で結構時間が掛かかったのですが、 今回は表示部分なので、割とサクサク進められました。
今回はフォーム画面とスケジュール画面が雑多、かつ不必要な情報も多かったので、整えました。
バグの改善render
昨日気づいたのですが、バグがありました。
render先を変えることで対応。
スケジュール表示画面のレイアウト
まず、スケジュール画面の表示が見辛い構成だったので、bootstrapの形式に従い、classにcontainer,row,col-md-〇〇の入れ子構造を持たせてレイアウトを整え、
またhtmlコード自体も散らかっていたので、成形しました。
<div class=”container”>
<h2>スケジュール</h2>
<div class="row">
<div class= "col-md-4">
<ul class="list-group">
<% @time_shcedule.each do |t| %>
<li class="list-group-item list-group-item-info">
<%= t.time_schedule %> :
<%= t.start_time.slice(11..15) %> : ～
<%= t.end_time.slice(11..15) %>
</li>
<% end %>
</ul>
</div>
<div class= "col-md-8">
<% if @day_schedule.time_schedule.first %>
<%= timeline @chart %>
<% end%>
</div>
</div>
</div>
また新規作成ページとスケジュールページで予定一覧の表示部分は同じコードを使いまわせそうなので、
パーシャル化してコードをすっきりさせておきました。この際、それぞれ違うインスタンス変数を使うので、変数はロケール化しておきました。
パーシャル呼び出し部分
<%= render partial: 'time_schedules/time_schedules_view', locals: { time_schedules: @time_schedules } %>
パーシャル time_schedules/time_schedules_view
<ul class="list-group">
<% time_schedules.each do |t| %>
<li class="list-group-item list-group-item-info">
<%= t.time_schedule %>：
<%= t.start_time.slice(11..15) %> ～
<%= t.end_time.slice(11..15) %>
</li>
<% end %>
</ul>
全体のレイアウト
custom.scssファイルを作り、フォントや、色の指定を行い、背景画像の指定も行いました。
body{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
background-image: image-url('bg.jpg');
}
背景画像は以下のウェブサービスを利用させていただきました。
おしゃれな写真が多く、好きなサイトです。
フリー素材ぱくたそ（www.pakutaso.com）
背景が変わって、ヘッダーが浮き気味だったので、なじませるために色を変えて、半透明にしてみました。
#menu {
a {
color:#000000;
}
background-color: rgba(245,245,245,0.3);
& li a:hover {
background: rgba(205,92,92,0.9);
}
}
時間データの表示の改善
また、グラフ描画に使う関係上、予定の開始時間と終了時間はモデル内に"1900-00-00 00:00:00"という形でstring型で入れてあります。（年と日の部分は使わないので1900-00-00で固定）
このまま表示すると1900-00-00 00:00:00の年と、日、秒のデータが邪魔なので、表示させる際に、12～16行目部分のみ切り出して表示させたいです。
調べてみると、指定の範囲に対応する部分文字列を削除するslice!メソッドがあるらしいので、
これを使ってモデルからデータ取り出し加工する自作メソッドを作ろうと四苦八苦したのですが、
途中でふと、そんな複雑な事をしなくても見える部分だけ変えればいい事に気づき、view表示部にslice!メソッドを使うことにしました。
また、調べるとslice!とは逆に特定に部分だけを抽出してくれるsliceメソッドが有ることに気づいたので、こちらで実装しました。
先程も出ましたこのコードですね
<%= t.start_time.slice(11..15) %> ～
<%= t.end_time.slice(11..15) %>
かなり完成に近づいてきましたね！
今回issueを忘れてしまったために、後からの作成の作成になってしまったのですが、
いつもどおりgit pushしてマージします 。
暫定的にherokuにもデプロイしてみて、試してみましましたが問題なさそうです。
次回はバグをなくすために、バリデーション部分やコントローラのbeforeアクションの細かい部分を作り込んでいき、
また、テスト部分のコーディングや手動テスト、試運転やらを行い、問題がなければ完成に持っていこうと思います
