ドグサレ初心者のへっぽこビッグウェーブ

地球の底辺にいるゴミがプログラミングとか音楽とかを語るクソブログ

フォームの長さ変えるだけで地獄をみる

なんか最近女性にマウントされることが多いです。めんどくせぇ。


というわけで、ひきつづき見た目の編集。

[ anime_titles/show.html.erb ]

<p>
  <strong>アニメの詳細情報:</strong>
  <%= render partial: 'anime_details/staffandcast', locals: { anime_title: @anime_title, anime_details: @anime_details } %>
</p>

[ anime_titles_controller.rb ]

  def show
    @anime_title = AnimeTitle.find(params[:id])
    @anime_details = @anime_title.anime_details  # @anime_title.[今のパス配下のid] のanime_detailsのみを参照する
  end

と、とりあえずパーシャルぶちこんで表示できた。(_staffandcast.html.erbにはanime_detailsテーブルを表示させてる)

あとは見た目のレイアウトを綺麗にしよう。

リストになっているデータをカラムごとに表示させる

違うテーマのcssを参考に。blacktie.co
このへんはキリがないので一旦ざっくりやって終わらそう。


[ style_b.css ] ※上のテーマから必要なものだけ抜き取って記述。application.css.scssで@importするのを忘れずに!

/* anime_details/_staffandcastで利用 */
.ptb {padding-top: 80px; padding-bottom: 80px;}

.centered {text-align: center}
.mb {margin-bottom: 50px;}
/* grey section */
#g {
    padding-top: 50px;
    padding-bottom: 50px;
    background: #f5f5f5;
}

[ anime_details/_staffandcast.html.erb ]

<dev class="container ptb">
  <div class="row">
    <h2 class="centered mb">スタッフなど</h2>
    <% @anime_details.each do |anime_detail| %>
        <div class="col-md-6">
          <p><%= anime_detail.profile %></p>
        </div><!-- /col-md-6 -->
    <% end %>
  </div><!-- /row -->
</dev><!-- /.container -->

<div id="g">
  <div class="container">
    <div class="row centered">
      <h2>オープニングテーマ</h2>
      <% @anime_details.each do |anime_detail| %>
        <div class="col-md-8 col-md-offset-2">
          <p>artist: <%= anime_detail.op_artist %></p>
          <p>title: <%= anime_detail.op_title %></p><br/>
        </div><!-- /col-md-8 -->
      <% end %>
    </div><!-- /row -->
  </div><!-- /.container -->
</div>

一応これでリストのカラムごとにレコードならべることできるのだけど、絶対スマートじゃないよね。もっといい方法ある気がする。
ついでに各ページへのリンクがおかしかったので修正。ネストされてる部分のリンクはだいたいこんな感じ。

<%= link_to 'Show', action: :show, anime_title_id: @anime_detail.anime_title_id, id: @anime_detail.id %> |
<%= link_to 'Back', action: :index, anime_title_id: @anime_detail.anime_title_id %>

フォームを長くしたい

http://g.s9t.jp/data/b64313e0aed88f76696dd3a5b13789f3.png
フォーム短すぎてイケてないので修正。以前にどっかのサイト見ながらやったやつやこれ。www.ohmyenter.com

色々やってみたけどsimple_formじゃないとうまく動かないぽいぞ。。。けどbootstrap-sass入れてるからlessの適用方法じゃどうにもならんしな。。。

とりあえず色々見た結果、まずはプロジェクトにインストールする必要があるらしい。

> rails g simple_form:install --bootstrap
      create  config/initializers/simple_form.rb
      create  config/initializers/simple_form_bootstrap.rb
       exist  config/locales
      create  config/locales/simple_form.en.yml
      create  lib/templates/erb/scaffold/_form.html.erb
===============================================================================

  Be sure to have a copy of the Bootstrap stylesheet available on your
  application, you can get it on http://getbootstrap.com/.

  Inside your views, use the 'simple_form_for' with one of the Bootstrap form
  classes, '.form-horizontal' or '.form-inline', as the following:

    = simple_form_for(@user, html: { class: 'form-horizontal' }) do |form|

===============================================================================

ruby-rails.hatenadiary.com

...コードすっきりさせるだけでフィールドの長さは関係ないご様子。


クラスにwidth指定してみたけどどうもうまくいかず。ビューヘルパーのスタイル指定の方が優先されている疑惑。
これ以上いじってもアレすぎてアレなので、simple_formに書き換える。ruby-rails.hatenadiary.com
www.ohmyenter.com
www.ohmyenter.com

このあたりを参考に書き換え。

<%= simple_form_for [@anime_title, @anime_detail] do |f| %>
    <% @anime_detail.anime_title_id = @anime_title.id %>
    <%= f.input :anime_title_id, :readonly => true %>
    <%= f.input :profile %>
    <%= f.input :op_title %>
    <%= f.input :op_artist %>
    <%= f.input :op_movie %>
    <%= f.input :profile %>
    <%= f.input :ed_title %>
    <%= f.input :ed_artist %>
    <%= f.input :ed_movie %>
    <div class="actions">
      <%= f.submit %>
    </div>
<% end %>

simple_formだとついでに空テーブルができないようにバリデーションもつけれるので、モデルクラスに書いておく。
[ models/anime_detail.rb ]

...
  validates :profile, presence: true  # プロフィールが空の場合エラー
...

横幅100%なのをどうにかしようと'form-horizontal'を入れてみる。
なぜ一緒にwrapperを記述する必要あるのかよくわかってなかったが、解説みっけた↓techracho.bpsinc.jp

<%= simple_form_for [@anime_title, @anime_detail], wrapper: "horizontal_form", :html => { :class => 'form-horizontal' } do |f| %>

すると幅がブラウザを微妙にはみ出すという事象が発生。

f:id:masterkei:20150914145825p:plain
ちょっとだけ横に動くのが非常に気持ち悪い。なんとかならんのかこれ。

ruby-rails.hatenadiary.com
formそれぞれの属性を指定する方法を見つけた。大きく外枠にform-horizontal入れるだけではなくて、それぞれのフォームへもform-groupクラスを指定すればよいっぽい。

http://g.s9t.jp/data/dc6f56f1f4ae03217014f7d87f60e3ab.png

上のフォームがform-group指定した状態。こんな感じで変わりました。
他にも適用。anime_title_idは表示のみなのでフォームは最小限に。submitボタンへのクラス指定もちょっと変えてみる。

<%= simple_form_for [@anime_title, @anime_detail], wrapper: "horizontal_form", :html => { :class => 'form-horizontal' } do |f| %>
        <% @anime_detail.anime_title_id = @anime_title.id %>
        <%= f.input :anime_title_id, :readonly => true, input_html:{ style: 'width:50px;'} %>
        <%= f.input :profile, label: "プロフィール", input_html:{ class: 'form-group'} %>
        <%= f.input :op_title, label: "オープニングテーマ", input_html:{ class: 'form-group'} %>
        <%= f.input :op_artist, label: "OPアーティスト", input_html:{ class: 'form-group'} %>
        <%= f.input :op_movie, label: "OP動画", hint: "埋め込み用URLを入力", input_html:{ class: 'form-group'} %>
        <%= f.input :ed_title, label: "エンディングテーマ", input_html:{ class: 'form-group'} %>
        <%= f.input :ed_artist, label: "EDアーティスト", input_html:{ class: 'form-group'} %>
        <%= f.input :ed_movie, label: "ED動画", hint: "埋め込み用URLを入力", input_html:{ class: 'form-group'} %>
        <div class="actions">
          <%= f.submit :class => 'btn-primary' %>
        </div>
<% end %>

なんかまだちょっと動くな。。。まぁ、これ以上やると長くなるのでとりあえずここまで。

フォームを縦に長くする

rows使えば一瞬でした

<%= f.input :profile, label: "プロフィール", input_html:{ class: 'form-group', :rows => 5 } %>

フォーム、例外検証したらエラー発生した。。。なんなんだもう!原因わからn!



残課題
  • detail情報を適当な形で表示する(youtube動画embed)
  • anime_title#show内にdetail情報も入れ込む(パーシャル利用)
  • レイアウトよくする
  • フォームの例外処理エラー直す