Help us understand the problem. What is going on with this article?

学習記録6 rails(4) ビュー レイアウトの変更

More than 1 year has passed since last update.

2019/03/22 Ruby on rails の学習記録(4)です。

毎日投稿続けてみると意外とできるもんですね。
どこかでアウトプットに集中できない期間が訪れるとは思いますが、できる限り続けようと思っています!

アドバイスありましたらお気軽にコメントお待ちしております!
 
 
 

ビューの表示

ビューに表示したい情報をコントローラへ定義

  • コントローラのアクション内に定義したインスタンス変数は、そのアクションが表示するビューないで利用することができる。
app/controlers/samples_controller.rb
(例)
class SamplesController < ApplicationController
  def index
    @sample = "Hello World!"
  end
end
  • インスタンス変数@samplesamples_controllerindexアクションの中で定義すると、indexアクションに対応したビューであるapp/views/samples/index.html.erbの中で利用できるようになる。
  • Railsの見た目用のファイルであるerbファイルの中でRubyコードを利用する場合は<%= %>という記述で囲う必要がある。
app/views/sample/index.html.erb
(例)
<%= @sample %>

 
 
 

【モデルを利用したデータ表示】

データベースから1つレコードを取ってきてビューに表示してみる

app/controlers/tweets_controller.rb
(例)
class SamplesController < ApplicationController
  def index
    @sample = Sample.find(1)
    # @sample という変数に samplesテーブルのid1番のレコードを代入する
  end
end
app/views/tweets/index.html.erb
(例)
<div class="contents row">
  <p><%= @sample.text %></p>
  <!-- @sample つまりsamplesテーブルのid1番のレコード
       についてのtextカラムを記述する -->
</div>

プロパティ値

  • プロパティ値とは各カラムに保存されている値のこと

複数のデータをビューに表示する

  • ビューにsamplesテーブルの全てのレコードがインスタンスの配列として受け渡される。
app/controlers/tweets_controller.rb
(例)
class SamplesController < ApplicationController
  def index
    @samples = Sample.all
  end
end
app/views/tweets/index.html.erb
(例)
<div class="contents row" >
  <% @samples.each do |sample| %>
    <p><%= sample.text %></p>
  <% end %>
</div>
  • このようにするとeachメソッドのdoendで囲まれた部分を、@samplesのレコードの数だけ繰り返し表示するようになる。

 
 

【レイアウトを変更する】

ヘッダー

  • ヘッダー部は全ページ共通なので見た目の雛形であるapplication.html.erbに記載する。

simple_format

  • simple_formatメソッドは
    • 1. 改行は<br/>を付与
    • 2. 文字列を<p>で括る
  • デフォルトの状態ではrailsは文字列の改行を読み込まず、改行した状態で文章を表示させられないため、simple_formatメソッドを使う必要がある。
app/views/samples/index.html.erb
(例)
  <div class="contents row" >
    <% @samples.each do |sample| %>
      <div class="content_post" style="background-image: url(<%= sample.image %>);">
        <%= simple_format(sample.text) %>
        <span class="name"><%= sample.name %></span>
      </div>
    <% end %>
  </div>

ヘルパーメソッド

  • simple_formatのように、viewでHTMLタグを出現させたりテキストを加工するためにあらかじめ用意されているメソッド。
  • 他にもform_taglink_toなどがある。

stylesheet_link_tag

  • CSSファイルを適用するリファレンス。
  • CSSファイルはapp/assets/stylesheetsというディレクトリに配置する。
app/views/layouts/application.html.erb
(例)
  <head>
    <title>SampleSite</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>

require_tree

  • application.cssにはどのcssを読み込むかという設定が書いてあるが、require_treeには引数として与えられたディレクトリ以下のcssファイルをアルファベット順にすべて読み込むという意味がある。
  • 引数.(ドット)はカレントディレクトリを表す。
  • これによりapp/assets/stylesheetsというディレクトリにあるcssファイルはすべて読み込まれることになる。
app/assets/stylesheets/application.css
/*
 ## 中略 ##
 *
 *= require_tree . ← # ドットを忘れずに
 *= require_self
 */

フォントファイルの適用

  • Railsでフォントを読み込むためにはapp/assets/fontsというディレクトリにフォントファイルを配置し、CSSファイルにフォントファイルの読み込みを記述する必要がある。
yosaprog
Rails + Vue.js でBtoBサービスの開発に携わっています。
assign-navi
株式会社アサインナビは、日本最大級のエンジニア・IT企業とIT案件のマッチングサイト「アサインナビ」を運営する企業です。
https://assign-navi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした