どなブロ

Ruby, Rails, その他気になったこととか思ったこととか

個人開発日誌 -3- 練習決め機能の画面とか

個人開発 Ruby on Rails

あまり「何を作る！」とか明示しないでやった事そのまま書く事にしました。
とりあえずはスケジュール合わせ＝練習決め機能がメインです。

練習決め機能の画面追加

  • テスト追加
    とりあえずURLgetして表示されるってだけ
test "should get schedule" do
  get schedule_url
  assert_response :success
end


  • route.rbにルート、コントローラにアクションを追加
get '/schedule', to:'pages#schedule'

def schedule
end


  • ビューを追加
    homeと同じapp/views/pagesにscheduleのビューを追加します。
$ touch app/views/pages/schedule.html.erb


これでテストも通るようになり、最低限必要な物は揃いました。

schedule画面基本レイアウト作成

練習決め機能のための画面をいじっていきます。
と言っても、ふんわり考えていたんですがあまり具体的な所まで固まっておらず…とりあえずテーブルで、列：月曜～日曜、行：1限～7'限までの表を作ります。

  • schedule.html.erb
<div id="container">
  <%= image_tag 'LSS_logo01.png', :id => "home-logo"%>
  <div id="table-wrap">
      <table id="schedule-table">
          <tr>
              <td>＼</td>
              <td>月</td>
              <td>火</td>
              <td>水</td>
              <td>木</td>
              <td>金</td>
              <td>土</td>
              <td>日</td>
          </tr>
          <tr>
              <td>1</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td>2</td>
              <td></td>
              ...
          <tr>
              <td>7'</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
      </table>
  </div>
</div>

控えめに言ってヤバい…
テーブル作るの、絶対なんかもっと上手いやり方があるよな…と思いつつ、とりあえずテーブル要素はパーシャルとして<%= render%>で呼び出すようにします。

  • _table.html.erb
<div id="table-wrap">
      <table id="schedule-table">
          <tr>
              <td>＼</td>
              <td>月</td>
              ......
      </table>
  </div>
  • schedule.html.erb
<div id="container">
  <%= image_tag 'LSS_logo01.png', :id => "home-logo"%>
  <%= render 'table'%>
</div>

めちゃくちゃスッキリしましたね。ありがたいです。

あとはテーブルにプルダウンのボックスを入れてみます。調べたら<%= select %>というのが使えるようなので、 それで作ってみます。

<%= select :schedule, :name, [["○", "○"], ["△","△"], ["×", "×"]], :include_blank => true %>

これをテーブルの各マスに入れて、各項で○△×を選択できるようになりました。

f:id:andna0410:20180525085121p:plain

いや～なんだこのしょっぱい画面は…泣
UIゴミ過ぎますね、どうにかせねば…課題として残しておきます。

homeの画像の入れ方の修正

あと急に逸れますが、元々homeに適当に入れてた画像はcssのbackgroundで入れてたんですが、imgタグで入れた方がやりやすくていいかも…と思ったので変更します。
railsのイメージタグ<%= image_tag %>を使ってimgタグを作るようにします。

<div id="container">
  <%= image_tag 'LSS_logo01.png', :id => "home-logo"%>
  <br/>
  <%= image_tag 'band.png', :id => "band-img"%>
  <p id="home-msg">ライブのもろもろをサポートするよ！</p>
  <%= link_to "schedule", schedule_path %>
</div>

画像並んでるとこの改行は力技ですがこんな感じで。

今回はこんなところです～。
適当に画面作っていてあまりにしょぼいUIができて絶望しているので、何かbootstrap的なCSSフレームワークでも入れようかな～とか考えています。
あとjsのフレームワークやライブラリも試してみたく。vueかreactをやってみたいので、そのどちらか。両方とも単体でチュートリアルでもやってみて決めようかな。などなど…

裏側の実装も早いうちに取りかかろうと思います！

以上