テンプレート、ヘルパーメソッド、リンク

Ruby on Railsを基礎から学ぶ　第３回

～埋め込み（テンプレート）、ヘルパーメソッド、リンクや画像～

前回、コントローラの作成とアクションをやりました。

まだぱっとしない機能も多いと思いますが、今回ようやくＨＴＭＬへの埋め込みが行えます。

そして、前回コントローラを作った際に自動生成された４つのファイルの２つめ、ヘルパーについて説明していきます。

今回は前回以上にフォルダの行き来があります。

できるだけ作成一覧を載せていきますが、ファイルの構成はしっかり把握しておきましょう。

１．まずはＨＴＭＬに埋め込みをしてみる

まコントローラに入れた変数や処理結果を、まずはＨＴＭＬの中に埋め込んで表示させましょう。

これは、ほかのスクリプト言語と同じような書き方でいけます。

<%= @変数名 %>

画面に埋め込む場合「=」をつけて、ただ処理をする場合は、「=」はつけません。

<%　@kingaku * zei %>	ただの処理だけ
<%=　@kingaku %>	テンプレートとして、ＷＥＢコンテンツに反映。

実際に資源を作りましょう。

①lesson.controller.rbにstep8を追加する

（略）

def step8

num = rand 12

@damage = (num * 1.5).floor

End

（略）

②step8.html.erbを作成する

　こちらのＨＴＭＬの雛形はは　じめはありません。

ので、自分で作ってください。

C:\rails\xxxx\app\views\lesson

→ファイル名step8.html.erb

<%= @damage %>のダメージを与えた！

内容は１行だけとシンプル！

<head><body>とか、ほかはどこへいったかは、次の回で説明します。

ここで、またＷＥＢサーバ（ポート3000）を起動してください。

■実行例■埋め込み（step8　→　step8.html.erb）

http://localhost:3000/lesson/step8

randで指定したサイコロは12までで。

それ以上の数値が出ているので、アクションstep8で乗算が成されているようです。

また、文章がくっついて表示されているので、雛形step8.htmlも使われているようです。

乱数を利用した例を示しているので、ためしに何回か更新（F5キー）すると、数値が変わることが確認できます。

③Renderに雛形をあてがう

　今度は、step9を実行してみます。ここには、、

def step9

@damage= 1000

render "step8"

end

　上のようにrenderのあとに、”step8”という雛形を指定できるのです。

　実行してみましょう。

■実行例■renderでのテンプレート（step9　→　step8.html.erb）

http://localhost:3000/lesson/step9

Step9で指定したdamage1000がそのまま出力されました。

これは、アクションstep9から、雛形step8を使って表示されたことを示し、

アクションstep8は使っていないことを示しています。

２．タグを含んだＨＴＭＬの扱い

まずは2例（step10,11）を見てみましょう。

step10	@comment = "<script>alert('危険！')</script>こんにちは。"
step11	@comment = "<strong>安全なHTML</strong>"

両方とも、タグｗｐ含んだ文字列です。

続いて、雛形への埋め込み方法です。

ファイル名：step10.html.erb

<%= @comment %>

ファイル名：step11.html.erb

<%= @comment.html_safe %>

■微妙な実行例■タグを含む変数（step10　→　step10.html.erb）

http://localhost:3000/lesson/step10

■安全な実行例■タグを含む変数（step11　→　step11.html.erb）

http://localhost:3000/lesson/step11

このように、タグを使用したい場合は、.html_safeを付与します。

埋め込みに使用できるメソッドはこの他にもいろいろあるようですが、

おいおいコンテンツを厚くしていきたいと思います。

３．ヘルパーメソッドの作成

　次にヘルパーメソッドを作ります。

　ヘルパーは文字通り、コントローラのヘルパーさんです。

　コントローラをgenerateしたときに出来た４つのファイルのうちの２つめ、、、

・app/helpers/lesson.helper.rb

を開いてみましょう。

非常にあっさりしています。

$四角形吹き出し: def tiny_format(text) h(text).gsub(/\n/, " ").html_safe end$ module LessonHelper

end

ここでは、\nが見つかったら。 改行にして、ＨＴＭＬで安全に表示してください。

　とまあ、書いてあるわけです。

　たとえば、ユーザ登録の備考欄やご要望欄などのように

フォームから、数行の長い文章を取り込みたい場合は、このヘルパーさんが活躍します。

雛形には、以下のようにメソッド名（変数）の形で、入れておいてください。

<%= tiny_format(@message) %>

■実行例■改行変換ヘルパーメソッド（step15　→　lesson.helper.rb →　step11.html.erb）

http://localhost:3000/lesson/step15

このように、改行が実行されています。

念のため、ＨＴＭＬソースみてやろうか。ブラウザのメニュー→表示→ソースです。

<body>

<p>伊勢えびの姿焼きを希望<br />その他、車で来場します。<br />チェックインは未定なので、当日連絡します。<br />あまりおそくはなりません。</p>

</body>

どうです。

４．リンクや画像を入れたい！

　いままで、文字ばっかりだったので、リンクや画像を入れたいと思います。

普通は、雛形のxxx.html.erbなどに<a>タグなどを挟み込んでおきますが、

動的にリンクや画像を変えたいなんて場合も多いことでしょう。

ですので、埋め込み指定できるアクションがあります。

リンク	<%= link_to "Home", root_path %>
画像	<%= image_tag("rails.png", size: "50x64", ・・・) %>

　と。非常にかんたんなものです。ここでは良く見られる画像にリンクが張られているというサンプルを

実行例として載せておきます。

　もちろん、組み合わせて使うのみです。

・step16.html.erb

<%= link_to(image_tag("rails.png", size: "50x64",

alt: "Ruby on Rails", align: "top"), "http://rubyonrails.org/") %>

■実行例■リンク付き画像（step16　→　step16.html.erb）

http://localhost:3000/lesson/step16

５．条件分岐と繰り返し

　文法の章で条件分岐と繰り返しをやりましたが、これも非常にruby似通った書き方です。

それぞれ、書き方のみ付記して、コノ場は割愛します。

そのうち、更新するかもしれません。

条件分岐

<% if @damage > 0 %>

ヒット！<%= @damage %>のダメージを与えた！

<% else %>

攻撃をかわした！

<% end %>

繰り返し

<% @items.each do |key, val| %>

<tr>

<%= number_with_delimiter(val) %>円</td>

</tr>

<% end %>

条件分岐は、コントローラで１０のダメージを変数で与えています。

　繰り返しは、ＨＴＭＬのテーブル（表）を繰り返しで生成しています。

今回のまとめとなるソースコードです。

今回、ヘルパーメソッドが出てきています。こちらの修正も忘れずに！。

◆ソースコード◆

格納先：C:\rails\xxxx\app\controllers

→ファイル名lesson_controller.rb　前回からのつづき

<!・・・（略）

def step8

@price = (2000 * 1.05).floor

end

def step9

@damage= 1000

render "step8"

end

def step10

@comment = "<script>alert('危険！')</script>こんにちは。"

end

def step11

@comment = "安全なHTML"

end

def step12

@population = 704414

@surface = 141.31

end

def step13

@time = Time.now

end

def step14

@population = 127767944

end

def step15

@message = "伊勢えびの姿焼きを希望\nその他、車で来場します。\nチェックインは未定なので、当日連絡します。\nあまりおそくはなりません。"

end

def step16

end

def step17

end

def step18

@damage = 10

end

def step19

@items = { "フライパン" => 2680, "ワイングラス" => 2550,

"ペッパーミル" => 4515, "ピーラー" => 945 }

end

<! ・・・beforeなどが入る

end

次回は、モックについて考え、部分テンプレートとスタイルシートをやります。

いよいよ、ＷＥＢサイトらしい見栄えになってきます。見栄えだけですが・・・。

■ 参考テキスト■

サ改定新版　基礎　Ruby on Rails オイアクス監修　インプレスジャパン

http://www.oiax.jp/rails3book

戻る｜とっぷ｜次へ