【13日目:コントローラとビューの関係について学ぶ】改訂3版基礎Ruby on Railsを読んだで!

シェアする

  • このエントリーをはてなブックマークに追加
41AkxXsz+5L._SX258_BO1,204,203,200_

RailsではURLの形式(パターン)とコントローラ、アクション、ビューが密接に関係している。

RailsはURLのパスとクエリを解釈してコントローラのアクションを呼び出し、レンダリングの結果をブラウザに返す。

GETとPOST

HTTP通信によるリクエストで一番よく使われるメソッドが「GET」、Webアプリケーションでは「POST」もよく使われる。

GETはブラウザのアドレス欄にURLを入力したり、リンクをクリックしたりするとGETメソッドでリクエストが送られる。

POSTメソッドでリクエストが送られる場合は、HTMLフォームで送信ボタンを押したとき。※GETで送られることもある。

GETとPOSTの違い

POSTの場合はHTTPヘッダーの後に「名前=値&名前=値」のような形でデータが加えられる。

GETとPOSTはこういった形式上のち外の他に役割の違いもある。

  • GET:ウェブサーバーからデータを取得するときに用いる
  • POST:ウェブサーバーの状態を変更するときに用いる。※掲示板にコメントを投稿するときやカートに商品を入れるとき等

HTTPのメソッド

メソッド 機能
GET リソースの要求
POST リソースの送信
HEAD ヘッダー部分だけを要求
PUT リソースの置換
PATCH リソースの一部更新
DELIT リソースの削除

※PATCHとDELETEにもRailsは役割を与え、HTMLフォームで対応している。

Railsのリクエスト処理の流れ

  1. ブラウザがHTTPでリクエストを送る
  2. Rails:パスを調べて、routes.rbに従ってどのコントローラーのどのアクションを選ぶか決める
    ※routes.rbはパスとアクションの対応関係を決めるファイル
    ※コントローラは複数あり、コントローラの中に複数のアクションがある。
    ※パスからアクションが選ばれることをルーティングという
  3. Rails選ばれたアクション(メソッド)を実行する
    ※アクションにはモデルとの間で情報のやり取りをするプログラムを書く
  4. アクションはモデルから取得した情報のうち表示に必要な物をインスタンス変数に保存
    ※モデルはデータベースのテーブルと対応している。
  5. アクションがブラウザへのレスポンスを作成するためにビュー(テンプレート)を選ぶ
    ※指定しないかぎり、アクションと同名のテンプレートが選ばれる。
  6. 選ばれたテンプレートがコントローラのインスタンス変数を参照して、その値をHTMLソースに埋め込む。
    ※この処理がレンダリング
  7. コントローラがレンダリングによってできあがったHTML文書をブラウザに送り返す。
    ※レスポンスを返す。

ルーティングについて

Railsでのルーティングとは、リクエストされたURLのパスから特定のコントローラとアクションを選ぶこと。

アクションを追加するには

ルーティングの設定はconfigフォルダのroutes.rbファイルで行う。

「Rails.application.routes.draw do ~ end」の間に加えたコードがルーティングの設定になる。

流れとしては、

1. routes.rbにパスとコントローラーのアクションを結ぶ

2. コントローラーにアクションを追加する

3. レンダリングするためのビューを作成する。

例は本の123ページ。

ルーティングエラー

ルーティングが設定されていないパスにアクセスしてもエラーがでる。

エラーが出る条件は以下

  • ルーティングの設定忘れ、書き間違い
  • HTTPメソッドが合わない。POSTしかうけつけないアクションにGETでアクセスしたとき等
  • app/assetsやpublcの下に存在しないファイルにアクセス
    ※こういったエラーページには「Not Found」のようなエラーページを作成すると良い。

ルーティングの詳細(routes.rbへの記述の仕方)

トップページを指定する特殊な書き方

rootメソッドに「”コントローラ名#アクション名”」

→パスが「/」の場合のルーティングを指定

例:コントローラ名がMainControllerの場合

"root main#index"

特定のパスに対応するアクションをGETメソッドで呼び出す

「get “パス” => “コントローラ名#アクション名”」

例:パスが「/about」でTopControllerのaboutアクションを

Getメソッドで呼び出すとき

get "about" => "top#about"

パス→/login、SessionsControllerのloginアクションをPOSTで呼び出す

post "login" => "sessions#login"

「コントローラ名/アクション名 => “コントローラ名#アクション名”」

は簡素化できる※下記例は同じ意味。

get "info/company" => "info#company"
get "info/company"

↑でもこれどんな場合につかう?

◯◯.com/info/companyのURLへの設定ということ

ルーティングはasオプションで名前をつけれる。

例:helpという名前のルーティングを作りコントローラやビューでhelp_pathというメソッドを呼び出すと”/help”という文字列が返る

get "help" => "documents#help", as: "help"

as: “help”はハッシュ。この書き方よく使うよ。

パラメータをパスの中に埋め込みたいときは、:yearのように「コロン+パラメータ名」を使う

例:「/articles/2015/04」というパスでArticlesControllerのshowアクションが呼び出され、params[:year]で「2015」、params[:month]で「04」が取り出せる。

get "articles/:year/:month" => "articles#show"

実際のアプリケーション開発では、リソースベースのルーティングをつかうことがほとんど。

※リソースベースってなんや?

→モデルに対して設定するから、モデルに対しての処理を記述するっていうこと。resorcesっていう書き方がある。

コントローラの基本

  • コントローラの中には複数のアクションが含まれる
  • コントローラの名前の付け方には決まりがある

コントローラクラスの書き方

コントローラはモデルからデータを受け取り、ビューにレンダリングを行わせる。

ブラウザからのリクエストを受け取り、レスポンスを返すのもコントローラ。
コントローラはApplicationControllerクラスのサブクラスとして実装する。

コントローラクラスのパブリックメソッドをアクションと呼ぶ。
アクションはウェブサイトの1ページまたは1つの機能に相当する。

アクションで行うことは、テンプレート(ビュー)で表示するデータを用意して、インスタンス変数に値をセットすることです。アクションは、原則として同名のテンプレート使います
例えばindexアクションを呼び出すとindex.html.erbでレンダリングされる。
アクションの目的によってはHTMLページを表示する代わりに別のページに移動させる指示(リダイレクション)をブラウザに返す事もできる。

コントローラクラスにアクションではないメソッドを記述する場合はプライベートメソッドにする必要がある。※意図しないコードが実行されるおそれがあるため。
※before_actionに指定するメソッドはプライベートにする必要がある。

命名規約

Railsの原則は「設定より規約」。
コントローラ、ビューに関するクラス名やファイル名は命名規約がある。

例えばコントローラ名をmembersとした場合のコントローラやビューに関する名前は以下。

名前 ルール
コントローラクラス名 MenbersController ◯◯Controller、先頭は大文字
コントローラファイル名 members_controller.rb ◯◯_controller.rb
テンプレートのフォルダ名 app/view/members app/view/◯◯
テンプレートのファイル名 members_controller_test.rb ◯◯_controller_test.rb

モデルにも命名規約がある。モデル名を「member」としたとき

名前 ルール
データベーステーブル名 members 先頭は小文字、複数形にする
モデルクラス名 Member 先頭は大文字
モデルクラスのファイル名 member.rb ◯◯.rb
テストスクリプトのファイル名 member_test.rb ◯◯_test.rb

データベーステーブル名に2つの単語からなる名前を付けたいときは、shopping_cartsのようにアンダースコアで単語と単語を結ぶ。
すると、コントローラクラス名がShoppingCartsController、モデルクラス名はShoppingCartになる。
※各単語の頭文字を大文字にする表記報は「キャメルケースという」

application_controller.rbの使い方

コントローラクラスの親クラスであるApplicationControllerは
application_controller.rbに記述されている。このクラスにメソッドを加えれば全てのコントローラで共通して使える機能を作れる。

アクションで使える機能

P129からの練習用に作ったファイルが例
※LessonController関連のファイル

パラメータの取得

アクションに渡されるパラメータは2つある。
1. ルーティングの設定によってパスの中に埋め込まれたパラメータ
※「/lesson/step1/Sato」の「Sato」など
2. URLのクエリー部分に「?名前=値」の形を使って渡されるパラメータ
※「/lesson/step1?name=Sato」

どちらのパラメータも「params[:パラメータ名]」で取り出す。

※テンプレートファイルを使用せずに直接文字列を送信する
「render text: “文字列”」という方法もある。

paramsの機能

params[:パラメータ名]のparamsはパラメータを含んだハッシュを返すメソッドです。
単なるハッシュではなく、Hashを継承したActionController::Parametersというクラスのオブジェクト。
このクラスのハッシュは文字列でもシンボルでも値を取り出せる。
※つまりparams[:name]とparam["name"]は同じ値を返す。
複数形になっているのはなぜ?
一般的にはparams[:name]が使われる。複数形が
デフォ。

params[:controller]でコントローラ名、
params[:action]でアクション名が取り出せる。

requestオブジェクト

リクエストを送ってきたユーザーの情報を取得するには、
requestメソッドが返す、オブジェクトを使う。
ユーザーのIPアドレスはrequest.remote_ip
環境変数を得るにはrequest.env
リクエストヘッダーを得るにはrequest.headers
ブラウザの種類を得るにはrequest.env["HTTP_USER_AGENT"]
または、headers["User-Agent"]とする。

リダイレクション

Railsではredirect_toメソッドでHTTPのリダイレクションを行う。
redirect_toメソッドを呼び出すとレンダリングは行われずに、ブラウザに302のステータスコードと新しいURLが送られる。
※redirect_toメソッドの引数は「action: リダイレクト先のアクション名」とする。

redirect_toメソッドの引数には「redirect_to “/lesson/step4″」のようにパスやURLを文字列で渡すことも可能。

※リソースを扱うコントローラではcreat,update,destroyの各アクションでリダイレクチョンを行うのが定番。

リダイレクションのステータスコード

リダイレクション用のステータスコード
* 301(恒久的な移動)
* 302(発見)
* 303(他を参照)
* 307(一時的な移動)

Webアプリケーションだと302が多いらしい。

redirect_to action: "step4", status:301

上記のようにオプションをつけることでステータスコードの使い分けが可能。

フラッシュ

Railsでリダイレクションを行うときは、フラッシュという機能もよく使われる。
フラッシュはアクションとアクションの間で情報を受け渡す機能。

リダイレクションの前でflashオブジェクトに情報を入れるとリダイレクション後のアクションでその文字列を取り出すことができる。

フラッシュのデータは「アクション→リダイレクション→アクション」の処理が済むと消去される。
※flash[:notice]はnilになる。

フラッシュの名前が:noticeまたは、:alertの場合は、redirect_toメソッドの第2引数にハッシュを加えてリダイレクトとフラッシュの設定を同時に行うことができる。

redirect_to @mamber, notice: "会員を登録しました"

:notice,:alertの場合は、flash[:notice]やflash[:alert]をflash.notice、flash.alertともできる。

フラッシュの仕組みはセッション機能を利用してい実現さあ荒れているのブラウザのクッキーを向こうにしていると利用できない。

アクション・コールバック

決まりきった処理を1つのメソッドにまとめる機能。

  • before_action
  • after_action
  • around_action

がある。

例えばbefore_actionを指定すると、アクションの実行前にそのメソッドが実行される。
利用する方法は下記。

  1. アクション名と重ならないようにコールバックの名前を決める。
  2. コールバック名と同じ名前のプライベートメソッドをコントローラに記述する。
  3. コントローラの中でbefore_actionの引数にコールバックの名前をシンボルで指定。

特定のアクションにだけコールバックを適用させたい場合は、
オプsyンとして「only:」を使う。
複数のアクションに対しての場合は、下記のようにonlyオプションに配列を指定する。

bifore_action :do_something, onl: [:step7, :step8, :step9]

逆に特定のアクションに対してアクションコールバックがてきようされないようにしたいときは下記。

before_action :do_something, except: step1
before_action :do_something, except: [:step1, :step2, :step3]

Railsのテンプレート(ビュー)にあたるものはテンプレート(erbファイル)です。この機能、使い方を理解すると効率よく短時間でページ作成ができる。

テンプレートの基本

Railsのページデザインではコントローラのアクションでインスタンスヘンスを用意し、テンプレートにその変数を埋め込むのが基本的流れ。

テンプレートの書式

RailsのテンプレートファイルはHTML文書の中にRubyコードを埋め込んだもの
<% %>や<%= %>で囲んだ部分がRubyのコードとして解釈される。
このRubyコードによって動的にHTML文書が書き換えられて、ブラウザに送信される。

<% %>や<%= %>の違い

  • <% %>:Rubyのコードは評価されるが文字列の挿入は行われない。
  • <%= %>:Rubyの式(リテラル、変数、メソッド呼び出しなど)を記述すると、式の結果が文字列に変換されてその場所に挿入される。また、式が出力される際はto_sメソッドが呼ばれている。

テンプレートの中には、複雑なコードを書かないこと
「コントローラのアクションで用意したデータをインスタンス変数に記録し、そのインスタンス変数をテンプレートに埋め込む」という基本を守ることがだいじ。

コントローラとテンプレートのオブジェクトについて

テンプレートをレンダリングする際には
「ActionView::Baseクラスを継承詩、ヘルパーのモジュールをミックスインしたクラス」が自動作成されてる。
そのインスタンスのものでコードが実行される
→つまりテンプレート内ではAction Viewとヘルパーのメソッドが使えるということ。
※number_with_delimiter,link_toなどのメソッド

paramsやflashのようにどちらでも使えるメソッドがあってややこしいが、
基本的にはコントローラとテンプレートは別のオブジェクトである。
Rubyではオブジェクト間でインスタンス変数を共有する機能があるのでRailsはこの機能を利用してアクションの
インスタンス変数をテンプレートに渡している。

メソッドがなくてもテンプレートがある場合

コントローラクラスの中にアクションのメソッドがなくても、
app/viewsフォルダに「アクション名.html.erb」のファイルがあればコントローラはそのファイルをレンダリングする。
アクションの中に何もなければメソッドは省略できるがからのメソッドでも読みやすくするためにコントローラの中に書いておいたほうが良い。

renderメソッド

アクションの実行が終わるとRailsは自動的にアクションと同名のテンプレートを使ってHTMLを生成(レンダリング)する。
アクションの中でrenderメソッドを呼び出すと別のテンプレートを使ってレンダリングできる。
renderメソッドの引数にアクション名を指定すると別アクション用のテンプレートが共有される。

ちなみにコントローラにアクションがなくても、ビューフォルダにアクション名のついたhtml.erbファイルがあれば
そのファイルが読み込まれレンダリングされる。

またapp/views/lesson以外のフォルダにあるテンプレートを使いたい場合は、
「another/show」のようにapp/viewフォルダを起点としたパス名を指定すると良い。※html.erbは省略可。

def show
    render "another/show"
end

二度レンダリング、リダイレクトはできない

レンダリングは1つのアクションにつき一度だけ。
また1つのアクション内でrenderメソッドとredirect_toメソッドはどちらかしか使えない。

HTMLの特殊文字の変換

HTML特殊文字を表示するときは、「<、>、&」に変換する。※文書構造が変わらないように。
※<%= %>はこの変換を自動的に行う。
※ソース上で変換が確認できる。

逆にHTMLをそのまま出力したい場合でも、特殊文字が変換されてしまうので、
タグとして出力するには<%= %>の代わりに<%== %>をつかう。

またHTML特例文字の変換を抑えるにはhtml_safeメソッドがある。

<p><%= @comment.html_safe %></p>

このメソッドで「HTML文書に埋め込んでも問題ない」という印をつけることができる。
link_toやimage_tagメソッドはデフォルトでこのhtml.safe付きになっている認識でOK

書式指定とヘルパーメソッド

Railsのビュー機能は色々ある。

数値、日付、文字列

小数点以下の桁数など文字列や数字の書式を揃えたいときはRubyのspritfメソッドが使える。
sprintfは第一引数に書式を指定し、第二引数以降に書式に埋め込む変数を並べるもの。

@population = 704414
@surface = 141.31

<p>
<%= sprintf("人口%d人、面積%.0f平方キロ、人口密度%.2f人/平方キロ",
            @population, @surface, @population/@surface) %></p>

sprintfの書式の中では「%文字」の部分に第2引数以降に指定した引数が埋め込まれる。
「%d(整数)」「%f(浮動小数点)」「%s(文字列)」%と文字の間には、幅と制度を指定できる。

日付や時刻の書式はRubyのTimeクラスのメソッドstrfttimeをつかう。
→step13

また、Rubyの持っているメソッドだけではなく、Railsが持っているメソッドも使える。
number_with_delimiterメソッドとか※三桁毎にカンマを入れるメソッド。
→step14

文字列を整えるメソッドもある。

simple_format(文字列)
=><p> </p>で囲み、改行を</br>にする。

excerpt(文字列, 語句, radius: 文字列)
=>文字列から語句を探し、その前後の部分を表示する

truncate(文字列, length: 文字数)
=>文字列を指定の文字数に省略する

highlight(文字列, 語句)
=>語句を<strong class="highlight"> </strong>で囲む

ヘルパーメソッドの作成

ヘルパーメソッドを自作することもできる。
ヘルパーメソッドを自作するときはapp/helpersのフォルダにファイルを作成する。
※例ではlesson_helper.rbというファイルをつくり下記コード記載

module LessonHelper
  def tiny_format(text)
    h(text).gsub(/\n/, "</br>").html_safe
  end
end

hメソッドは「<」→「<」のように特殊文字の変換を行う。
gsubメソッドで改行をに一括置換する。

app/helperフォルダの中で定義されたモジュールはヘルパーモジュールとなり、
全てのテンプレートでミックスインされる。

ヘルパーメソッドの数が増えてきた時は、ヘルパーモジュールをいくつもつくって分けると良い。
ただ、ヘルパーモジュールは全てのテンプレートでミックスインされるので同じ名前のヘルパーメソッドが
できないように注意する必要がある。

リンクと画像

リンクや画像を生成するヘルパーメソッドがある。

リンク

リンクを生成するのはlink_toメソッド。
第一引数にあリンクとのテキスト、第二引数にはパスを指定する。

link_to "Home", root_path

※root_pathは:rootでも可

ちなみに、このパスの指定方法はridirect_toでも使える

第二引数のパスの指定は下記方法も可

  • http://www.example.com”や”/help”のようやURLやパスを表す文字列
  • root_pathのようにルーティングの設定で使えるパスまたはmembers_pathのようにリソースを表すパス。
  • @memberのようにリソースを表すモデルオブジェクトや配列
  • :rootや:membersのようにパスをあわらすシンボル
  • コントローラ、アクション、パラメータを表すハッシュ。
    →例:LessonControllerのstep1アクションのパス
     →「link_to “step1″, controller: “lesson”, action: “step1″, name: “Sato”」

第三引数には、ハッシュでmethodオプションやdataオプションを追加できる。
methodオプションはHTTPの種類を指定する。
dataオプションはリンク先に進むかどうかを合わラス確認メッセージを表示する際につかう

<%= link_to "削除", member, method: :delete, data: { confirm: "本当に削除しますか?" } %>

また「属性名: 値」をついかすればaタグの属性になる。

<a href="/" class="menu">
==
<%= link_to "Home", root_path, class: "menu" %>

現在のページだったらリンクにしない

指定のパスが現在のページのものだったらリンクの代わりにテキストだけ表示する
→link_to_unless_currentメソッドをつかう。
メニュー用のリンクを作るときに便利。

<p><%= link_to_unless_current "Home", root_path %></p>

表示するテキストにタグを加えたいときはメソッドにブロックを渡す。

<%= link_to_unless_current("Home", root_path) do %>
    <span class="current">Home</span>
<% end %>

画像

画像用のタグはを生成するのは「image_tagメソッド」
このメソッドに画像のファイル名とオプションを指定するとタグができる。

<p>Powered By
<%= image_tag("rails.png", size: "87x111",
      alt: "Ruby on Rails", align: "top") %></p>

第一引数には画像ファイル名、第二引数にはハッシュでオプションを指定する。
オプションはimgタグの属性がつかえる。※サイズとか

画像にリンクを春ときはlink_toとimage_tagを組み合わせる

<p>Powered By
<%= link_to(image_tag("rails.png", size: "87x111",
      alt: "Ruby on Rails", align: "top"), "http://www.rubyonrails.org/") %></p>

一般的なタグを出力するには

通常はHTMLのタグは<%= %>の外に記述するが、Rubyのコードを使って記述する場合はtagメソッド、content_tagメソッドを使う

# </br>
<%= tag(:br) %>

# <p class="p1">こんにちは</p>
<%= content_tag(:p, class: "p1")do %>
こんにちは
<% end %>

条件分岐と繰り返し

条件分岐と繰り返しには構文がある。それを使うとテンプレートを効率良く簡潔に記述できる。

条件分岐

テンプレートでは下記の様におこなう。

# if式
<%= if 条件式 %>
~~~~~~~
<% else %>
~~~~~~~
<% end %>

# unless式
<%= unless 条件式 %>
~~~~~~
<% else %>
~~~~~~
<% end %>

# case式
<%= case ~~~ when ~~~ %>
~~~~~~~
<%= when ~~~ %>

<% else %>
~~~~~~~
<% end %>

余分な改行やスペースの除去

<% -%><%= -%>のように-付きで閉じると-%>の後ろの改行は取り除かれる。
また、<%- %>のように行頭につけると、行頭から<%-までの空白が取り除かれる※<%=- %>は?

繰り返し

timesメソッドやeachメソッドも<%%>内に記述できる。

<% 3.times do %>
ラン
<% end %>

ブロックを使ってリストやテーブルに配列やハッシュのデータを効率よく表示させることができる。

# コントローラに記述する部分
def step19
    @items = { "フライパン" => 2680, "ワイングラス" => 2550,
               "ペッパーミル" => 4515, "ピーラー" => 945 }
  end
  
# ビューに記述する部分
<table border="1" cellpadding="4">
<% @items.each do |key, val| %>
<tr>
   <th><%= key %></th>
   <td style="text-align: right"><%= number_with_delimiter(val) %>円</td>
</tr>
<% end %>
</table>

※移行済みモックアップの作成

asagaoのサイトいじっていくで!

レイアウトテンプレートを作る!

デザインの統一が必要。ページ全体の「枠」をつくる。
→Railsは簡単にできるんだって。

レイアウトテンプレートとは??

全体の枠となるレイアウトテンプレートは
app/views/layoutsフォルダにおいたテンプレートファイルに記述する。
Railsはレンダリングを行う際に、各アクション用のテンプレートをレンダリングしそれをレイアウトテンプレートの中に埋め込む。

bin/rails new でapplication.html.erbというデフォルトのレイアウトテンプレートファイルができる。
※とりあえずこれをいじる。

モックアップのレイアウトテンプレート

application.html.erbファイルを編集していく。

  • metaタグの追記
  • タイトルタグ中身をヘルパーメソッドのpage_titleに変更
  • application_helper.rbにpage_titleメソッドを記述

page_titleメソッドで
インスタンス変数@page_titleがあればページのタイトルが
「◯◯ – Morning Glory」に、なければ「Morning Glory」になる設定。

ココらへんは155ページ見た方が良い。

レイアウトテンプレートの切り替え

コントローラやアクションごとにレイアウトテンプレートを切り替えて1つのサイトでレイアウトテンプレートを使いわけれる。
その方法は下記の3つ。

  1. app/views/layoutsフォルダにtop.html.erbのようにファイル名が「コントローラ名.html.erb」のテンプレートを置
    ※それがTopControllerのテンプレートになる
  2. コントローラでlayoutメソッドを使う。引数はlayoutsフォルダに置いたテンプレートファイル名から拡張子を除いたものにする。(引数はシンボルではなく文字列)
  3. アクション内でrenderメソッドにlayoutオプションを付けてテンプレートファイル名を指定する

上記②の例

class TopController < ApplicationController
layout "simple"

上記③の例

def show
    if 何かエラーが発生中
        render layout: "error"
    end
end

また、アクション用の中身をそのままHTML全体とする場合は「render layout: false」とする。

レイアウトの継承

ApplicationControllerにlayoutメソッドを記述すると
全てのコントローラにレイアウトが継承される。
→詳しくは156ページ見よう。

部分テンプレート

ページ上部に置くメニューバーや、ページ左右に置く、サイドバーなどは部分テンプレートをつくって共通化する。

部分テンプレートの使い方

部分テンプレートは「_menu_bar.html.erb」のようにファイル名の前にアンダースコアをつける。
ファイルを置く場所はアクション用テンプレートと同じ。

部分テンプレートの例

<div>
<%= link_to 'Top', root_path %>
<%= link_to 'ニュース', articles_path %>
</div>

この部分テンプレートを別のテンプレートに埋め込むには
renderメソッドを使う。引数はファイル名からアンダースコアを除いたものにする。

<%= render "member_bar" %>

部分テンプレートはレイアウト展プレートに埋め込んだり、ふくすのコントローラのテンプレートで共通に使ったりすることもある。

別のフォルダにある部分テンプレートを埋め込むには、
renderメソッドの引数を「フォルダ名/テンプレート名」とする。

<%= render "shared/menu_bar" %>

引数では_は付けていませんが、ファイル名は「_menu_bar.html.erb」のようにアンダースコアが付いていることに注意。

モックアップ部分のテンプレート

基本的にはヘッダー、フッター、サイドバーを作ればよい。
基盤となるapplication.html.erbにヘッダー、フッター、サイドバー、コンテンツのdivタグを設置し、全体をcontainerのタグで囲む。

各部分テンプレートの編集
ここらへんは158ページからをチェック。

スタイルシート

CSSはapp/assets/stylesheetsの下におくこと。
このフォルダには初期状態でapplication.cssというファイルがある。

 *= require_tree .
 *= require_self

これは消さないように注意。

全体的なレイアウト作成のまとめ

  1. 【共通】application.html.rbファイルの編集
  2. 【共通】application_helper.rbの編集
  3. 【部分】application.htl.rbの編集
  4. 【部分】_header.html.rbの編集
  5. 【部分】application.html.rbの編集
  6. 【部分】_sideder.html.rbの編集
  7. 【部分】_footer.html.rbの編集
  8. 【トップ】index.html.rbの編集
  9. 【トップ】top_controller.rbの編集
  10. 【共通】CSSの編集

こんな感じ。
152〜164までは流れ見直すの大事かも。

今日は長かったな、ここまでにしよう。

本記事は下記本の勉強記事です。初学者にとても良い本です。

スポンサーリンク
Sponsored Link
Sponsored Link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
Sponsored Link