[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

Railsドキュメント

検索

ビュー(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>

ソースコード

説明

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

使い方

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

ソースコード

説明

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

使い方

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

ソースコード

説明

現在の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

ソースコード

ボタンでリンクを生成

説明

ボタンでリンクを生成

使い方

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>

ソースコード

イメージタグを生成

説明

イメージタグを生成

使い方

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

ソースコード

画像へのパスを取得

説明

画像へのパスを取得

使い方

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

オプション

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

例

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

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

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

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

ソースコード

画像のURLを取得

説明

画像のURL

使い方

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

オプション

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

例

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

ソースコード

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

説明

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

使い方

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

ソースコード

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

ソースコード

公開されている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

ソースコード

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

説明

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

使い方

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

オプション

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

例

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

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

ソースコード

フォントアセットへの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

ソースコード

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

説明

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

使い方

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

ソースコード

説明

モデルと関連のない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" />

ソースコード

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>

ソースコード

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

説明

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

使い方

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

ソースコード

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

説明

動画ファイルへのURL

使い方

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

例

動画ファイルへのURL

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

ソースコード

説明

ファビコンのタグを生成

使い方

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

ソースコード

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>

ソースコード

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

ソースコード

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

ソースコード

説明

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

使い方

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

ソースコード

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

説明

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

使い方

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

ソースコード

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

説明

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

使い方

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

オプション

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

例

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

ソースコード

奇数偶数で処理を変える

説明

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

使い方

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>

ソースコード

奇数偶数で処理を変える

説明

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

使い方

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>

ソースコード

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>

ソースコード

デバッグを出力

説明

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

使い方

debug(オブジェクト)

例

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

ソースコード

文字列加工

説明

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

  • 文字列を<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>

ソースコード

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

説明

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

使い方

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

オプション

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

例

Railsの前後2文字を抽出

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

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

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

ソースコード

文字列を切り捨てる

説明

文字列を切り捨てる

使い方

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

オプション

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

例

30文字で切り捨てる

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

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

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

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

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

ソースコード

ハイライト表示

説明

ハイライト

使い方

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>することができる

ソースコード

エスケープしない

説明

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

使い方

raw(文字列)

エスケープする文字列

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

例

エスケープしないで出力

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

ソースコード

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

ソースコード

出力結果を変数に格納

説明

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

使い方

capture(引数..)

例

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

ソースコード

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

説明

任意の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)

ソースコード

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'

ソースコード

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

説明

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

使い方

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

ソースコード

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

説明

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>

ソースコード

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

説明

タグを動的に生成
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>

ソースコード

タグを取り除く

説明

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

ソースコード

説明

リンクのみ取り除く

使い方

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

ソースコード

サニタイズ

説明

サニタイズ

使い方

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

オプション

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

例

サニタイズ

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

許可するHTMLタグを指定

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

ソースコード

指定した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

ソースコード

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

説明

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

使い方

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

ソースコード

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"

ソースコード

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

ソースコード

非出力コード内で出力

説明

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

使い方

concat(文字列)

例

<%
  concat "hello"

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

ソースコード

指定された文字列から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]]>

ソースコード

日時を表示

説明

日時を表示
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

ソースコード

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

説明

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

使い方

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

ソースコード

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

説明

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

使い方

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

オプション

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

例

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

benchmark 'Process data files' do
  expensive_files_operation
end

ログレベルを指定

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

ソースコード

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

説明

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

使い方

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>

ソースコード

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>

ソースコード

説明

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

使い方

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

ソースコード

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

説明

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

使い方

route_for(名前, パス..)

例

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

ソースコード

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

説明

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

使い方

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

例

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

ソースコード

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

説明

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

使い方

dom_id(レコード, prefix=nil)

例

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

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

ソースコード

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

説明

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

使い方

csrf_meta_tags()

例

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

ソースコード

コンテンツを含んだ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 -%>

ソースコード

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' %>');

ソースコード

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

説明

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

使い方

csp_meta_tag(オプション引数)

例

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

ソースコード

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

説明

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

使い方

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

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

説明

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

使い方

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

例

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

ソースコード

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

説明

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

使い方

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

例

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

ソースコード

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

説明

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

使い方

caching?()

例

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

ソースコード

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

説明

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

使い方

uncacheable!()

例

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

ソースコード