ビュー(view)

ビューについて

説明

HTML、XMLなどの各種フォーマットでのレスポンスを生成する。主に、ユーザに見せるインターフェイスのデザインを行う。

ビューの規約

  • ファイルはapp/viewsディレクトリに格納

ERBとは

説明

HTMLなどの文章の中にRubyスクリプトを埋め込むためのライブラリ

使い方

出力がいらないコード
<% ~ %>
結果を出力
<%= ~ %>
結果をエスケープしてしないで出力
<%== ~ %>
後ろの改行を取り除く
<% ~ -%>
行頭までの空白を削除
<%- ~ %>
コメント
<%# ~ %>

ビューの変数

@変数名

ビューからコントローラのインスタンス変数(@変数名)にアクセスできる

コメント構文

#

Rubyの標準のコメントアウト構文
<%# コメント %>
<%#
複数行のコメントもOK
%>

begin

ドキュメンテンーションコメントを記述するときによく使う構文
<% =begin %>
<%= コメント %>
<% =end %>

<% if false %>

条件文を利用したコメントアウト構文
<% if false %>
<%= コメント %>
<% end %>

<!--

HTMLの標準のコメントアウト構文
<!-- コメント -->

ボタンでリンク(button_to)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

ボタンでリンクを生成

使い方

button_to(文字列 [, オプション, HTMLオプション]

オプション

オプション説明デフォルト
:methodHTTPメソッド(:get, :post, :put, :delete)を指定:post
:disabledボタンを無効化
:dataDATA属性
:remoteAjaxでリンクを処理submit
:formThis hash will be form attributes
:form_classThis controls the class of the form within which the submit button will be placed
:paramssHash of parameters to be rendered as hidden fields within the form

HTMLオプション

オプション説明
:name名称
:sizeサイズ。ピクセル数で指定
:readonly内容変更を禁止
:disabled利用禁止
:tabindexTabキーによる入力欄の移動順
:accesskey移動するショートカットキー
:usemapこの画像に対応させるイメージマップ
:id要素固有の識別子
:class要素を分類するクラス名
:title要素の補足情報
:style要素の補足情報
:dir表記方向
:lang基本言語

新規作成ボタンを作成
<%;= button_to "新規作成", :action => "new" %>
# <form method="post" action="/blogs/new"  class="button_to"><div><input type="submit" value="新規作成" /><input name="authenticity_token" type="hidden" value="xxx" /></div></form>
確認ダイヤログ付きで削除ボタンを作成
<%= button_to "削除", { :action => "destroy", :id => @page.id }, :confirm => "本当に削除しますか?", :method => :delete %>
# <form method="post" action="/blogs/1"  class="button_to"><div><input name="_method" type="hidden" value="delete" /><input data-confirm="本当に削除しますか?" type="submit" value="削除" /><input name="authenticity_token" type="hidden" value="xxx" /></div></form>
作成ボタンをAjaxで作成
<%= button_to "作成",  {:action => "create",} {:remote => true} %>
# <form method="post" action="/blogs" data-remote="true" class="button_to"><div><input type="submit" value="create" /><input name="authenticity_token" type="hidden" value="xxx" /></div></form>

ソースコード

ソースコード検索

リクエストが指定したオプションで生成されたものかの確認(current_page?)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

指定したURLが、現在表示されていればtrueを返す

使い方

current_page?(オプション)

表示しているページ(/pages/index)
current_page?(:action => 'new')
# false
current_page?(:controller => 'pages', :action => 'index')
# true

ソースコード

ソースコード検索

条件に一致したらリンクを生成(link_to_if)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

条件に一致したらリンクを生成

使い方

link_to_if(条件式, 文字列, url [, オプション, HTMLオプション])

オプション

オプション説明デフォルト
:dataDATA要素
:methodHTTPメソッド(:get, :post, :put, :delete)の指定
:remoteAjaxでリンクを処理

HTMLオプション

オプション説明
:nameアンカー名
:hrefリンク先
:href関連ファイルの場所
:hreflang関連ファイルの言語コードを指定
:type関連ファイルのMIMEタイプを指定
:media関連ファイルの出力メディアのリンクタイプ
:relこの文章から見た、href属性で指定するリンク先の役割
:revhref属性で指定するリンク先から見た、この文章の役割
:charset関連ファイルの文字コード
:shapeホットスポット領域の形状
:coordsホットスポットの形状の座標
:target関連ファイルを表示するウインドウ名
:id要素固有の識別子
:class要素を分類するクラス名
:title要素の補足情報
:style要素の補足情報
:dir表記方向
:lang基本言語

@pageがあれば、編集のリンクを表示
<%= link_to_if(@page, "編集", { :controller => "pages", :action => "edit" }) %>

ソースコード

ソースコード検索

条件に一致しなかったらリンクを生成(link_to_unless)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

条件に一致しなかったらリンクを生成

使い方

link_to_unless(条件式, 文字列, url [, オプション, HTMLオプション])

オプション

オプション説明デフォルト
:dataDATA要素
:methodHTTPメソッド(:get, :post, :put, :delete)の指定
:remoteAjaxでリンクを処理

HTMLオプション

オプション説明
:nameアンカー名
:hrefリンク先
:href関連ファイルの場所
:hreflang関連ファイルの言語コードを指定
:type関連ファイルのMIMEタイプを指定
:media関連ファイルの出力メディアのリンクタイプ
:relこの文章から見た、href属性で指定するリンク先の役割
:revhref属性で指定するリンク先から見た、この文章の役割
:charset関連ファイルの文字コード
:shapeホットスポット領域の形状
:coordsホットスポットの形状の座標
:target関連ファイルを表示するウインドウ名
:id要素固有の識別子
:class要素を分類するクラス名
:title要素の補足情報
:style要素の補足情報
:dir表記方向
:lang基本言語

@pageが空じゃなかったら、編集のリンクを表示
<%= link_to_unless(@page.nil?, "編集", { :controller => "pages", :action => "edit" }) %>

ソースコード

ソースコード検索

リンクを生成(link_to)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

リンクを生成

使い方

link_to(文字列, パス [, オプション, HTMLオプション])

オプション

オプション説明デフォルト
:dataDATA要素
:methodHTTPメソッド(:get, :post, :put, :delete)の指定
:remoteAjaxでリンクを処理

HTMLオプション

オプション説明
:nameアンカー名
:hrefリンク先
:hreflang関連ファイルの言語コードを指定
:type関連ファイルのMIMEタイプを指定
:media関連ファイルの出力メディアのリンクタイプ
:relこの文章から見た、href属性で指定するリンク先の役割
:revhref属性で指定するリンク先から見た、この文章の役割
:charset関連ファイルの文字コード
:shapeホットスポット領域の形状
:coordsホットスポットの形状の座標
:target関連ファイルを表示するウインドウ名
:id要素固有の識別子
:class要素を分類するクラス名
:title要素の補足情報
:style要素の補足情報
:dir表記方向
:lang基本言語

newアクションへのリンク
<%= link_to "新規作成", :controller => "pages", :action => "new" %>
# <a href="/pages/new">新規作成</a>
確認メッセージを表示
<%= link_to "新規作成", {:controller => "pages", :action => "new"}, :confirm => "本当に移動しますか?" %>
# <a href="/pages/new" data-confirm="新規作成してよろしいでしょうか?">新規作成</a>
外部サイト(Ruby on Rails)へのリンク
<%= link_to "Ruby on Rails", "http://rubyonrails.org/" %>
# <a href="http://rubyonrails.org">Ruby on Rails</a>
class属性を設定
<%= link_to "新規作成", { :controller => "pages", :action => "new'") }, { :class => "class_1" }  %>
# <a href="/pages/new" class="class_1">新規作成</a>

ソースコード

ソースコード検索

現在のURLと一致しなかったらリンクを生成(link_to_unless_current)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

現在のURLと一致しなかったらリンクを生成

使い方

link_to_unless_current(文字列, url [, オプション, HTMLオプション])

オプション

オプション説明デフォルト
:dataDATA要素
:methodHTTPメソッド(:get, :post, :put, :delete)の指定
:remoteAjaxでリンクを処理

HTMLオプション

オプション説明
:nameアンカー名
:hrefリンク先
:href関連ファイルの場所
:hreflang関連ファイルの言語コードを指定
:type関連ファイルのMIMEタイプを指定
:media関連ファイルの出力メディアのリンクタイプ
:relこの文章から見た、href属性で指定するリンク先の役割
:revhref属性で指定するリンク先から見た、この文章の役割
:charset関連ファイルの文字コード
:shapeホットスポット領域の形状
:coordsホットスポットの形状の座標
:target関連ファイルを表示するウインドウ名
:id要素固有の識別子
:class要素を分類するクラス名
:title要素の補足情報
:style要素の補足情報
:dir表記方向
:lang基本言語

現在のページだったらリンクを表示しない
<%= link_to_unless_current "新規作成", :controller => "profiles", :action => "new" %>

ソースコード

ソースコード検索

メールアドレスへのリンクを生成(mail_to)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

条件に一致しなかったらリンクを生成

使い方

mail_to(メールアドレス, [リンクの文字列, オプション])

オプション

オプション説明バージョン
:subjectメールの件名
:bodyメールの本文
:ccカーボンコピー
:bccブラインドカーボンコピー
:encodeエンコード方法(:javascript, :hex)rails3まで
:replace_at@のエンコード処理(スパム対策)rails3まで
:replace_dot.のエンコード処理(スパム処理)rails3まで

メールアドレスのリンクを表示
<%= mail_to "railsdoc@example.com" %>
# <a href="mailto:railsdoc@example.com">railsdoc@example.com</a>
件名とCCを指定してメールアドレスを表示する
<%= mail_to "railsdoc@example.com", "email", :cc => "railsdoc@example.com", :subject => "test mail" %>
# <a href="mailto:railsdoc@example.com?cc=railsdoc%40exampe.com&subject=test%20mail">email</a>

ソースコード

ソースコード検索

URLを生成(url_for)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

アプリケーションを参照するURLを生成

使い方

url_for(オプション)

オプション

オプション説明デフォルト
:anchorアンカー(URLの#以降)を指定
:only_pathtrueなら、URL全体ではなくパス部分を返すfalse
:trailing_slashIf true, adds a trailing slash, as in “/archive/2005/“. Note that this is currently not recommended since it breaks caching.
:hostURLのホストを指定
:protocolURLのプロトコルを指定
:userインライン認証を指定
:passwordインライン認証を指定

基本的な使い方
<%= url_for :controller => 'pages', :action => 'show' %>
# => '/pages/show'
コントローラを省略した場合は、現在のコントローラを利用
<%= url_for :controller => 'pages', :action => 'show' %>
# => '/pages/show'
絶対URL
<%= url_for :controller => 'pages', :action => 'show', :only_path => false %>
# => 'http://localhost/pages/show'

ソースコード

ソースコード検索

音声ファイルへのパス取得(audio_path)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

音声ファイルへのパスを取得

使い方

audio_path(音声ファイルへのパス)

audio_path("horse")
# /audios/horse
audio_path("horse.wav")
# /audios/horse.wav
audio_path("sounds/horse.wav")
# /audios/sounds/horse.wav
audio_path("/sounds/horse.wav")
# /sounds/horse.wav
audio_path("http://www.example.com/sounds/horse.wav")
# http://www.example.com/sounds/horse.wav

ソースコード

ソースコード検索

音声を再生(audio_tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

HTML5で追加されたaudioを生成

使い方

audio_tag(音声ファイルへのパス, [リンクの文字列, オプション])

オプション

オプション説明
:autoplay自動再生を有効
:controlsコントローラパネルを表示
:loop繰り返し再生

基本形(オプションなし)
<%= audio_tag("sound") %>
# <audio src="/audios/sound" />
audioタグを作成して、自動再生を有効にして、コントローラパネルを表示する
<%= audio_tag("sound.wav", :autoplay => true, :controls => true) %>
# <audio autoplay="autoplay" controls="controls" src="/audios/sound.wav" />

ソースコード

ソースコード検索

フィード検出機能を有効(auto_discovery_link_tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

RSSフィードやAtomフィードを自動検出させるlinkタグを生成

使い方

auto_discovery_link_tag(フォードの種類, [フィードへのパス,  オプション])

オプション

オプション説明デフォルト
:rel外部文章との関係alternate
:typeコンテンツタイプapplication/rss+xml
:titleタイトルRSS

RSSを自動検出させるタグを生成
<%= auto_discovery_link_tag %>
# <link href="http://localhost:3000/" rel="alternate" title="RSS" type="application/rss+xml" />
ATOMを自動検出させるタグを生成
<%= auto_discovery_link_tag(:atom) %>
# <link href="http://localhost:3000/" rel="alternate" title="ATOM" type="application/rss+xml" />
フィードへのパスを指定
<%= auto_discovery_link_tag(:rss, {:controller => "pages", :action => "feed"}) %>
# <link href="http://localhost:3000/pages/feed" rel="alternate" title="RSS" type="application/rss+xml" />
RSSのタイトルを指定して、RSSを自動検出させるタグを生成
<%= auto_discovery_link_tag(:rss, "http://www.example.com/feed.rss", :title => "Example RSS") %>
# <link href="http://www.example.com/feed.rss" rel="alternate" title="Example RSS" type="application/rss+xml" />

ソースコード

ソースコード検索

ファビコンを設定(favicon_link_tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

ファビコンを設定

使い方

favicon_link_tag(画像へのパス [, オプション])

オプション

オプション説明デフォルト
:rel外部文章との関係alternate
:typeコンテンツタイプapplication/rss+xml
:titleタイトルRSS

ファビコンを表示するタグを生成
<%= favicon_link_tag 'favicon.ico' %>
# <link href="/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

ソースコード

ソースコード検索

画像へのパスを取得(image_path)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

画像へのパスを取得

使い方

image_path(ファイルへのパス [, オプション])

オプション

オプション説明

画像ファイルへのパスを生成
image_path("example.png")
# => "/images/example.png"
サブディレクトリにある画像ファイルへのパスを生成
image_path("icons/example.png")
# => "/images/icons/example.png"

ソースコード

ソースコード検索

イメージタグを生成(image_tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

イメージタグを生成

使い方

image_tag(画像ファイルへのパス, [, (オプション or HTMLオプション)])

オプション

オプション説明バージョン
:altalt属性。省略時は、ファイル名から自動セット
:size画像サイズ(幅x高さ)
:mouseoverマウスオーバー時に入れ替える画像rails3まで

HTMLオプション

オプション説明
:src画像ファイルのパス
:altalt属性
:longdesc画像の説明文章のパス
:name画像の名前
:ismapサーバサイド・イメージマップを使用
:usemap画像に対応させるイメージマップ
:align画像とテキストの配置
:width画像の幅
:height画像の高さ
:id要素固有の識別子
:class要素を分類するクラス名
:title要素の補足情報
:style要素の補足情報
:dir表記方向
:lang基本言語

icon.png画像を表示
<%= image_tag("icon.png") %>
# <img alt="Icon" src="/images/icon.png" />
16x16でaltがEdit Entryのicon.png画像を表示
<%= image_tag("icon.png", :size => "16x16", :alt => "アイコン") %>
# <img alt="アイコン" height="16" src="/images/icon.png" width="16" />
classがmenu_iconのicon.png画像を表示
<%= image_tag("/icons/icon.gif", :class => "menu_icon") %>
# <img alt="Icon" class="menu_icon" src="/images/icon.png" />
画像のリンクを生成
<%= link_to image_tag("logo.png"), :action => "index" %>
# <a href="/blogs"><img alt="Logo" src="/images/logo.png" /></a>

ソースコード

ソースコード検索

JavaScriptファイルへのパスを取得(javascript_path)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

JavaScriptファイルへのパスを取得

使い方

javascript_path(ファイルへのパス [, オプション])

オプション

オプション説明

JavaScriptファイルへのパスを生成
<%= javascript_path "example" %>
# /javascripts/example.js
サブディレクトリにあるJavaScriptファイルへのパスを生成
<%= javascript_path "dir/example.js" %>
# /javascripts/dir/example.js
JavaScriptファイルへのパスを絶対パスで指定して生成
<%= javascript_path "/dir/example" %>
# /dir/example.js %>
外部サイトにあるJavaScriptファイルへのパスを生成
<%= javascript_path "http://www.example.com/js/example" %>
# http://www.example.com/js/example

ソースコード

ソースコード検索

JavaScriptをインクルード(javascript_include_tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

外部のJacaScriptファイルをインクルード

使い方

javascript_include_tag JavaScriptファイルへのパス [, オプション]

JavaScriptファイルへのパスの予約語

予約語説明
:allapp/assets/javascripts/フォルダ配下のすべての.jsファイルをインクルード
:default特定の.jsファイルをインクルード

オプション

オプション説明
:cacheキャッシュを有効にするか
:recursive再帰的にインクルードするか

外部のJacaScriptファイルをインクルードタグの生成
<%= javascript_include_tag "example" %>
# <script src="/javascripts/example.js" type="text/javascript"></script>
外部のJacaScriptファイルをインクルードタグの生成
<%= javascript_include_tag "example.js" %>
# <script src="/javascripts/example.js" type="text/javascript"></script>
JacaScriptファイルを複数指定
<%= javascript_include_tag "example1", "example2" %>
# <script src="/javascripts/example1.js" type="text/javascript"></script>
# <script src="/javascripts/example2.js" type="text/javascript"></script>
外部サイトのJacaScriptファイルを指定
<%= javascript_include_tag "http://www.example.com/example" %>
# <script src="http://www.example.com/example" type="text/javascript"></script>
Railsのデフォルトで使用するJacaScriptを指定
jQuery(Rails3.1以上でデフォルトの設定)
<%= javascript_include_tag :defaults
# <script src="/javascripts/jquery.js?xxx" type="text/javascript"></script>
# <script src="/javascripts/rails.js?xxx" type="text/javascript"></script>
# <script src="/javascripts/application.js?xxx" type="text/javascript"></script>
jQueryを使わない(Rails3.1以下でデフォルトの設定)
<%= javascript_include_tag :defaults
# <script src="/javascripts/prototype.js?xxx" type="text/javascript"></script>
# <script src="/javascripts/effects.js?xxx" type="text/javascript"></script>
# <script src="/javascripts/dragdrop.js?xxx" type="text/javascript"></script>
# <script src="/javascripts/controls.js?xxx" type="text/javascript"></script>
# <script src="/javascripts/rails.js?xxx" type="text/javascript"></script>
# <script src="/javascripts/application.js?xxx" type="text/javascript"></script>

ソースコード

ソースコード検索

外部スタイルシートを指定するリンクタグを生成(stylesheet_link_tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

外部スタイルシートを指定するリンクタグを生成

使い方

stylesheet_link_tag(スタイルシートへのパス [, HTMLオプション])

HTMLオプション

オプション説明デフォルト
:href関連ファイルの場所app/assets/stylesheets/スタイルシートへのパス.css
:hreflang関連ファイルの言語コードを指定
:type関連ファイルのMIMEタイプを指定text/css
:media関連ファイルの出力メディアのリンクタイプscreen
:relこの文章から見た、href属性で指定するリンク先の役割stylesheet
:revhref属性で指定するリンク先から見た、この文章の役割
:charset関連ファイルの文字コード
:target関連ファイルを表示するウインドウ名
:id要素固有の識別子
:class要素を分類するクラス名
:title要素の補足情報
:style要素の補足情報
:dir表記方向
:lang基本言語

外部スタイルシートを指定するリンクタグを生成
<%= stylesheet_link_tag "style" %>
# <link href="/stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
拡張子を付けて指定
<%= stylesheet_link_tag "style.css" %>
# <link href="/stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
外部サイトのCSSを指定
<%= stylesheet_link_tag "http://www.example.com/style.css" %>
# <link href="http://www.example.com/style.css" media="screen" rel="stylesheet" type="text/css" />
mediaオプションをallで指定
<%= stylesheet_link_tag "style", :media => "all" %>
# <link href="/stylesheets/style.css" media="all" rel="stylesheet" type="text/css" />
複数指定
<%= stylesheet_link_tag "style1", "style2" %>
# <link href="/stylesheets/style1.css" media="screen" rel="stylesheet" type="text/css" />
# <link href="/stylesheets/style2.css" media="screen" rel="stylesheet" type="text/css" />
関連ファイルの言語コードを指定
<%= stylesheet_link_tag "style", :hreflang => :ja %>
# <link href="/stylesheets/style.css" hreflang="ja" media="screen" rel="stylesheet" type="text/css" />

ソースコード

ソースコード検索

スタイルシートへのパスを取得(stylesheet_path)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

スタイルシートへのパスを生成

使い方

stylesheet_path(ファイルへのパス [, オプション])

オプション

オプション説明

stylesheet_path "style"
# /stylesheets/style.css
stylesheet_path "dir/style.css"
# /stylesheets/dir/style.css
stylesheet_path "/dir/style.css"
# /dir/style.css
stylesheet_path "http://www.example.com/css/style"
# http://www.example.com/css/style
stylesheet_path "http://www.example.com/css/style.css"
# http://www.example.com/css/style.css

ソースコード

ソースコード検索

動画ファイルへのパスを取得(video_path)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

動画ファイルへのパスを取得

使い方

video_path(ファイルへのパス [, オプション])

オプション

オプション説明>

video_path("hd")
# /videos/hd
video_path("hd.avi")
# => /videos/hd.avi
video_path("trailers/hd.avi")
# => /videos/trailers/hd.avi
video_path("/trailers/hd.avi")
# => /trailers/hd.avi
video_path("http://www.example.com/vid/hd.avi")
# => http://www.example.com/vid/hd.avi

ソースコード

ソースコード検索

動画を再生(video_tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

HTML5で追加されたvideoタグを生成

使い方

video_tag(動画ファイルへのパス, [, オプション])

オプション

オプション説明
:autoplay自動再生を有効
:controlsコントローラパネルを表示
:loop繰り返し再生
:autobuffer自動でバッファリング
:size動画サイズ(幅x高さ)
:width動画の幅
:height動画の高さ
:posterサムネイルを表示

基本形(オプションなし)
<%= video_tag("test.mp4") %>
コントローラパネルを表示
<%= video_tag("test.mp4", :controls => true) %>

ソースコード

ソースコード検索

奇数偶数で処理を変える(cycle)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

奇数と偶数で処理を変える

使い方

cycle(値 [, ..])

奇数、偶数でclass名を変える
<ul>
<% @pages.each do |i| %>
  <li class="<%= cycle("even", "odd") %>">
    <% i %>
  </li%>
<% end %>
</ul>
# <ul>
# <li class="even">page内容1</li>
# <li class="odd">page内容2</li>
# <li class="even">page内容3</li>
# </ul>

ソースコード

ソースコード検索

デバッグを出力(debug)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

デバッグなどで変数の中身を確認したいときなどに使用する。

使い方

debug(オブジェクト)

<% @categories = Category.all %>
<%= debug(@categories) %>
# [#<Category id: 1, name: "Railsの基礎知識">, #<Category id: 2, name: "Rubyの基礎知識">]

ソースコード

ソースコード検索

文字列加工(simple_format)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

文字列を下記の条件で加工

  • 文字列を<p>で括る
  • 改行は<br />を付与
  • 連続した改行は、</p><p>を付与

使い方

simple_format(文字列 [, HTMLオプション])

HTMLオプション

オプション説明
:align左右の配置
:id要素固有の識別子
:class要素を分類するクラス名
:title要素の補足情報
:style要素の補足情報
:dir表記方向
:lang基本言語

オプション

オプション説明
:sanitizeサニタイズ
wrapper_tag文字列のラッパータグ

基本的な使い方
<% text = <<EOL
テキスト

テキストテキスト
EOL %>
<%= simple_format(text) %>
# <p>テキスト</p>
# <p>テキストテキスト</p>
class名がtext1を付与
<% text = <<EOL
テキスト

テキストテキスト
EOL %>
<%= simple_format(text, :calss => "text1") %>
# <p class="text1">テキスト</p>
# <p class="text1">テキストテキスト</p>

ソースコード

ソースコード検索

文字列を切り捨てる(truncate)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

文字列を切り捨てる

使い方

truncate(文字列 [, オプション])

オプション

オプション説明デフォルト
:length切り捨ての桁数30
:separator切り捨てる箇所を表す文字列
:omission切り捨て時に末尾に付与する文字列...

30文字で切り捨てる
<%= truncate("RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説") %>
# RubyとRails3の基本からビュー、モデル、コント...
30文字以内の「、」で切り捨てる
<%= truncate("RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説", :separator => "、") %>
# RubyとRails3の基本からビュー、モデル、...
30文字で切り捨て、末尾の文字列を追加
<%= truncate("RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説", :omission => "・・・") %>
# RubyとRails3の基本からビュー、モデル、コント・・・

ソースコード

ソースコード検索

文字列から特定の部分のみ抽出(excerpt)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

文字列から特定の部分のみ抽出

使い方

excerpt(対象の文字列, 検索する文字列 [, オプション])

オプション

オプション説明デフォルト
:radius抜き出す前後の文字数100
:omission抽出時に付与する文字列...

Railsの前後5文字を抽出
<%= excerpt('RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails', :radius => 5) %>
# RubyとRails3の基本か...
前後3文字を抽出して、・・・を付与
<%= excerpt('RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails', :radius => 3, :omission => "・・・") %>
# ・・・byとRails3の基・・・

ソースコード

ソースコード検索

ハイライト表示(highlight)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

ハイライト

使い方

highlight(文字列, ハイライトする文字列 [, :highighter => ハイライトする文字列を置き換える形式)

「Rails」をハイライトする
<%= highlight('RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails') %>
 # Rubyと<strong class="highlight">Rails</strong>3の基本からビュー、モデル、コントローラなどを、分かりやすく解説
ハイライトする文字列をリンクにする
<%= highlight('RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails', :highlighter => '<a href="/¥1">¥1</a>') %>
 # Rubyと<a href="/¥1">¥1</a>3の基本からビュー、モデル、コントローラなどを、分かりやすく解説

ソースコード

ソースコード検索

エスケープしない(raw)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

文字列をエスケープしない。Rails3では、デフォルトで「<%= %>」で出力される値はエスケープされる。

使い方

raw(文字列)

エスケープする文字列

変換前変換後説明
<&lt;右大不等号
>&gt;左大不等号
&&amp;アンドマーク、アンパサンド
"&quot;ダブルクォート

エスケープしないで出力
<%= raw("<h1>Railsドキュメント</h1>") %>
 # <h1>Railsドキュメント</h1>

ソースコード

ソースコード検索

出力結果を変数に格納(capture)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

出力結果を変数に格納

使い方

@var = capture do
  格納する文字列
end

出力結果を変数に格納
<% @time = capture do %>
現在の時刻は<%= Time.now %>
<% end %>
<%= @time %>
# 現在の時刻は Sat Dec 24 00:00:00 +0900 2011

ソースコード

ソースコード検索

本体を持たない任意のタグを生成(tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

本体を持たない任意のタグを生成

使い方

tag(タグ名 [, タグの属性])

brタグを生成
tag("br")
inputタグを生成
tag("input", { :type => 'text', :disabled => true })
imgタグを生成
tag("img", { :src => "open & shut.png" })

ソースコード

ソースコード検索

本体を持つ任意のタグを生成(content_tag)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

タグを動的に生成
HTMLとERBが混ざってしまう場合などに使用するとすっきり表現できる

使い方

content_tag(タグの名前)

content_tag :p, "Hello world"
<p>Hello world</p>

ソースコード

ソースコード検索

レイアウトに複数のコンテンツを設定(content_for)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

レイアウトに複数のコンテンツを設定

使い方

content_for コンテンツ名 do
  コンテンツ
end

レイアウトに複数のコンテンツを設定

layouts/xxx
・・・
<%=  yield :extend_menu %>
・・・
<%= yield %>
・・・
views/xxx
<% content_for :extend_menu do %>
  [<%= link_to 文字列A, action => "A" %>]
  [<%= link_to 文字列B, action => "B" %>]
<% end %>

ソースコード

ソースコード検索

タグを取り除く(strip_tags)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

HTMLタグを取り除く

使い方

strip_tags(html)

strip_tags("Strip <i>these</i> tags!")
# => Strip these tags!

ソースコード

ソースコード検索

リンクのみ取り除く(strip_links)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

リンクのみ取り除く

使い方

strip_links(html)

<%= strip_links('<a href="http://www.rubyonrails.org">Ruby on Rails</a>') %>

ソースコード

ソースコード検索

サニタイズ(sanitize)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

サニタイズ

使い方

sanitize(文字列 [, tags => "許可するHTMLタグ名", attributes => "許可するHTML属性名"])

pとbrタグのみ有効にする
<%= sanitize "<h2>Ruby on Railsドキュメント (v3.1.0)</h2><p class="rails">RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説<br />メソッドが使用できるオプションや使用例などを多く取り入れました</p>", :tags => %w(p br)
# Ruby on Railsドキュメント (v3.1.0)<p>RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説<br />メソッドが使用できるオプションや使用例などを多く取り入れました</p>

ソースコード

ソースコード検索

レイアウトテンプレート(layouts)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

特徴

  • 生成される場所「app/views/layouts」
  • JavaScriptやCSSなどもここに記述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Title: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
</head>
<body>
 
<p style="color: green"><%= flash[:notice] %></p>
 
<%= yield  %>
 
</body>
</html>

レイアウトに動的コンテンツを出力

<%= yield :header %>

サブテンプレート

テンプレート内に別のテンプレートを埋め込む

<%= render :file => "shared/bannaer" %>
サブテンプレートに変数を渡す
<%= render :file => "shared/bannaer", :locals => { :login_time = sessin[:login_time] || Time.now } %>

部分テンプレート

ビューから部分テンプレートを呼び出す

<%= render :partial => "entry " %>
部分テンプレートを繰り返し描写
<%= render :partial => "entry", :collection => @entries %>

スタイルシート

  • ファイルの場所「public/stylesheets」
スタイルシートのタグ生成
<%= stylesheet_link_tag "rails", "entries" %>
すべてのスタイルシートを呼び出す
<%= stylesheet_link_tag :all %>
複数のスタイルシートを1つにまとめる
<%= stylesheet_link_tag :all, :cache => true %>

使い方

_<テンプレート名>.rhtml

特徴

  • ファイルの場所は、「app/views/コントローラ名/」
  • 部分テンプレートを呼び出すには、renderメソッドを使う
    • renderメソッドについて

ソースコード検索

コントローラで処理された内容を埋め込む先(yield)

説明

コントローラで処理された内容を埋め込む先を指定する。

使い方

<%= yield %>

基本形(オプションなし)
<body>
<%= yield %>
</body>
headerの時にjavaScriptのタグを表示
app/layouts/application.html.erb
<body>
<%= yield :header %>
</body>
app/views/pages/show.thml.erb
<% content_for :header do %>
<%= javascript_include_tag "page.js" %>
<% end %>

奇数偶数で処理を変える(current_cycle)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

現在のcycleで返す値を、返す。

使い方

current_cycle

奇数、偶数でclass名を変える
<ul>
<% @pages.each do |i| %>
  <li class="<%= cycle("even", "odd") %>">
    <% i %>
  </li%>
  <li class="<%= current_cycle %>">
    <% i %>
  </li%>
<% end %>
</ul>
# <ul>
# <li class="even">page内容1</li>
# <li class="even">page内容1</li>
# <li class="odd">page内容2</li>
# <li class="odd">page内容2</li>
# <li class="even">page内容3</li>
# <li class="even">page内容3</li>
# </ul>

ソースコード

ソースコード検索

cycleで返す値を初期化(reset_cycle)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

cycleで返す値を初期化する。

使い方

reset_cycle([名前])

cycleで返す値を初期化
<ul>
<% @pages.each do |i| %>
  <li class="<%= cycle("even", "odd") %>">
    <% i %>
  </li%>
  <li class="<%= reset_cycle %>">
    <% i %>
  </li%>
<% end %>
</ul>
# <ul>
# <li class="even">page内容1</li>
# <li class="even">page内容1</li>
# <li class="odd">page内容2</li>
# <li class="odd">page内容2</li>
# <li class="even">page内容3</li>
# <li class="even">page内容3</li>
# </ul>

ソースコード

ソースコード検索

日付データをフォーマット(strftime)

適応バージョン

Rubyの組み込みオブジェクト

説明

時刻をフォーマットに従って文字列に変換

使い方

strftime(フォーマット)

フォーマット

フォーマット説明
%A曜日の名称(Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)
%a曜日の省略名(Sun, Mon, Tue, Wed, Thu, Fri, Sat)
%B月の名称(January, February, March, April, May, June, July, August, September, October, November, December)
%b月の省略名(Jan, Feb, Mar, Aprm May, Jun, Jul, Aug, Sep, Oct, Nov, Dec)
%c日付と時刻
%d日(01-31)
%H24時間制の時(00-23)
%I12時間制の時(01-12)
%j年中の通算日(001-366)
%M分(00-59)
%m月を表す数字(01-12)
%p午前または午後(AM,PM)
%S秒(00-60) (60はうるう秒)
%U週を表す数。最初の日曜日が第1週の始まり(00-53)
%W週を表す数。最初の月曜日が第1週の始まり(00-53)
%w曜日を表す数。日曜日が0(0-6)
%X時刻
%x日付
%Y西暦を表す数
%y西暦の下2桁(00-99)
%Zタイムゾーン
%%パーセント文字

日本語で秒数まで表示
<% time = Time.now # Thu Dec 24 00:00:00 +0900 2011  %>
<%= time.strftime('%Y年%m月%d日 %H:%M:%S') %>
# 2011年12月24日 00:00:00

ソースコード検索

レイアウトについて

レイアウトとは

サイトで共通のレイアウトを定期するときに、利用する仕組み

ビューの規約

  • ファイルはapp/viewsディレクトリに格納

assetファイルへのパスを取得(asset_path)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

assetファイルへのパスを取得

使い方

asset ファイルへのパス [, オプション]

オプション

オプション説明
:typeファイルのタイプ

asset_path "application.js"
# /application.js
asset_path "application", type: :javascript
# /javascripts/application.js
asset_path "application", type: :stylesheet
# /stylesheets/application.css
asset_path "http://www.example.com/js/xmlhr.js"
# http://www.example.com/js/xmlhr.js

ソースコード

ソースコード検索

JavaScriptを実行(link_to_function)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

JavaScriptを実行する

使い方

link_to_function(名前, メソッド [, オプション])

link_to_function "Greeting", "alert('Hello world!')", class: "nav_link"
# => <a class="nav_link" href="#" onclick="alert('Hello world!'); return false;">Greeting</a>

モデルから本体を持つ任意のタグを生成(content_tag_for)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

モデルからタグを動的に生成する
HTMLとERBが混ざってしまう場合などに使用するとすっきり表現できる

使い方

content_tag_for(タグの名前, モデル [, オプション])

<%= content_tag_for(:tr, @person) do %>
  <td><%= @person.first_name %></td>
  <td><%= @person.last_name %></td>
<% end %>

ソースコード

ソースコード検索

モデルからDIVタグを生成(div_for)

適応バージョン

  • 1.0.0
  • 1.1.0
  • 1.1.1
  • 1.1.6
  • 1.2.0
  • 1.2.6
  • 2.0.0
  • 2.0.1
  • 2.0.3
  • 2.1.0
  • 2.2.1
  • 2.3.2
  • 2.3.8
  • 3.0.0
  • 3.0.5
  • 3.0.7
  • 3.0.9
  • 3.1.0
  • 3.2.3
  • 3.2.8
  • 3.2.13
  • 4.0.0
  • 4.1.0
  • 4.2.1

説明

モデルからDIVタグを生成する

使い方

div_for(モデル [, オプション])

<%= div_for(@person, class: "foo") do %>
   <%= @person.name %>
<% end %>

ソースコード

ソースコード検索