ビュー(view)

ビューについて

説明

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

ビューの規約

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

ビュー変数

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

@変数名

ERBとは

説明

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

使い方

出力がいらないコード

<% ～ %>

結果を出力

<%= ～ %>

結果をエスケープしてしないで出力

<%== ～ %>

後ろの改行を取り除く

<% ～ -%>

行頭までの空白を削除

<%- ～ %>

<%# ～ %>

コメント構文

説明

Rubyの標準のコメントアウト構文

<%# コメント %>

<%#
複数行のコメントもOK
%>

begin

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

<% =begin %>
<%= コメント %>
<% =end %>

if false

条件文を利用したコメントアウト構文

<% if false %>
<%= コメント %>
<% end %>

<!–

HTMLの標準のコメントアウト構文

<!-- コメント -->

レイアウトテンプレート

特徴

生成される場所「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メソッドについて

リンクを生成

説明

リンクを生成

使い方

link_to(リンクテキスト=nil, オプション=nil, HTML属性=nil or イベント属性=nil, ブロック引数)

オプション

オプション	説明
:controller	コントローラ名
:action	アクション名
:anchor	アンカーを指定
:only_path	trueなら、URL全体ではなくパス部分を返す(デフォルト値: true)
:trailing_slash	末尾にスラッシュを付与
:host	URLのホストを指定
:protocol	URLのプロトコルを指定
:user	HTTP認証
:password	HTTP認証
:data	DATA要素
:method	HTTPメソッド(:post, :delete, :patch, :put)の指定
:remote	Ajaxでリンクを処理

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時
:onfocus	フォーカスされた時
:onblur	フォーカスを失った時
:onselect	入力欄のテキストが選択された時
:onchange	フォーカスを失う際に値が変化していた時

例

URLヘルパー指定

link_to "Profile", profile_path(@profile)
#=> <a href="/profiles/1">Profile</a>

コントローラとアクションを直接指定

link_to "Profile", controller: "profiles", action: "show", id: @profile
#=> <a href="/profiles/show/1">Profile</a>

リンクテキストをURL

link_to nil, "http://example.com"
#=> <a href="http://www.example.com">http://www.example.com</a>

idとclassを付与

link_to "Articles", articles_path, id: "news", class: "article"
#=> <a href="/articles" class="article" id="news">Articles</a>

クエリを含むURL

link_to "Comment wall", profile_path(@profile, anchor: "wall")
#=> <a href="/profiles/1#wall">Comment wall</a>

メソッド固定

link_to("Destroy", "http://www.example.com", method: :delete)
#=> <a href='http://www.example.com' rel="nofollow" data-method="delete">Destroy</a>

Data属性

link_to "Visit Other Site", "http://www.rubyonrails.org/", data: { confirm: "Are you sure?" }
#=> <a href="http://www.rubyonrails.org/" data-confirm="Are you sure?">Visit Other Site</a>

ソースコード

GitHub

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

説明

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

使い方

link_to_if(条件式, リンクテキスト, オプション={}, HTML属性={} or イベント属性={}, ブロック引数)

オプション

オプション	説明	デフォルト値
:controller	コントローラ名
:action	アクション名
:anchor	アンカー(URLの#以降)を指定
:only_path	trueなら、URL全体ではなくパス部分を返す	true
:trailing_slash	末尾にスラッシュを付与
:host	URLのホストを指定
:protocol	URLのプロトコルを指定
:user	HTTP認証
:password	HTTP認証
:data	DATA要素
:method	HTTPメソッド(:get, :post, :put, :delete)の指定
:remote	Ajaxでリンクを処理

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時
:onfocus	フォーカスされた時
:onblur	フォーカスを失った時

例

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

link_to_if(@page.nil?, "編集", { controller: "pages", action: "edit" })

条件に一致しない場合もリンクを生成

link_to_if(@page.nil?, "編集", { controller: "pages", action: "edit" }) do
    link_to(@page, "新規", { controller: "pages", action: "new" })
end

ソースコード

GitHub

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

説明

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

使い方

link_to_unless(条件式, リンクテキスト, オプション={}, HTML属性={} or イベント属性={}, ブロック引数)

オプション

オプション	説明	デフォルト値
:controller	コントローラ名
:action	アクション名
:anchor	アンカー(URLの#以降)を指定
:only_path	trueなら、URL全体ではなくパス部分を返す	true
:trailing_slash	末尾にスラッシュを付与
:host	URLのホストを指定
:protocol	URLのプロトコルを指定
:user	HTTP認証
:password	HTTP認証
:data	DATA要素
:method	HTTPメソッド(:get, :post, :put, :delete)の指定
:remote	Ajaxでリンクを処理

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時
:onfocus	フォーカスされた時
:onblur	フォーカスを失った時

例

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

link_to_unless(@page.nil?, "編集", { controller: "pages", action: "edit" })

条件に一致した場合もリンクを生成

link_to_unless(@page.nil?, "編集", { controller: "pages", action: "edit" }) do
    link_to_unless(@page, "新規", { controller: "pages", action: "new" })
end

ソースコード

GitHub

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

説明

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

使い方

link_to_unless_current(リンクテキスト, オプション={}, HTML属性={} or イベント属性={}, ブロック引数)

オプション

オプション	説明	デフォルト値
:controller	コントローラ名
:action	アクション名
:anchor	アンカー(URLの#以降)を指定
:only_path	trueなら、URL全体ではなくパス部分を返す	true
:trailing_slash	末尾にスラッシュを付与
:host	URLのホストを指定
:protocol	URLのプロトコルを指定
:user	HTTP認証
:password	HTTP認証
:data	DATA要素
:method	HTTPメソッド(:get, :post, :put, :delete)の指定
:remote	Ajaxでリンクを処理

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時
:onfocus	フォーカスされた時
:onblur	フォーカスを失った時
:onselect	入力欄のテキストが選択された時
:onchange	フォーカスを失う際に値が変化していた時

例

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

link_to_unless_current "新規作成", controller: "profiles", action: "new"

戻るリンクを生成

link_to_unless_current "新規作成", controller: "profiles", action: "new" do
    link_to "戻る", { controller: "profiles", action: "index" }
end

ソースコード

GitHub

ボタンでリンクを生成

説明

ボタンでリンクを生成

使い方

button_to(文字列=nil, オプション=nil, データ属性=nil or HTML属性=nil or イベント属性=nil, ブロック引数)

オプション

オプション	説明	デフォルト値
:controller	コントローラ名
:action	アクション名
:anchor	アンカー(URLの#以降)を指定
:only_path	trueなら、URL全体ではなくパス部分を返す	true
:trailing_slash	末尾にスラッシュを付与
:host	URLのホストを指定
:protocol	URLのプロトコルを指定
:user	HTTP認証
:password	HTTP認証
:method	メソッド名(:post, :get, :delete, :patch, :put)	:post
:disabled	無効化	false
:data	カスタムData属性
:remote	Ajaxでリンクを処理
:form	フォーム属性
:form_class	送信ボタンのフォームクラス
:params	非表示パラメータとして追加される値

データ属性

オプション	説明
:confirm	確認ダイアログに表示する文字列
:disable_with	送信時にクリック禁止

HTML属性

オプション	説明
:method	HTTPメソッド(:get, :post, :put, :delete)を指定	:post
:disabled	無効化	false
:data	DATA属性
:remote	Ajaxでリンクを処理	false
:form	フォームの属性
:form_class	ボタンが配置されるフォーム
:params	パラメータをハッシュで渡す
:name	名称
:size	サイズ。ピクセル数で指定
:readonly	内容変更を禁止
:accesskey	移動するショートカットキー
:usemap	この画像に対応させるイメージマップ
:id	要素固有の識別子
:class	要素を分類するクラス名
:title	要素の補足情報
:style	要素の補足情報
:dir	表記方向
:lang	基本言語

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時
:onfocus	フォーカスされた時
:onblur	フォーカスを失った時
:onselect	入力欄のテキストが選択された時
:onchange	フォーカスを失う際に値が変化していた時

例

ボタンを生成

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: "new", controller: "items
#=> <form method="post" action="/items/new"  class="button_to"><div><input type="submit" value="新規作成" /><input name="authenticity_token" type="hidden" value="xxx" /></div></form>

確認ダイヤログ付きで削除ボタンを生成

button_to 'Destroy', 'http://www.example.com', method: "delete", remote: true, data: { confirm: '本当に削除しますか?', disable_with: 'loading...' }
#=> <form class='button_to' method='post' action='http://www.example.com' data-remote='true'><input name='_method' value='delete' type='hidden' /><input value='Destroy' type='submit' data-disable-with='loading...' data-confirm='本当に削除しますか?' /><input name="authenticity_token" type="hidden" value="10f2163b45388899ad4d5ae948988266befcb6c3d1b2451cf657a0c293d605a6"/></form>

ソースコード

GitHub

イメージタグを生成

説明

イメージタグを生成

使い方

image_tag(画像ファイルへのパス, オプション={}, HTML属性={} or イベント属性={})

オプション

オプション	説明
:size	画像サイズ(幅x高さ)
:srcset	ウィンドウサイズに合わせて画像を切り替える

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時

例

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>

ウィンドウサイズに合わせて画像を切り替える

image_tag "icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" }
#=> <img src="/assets/icon.png" srcset="/assets/icon_2x.png 2x, /assets/icon_4x.png 4x">

ソースコード

GitHub

画像へのパスを取得

説明

画像へのパスを取得

使い方

image_path(ファイルへのパス, オプション={})

オプション

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

例

画像ファイルへのパスを生成

image_path("example.png")
#=> "/images/example.png"

サブディレクトリにある画像ファイルへのパスを生成

image_path("icons/example.png")
#=> "/images/icons/example.png"

ソースコード

GitHub

画像のURLを取得

説明

画像のURL

使い方

image_url(画像へのパス, オプション={})

オプション

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

例

image_url "edit.png", host: "http://stage.example.com"
#=> http://stage.example.com/assets/edit.png

ソースコード

GitHub

メールアドレス用のタグを生成

説明

メールアドレス用のタグを生成

使い方

mail_to(メールアドレス, リンクテキスト=nil, オプション={}, ブロック引数)

オプション

オプション	説明
:subject	メールの件名
:body	メールの本文
:cc	カーボンコピー
:bcc	ブラインドカーボンコピー
:reply_to	Reply-Toフィールド

例

メールアドレス用のタグを生成

mail_to "me@domain.com"
#=> %3Ca+href%3D%22mailto%3Ame%40domain.com%22%3Eme%40domain.com%3C%2Fa%3E

リンクテキストを指定

mail_to "me@domain.com", "My email"
#=> %3Ca+href%3D%22mailto%3Ame%40domain.com%22%3EMy+email%3C%2Fa%3E

オプションを指定

mail_to "me@domain.com", "My email", cc: "ccaddress@domain.com", subject: "This is an example email"
#=> %3Ca+href%3D%22mailto%3Ame%40domain.com%3Fcc%3Dccaddress%40domain.com%26subject%3DThis%2520is%2520an%2520example%2520email%22%3EMy+email%3C%2Fa%3E

ソースコード

GitHub

audioを生成

説明

モデルと関連のないHTML5で追加されたaudioを生成

使い方

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

オプション

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

例

audioを生成

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" />

ソースコード

GitHub

公開されているaudiosディレクトリ内のオーディオアセットへのURLを取得

説明

公開されているaudiosディレクトリ内のオーディオアセットへの絶対パス

使い方

audio_url(音声ファイルへのパス, オプション={})

オプション

オプション	説明
:type	ファイルのタイプ
:skip_pipeline	assetsのpathを付けない
:extname	拡張子指定
:host	相対パスの場合にホストを追加
:protocol	プロトコル

例

オーディオアセットへの絶対パス

audio_url "horse.wav"

hosts指定

audio_url "horse.wav", host: "http://stage.example.com"
#=> http://stage.example.com/audios/horse.wav

ソースコード

GitHub

フォントアセットへのパス

説明

フォントアセットへのパス

使い方

font_path(フォントファイルへのパス, オプション={})

オプション

オプション	説明
:type	ファイルのタイプ
:skip_pipeline	assetsのpathを付けない
:extname	拡張子指定
:host	相対パスの場合にホストを追加
:protocol	プロトコル

例

フォントアセットへのパス

font_path("font")
#=> /fonts/font

ソースコード

GitHub

フォントアセットへのURLを取得

説明

フォントアセットへの絶対パス

使い方

font_url(フォントファイルへのパス, オプション={})

オプション

オプション	説明
:type	ファイルのタイプ
:skip_pipeline	assetsのpathを付けない
:extname	拡張子指定
:host	相対パスの場合にホストを追加
:protocol	プロトコル

例

フォントアセットへの絶対パス

font_url "font.ttf"

host指定

font_url "font.ttf", host: "http://stage.example.com"
#=> http://stage.example.com/fonts/font.ttf

ソースコード

GitHub

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

説明

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

使い方

audio_path(音声ファイルへのパス, オプション={})

オプション

オプション	説明
:type	ファイルのタイプ
:skip_pipeline	assetsのpathを付けない
:extname	拡張子指定

例

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

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

URL指定

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

ソースコード

GitHub

フィード検出機能を有効

説明

モデルと関連のないRSSフィードやAtomフィードを自動検出させるlinkタグを生成

使い方

auto_discovery_link_tag(フォードの種類=:rss, URLオプション={},  オプション={})

フィードの種類

種類	説明
:rss	RSS
:atom	Atom
:json	JSON

オプション

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

例

RSSを自動検出させるタグを生成

auto_discovery_link_ta
#=> <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" />

ソースコード

GitHub

videoタグを生成

説明

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

使い方

video_tag(動画ファイルへのパス..)

オプション

オプション	説明

:poster	サムネイル画像
:poster_skip_pipeline	アセットディレクトリを使わない
:autoplay	自動再生を有効
:controls	コントローラパネルを表示
:loop	繰り返し再生
:autobuffer	自動でバッファリング
:size	動画サイズ(幅x高さ)
:width	動画の幅
:height	動画の高さ
:poster	サムネイルを表示

例

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

video_tag("trailer")
#=> <video src="/videos/trailer"></video>

拡張子まで指定

video_tag("trailer.ogg")
#=> <video src="/videos/trailer.ogg"></video>

パラメータを指定

video_tag("trailer.ogg", controls: true, preload: 'none')
#=> <video preload="none" controls="controls" src="/videos/trailer.ogg"></video>

サイズを指定

video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png")
#=> <video src="/videos/trailer.m4v" width="16" height="10" poster="/assets/screenshot.png"></video>

複数指定

video_tag("trailer.ogg", "trailer.flv")
#=> <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>

配列で指定

video_tag(["trailer.ogg", "trailer.flv"])
#=> <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>

ソースコード

GitHub

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

説明

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

使い方

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

URL

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

ソースコード

GitHub

動画ファイルへのURLを取得

説明

動画ファイルへのURL

使い方

video_url(動画ファイルへのパス, オプション={})

例

動画ファイルへのURL

video_url "hd.avi", host: "http://stage.example.com"
#=> http://stage.example.com/videos/hd.avi

ソースコード

GitHub

ファビコンのタグを生成

説明

ファビコンのタグを生成

使い方

favicon_link_tag(画像へのパス='favicon.ico', オプション={})

オプション

オプション	説明
:rel	外部文章との関係
:type	コンテンツタイプ
:sizes	サイズ

例

ファビコンを表示するタグを生成

favicon_link_tag
#=> <link href="/assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />

ファビコン名を指定してタグを生成

favicon_link_tag 'myicon.ico'
#=> <link href="/assets/myicon.ico" rel="shortcut icon" type="image/x-icon" />

ソースコード

GitHub

JavaScriptをインクルード

説明

JacaScriptファイルをインクルード

使い方

javascript_include_tag(JavaScriptファイルへのパス..)

オプション

オプション	説明
:extname	拡張子がない場合に拡張子を追加
:protocol	プロトコルを指定
:host	相対パスの場合にホストを追加
:skip_pipeline	アセットパイプラインをスキップ
:nonce	nonce属性

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

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

例

JacaScriptファイルをインクルード

javascript_include_tag "xmlhr"
#=> <script src="/assets/xmlhr.debug-1284139606.js"></script>

ホストを指定

javascript_include_tag "xmlhr", host: "localhost", protocol: "https"
#=> <script src="https://localhost/assets/xmlhr.debug-1284139606.js"></script>

拡張子を指定

javascript_include_tag "template.jst", extname: false
#=> <script src="/assets/template.debug-1284139606.jst"></script>

.js拡張を指定

javascript_include_tag "xmlhr.js"
#=> <script src="/assets/xmlhr.debug-1284139606.js"></script>

複数指定

javascript_include_tag "common.javascript", "/elsewhere/cools"
#=> <script src="/assets/common.javascript.debug-1284139606.js"></script><script src="/elsewhere/cools.debug-1284139606.js"></script>

URL指定

javascript_include_tag "http://www.example.com/xmlhr"
#=> <script src="http://www.example.com/xmlhr"></script>

nonce属性を指定

javascript_include_tag "http://www.example.com/xmlhr.js", nonce: true
#=> <script src="http://www.example.com/xmlhr.js" nonce="..."></script>

ソースコード

GitHub

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

説明

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

使い方

javascript_path(ファイルへのパス, オプション={})

オプション

オプション	説明
:extname	拡張子がない場合に拡張子を追加
:protocol	プロトコルを指定
:host	相対パスの場合にホストを追加
:skip_pipeline	アセットパイプラインをスキップ
:nonce	nonce属性

例

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

ソースコード

GitHub

JavaScriptファイルへのURLを取得

説明

JavaScriptファイルへのURLを取得

使い方

javascript_url(ファイルへのパス, オプション={})

オプション

オプション	説明
:host	相対パスの場合にホストを追加

例

javascript_url "js/xmlhr.js", host: "http://stage.example.com"
# http://stage.example.com/assets/js/xmlhr.js

ソースコード

GitHub

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

説明

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

使い方

stylesheet_link_tag(スタイルシートへのパス..)

オプション

オプション	説明
:extname	拡張子がない場合に生成されたURLに拡張子を追加
:protocol	URLのプロトコルを設定
:host	相対URLを指定するとそのパスにホストが追加
:skip_pipeline	アセットパイプラインをスキップするか

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時

例

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

stylesheet_link_tag "style"
#=> <link href="/assets/style.css" media="screen" rel="stylesheet" />

拡張子まで指定

stylesheet_link_tag "style.css"
#=> <link href="/assets/style.css" media="screen" rel="stylesheet" />

URLで指定

stylesheet_link_tag "http://www.example.com/style.css"
#=> <link href="http://www.example.com/style.css" media="screen" rel="stylesheet" />

media属性を指定

stylesheet_link_tag "style", media: "all"
#=> <link href="/assets/style.css" media="all" rel="stylesheet" />

印刷用CSSを設定

stylesheet_link_tag "style", media: "print"
#=> <link href="/assets/style.css" media="print" rel="stylesheet" />

複数指定

stylesheet_link_tag "random.styles", "/css/stylish"
#=> <link href="/assets/random.styles" media="screen" rel="stylesheet" /><link href="/css/stylish.css" media="screen" rel="stylesheet" />

拡張子を自動付与

stylesheet_link_tag "style.less", extname: false, skip_pipeline: true, rel: "stylesheet/less"
#=> <link href="/stylesheets/style.less" rel="stylesheet/less">

ソースコード

GitHub

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

説明

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

使い方

stylesheet_path(ファイルへのパス, HTML属性={} or イベント属性={})

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時

例

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

stylesheet_path "style"
#=> /stylesheets/style.css

拡張子まで指定

stylesheet_path "dir/style.css"
#=> /stylesheets/dir/style.css

絶対パスで指定

stylesheet_path "/dir/style.css"
#=> /dir/style.css

URLで指定

stylesheet_path "http://www.example.com/css/style.css"
#=> http://www.example.com/css/style.css

ソースコード

GitHub

スタイルシートへのURLを取得

説明

外部スタイルシートへのURLを生成

使い方

stylesheet_url(ファイルへのパス, オプション={})

オプション

オプション	説明
:host	相対パスの場合にホストを追加

例

stylesheet_url "css/style.css", host: "http://stage.example.com"
# http://stage.example.com/assets/css/style.css

ソースコード

GitHub

奇数偶数で処理を変える

説明

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

使い方

cycle(値..)

補足

reset_cycleでリセット
current_cycleで現在の値を取得

例

<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>

ソースコード

GitHub

奇数偶数で処理を変える

説明

あらかじめ指定した値を順番に取得

使い方

current_cycle(名前='default')

例

<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>

ソースコード

GitHub

cycleで返す値を初期化

説明

cycleで返す値を初期化

使い方

reset_cycle(名前='default')

例

<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>

ソースコード

GitHub

デバッグを出力

説明

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

使い方

debug(オブジェクト)

例

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

ソースコード

GitHub

文字列加工

説明

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

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

使い方

simple_format(文字列, オプション={}, HTML属性={} or イベント属性={})

オプション

オプション	説明
:sanitize	サニタイズ
:wrapper_tag	文字列を囲むタグ

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時

例

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

<% 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>

ソースコード

GitHub

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

説明

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

使い方

excerpt(対象の文字列, 検索する文字列, オプション={})

オプション

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

例

Railsの前後2文字を抽出

excerpt('文字列から特定の部分のみを抽出する', '特定', radius: 2)
#=> RubyとRails7の基本か...

前後3文字を抽出して、･･･を付与

excerpt('RubyとRails7の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails', radius: 3, omission: "･･･")
#=> ･･･byとRails7の基･･･

ソースコード

GitHub

文字列を切り捨てる

説明

文字列を切り捨てる

使い方

truncate(文字列, オプション={}, ブロック引数)

オプション

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

例

30文字で切り捨てる

truncate("20文字以上のテキストは、20文字で切り捨てられる")
#=> 20文字以上のテキストは、20文字で切り...

20文字以内の「、」で切り捨てる

truncate("20文字以上のテキストは、20文字で切り捨てられる", separator: "、")
#=> 20文字以上のテキストは、...

20文字で切り捨て、末尾の文字列を追加

truncate("20文字以上のテキストは、20文字で切り捨てられる", omission: "・・・")
#=> 20文字以上のテキストは、20文字で切り・・・

ソースコード

GitHub

ハイライト表示

説明

ハイライト

使い方

highlight(文字列, ハイライトする文字列, オプション={}, ブロック引数)

例

ハイライト

highlight('指定した文字をハイライトすることができる', 'ハイライト')
# => 指定した文字を<mark>ハイライト</mark>することができる

複数指定

highlight('指定した文字をハイライトすることができる', /指定した文字|ハイライト/)
# => <mark>指定した文字</mark>を<mark>ハイライト</mark>することができる

ハイライト方法を変更

highlight('指定した文字をハイライトすることができる', 'ハイライト', highlighter: '<em>\1</em>')
# => 指定した文字を<em>ハイライト</em>することができる

リンクでハイライト

highlight('指定した文字をハイライトすることができる', 'ハイライト')  do |match|
    link_to(search_path(q: match, match))
end
# => 指定した文字を<a href="search?q=ハイライト">ハイライト</a>することができる

ソースコード

GitHub

エスケープしない

説明

文字列をエスケープしない

使い方

raw(文字列)

エスケープする文字列

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

例

エスケープしないで出力

raw "<h1>Railsドキュメント</h1>"
#=> <h1>Railsドキュメント</h1>

ソースコード

GitHub

HTMLセーフなJOIN

説明

HTMLセーフなJOIN

使い方

safe_join(配列, sep = $,)

例

safe_join([raw("<p>foo</p>"), "<p>bar</p>"], "<br />")
#=> "<p>foo</p><br /&gt;<p&gt;bar</p&gt;"

ソースコード

GitHub

出力結果を変数に格納

説明

出力結果を変数に格納
テンプレートの一部を変数に保存することなどが可能

使い方

capture(引数..)

例

<% @time = capture do %>
    現在の時刻は<%= Time.now %>
<% end %>
<%= @time %>
#=> 現在の時刻は Sat Dec 24 00:00:00 +0900 2011

ソースコード

GitHub

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

説明

任意のHTMLタグを生成

使い方

tag(タグ名=nil, オプション=nil or HTML属性=nil or イベント属性=nil, HTML4互換=false, エスケープするか=true)

オプション

オプション	説明
:data	Data要素のカスタマイズ
:disabled	無効化

HTML属性

HTML属性	説明
:confirm	確認ダイアログに表示する文字列
:disable_with	ボタンを無効化したときに表示する文字列
:size	フォームの幅
:maxlength	入力フィールドに入力可能な最大文字数
:accept	フォームで受付可能なMIMEタイプ
:readonly	フォームの内容変更禁止
:tabindex	Tabキーによる入力欄の移動順
:accesskey	フォームに移動するショートカットキー
:id	要素固有の識別子
:class	要素を分類するクラス名
:title	要素の補足情報
:style	要素の補足情報
:dir	表記方向
:lang	基本言語

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時

例

h1タグを生成

tag.h1 'All titles fit to print'
#=> <h1>All titles fit to print</h1>

divタグを生成

tag.div tag.p('Hello world!')
#=> <div><p>Hello world!</p></div>

class属性を複数指定

tag.section class: %w( kitties puppies )
#=> <section class="kitties puppies"></section>

sectionタグを生成

tag.section id: dom_id(@post)
#=> <section id="<generated dom id>"></section>

無効化

tag.input type: 'text', disabled: true
#=> <input type="text" disabled="disabled">

data属性を指定

tag.article data: { user_id: 123 }
#=> <article data-user-id="123"></article>

古い指定の仕方

tag(name, options = nil, open = false, escape = true)

ソースコード

GitHub

URLを生成

説明

コントローラやアクションなどからURLを生成

使い方

url_for(オプション=nil)

オプション

オプション	説明	デフォルト値

:controller	コントローラ名
:action	アクション名
:id	IDを指定
:only_path	trueなら、URL全体ではなくパス部分を返す	false
:protocol	URLのプロトコルを指定	http
:host	URLのホストを指定
:subdomain	サブドメインを指定
:tld_length	TLDレングスを指定	1
:port	ポート番号を指定
:anchor	アンカー(URLの#以降)を指定
:params	パラメータを指定
:trailing_slash	末尾にスラッシュを付与
:script_name	スクリプト名を指定
:locale	ロケールを指定
:protocol	URLのプロトコルを指定
:user	HTTP認証
:password	HTTP認証

例

URLを生成

url_for controller: 'pages', action: 'show'
#=> '/pages/show'

絶対URL

url_for controller: 'pages', action: 'show', only_path: false
#=> 'http://localhost/pages/show'

ソースコード

GitHub

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

説明

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

使い方

content_for(コンテンツ名, コンテンツ=nil, オプション={}, ブロック引数)

オプション

オプション	説明
:flush	スタックを削除

例

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

<% content_for :extend_menu do %>
  [<%= link_to 文字列A, action: "A" %>]
  [<%= link_to 文字列B, action: "B" %>]
<% end %>

スクリプト識別

<% content_for :script do %>
  <script>alert('You are not authorized to view this page!')</script>
<% end %>

ソースコード

GitHub

コンテンツがまだキャプチャされていないかどうかをチェック

説明

content_forを使用してコンテンツがまだキャプチャされていないかどうかをチェック

使い方

content_for?(名前)

例

<%# This is the layout %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>My Website</title>
  <%= yield :script %>
</head>
<body class="<%= content_for?(:right_col) ? 'two-column' : 'one-column' %>">
  <%= yield %>
  <%= yield :right_col %>
</body>
</html>

ソースコード

GitHub

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

説明

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

使い方

content_tag(タグの名前, コンテンツ=nil or HTML属性=nil or イベント属性=nil, ブロック引数)

HTML属性

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

イベント属性

イベント属性	説明
:onclick	クリックされた時
:ondblclick	ダブルクリックされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	カーソルが重なった時
:onmousemove	カーソルが移動した時
:onmouseout	カーソルが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離された時

例

pタグを生成

content_tag :p, "Hello world"
#=> <p>Hello&nbsp;world</p>

divタグをclass名を付けて生成

content_tag(:div, content_tag(:p, "Hello world!"), class: "strong")
#=> <div class="strong"><p>Hello world!</p></div>

ソースコード

GitHub

タグを取り除く

説明

HTMLタグを取り除く

使い方

strip_tags(html)

例

HTMLタグを取り除く

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

複数箇所でタグあり

strip_tags("<b>Bold</b> no more!  <a href='more.html'>See more here</a>...")
# Bold no more!  See more here...

エスケープされる文字あり

strip_tags("> A quote from Smith & Wesson")
# > A quote from Smith & Wesson

ソースコード

GitHub

リンクのみ取り除く

説明

リンクのみ取り除く

使い方

strip_links(html)

例

リンクのみ取り除く

strip_links('%3Ca+href%3D%22http%3A%2F%2Fwww.rubyonrails.org%22%3ERuby+on+Rails%3C%2Fa')
#=> Ruby on Rails

リンクのみ取り除く

strip_links('Please e-mail me at %3Ca+href%3D%22mailto%3Ame%40email.com%22%3Eme%40email.com%3C%2Fa%3E.')
#=> Please e-mail me at me@email.com.

class属性などがある場合

strip_links('Blog: %3Ca+href%3D%22http%3A%2F%2Fwww.myblog.com%2F%22+class%3D%22nav%22+target%3D%22_blank%22%3EVisit%3C%2Fa%3E.')
#=> Blog: Visit.

エスケープされる文字あり

strip_links('%3Ca+href%3D%22https%3A%2F%2Fexample.org%22%3Emalformed+%26+link%3C%2Fa%3E')
#=> malformed &amp; link

ソースコード

GitHub

サニタイズ

説明

サニタイズ

使い方

sanitize(文字列,  オプション={})

オプション

名前	説明
:tags	許可するHTMLタグ名
:attributes	許可するHTML属性名
:scrubber	スクラブ指定

例

サニタイズ

sanitize "<h2>Ruby on Railsドキュメント</h2>"

許可するHTMLタグを指定

sanitize @comment.body, tags: %w(strong em a), attributes: %w(href)

ソースコード

GitHub

指定したURLが現在表示されているかチェック

説明

指定したURLが現在表示されているかチェック

使い方

current_page?(オプション=nil, check_parameters: チェックパラメータ=false, オプション引数)

例

表示されていない場合

current_page?(action: 'process')
# false

アクションを指定

current_page?(action: 'checkout')
# true

コントローラとアクションを指定

current_page?(controller: 'library', action: 'checkout')
# false

パラメータを指定

current_page?(controller: 'shop', action: 'checkout', order: 'asc')
# false

URLを指定

current_page?('http://www.example.com/shop/checkout')
# true

パラメータをチェック

current_page?('http://www.example.com/shop/checkout', check_parameters: true)
# false

クエリを指定

current_page?('http://www.example.com/shop/checkout?order=desc&page=1')
# true

ソースコード

GitHub

日付データをフォーマット

説明

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

使い方

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)
%H	24時間制の時(00-23)
%I	12時間制の時(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

ソースコード

GitHub

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

説明

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

使い方

asset_path(ファイルへのパス, オプション={})

オプション

オプション	説明
:type	ファイルのタイプ
:skip_pipeline	assetsのpathを付けない
:extname	拡張子指定

例

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

asset_path "application.js"
# "/assets/application-60aa4fdc5cea14baf5400fba1abf4f2a46a5166bad4772b1effe341570f07de9.js"

assetsのpathを付けない

asset_path "application.js", skip_pipeline: true
# "application.js"

javascriptへのパスを取得

asset_path "application", type: :javascript
# /javascripts/application.js

stylesheetへのパスを取得

asset_path "application", type: :stylesheet
# /stylesheets/application.css

絶対パス指定

asset_path "/foo.png"
# "/foo.png"

URLを指定してパスを取得

asset_path "http://www.example.com/js/xmlhr.js"
# http://www.example.com/js/xmlhr.js

拡張子指定

asset_path "foo", skip_pipeline: true, extname: ".js"
# "/foo.js"

ソースコード

GitHub

assetファイルへのURLを取得

説明

公開ディレクトリにあるアセットへの絶対パス

使い方

asset_url(ファイルへのパス, オプション={})

オプション

オプション	説明
:type	ファイルのタイプ
:skip_pipeline	assetsのpathを付けない
:extname	拡張子指定
:host	相対パスの場合にホストを追加
:protocol	プロトコル

例

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

asset_url "application.js"
#=> http://example.com/assets/application.js

hostを指定

asset_url "application.js", host: "http://cdn.example.com"
#=> http://cdn.example.com/assets/application.js

ソースコード

GitHub

非出力コード内で出力

説明

非出力コード内(<% %>)で出力

使い方

concat(文字列)

例

<%
  concat "hello"

  if logged_in
    concat "Logged in!"
  else
    concat link_to('login', action: :login)
  end
%>

ソースコード

GitHub

指定された文字列からCDATAセクションを出力

説明

指定した文字列からCDATAセクションを出力

使い方

cdata_section(文字列)

例

指定した文字列からCDATAセクションを出力

cdata_section("<hello world>")
#=> <![CDATA[<hello world>]]>

ファイルから読み込む

cdata_section(File.read("hello_world.txt"))
#=> <![CDATA[<hello from a text file]]>

ソースコード

GitHub

日時を表示

説明

日時を表示
Twitterなどで見かける「3分前」みたいな表示をする場合に使う

使い方

time_ago_in_words(時間, オプション={})

例

日時を表示

time_ago_in_words(3.minutes.from_now)
# 3 minutes

3分

time_ago_in_words(3.minutes.ago)
# 3 minutes

約15時間

time_ago_in_words(Time.now - 15.hours)
# about 15 hours

1分未満

time_ago_in_words(Time.now)
# less than a minute

より詳しい時間を取得

time_ago_in_words(Time.now, include_seconds: true)
# less than 5 seconds

変数を指定

from_time = Time.now - 3.days - 14.minutes - 25.seconds
time_ago_in_words(from_time)
# 3 days

ソースコード

GitHub

指定された長さ以降の空白に改行を入れて出力

説明

指定された長さ以降の空白に改行を入れて出力

使い方

word_wrap(テキスト, line_width: 幅=80, break_sequence: 改行='\\n')

オプション

オプション	説明

:line_width	改行する文字の長さ(デフォルト値: 80)
:break_sequence	改行コード(デフォルト値: \n)

例

指定された長さ以降の空白に改行を入れて出力

word_wrap('Once upon a time')
# Once upon a time

80文字以上で改行

word_wrap('Once upon a time, in a kingdom called Far Far Away, a king fell ill, and finding a successor to the throne turned out to be more trouble than anyone could have imagined...')
# Once upon a time, in a kingdom called Far Far Away, a king fell ill, and finding\na successor to the throne turned out to be more trouble than anyone could have\nimagined...

改行する文字の長さを変更

word_wrap('Once upon a time', line_width: 8)
# Once\nupon a\ntime

改行コードを変更

word_wrap('Once upon a time', line_width: 1, break_sequence: "\r\n")
# Once\r\nupon\r\na\r\ntime

ソースコード

GitHub

ブロック内の実行時間を測定し結果をログに記録

説明

ブロック内の実行時間を測定し結果をログに記録

使い方

benchmark(メッセージ='Benchmarking', オプション={}, ブロック引数)

オプション

オプション	説明
:level	ログレベル
:silence	ブロック内でのログ出力をしない

例

ブロック内の実行時間を測定し結果をログに記録

benchmark 'Process data files' do
  expensive_files_operation
end

ログレベルを指定

benchmark 'Low-level files', level: :debug do
  lowlevel_files_operation
end

ソースコード

GitHub

電話番号へのアンカーリンクを生成

説明

電話番号へのアンカーリンクを生成

使い方

phone_to(電話番号, リンクテキスト=nil, オプション={}, ブロック引数)

オプション

オプション	説明
:country_code	電話番号の前に国番号を付ける

例

電話番号のタグを生成

phone_to "1234567890"
#=> <a href="tel:1234567890">1234567890</a>

リンクテキストを指定

phone_to "1234567890", "Phone me"
#=> <a href="tel:1234567890">Phone me</a>

国番号を付与

phone_to "1234567890", country_code: "01"
#=> <a href="tel:+011234567890">1234567890</a>

ソースコード

GitHub

SMS用のタグを生成

説明

SMS用のタグを生成

使い方

sms_to(電話番号, リンクテキスト=nil, オプション={}, ブロック引数)

オプション

オプション	説明
:country_code	電話番号の前に国番号を付ける
:body	メッセージの本文

例

SMS用のタグを生成

sms_to "5155555785"
#=> <a href="sms:5155555785;">5155555785</a>

リンクテキストを指定

sms_to "5155555785", "Text me"
#=> <a href="sms:5155555785;">Text me</a>

国番号を付与

sms_to "5155555785", country_code: "01"
#=> <a href="sms:+015155555785;">5155555785</a>

メッセージの本文

sms_to "5155555785", body: "I have a question about your product."
#=> <a href="sms:5155555785;?body=I%20have%20a%20question%20about%20your%20product">5155555785</a>

ソースコード

GitHub

ブラウザがプリロードに使用できるリンクタグを生成

説明

ブラウザがプリロードに使用できるリンクタグ

使い方

preload_link_tag(パス, オプション={})

オプション

オプション	説明
:type	MIMEタイプを上書き
:as	as属性を上書き
:crossorigin	クロスオリジン属性を指定
:nopush	リソースにサーバープッシュの使用を望まないか
:integrity	整合性属性を指定

例

ファイル名を指定

preload_link_tag("custom_theme.css")
#=> <link rel="preload" href="/assets/custom_theme.css" as="style" type="text/css" />

相対パスを指定

preload_link_tag("/videos/video.webm")
#=> <link rel="preload" href="/videos/video.mp4" as="video" type="video/webm" />

パスを指定

preload_link_tag(post_path(format: :json), as: "fetch")
#=> <link rel="preload" href="/posts.json" as="fetch" type="application/json" />

ファイルパスを指定

preload_link_tag("//example.com/font.woff2")
#=> <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

クロスオリジン属性を指定

preload_link_tag("//example.com/font.woff2", crossorigin: "use-credentials")
#=> <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="use-credentials" />

リソースにサーバープッシュの使用を望まない

preload_link_tag("/media/audio.ogg", nopush: true)
#=> <link rel="preload" href="/media/audio.ogg" as="audio" type="audio/ogg" />

ソースコード

GitHub

ダイレクトまたは通常の名前のルート

説明

ダイレクトまたは通常の名前のルート

使い方

route_for(名前, パス..)

例

resources :buckets
direct :recordable do |recording|
    route_for(:bucket, recording.bucket)
end
direct :threadable do |threadable|
    route_for(:recordable, threadable.parent)
end

ソースコード

GitHub

DOMのclass規約に沿った名前を取得

説明

DOMのclass規約に沿った名前を取得

使い方

dom_class(レコードまたはクラス, prefix=nil)

例

dom_class(post)   #=> "post"
dom_class(Person) #=> "person"

ソースコード

GitHub

DOMのid規約に沿った名前を取得

説明

DOMのid規約に沿った名前を取得

使い方

dom_id(レコード, prefix=nil)

例

dom_id(Post.find(45))
#=> "post_45"

dom_id(Post.new)
#=> "new_post"

ソースコード

GitHub

CSRF対策用のメタタグを生成

説明

CSRF対策用のメタタグを生成

使い方

csrf_meta_tags()

例

<head>
    <%= csrf_meta_tags %>
</head>

ソースコード

GitHub

コンテンツを含んだJavaScriptタグを生成

説明

コンテンツを含んだJavaScriptタグを生成

使い方

javascript_tag(コンテンツ=nil, HTMLオプション=nil, ブロック引数)

例

JavaScriptタグを生成

javascript_tag "alert('All is good')"

HTMLオプション

javascript_tag "alert('All is good')", type: 'application/javascript'

ブロック

<%= javascript_tag type: 'application/javascript' do -%>
  alert('All is good')
<% end -%>

ソースコード

GitHub

javascriptの改行やシングルおよびダブルクォートをエスケープ

説明

javascriptの改行やシングルおよびダブルクォートをエスケープ

使い方

escape_javascript(javascript)

j(javascript)

例

javascriptの改行やシングルおよびダブルクォートをエスケープ

$('some_element').replaceWith('<%= escape_javascript render 'some/element_template' %>');

短縮系

$('some_element').replaceWith('<%= j render 'some/element_template' %>');

ソースコード

GitHub

nonce値を含むcsp-nonceメタタグを生成

説明

nonce値を含むcsp-nonceメタタグを生成

使い方

csp_meta_tag(オプション引数)

例

<head>
  <%= csp_meta_tag %>
</head>

ソースコード

GitHub

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

説明

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

使い方

<%= yield %>

例

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

<body>
    <%= yield %>
</body>

# 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 %>

条件式がtrueの時にキャッシュ

説明

条件式がtrueの時にキャッシュ

使い方

cache_if(条件式, キー名={}, オプション={}, ブロック引数)

例

<% cache_if admin?, project do %>
  <b>All the topics on this project</b>
  <%= render project.topics %>
<% end %>

ソースコード

GitHub

条件式がfalseの時にキャッシュ

説明

条件式がfalseの時にキャッシュ

使い方

cache_unless(条件式, キー名={}, オプション={}, ブロック引数)

例

<% cache_unless admin?, project do %>
  <b>All the topics on this project</b>
  <%= render project.topics %>
<% end %>

ソースコード

GitHub

キャッシュがブロック内にあるか

説明

キャッシュがブロック内にあるか

使い方

caching?()

例

<% cache project do %>
  <% raise StandardError, "Caching private data!" if caching? %>
<% end %>

ソースコード

GitHub

キャッシュブロック内から呼び出された場合にUncacheableFragmentErrorが発生

説明

キャッシュブロック内から呼び出された場合にUncacheableFragmentErrorが発生

使い方

uncacheable!()

例

def project_name_with_time(project)
  uncacheable!
  "#{project.name} - #{Time.now}"
end

ソースコード

GitHub