hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。　　　エンジニア目指して勉強中。

MVCの関係

プログラミング・テキスト

ビューにデータを受け渡す

Railsでの処理がルーティング→コントローラ→ビューの順番で進む際にコントローラの役割を、リクエストに応じたビューをレスポンスとして返すことだが、実はそれだけでなく、コントローラのアクションの中で何らかの処理を行うことも可能である。

ビューにデータを受け渡す

コントローラで受け取ったデータをビューで表示

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

コントローラのアクション内に定義したインスタンス変数(@つきの名前の変数)は、そのアクションが表示するビュー内で利用することができる。

tweets_controllerのindexアクションとindex.html.erbを利用して確認する

app/controllers/tweets_controller.rb

1
2
3
4
5
6
7
 
  class TweetsController < ApplicationController

    def index
      @tweet = "プログラミングなう"
    end

  end 

要点チェック

 

受け取ったデータをビューで表示

編集によってビューに@tweet = "プログラミングなう"という情報が渡されたはず。

 インスタンス変数の呼び出し範囲

インスタンス変数をtweets_controllerのindexアクションの中で定義した場合、このインスタンス変数は、indexアクションに対応したビューであるapp/views/tweets/index.html.erbの中で利用できる。

Railsの見た目用のファイルであるerbファイルの中でRubyのコードを利用する場合、<%= %>という記述で囲う。

 app/views/tweets/index.html.erb

1
 
  <%= @tweet %>

 

ビューで、定義した変数を使用するためには<%= %>で変数名を囲んであげる必要がある。<%= %>の中のrubyコードは、ビューをレスポンスとして返すまでに実行されて、最終的にはHTMLになる。

viewファイル
1
 
 <%= 変数名 %>                      #変数をビュー内で使用

これでビューにデータを受け渡し、表示させるということができているはず。実際にサーバーを立ち上げて確認。

ターミナル
1
2
3
4
5
 
  $ cd ~/projects/pictweet
  # アプリケーションのあるディレクトリに移動

  $ rails s
  # テストサーバーを起動

ブラウザに下記のURLにアクセスすると、下の画像のような状態になるはず。

http://localhost:3000/tweets

プログラミングなう

要点チェック

 

モデルを利用してデータを表示

データベースの値をビューに表示

tweetsテーブルのレコードの情報をビューに表示

1つのtweetの情報をデータベースから取ってきて、ビューに表示。

コントローラにて、データベースからひとつのtweetの情報。

app/controllers/tweets_controller.rb
1
2
3
4
5
6
7
 
  class TweetsController < ApplicationController

    def index
      @tweet = Tweet.find(3)
    end

  end

index.html.erb上で@tweetという変数を利用できるようになった。findメソッドは引数に指定したidにあたるレコードを1件だけ取得するメソッド。
@tweetには、tweetsテーブルのレコード1行が、Tweetクラスのインスタンスとして代入されている。以下で、ビューにて@tweetの値を表示させる。

app/views/tweets/index.html.erb
1
2
3
 
  <div class="contents row" >
    <p><%= @tweet.text %></p>
  </div>

こうすることで、localhost:3000/tweetsにアクセスした際、@tweetに代入されているtweetsテーブルのレコードの、textカラムの値が表示されるようになる。

 プロパティ値

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

編集したindex.html.erbの@tweet.textという記述の@tweetという変数はtweetsテーブルの１つのインスタンスを示す。その場合、「変数.カラム名」と記述することによって、変数で指定したインスタンスの当該カラムのプロパティ値を取り出すことができる。

tweetという変数にtweetモデルのインスタンスを定義。そして、そのインスタンスに対して「.カラム名」と記述することによって、そのプロパティ値を取り出すことができる。

スクリーンショット 2016-01-22 14.44.42.png

http://localhost:3000/tweets

部分テンプレート

表示が確認できましたら、次に複数のtweetの情報を1つのtweetごとに繰り返し順番に表示。

 参考書参照

「プロになるためのWeb技術入門」p29 ~, 項2.3, 項2.4, 項2.5

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

app/controllers/tweets_controller.rb
1
2
3
4
5
6
7
 
  class TweetsController < ApplicationController

    def index
      @tweets = Tweet.all
    end

  end

上記の編集によってビューにツイートテーブルの全てのレコードがインスタンスの配列として受け渡された。これからそれらの情報をビューに表示させていく。

その際、Rubyのカリキュラム内で学習したeachメソッドを利用する方法で複数のtweetを表示していく。

app/views/tweets/index.html.erb
1
2
3
4
5
 
<div class="contents row" >
  <% @tweets.each do |tweet| %>
    <p><%= tweet.text %></p>
  <% end %>
</div>

このようにすると、eachメソッドのdoとendで囲まれた<%= tweet.text %>の部分を、@tweetsのレコードの数だけ繰り返し表示するようになる。

http://localhost:3000/tweets

※テストサーバーを立ち上げていない場合にはもう一度「rails s」コマンドでサーバーを起動する必要がある。

サンプルtweets

レイアウト変更

ビューにHTML、CSSファイルを適用して装飾を加えて見本のPictweetのような見た目にしていく。

ヘッダー部分を完成させる

ヘッダー部分は全ページ共通なので、見た目の雛形であるapplication.html.erbに書く。

改行を適応させる

デフォルトの状態ではrailsは文字列の改行を読み込まず、改行した状態で文章を表示させることはできる。改行がしっかりと適応されるようにするためにはsimple_formatというメソッドを使う必要がある。

 simple_format

simple_formatメソッドは下記の条件で文字列を加工してくれるメソッド。このメソッドを使って改行を反映したツイートをビューに表示にさせる。

①改行は<br/>を付与

②文字列を<p>で括る

app/views/test/sample.html.erb
1
 
  <%= simple_format(引数) %>
app/views/tweets/index.html.erb
1
2
3
4
5
6
7
8
 
  <div class="contents row" >
    <% @tweets.each do |tweet| %>
      <div class="content_post" style="background-image: url(<%= tweet.image %>);">
        <%= simple_format(tweet.text) %>
        <span class="name"><%= tweet.name %></span>
      </div>
    <% end %>
  </div>

tweet.textで取得したツイートの本文をsimple_formatによって加工している。この処理によってツイートの改行が反映されるようになる。

 ヘルパーメソッド

simple_formatのように、Railsでは主にviewでHTMLタグを出現させたりテキストを加工するために予めメソッドが用意されている。これらをまとめて、ヘルパーメソッドという。他には、form_tag(フォームを出現させるメソッド)やlink_to(aタグを出現させるメソッド)などがある。

要点チェック

 

CSSファイルを適用する

HTMLファイルの適用が終わったので、続いてCSSファイルの適用を行なっていく。

 stylesheet_link_tag

CSSファイルの読込みはHTMLのheadタグ内のstylesheet_link_tagから読み込まれる。Railsの場合レイアウトファイルがあるので、application.html.erbにheadタグの記述がある。application.html.erbの3行目に注目。

app/views/layouts/application.html.erb
1
2
3
4
5
6
 
  <head>
    <title>Pictweet</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>

cssファイルはapp/assets/stylesheets/というディレクトリに配置する。application.html.erbのstylesheet_link_tagの部分にapplicationと書いてあるので、このHTMLからはapp/assets/stylesheets/application.cssというCSSファイルを読み込むことを示している。

 require_tree

application.cssの13行目に注目。

app/assets/stylesheets/application.css

1
2
3
4
5
6
 
/*
 ## 中略 ##
 *
 *= require_tree .
 *= require_self
 */

application.cssには、どのcssを読み込むかという設定が書いてある。require_treeには引数として与えられたディレクトリ以下のcssファイルをアルファベット順に全て読み込むという意味がある。現在require_treeの引数には.(ドット)が渡されている。引数.(ドット)はカレントディレクトリを表す。つまり、この記述によってapp/assets/stylesheetsというディレクトリにあるcssファイルは全て読み込まれることになる。

 「style.scss」と「setting.css」を下記のディレクトリに配置しましょう

style.scss

setting.css

https://tech-master.s3.amazonaws.com/uploads/curriculums//0726c74ee970d2a69f687dc6055b0708.gif

上記の見本とstylesheetフォルダ内のファイル数が異なっても問題はない。

  •  app
    •  assets
      •  stylesheets
        •  style.scss
        •  setting.css

scssという拡張子はcssファイルの一種。今は気にせずに追加する。

 

要点チェック

 

フォントファイルを適用する

レイアウトを編集する際に、CSSやHTMLの編集に加えて文字のフォントの編集も可能。Railsでフォントを変更する際にはフォントファイルというものを追加する。

 フォントファイル

フォントファイルとは、文字のフォントを変更するためのファイル。このファイルには、フォントの情報が記載してある。Railsでフォントを読み込むためにはapp/assets/fontsというディレクトリにフォントファイルを配置し、CSSファイルにフォントファイルの読み込みを記述する必要がある。

  •  app
    •  assets
      •  fonts
        •  フォントファイル

追加したフォントを使用する際には、CSSファイルにフォントファイルの指定を行う。app/assets/stylesheets/style.scssの11行目にfont_1_honokamin.ttfという記述があり、これがフォントファイルの指定を行なっている。

app/assets/stylesheets/style.scss
1
2
3
4
5
6
 
@font-face {
    font-family: 'ほのか明朝';
    src: url('font_1_honokamin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

 「fonts」というディレクトリを以下のディレクトリに作成する

  •  app
    •  assets
      •  fonts

 「font_1_honokamin.ttf」を下記のディレクトリに配置する

  •  app
    •  assets
      •  fonts
        •  font_1_honokamin.ttf 

要点チェック

 

レイアウトの変更を確認する

以上の作業で、HTMLの編集、CSSの編集、フォントファイルの適用が終了。実際に編集が適用されているかを確認する。

 imageカラムに画像のURLを保存する

画像URLコピー

 imageカラムに画像のURLをペースト

sequel Proのtweetsテーブルを開き、一番上のレコード（idが１のレコード）のimageカラムをダブルクリックすると以下の画像のように表示されるので、今コピーした画像のURLをペーストする。

画像URLコピー

http://localhost:3000/tweets

以下の画面のようになっていることを確認する。

画像が表示されるか確認

 

Ruby on Railsの全体フロー図を確認

 MVC(エム・ブイ・シー)

Railsではルーティング→コントローラー→モデル→ビューの順番に処理が行われる。このようにモデル(model)とビュー(view)とコントローラー(controller)を使用して処理を行なうシステムをそれぞれの頭文字を取ってMVCと呼ばれている。以下の図に処理の流れをまとめた。

スクリーンショット 2016-01-22 17.16.13.png