Mojolicious::Plugin::TagHelpers

Yuki Kimoto edited this page Apr 8, 2015 · 9 revisions

Mojolicious API リファレンス

名前

Mojolicious::Plugin::TagHelpers - タグヘルパープラグイン

使い方

# Mojolicious
$self->plugin('TagHelpers');

# Mojolicious::Lite
plugin 'TagHelpers';

説明

Mojolicious::Plugin::TagHelpers は、 Mojolicious 用の HTML5 タグヘルパーの集合です。

ほとんどのフォームヘルパーは、自動的に以前の入力値を拾うことができ、 それらをデフォルトとして表示するでしょう。 または、 param を使用して手動で値を設定し、 必要な属性を常に自動的に生成させることができます。

% param country => 'germany' unless param 'country';
<%= radio_button country => 'germany' %> Germany
<%= radio_button country => 'france'  %> France
<%= radio_button country => 'uk'      %> UK

For fields that failed validation with Mojolicious::Controllervalidationで失敗したバリデーションの フィールドのためにfield-with-errorクラスが自動的に tag_with_errorヘルパーを通して追加されます。 CSSでスタイルするのを簡単にします。

<input class="field-with-error" name="age" type="text" value="250">

これはコアプラグインなので、いつでも使用可能であり、 新しくプラグインを作成する方法を学ぶための良いコード例となります。

デフォルトで利用可能なプラグインの一覧はMojolicious::Pluginsプラグインの項目を見てください。

ヘルパー

Mojolicious::Plugin::TagHelpersは次のヘルパーを実装しています。

check_box

%= check_box employed => 1
%= check_box employed => 1, disabled => 'disabled'

チェックボックスとなる input 要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="employed" type="checkbox" value="1">
<input disabled="disabled" name="employed" type="checkbox" value="1">

color_field

%= color_field 'background'
%= color_field background => '#ffffff'
%= color_field background => '#ffffff', id => 'foo'

色入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="background" type="color">
<input name="background" type="color" value="#ffffff">
<input id="foo" name="background" type="color" value="#ffffff">

csrf_field

%= csrf_field

Mojolicious::Plugin::DefaultHelperscsrf_tokenを使って、 hiddenタイプのinputタグを生成します。

<input name="csrf_token" type="hidden" value="fa6a08...">

date_field

%= date_field 'end'
%= date_field end => '2012-12-21'
%= date_field end => '2012-12-21', id => 'foo'

日付入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="end" type="date">
<input name="end" type="date" value="2012-12-21">
<input id="foo" name="end" type="date" value="2012-12-21">

datetime_field

%= datetime_field 'end'
%= datetime_field end => '2012-12-21T23:59:59Z'
%= datetime_field end => '2012-12-21T23:59:59Z', id => 'foo'

日付時刻入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="end" type="datetime">
<input name="end" type="datetime" value="2012-12-21T23:59:59Z">
<input id="foo" name="end" type="datetime" value="2012-12-21T23:59:59Z">

email_field

%= email_field 'notify'
%= email_field notify => 'nospam@example.com'
%= email_field notify => 'nospam@example.com', id => 'foo'

Eメール入力エレメントを生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="notify" type="email">
<input name="notify" type="email" value="nospam@example.com">
<input id="foo" name="notify" type="email" value="nospam@example.com">

file_field

%= file_field 'avatar'
%= file_field 'avatar', id => 'foo'

ファイルアップロードのための input 要素を生成します。

<input name="avatar" type="file">
<input id="foo" name="avatar" type="file">

form_for

%= form_for login => (method => 'POST') => begin
  %= text_field 'first_name'
  %= submit_button
% end
%= form_for login => {foo => 'bar'} => (method => 'POST') => begin
  %= text_field 'first_name'
  %= submit_button
% end
%= form_for '/login' => (enctype => 'multipart/form-data') => begin
  %= text_field 'first_name', disabled => 'disabled'
  %= submit_button
% end
%= form_for 'http://example.com/login' => (method => 'POST') => begin
  %= text_field 'first_name'
  %= submit_button
% end
%= form_for some_delete_route => begin
  %= submit_button 'Remove'
% end

ルート、パス、URL に対する form 要素を生成します。 GETではなくPOSTを許可するルートのために、 method属性は自動的に追加されます。

<form action="/path/to/login">
  <input name="first_name" type="text">
  <input value="Ok" type="submit">
</form>
<form action="/path/to/login.txt" method="POST">
  <input name="first_name" type="text">
  <input value="Ok" type="submit">
</form>
<form action="/path/to/login" enctype="multipart/form-data">
  <input disabled="disabled" name="first_name" type="text">
  <input value="Ok" type="submit">
</form>
<form action="http://example.com/login" method="POST">
  <input name="first_name" type="text">
  <input value="Ok" type="submit">
</form>
<form action="/path/to/delete/route?_method=DELETE" method="POST">
  <input value="Remove" type="submit">
</form>

hidden_field

%= hidden_field foo => 'bar'
%= hidden_field foo => 'bar', id => 'bar'

隠れた(hidden) input 要素を生成します。

<input name="foo" type="hidden" value="bar">
<input id="bar" name="foo" type="hidden" value="bar">

image

%= image '/images/foo.png'
%= image '/images/foo.png', alt => 'Foo'

画像タグ (訳注: img 要素) を生成します。

<img src="/path/to/images/foo.png">
<img alt="Foo" src="/path/to/images/foo.png">

input_tag

%= input_tag 'first_name'
%= input_tag first_name => 'Default name'
%= input_tag 'employed', type => 'checkbox'

フォームの input 要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="first_name">
<input name="first_name" value="Default name">
<input name="employed" type="checkbox">

javascript

<script src="/path/to/script.js"></script>
%= javascript begin
  var a = 'b';
% end

Javascript資源のためのscriptタグを生成します。

<script src="/script.js" type="text/javascript">
<script type="text/javascript"><![CDATA[
  var a = 'b';
]]></script>

label_for

%= label_for first_name => 'First name'
%= label_for first_name => 'First name', class => 'user'
%= label_for first_name => begin
  First name
% end
%= label_for first_name => (class => 'user') => begin
  First name
% end

labelタグを生成します。

<label for="first_name">First name</label>
<label class="user" for="first_name">First name</label>
<label for="first_name">
  First name
</label>
<label class="user" for="first_name">
  First name
</label>
%= link_to Home => 'index'
%= link_to Home => 'index' => {format => 'txt'} => (class => 'menu')
%= link_to index => {format => 'txt'} => (class => 'menu') => begin
  Home
% end
%= link_to Contact => 'mailto:sri@example.com'
<%= link_to index => begin %>Home<% end %>
<%= link_to '/file.txt' => begin %>File<% end %>
<%= link_to 'http://mojolicio.us' => begin %>Mojolicious<% end %>
<%= link_to url_for->query(foo => 'bar')->to_abs => begin %>Retry<% end %>

ルート、パス、 URL へのリンクを生成します。 デフォルトでは、語頭を大文字にした (capitalized) リンクターゲットが リンク文字列として使用されます。

<a href="/path/to/index">Home</a>
<a class="menu" href="/path/to/index.txt">Home</a>
<a class="menu" href="/path/to/index.txt">
  Home
</a>
<a href="mailto:sri@example.com">Contact</a>
<a href="/path/to/index">Home</a>
<a href="/path/to/file.txt">File</a>
<a href="http://mojolicio.us">Mojolicious</a>
<a href="http://127.0.0.1:3000/current/path?foo=bar">Retry</a>

month_field

%= month_field 'vacation'
%= month_field vacation => '2012-12'
%= month_field vacation => '2012-12', id => 'foo'

月入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="vacation" type="month">
<input name="vacation" type="month" value="2012-12">
<input id="foo" name="vacation" type="month" value="2012-12">

number_field

%= number_field 'age'
%= number_field age => 25
%= number_field age => 25, id => 'foo', min => 0, max => 200

数値入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="age" type="number">
<input name="age" type="number" value="25">
<input id="foo" max="200" min="0" name="age" type="number" value="25">

password_field

%= password_field 'pass'
%= password_field 'pass', id => 'foo'

パスワードのための input 要素を生成します。

<input name="pass" type="password">
<input id="foo" name="pass" type="password">

radio_button

%= radio_button country => 'germany'
%= radio_button country => 'germany', id => 'foo'

ラジオボタンとなる input 要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="country" type="radio" value="germany">
<input id="foo" name="country" type="radio" value="germany">

range_field

%= range_field 'age'
%= range_field age => 25
%= range_field age => 25, id => 'foo', min => 0, max => 200

範囲入力要素。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="age" type="range">
<input name="age" type="range" value="25">
<input id="foo" max="200" min="200" name="age" type="range" value="25">

search_field

%= search_field 'q'
%= search_field q => 'perl'
%= search_field q => 'perl', id => 'foo'

検索入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="q" type="search">
<input name="q" type="search" value="perl">
<input id="foo" name="q" type="search" value="perl">

select_field

%= select_field country => [qw(de en)]
%= select_field country => [[Germany => 'de'], 'en'], id => 'eu'
%= select_field country => [[Germany => 'de', disabled => 'disabled'], 'en']
%= select_field country => [c(EU => [[Germany => 'de'], 'en'], id => 'eu')]
%= select_field country => [c(EU => [qw(de en)]), c(Asia => [qw(cn jp)])]

select, option, optgroup 要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<select name="country">
  <option value="de">de</option>
  <option value="en">en</option>
</select>
<select id="eu" name="country">
  <option value="de">Germany</option>
  <option value="en">en</option>
</select>
<select name="country">
  <option disabled="disabled" value="de">Germany</option>
  <option value="en">en</option>
</select>
<select name="country">
  <optgroup id="eu" label="EU">
    <option value="de">Germany</option>
    <option value="en">en</option>
  </optgroup>
</select>
<select name="country">
  <optgroup label="EU">
    <option value="de">de</option>
    <option value="en">en</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="cn">cn</option>
    <option value="jp">jp</option>
  </optgroup>
</select>

stylesheet

%= stylesheet '/foo.css'
%= stylesheet begin
  body {color: #000}
% end

CSS資源のためのstyleタグかlinkタグを生成します。

<link href="/path/to/foo.css" rel="stylesheet">
<style type="text/css"><![CDATA[
  body {color: #000}
]]></style>

submit_button

%= submit_button
%= submit_button 'Ok!', id => 'foo'

送信ボタンとなる input 要素を生成します。

<input type="submit" value="Ok">
<input id="foo" type="submit" value="Ok!">

t

%=t div => 'test & 123'

tagのエイリアス。

<div>test &amp; 123</div>

tag

%= tag 'br'
%= tag 'div'
%= tag 'div', id => 'foo', hidden => undef
%= tag div => 'test & 123'
%= tag div => (id => 'foo') => 'test & 123'
%= tag div => (data => {my_id => 1, Name => 'test'}) => 'test & 123'
%= tag div => begin
  test & 123
% end
<%= tag div => (id => 'foo') => begin %>test & 123<% end %>

HTML5タグジェネレータ。

<br>
<div></div>
<div id="foo" hidden></div>
<div id="foo">test &amp; 123</div>
<div data-my-id="1" data-name="test">test &amp; 123</div>
<div>
  test & 123
</div>
<div id="foo">test & 123</div>

より特定のタグヘルパーにおいて再利用するために便利です。

my $output = $c->tag('meta');
my $output = $c->tag('meta', charset => 'UTF-8');
my $output = $c->tag(div => '<p>This will be escaped</p>');
my $output = $c->tag(div => sub { '<p>This will not be escaped</p>' });

結果は、不注意のダブルエスケープを阻止するために、自動的にMojo::ByteStreamオブジェクトにラップされます。

tag_with_error

%= tag_with_error 'input', class => 'foo'

c<tag>と同じだが、field-with-errorを追加します。

<input class="foo field-with-error">

tel_field

%= tel_field 'work'
%= tel_field work => '123456789'
%= tel_field work => '123456789', id => 'foo'

電話入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="work" type="tel">
<input name="work" type="tel" value="123456789">
<input id="foo" name="work" type="tel" value="123456789">

text_area

%= text_area 'story'
%= text_area 'story', cols => 40
%= text_area story => 'Default', cols => 40
%= text_area story => (cols => 40) => begin
  Default
% end

textarea 要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<textarea name="story"></textarea>
<textarea cols="40" name="story"></textarea>
<textarea cols="40" name="story">Default</textarea>
<textarea cols="40" name="story">
  Default
</textarea>

text_field

%= text_field 'first_name'
%= text_field first_name => 'Default'
%= text_field first_name => 'Default', class => 'user'

テキスト入力のための input 要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="first_name" type="text">
<input name="first_name" type="text" value="Default">
<input class="user" name="first_name" type="text" value="Default">

time_field

%= time_field 'start'
%= time_field start => '23:59:59'
%= time_field start => '23:59:59', id => 'foo'

時間入力要素を生成します。

<input name="start" type="time">
<input name="start" type="time" value="23:59:59">
<input id="foo" name="start" type="time" value="23:59:59">

url_field

%= url_field 'address'
%= url_field address => 'http://mojolicio.us'
%= url_field address => 'http://mojolicio.us', id => 'foo'

URL入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="address" type="url">
<input name="address" type="url" value="http://mojolicio.us">
<input id="foo" name="address" type="url" value="http://mojolicio.us">

week_field

%= week_field 'vacation'
%= week_field vacation => '2012-W17'
%= week_field vacation => '2012-W17', id => 'foo'

週入力要素を生成します。 以前の入力値は自動的に拾われ、デフォルトとして表示されるでしょう。

<input name="vacation" type="week">
<input name="vacation" type="week" value="2012-W17">
<input id="foo" name="vacation" type="week" value="2012-W17">

メソッド

Mojolicious::Plugin::TagHelpers は、 Mojolicious::Plugin の すべてのメソッドを継承し、以下の新しいメソッドを実装しています。

register

$plugin->register;

Mojoliciousアプリケーションにヘルパーを登録します。

参考

Mojolicious, Mojolicious::Guides, http://mojolicio.us.

(Mojolicious 6.05を反映)

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.