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

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

ビューの方をいろいろいじる

うまくやったらとりあえず画像出しまくることはできた。
テンプレの画像読んでるところにはめこんだだけ。

qiita.com
を参考。


ページの構成として、再帰的に呼び出すようなものは、全部部分テンプレートにしちゃった方がいいみたい。
例えば、今作ってるのだと、

  • トップページ
    • タイトルリストを呼び出す
      • リストの画像をトリミングして表示する

みたいな感じで、機能ごとに切るべし!切るべし!

で、これが多くなって部分テンプレの呼び出しが100回とか200回とかになってきたら、キャッシュの話になるけど、まだ今はそこまで考えなくてもよいもよう。


いろいろやってたところ、CSSを使うことでトリミングすることができたので、「リストの画像をトリミングして表示する」テンプレートは必要なかった。。。
まぁ、多分実際に画像保存してトリミングするときには作ることになるのでしょうが。

[ home/index.html.erb ]

    <%= render partial: 'anime_titles/highlight', locals: { anime_titles: @anime_titles } %>

[ anime_titles/_highlight.html.erb ]

<ul>
  <% anime_titles.each do |anime_title| %>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery thumbsquare">
      <%= link_to image_tag(anime_title.icon_url), controller: :anime_titles, action: :show, id: anime_title.id %>
    </div>
  <% end %>
</ul>

[ anime_title.scss ]

// topの画像トリミング
.thumbsquare{
  overflow: hidden;
  background-size: cover;
  height: 250px;
}

overflow:hiddenにしたdivで囲み、はみ出た部分を見えないようにすることで擬似的に同じサイズの画像を並べる。




しかーし。データ渡しの方法を教えてもらった。CSSではなく直接erbファイルにstyleを記述して、ruby形式で引用すればよいみたい。
せっかくだから使おう。ついでにタイトルのボタンもつけてみた。

[ anime_titles/_highlight.html.erb ]

<ul>
  <% anime_titles.each do |anime_title| %>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery backgroundbrink">
      <div style = "background: url(<%= anime_title.icon_url %>) 50% 0% no-repeat; width: auto; height: 250px;">
        <a type="button" class="btn btn-info thumbbutton" href="#"><%= anime_title.title %></a>
      </div>
    </div>
  <% end %>
</ul>

backgroundのとこは個別プロパティ切り出してcssに書いた方がいいんだろうけど、まぁとりあえず。

[ anime_title.scss ]

// サムネにした背景画像をマウスオーバーで光らせる
.backgroundbrink:hover{
  opacity: 0.8;
}

// サムネのボタン
.thumbbutton{
  position: absolute;
  //top: 0;
  bottom: 0;
  left: 20%;
  right: 20%;
  margin: auto;
}



データ渡しのハウツーちゃんと教えてもらった。タグにデータ突っ込めるみたい。
今後スクリプトの勉強をしつつこっちに置き換えよう。

# hamlの記述例
%a{href: 'http://www.google.com'}
  ほげ
=> <a href="http://www.google.com">ほげ</a>

#で、haml記述で、divにデータの渡し方を書くとこうなる
%div{data: {foo: 1, bar: 2, hoge_fuga: 3}

=> <div data-foo="1" data-bar="2", data-hoge-fuga="3"></div>
$('div').data('foo') -> 1
$('div').data('hoge-fuga') -> 2

#例えば 動画を埋め込むときだとこうなる
<video src="http://www.youtube.com/v/HogeFuga" data-duration="30" data-artist-name="Aice5"></video>

#で、hamlでdivに以下のようにデータの枠を設定して
%div.thumb{data: {image-src: image.src}}

#coffeescriptを使って、データに値を突っ込んでいく、というやり方がある。
:coffeescript
  $('.thumb').each ->
    $this.css('background-image', $this.data('image-src'))

難しいのでとりあえず今はメモだけ。