ビューについて
説明
HTML、XMLなどの各種フォーマットでのレスポンスを生成
主に、ユーザに見せるインターフェイスのデザイン
ビューの規約
- ファイルはapp/viewsディレクトリに格納
ERBとは
説明
HTMLなどの文章の中にRubyスクリプトを埋め込むためのライブラリ
使い方
出力がいらないコード
<% ～ %>
結果を出力
<%= ～ %>
結果をエスケープしてしないで出力
<%== ～ %>
後ろの改行を取り除く
<% ～ -%>
行頭までの空白を削除
<%- ～ %>
コメント
<%# ～ %>
ビューの変数
使い方
@変数名
ビューからコントローラのインスタンス変数(@変数名)にアクセスできる
コメント構文
説明
Rubyの標準のコメントアウト構文
<%# コメント %>
<%#
複数行のコメントもOK
%>
begin
ドキュメンテンーションコメントを記述するときによく使う構文
<% =begin %>
<%= コメント %>
<% =end %>
<% if false %>
条件文を利用したコメントアウト構文
<% if false %>
<%= コメント %>
<% end %>
<!–
HTMLの標準のコメントアウト構文
<!-- コメント -->
コントローラで処理された内容を埋め込む先
説明
コントローラで処理された内容を埋め込む先を指定
使い方
<%= 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 %>
レイアウトに複数のコンテンツを設定
説明
レイアウトに複数のコンテンツを設定
使い方
content_for コンテンツ名 [, コンテンツ, オプション] do
コンテンツ
end
オプション
| オプション | 説明 |
|---|---|
| :flush | スタックを削除 |
例
レイアウトに複数のコンテンツを設定
<% content_for :extend_menu do %>
[<%= link_to 文字列A, action: "A" %>]
[<%= link_to 文字列B, action: "B" %>]
<% end %>
ソースコード
レイアウトテンプレート
特徴
- 生成される場所「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メソッドについて
URLを生成
説明
コントローラやアクションなどからURLを生成
使い方
url_for([オプション])
オプション
| オプション | 説明 | デフォルト値 |
|---|---|---|
| :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_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'
ソースコード
リンクを生成
説明
リンクを生成
使い方
link_to(リンクテキスト, パス [, オプション, 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メソッド(: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(条件式, リンクテキスト, url [, オプション, 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 | フォーカスを失った時 |
例
@pageがあれば、編集のリンクを表示
link_to_if(@page, "編集", { controller: "pages", action: "edit" })
ソースコード
条件に一致しなかったらリンクを生成
説明
条件に一致しなかったらリンクを生成
使い方
link_to_unless(条件式, リンクテキスト, url [, オプション, 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 | フォーカスを失った時 |
例
@pageが空じゃなかったら、編集のリンクを表示
link_to_unless(@page.nil?, "編集", { controller: "pages", action: "edit" })
ソースコード
現在のURLと一致しなかったらリンクを生成
説明
現在のURLと一致しなかったらリンクを生成
使い方
link_to_unless_current(リンクテキスト, url [, オプション, 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 | フォーカスを失う際に値が変化していた時 |
例
現在のページだったらリンクを表示しない
link_to_unless_current "新規作成", controller: "profiles", action: "new"
ソースコード
ボタンでリンクを生成
説明
ボタンでリンクを生成
使い方
button_to(文字列 [, オプション, データ属性 or HTML属性 or イベント属性])
オプション
| オプション | 説明 | デフォルト値 |
|---|---|---|
| :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(画像ファイルへのパス, [, オプション or 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"
ソースコード
メールアドレス用のタグを生成
説明
メールアドレス用のタグを生成
使い方
mail_to(メールアドレス, [リンクテキスト, オプション])
オプション
| オプション | 説明 |
|---|---|
| :subject | メールの件名 |
| :body | メールの本文 |
| :cc | カーボンコピー |
| :bcc | ブラインドカーボンコピー |
| :reply_to | Reply-Toフィールド |
例
メールアドレス用のタグを生成
mail_to "me@domain.com"
# <a href="mailto:me@domain.com">me@domain.com</a>
リンクテキストを指定
mail_to "me@domain.com", "My email"
# <a href="mailto:me@domain.com">My email</a>
オプションを指定
mail_to "me@domain.com", "My email", cc: "ccaddress@domain.com", subject: "This is an example email"
# <a href="mailto:me@domain.com?cc=ccaddress@domain.com&subject=This%20is%20an%20example%20email">My email</a>
ソースコード
audioを生成
説明
モデルと関連のない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" />
ソースコード
音声ファイルへのパス取得
説明
音声ファイルへのパスを取得
使い方
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(フォードの種類, [URLオプション, オプション])
フィードの種類
| 種類 | 説明 |
|---|---|
| :rss | RSS |
| :atom | Atom |
| :json | JSON |
オプション
| オプション | 説明 | デフォルト値 |
|---|---|---|
| :rel | 外部文章との関係 | alternate |
| :type | コンテンツタイプ | application/rss+xml |
| :title | タイトル | type |
例
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" />
ソースコード
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
ソースコード
ファビコンのタグを生成
説明
ファビコンのタグを生成
使い方
favicon_link_tag(画像へのパス [, オプション])
オプション
| オプション | 説明 |
|---|---|
| :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" />
サイズ指定
favicon_link_tag 'favicons/fav-16x16.png', type: 'image/png', sizes: "16x16"
ソースコード
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(スタイルシートへのパス [, 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_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" />
ソースコード
JavaScriptをインクルード
説明
JacaScriptファイルをインクルード
使い方
javascript_include_tag(JavaScriptファイルへのパス [, オプション])
JavaScriptファイルへのパスの予約語
| 予約語 | 説明 |
|---|---|
| :all | app/assets/javascripts/フォルダ配下のすべての.jsファイルをインクルード |
| :default | 特定の.jsファイルをインクルード |
オプション
| オプション | 説明 |
|---|---|
| :extname | 拡張子がない場合に拡張子を追加 |
| :protocol | プロトコルを指定 |
| :host | 相対パスの場合にホストを追加 |
| :skip_pipeline | アセットパイプラインをスキップ |
| :nonce | nonce属性 |
例
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>
ソースコード
スタイルシートへのパスを取得
説明
外部スタイルシートへのパスを生成
使い方
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で現在の値を取得
例
奇数、偶数で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>
ソースコード
奇数偶数で処理を変える
説明
あらかじめ指定した値を順番に取得
使い方
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で返す値を初期化
説明
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>
ソースコード
デバッグを出力
説明
デバッグなどで変数の中身を確認したいときなどに使用
使い方
debug(オブジェクト)
例
デバッグ表示
debug(@categories)
# [#<Category id: 1, name: "Railsの基礎知識">, #<Category id: 2, name: "Rubyの基礎知識">]
ソースコード
文字列加工
説明
文字列を下記の条件で加工
- 文字列を<p>で括る
- 改行は
を付与 - 連続した改行は、</p><p>を付与
使い方
simple_format(文字列 [, オプション or 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の前後5文字を抽出
excerpt('RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails', radius: 5)
# RubyとRails3の基本か...
前後3文字を抽出して、･･･を付与
excerpt('RubyとRails3の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails', radius: 3, omission: "･･･")
# ･･･byとRails3の基･･･
ソースコード
文字列を切り捨てる
説明
文字列を切り捨てる
使い方
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の基本からビュー、モデル、コント・・・
ソースコード
ハイライト表示
説明
ハイライト
使い方
highlight(文字列, ハイライトする文字列 [, highighter: ハイライトする文字列を置き換える形式)
例
「Rails」をハイライトする
highlight('RubyとRails6の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails')
# Rubyと**Rails**3の基本からビュー、モデル、コントローラなどを、分かりやすく解説
ハイライトする文字列をリンクにする
highlight('RubyとRails6の基本からビュー、モデル、コントローラなどを、分かりやすく解説', 'Rails', highlighter: '[¥1](/¥1)')
# Rubyと[¥1](/¥1)3の基本からビュー、モデル、コントローラなどを、分かりやすく解説
ソースコード
エスケープしない
説明
文字列をエスケープしない
使い方
raw(文字列)
エスケープする文字列
| 変換前 | 変換後 | 説明 |
|---|---|---|
| < | < | 右大不等号 |
| > | > | 左大不等号 |
| & | & | アンドマーク、アンパサンド |
| ” | " | ダブルクォート |
例
エスケープしないで出力
raw "<h1>Railsドキュメント</h1>"
# <h1>Railsドキュメント</h1>
ソースコード
出力結果を変数に格納
説明
出力結果を変数に格納
テンプレートの一部を変数に保存することなどが可能
使い方
@var = capture do
格納する文字列
end
例
出力結果を変数に格納
<% @time = capture do %>
現在の時刻は<%= Time.now %>
<% end %>
<%= @time %>
# 現在の時刻は Sat Dec 24 00:00:00 +0900 2011
ソースコード
本体を持たない任意のタグを生成
説明
任意のHTMLタグを生成
使い方
tag.タグ名([, オプション or HTML属性 or イベント属性, HTML4互換, エスケープするか])
オプション
| オプション | 説明 |
|---|---|
| :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)
ソースコード
本体を持つ任意のタグを生成
説明
タグを動的に生成
HTMLとERBが混ざってしまう場合などに使用するとすっきり表現できる
使い方
content_tag(タグの名前 [, コンテンツ or HTML属性 or イベント属性])
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 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('<a href="http://www.rubyonrails.org">Ruby on Rails</a>')
# Ruby on Rails
リンクのみ取り除く
strip_links('Please e-mail me at <a href="mailto:me@email.com">me@email.com</a>.')
# Please e-mail me at me@email.com.
class属性などがある場合
strip_links('Blog: <a href="http://www.myblog.com/" class="nav" target=\"_blank\">Visit</a>.')
# Blog: Visit.
エスケープされる文字あり
strip_links('<<a href="https://example.org">malformed & link</a>')
# <malformed & 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?(オプション [, 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"
ソースコード
非出力コード内で出力
説明
非出力コード内(<% %>)で出力
使い方
concat(文字列)
例
<%
concat "hello"
if logged_in
concat "Logged in!"
else
concat link_to('login', action: :login)
end
%>
ソースコード
フラグメントキャッシュが有効かチェック
説明
フラグメントキャッシュが有効かチェック
使い方
cache_if(条件式 [, キー名, オプション])
例
<% cache_if admin?, project do %>
<b>All the topics on this project</b>
<%= render project.topics %>
<% 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(text, [オプション])
オプション
| オプション | 説明 | デフォルト値 |
|---|---|---|
| :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([メッセージ, オプション])
オプション
| オプション | 説明 |
|---|---|
| :level | ログレベル |
| :silence | ブロック内でのログ出力をしない |
例
ブロック内の実行時間を測定し結果をログに記録
<% benchmark 'Process data files' do %>
<%= expensive_files_operation %>
<% end %>
ログレベルを指定
<% benchmark 'Low-level files', level: :debug do %>
<%= lowlevel_files_operation %>
<% end %>