レイアウトを作成する | rails チュートリアル 9

第5章 レイアウトを作成するの勉強メモ

html.erbの書き方

リンク

<%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>

画像リンク

<%= link_to image_tag("rails.png", alt: "Rails logo"), 'http://rubyonrails.org/' %>

application.cssを修正する

作成されるファイルに、ランダムな数字(ハッシュ)をつけないように、development.rbを設定する

  # アセットファイル名にハッシュをつけないように設定
  config.assets.digest = false

自前のcssを使えるように、scssを作成し、

$ touch app/assets/stylesheets/scss/master.scss

application.cssを書き換える

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= # require_tree .
 *= require_self
 *= require ./scss/master.scss
 */

アセットパイプライン

以下の、3つの主要な機能が理解の対象

  • アセットディレクトリ
  • マニフェストファイル
  • プリプロセッサエンジン

アセットディレクトリ

app/assets
現在のアプリケーション固有のアセット
lib/assets
あなたの開発チームによって作成されたライブラリ用のアセット
vendor/assets
サードパーティのアセット

マニフェストファイル

この使用して、静的ファイルをどのように1つのファイルにまとめるのかをRailsに指示することができる。
なお、実際にアセットをまとめる処理を行うのはSprocketsというgemです。

プリプロセッサエンジン

Railsは、どのプリプロセッサを使用するかを、ファイル名の拡張子を使用して判断します。
最も一般的な拡張子は、Sass用の.scss、CoffeeScript用の.coffee、埋め込みRuby (ERb) 用の.erbなどがある。

レイアウトのリンク

いままで、「http://localhost:3000/static_pages/about」で、飛べていたページを「http://localhost:3000/about」で見れるように変更し、そのページへのリンクを設置する。

routes.rbを以下のように変更する。

Rails.application.routes.draw do
  root 'static_pages#home'
  get '/about', to: 'static_pages#about'
  get '/help', to: 'static_pages#help'
  get '/contact', to: 'static_pages#contact'

  resources :microposts
  resources :users
end

それにより、aboutページへのリンクは、

<%= link_to "About", about_path %>

これで設置できるようになる。

root_pathと、root_urlの違い

root_path -> ‘/’
root_url -> ‘http://www.example.com/’

HTTP標準では技術的にリダイレクト後に完全なURLが要求されるため、サイトトップへのリンクの設置は、前者のroot_pathで行う。

次回は、ユーザー登録用URLから

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。


  1. KATOON.NET
  2. TRASH
  3. レイアウトを作成する | rails チュートリアル 9