Mojolicious入門

Mojoliciousの「タグヘルパー」の一覧

Mojoliciousのタグヘルパーの一覧です。

テキストフィールド

text_fieldタグヘルパーを使うとテキストフィールドを簡単に記述することができます。 

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

第一引数はnameの値、第二引数はvalueの値、残りの引数は属性として利用されいます。以下のように展開されます。 

<input name="first_name" />
<input name="first_name" value="Default name" />
<input class="user" name="first_name" value="Default name" />

パスワードフィールド

password_fieldタグヘルパーを使うとパスワードフィールドを簡単に記述することができます。 

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

第一引数はnameの値、残りの引数は属性として利用されます。 

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

テキストエリア

text_areaタグヘルパーを使うとテキストエリアを簡単に記述することができます。 

<%= text_area 'foo' %>
<%= text_area foo => begin %>
  Default!
<% end %>

第一引数はnameの値です。第二引数にブロック(begin ～ end)を渡すと、テキストエリアの内容を表示することができます。以下のように展開されます。 

  <textarea name="foo"></textarea>
  <textarea name="foo">
    Default!
  </textarea>

チェックボックス

check_boxタグヘルパーを使用するとチェックボックスを簡単に記述することができます。ページを遷移したときでも、パラメータに値が設定されていれば、チェックボックスが自動的にチェックされます。 

<%= check_box employed => 1 %> # name => value
<%= check_box employed => 1, id => 'foo' %>

以下のように展開されます。最初の引数はnameの値、二つ目の引数はvalueの値になります。残りの引数には属性

記述することができます。 

<input name="employed" type="checkbox" value="1" />
<input id="foo" name="employed" type="checkbox" value="1" />

ラジオボタン

radio_buttonタグヘルパーを使うとラジオボタンを簡単に記述することができます。 

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

第一引数はnameの値、第二引数はvalueの値、残りの引数は属性として利用されます。リクエストのパラメーターに対応する値が設定されている場合は、自動的にチェックがつきます。 

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

セレクトフィールド

select_fieldタグヘルパーを使うとセレクトフィールドを簡単に記述することができます。セレクトフィールドはコンボボックス(ドロップダウンメニュー)やリストボックスを作成する場合に利用されます。 

<%= select_field language => [qw/de en/] %>
<%= select_field language => [qw/de en/], id => 'lang' %>
<%= select_field country => [[Germany => 'de'], 'en'] %>
<%= select_field country => [{Europe => [[Germany => 'de'], 'en']}] %>
<%= select_field country => [[Germany => 'de', class => 'europe'], 'en'] %>

第一引数はnameの値です。第二引数はselectタグの中に配置するoptionタグのnameとvalueの値になります。ハッシュのリファレンスや配列のリファレンスを使ったさまざまな記述ができます。リクエストで選択されているパラメータの値が自動的に選択されます。以下のように展開されます。 

<select name="language">
  <option value="de">de</option>
  <option value="en">en</option>
</select>
<select id="lang" name="language">
  <option value="de">de</option>
  <option value="en">en</option>
</select>
<select name="country">
  <option value="de">Germany</option>
  <option value="en">en</option>
</select>
<select id="lang" name="language">
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="en">en</option>
  </optgroup>
</select>
<select name="country">
  <option class="europe" value="de">Germany</option>
  <option value="en">en</option>
</select>

ファイルフィールドを記述する

file_fieldタグヘルパーを使うとファイルフィールドを簡単に記述することができます。 

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

以下のように展開されます。第一引数はnameの値になります。残りの引数は属性の名前と値になります。 

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

隠しフィールドを記述する

hidden_fieldタグヘルパーを使うと隠しフィールドを簡単に記述することができます。 

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

次のようなタグに展開されます。第一引数はnameの値、第二引数はvalueの値、残りの引数は属性として利用されます。 

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

送信ボタンを記述する

submit_buttonタグヘルパーを使うと送信ボタンを簡単に記述することができます。 

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

第一引数はvalueの値です。この値がボタンの適すとして表示されます。残りの引数は属性として利用されます。 

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

ハイパーリンク

link_toタグヘルパーを使うとハイパーリンクを簡単に記述することができます。 

<%= link_to index => begin %>Home<% end %>
<%= link_to index => {foo => 'bar'} => (class => 'links') => begin %>
  Home
<% end %>
<%= link_to '/path/to/file' => begin %>File<% end %>
<%= link_to 'http://mojolicio.us' => begin %>Mojolicious<% end %>
<%= link_to url_for->query(foo => $foo) => begin %>Retry<% end %>

以下のようなHTMLに展開されます。第一引数はルート名かパスです。Mojo::URLオブジェクトを渡すこともできます。最後の引数はブロックになり、ハイパーリンクのテキストを指定することができます。 

<a href="/path/to/index">Home</a>
<a class="links" href="/path/to/index/bar">Home</a>
<a href="/path/to/file">File</a>
<a href="http://mojolicio.us">Mojolicious</a>
<a href="/current/path?foo=something">Retry</a>

画像タグを記述する

imageタグヘルパーを使うと画像タグを簡単に記述することができます。 

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

以下のように展開されます。第一引数は画像へのURLです。このURLはurl_forメソッドによって展開されます。残りの引数は属性として利用されます。 

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

スタイルシート(CSS)

stylesheetタグヘルパーを使うとスタイルシートへの外部リンクやスタイルシートを簡単に記述することができます。 

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

外部スタイルシートへのリンクを指定する場合は第一引数にパスを記述します。スタイルシート自体を記述したい場合はブロック(begin ～ end)を第一引数に指定します。次のようなHTMLに展開されます。 

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

JavaScriptのソースコード

javascriptタグヘルパーを使うとJavaScriptのソースコードを簡単に記述することができます。 

%= javascript '/script.js';
%= javascript begin
  var a = 'b';
% end

引数には外部JavaScriptのパスかブロック(begin ～ end)を指定することができます。ブロックの中には実際のJavaScriptのソースコードを記述することができます。 

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

インプットタグ

input_tagタグヘルパーを使うとインプットタグを簡単に記述することができます。 

<%= input_tag 'first_name' %>
<%= input_tag first_name => 'Default name' %>
<%= input_tag 'employed', type => 'checkbox' %>
<%= input_tag 'country', type => 'radio', value => 'germany' %>

以下のように展開されます。第一引数はnameの値、残りの引数は属性として利用されます。HTTPリクエストのパラメーターに含まれている入力値については自動的に補完されます。 

<input name="first_name" />
<input name="first_name" value="Default name" />
<input name="employed" type="checkbox" />
<input name="country" type="radio" value="germany" />

ベースタグ

タグヘルパーであるbase_tag関数を使うとベースタグを簡単に記述することができます。 

<%= base_tag %>

以下のようなタグに展開されます。 

<base href="http://localhost/cgi-bin/myapp.pl" />

関連情報

Perlクラブ