×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。



WebHelper rails urls チート集


webhelpers.rails.urls

URLリンクの作成(h.link_to)
ボタンリンクの作成(h.button_to)
条件付でリンクの作成(h.link_to_unless_current)
条件付でリンクの作成(h.link_to_unless)
条件付でリンクの作成(h.link_to_if)
表示しているページの判定(h.current_page)
表示しているページのURL取得(h.current_url)
mailtoの表示(h.mail_to)
タグの難読化表示(h.js_obfuscate)


URLリンクの作成(h.link_to)



WebHelperを使用してリンクを作成する方法


${h.link_to(u'通常リンク','http://www.google.co.jp')}

普通のリンクに変換されます

[生成されるHTML]
<a href="http://www.google.co.jp">通常リンク</a>





${h.link_to(u'リンクテスト','http://www.google.co.jp', target='_blank')}

別ウインドウで開くリンクに変換されます

[生成されるHTML]
<a href="http://www.google.co.jp" target="_blank">リンクテスト</a>





${h.link_to(u'リンクテスト',confirm=u"確認です")}

遷移する前に、javascriptで確認メッセージを表示します。

[生成されるHTML]
<a href="" onclick="return confirm('確認です');">リンクテスト</a>





${h.link_to(u'リンクテスト', h.url(action='destroy', id=4), confirm=u'確認です')}

/destroy/4へのリンクに変換されます。

[生成されるHTML]
<a href="/makotest/destroy/4" onclick="return confirm('確認です');">リンクテスト</a>





${h.link_to('Help', h.url(action="help"), popup=True)}

/helpを別ウインドウ(javascript使用)で開きます。

[生成されるHTML]
<a href="/makotest/help" onclick="window.open(this.href);return false;">Help</a>





${h.link_to(u'リンクテスト', h.url(action='busy'), popup=['new_window', 'height=300,width=600'])}

/busyを別ウインドウ(javascript使用)で開きます。
※メニューバー非表示です。

[生成されるHTML]
<a href="/makotest/busy" onclick="window.open(this.href,'new_window','height=300,width=600');return false;">リンクテスト</a>





${h.link_to(u'リンクテスト', h.url(action='destroy', id=4, p='param'), confirm=u'確認です')}

/destroy/4?p=paramへのリンクを作成します。
遷移する前に、javascriptで確認メッセージを表示します。

[生成されるHTML]
<a href="/makotest/destroy/4?p=param" onclick="return confirm('確認です');">リンクテスト</a>





${h.link_to(u'リンクテスト', h.url(action='destroy', p='param'), method='post')}

postメソッドでリクエストを送信します。

[生成されるHTML]
<a href="/makotest/destroy?p=param" onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;f.submit();return false;">リンクテスト</a>



ボタンリンクの作成(h.button_to)


WebHelperを使用してボタンリンクを作成


${h.button_to("Edit", h.url(action='edit', id=3))}

ボタンのリンクを生成します

[生成されるHTML]
<form method="POST" action="/makotest/edit/3" class="button-to"><div><input type="submit" value="Edit" /></div></form>





${h.button_to("Destroy", h.url(action='destroy', id=3), confirm="Are you sure?", method='DELETE')}

deleteメソッドを発行するボタンリンクを生成します

[生成されるHTML]
<form method="POST" action="/makotest/destroy/3" class="button-to"><div><input id="_method" name="_method" type="hidden" value="DELETE" /><input onclick="return confirm('Are you sure?');" type="submit" value="Destroy" /></div></form>





${h.button_to("Edit", h.url(action='edit', id=3), type='image', alt=u'altです', src='button.png')}

画像ボタンを生成します。
srcに画像のファイル名のみ指定した場合は、自動的に/images/button.pngと
imagesの階層が付加されます。
/test/button.pngのように、ディレクトリも含めて指定すると
そのまま出力されます。

[生成されるHTML]
<form method="POST" action="/makotest/edit/3" class="button-to"><div><input alt="altです" src="/images/button.png" type="image" value="Edit" /></div></form>





${h.button_to("Edit", h.url(action='edit', id=3), confirm=u'確認です')}

ボタンを押した後、javascriptにより確認メッセージが表示されます。

[生成されるHTML]
<form method="POST" action="/makotest/edit/3" class="button-to"><div><input onclick="return confirm('確認です');" type="submit" value="Edit" /></div></form>



条件付でリンクの作成(h.link_to_unless_current)


条件付でリンクを生成


link_to_unless_currentを使用すると、
「現在表示しているURLと、作成しようとするリンクが同じ場合は、
リンクの名称のみ表示する」
ということが出来ます。

こう書くと・・・

${h.link_to_unless_current(u'リンク名称', h.url(action='unless_current'))}


/unless_current
を表示しているときは、「リンク名称」という文字列だけ、
違うURLを表示しているときには、ちゃんとリンクが作成されます。

BBSやブログで改ページ処理が必要な場合、
「1ページ目を表示しているときは、1ページ目へのリンクを切りたい」
なんてことがあります。

そんなとき、link_to_unless_currentを使えば、カンタンに実装できますね。


条件付でリンクの作成(h.link_to_unless)


条件付でリンクを生成


link_to_unlessは、条件式を第一引数に取ります。

渡された条件式がTrueになる場合は、リンクが作成されず、
名称のみ。
※以下の記述だと、リンクは作成されない。

${h.link_to_unless(1==1,u'リンク名称', 'http://www.google.co.jp')}



※以下のように、条件式がFalseになる場合は、リンクが作成されます。

${h.link_to_unless(1==2,u'リンク名称', 'http://www.google.co.jp')}



もちろん、h.link_toと同じ機能も備えているので、

${h.link_to_unless(1==2,u'リンク名称', 'http://www.google.co.jp', confirm=u"確認です")}

という記述も可能です。



条件付でリンクの作成(h.link_to_if)


条件付でリンクを生成


link_to_ifは、条件式を第一引数に取ります。

渡された条件式がTrueになる場合は、リンクがされます。

※以下の記述はリンクが作成される。

${h.link_to_if(1==1,u'リンク名称', 'http://www.google.co.jp')}



※以下のように条件式がFalseになる場合は、リンクは作成されず
名称のみ表示される。

${h.link_to_if(1==2,u'リンク名称', 'http://www.google.co.jp')}


h.link_to_unlessと逆の機能ですね。


ソースコードも

def link_to_if(condition, name, url, **html_options):
  """
  Conditionally create a link tag of the given ``name`` using the ``url``
  
  If ``condition`` is True only the name is returned.
  """
  return link_to_unless(not condition, name, url, **html_options)


条件式を反転させてlink_to_unlessしてます。



表示しているページの判定(h.current_page)



表示しているページを判定


current_pageは、現在表示しているページが引数で
指定しているページと同じであるか判定します。

こういう記述を行った場合・・・

${h.current_page(h.url(action='unless_current'))}


/unless_currentを表示中
Trueを返却

/unless_current以外を表示中
Falseを返却

という感じで動作してくれます。


表示しているページのURL取得(h.current_url)



表示しているページのURL取得


current_urlで、現在表示しているURLの相対パスを取得できます。

以下のように記述すると

${h.current_url()}

現在のURLの相対パスが取得できます。

例)
http://localhost:5000/makotest/unless_current
で表示させると
/makotest/unless_current


idやパラメータの指定も可能

${h.current_url(id=10, p='param')}


例)
http://localhost:5000/makotest/unless_current
で表示させると
/makotest/unless_current/10?p=param


別なactionももちろん指定できます。

${h.current_url(action='test_url', id=10, p='param')}


例)
http://localhost:5000/makotest/unless_current
で表示させると
/makotest/test_url/10?p=param


mailtoの表示(h.mail_to)



mailtoを生成する


昨今、あまり使用されていないと思いますが・・・


${h.mail_to('[mailtoで表示するメールアドレス]')}


これで
<a href="[mailtoで表示するメールアドレス]">[mailtoで表示するメールアドレス]</a>
というタグを生成してくれます。

ちなみに、utf-8でテンプレートを書いている場合などで、
subjectを指定するときは、エンコードしないと化けました。

${h.mail_to('[mailtoで表示するメールアドレス]',subject=u'日本語件名'.encode('cp932','replace'))}


subject以外に使用できるのは、
・name:リンクに使用する名称
・cc:ccに入れるメールアドレス
・bcc:bccに入れるメールアドレス
・body:メール本文
・replace_at:スパム対策用。メールアドレス中の@を指定した文字で置き換えて表示
・replace_dot:スパム対策用。メールアドレス中の.を指定した文字で置き換えて表示



タグの難読化表示(h.js_obfuscate)



タグを難読化して表示


obfuscate:困惑させる; 暗くする; 不明瞭にする
ということで、

${h.js_obfuscate('<input type="hidden" name="access_check" value="access_ok">')}

と記載すると
<script type=”text/javascript”>
//<![CDATA[
eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%61%63%63%65%73%73%5f%63%68%65%63%6b%22%20%76%61%6c%75%65%3d%22%61%63%63%65%73%73%5f%6f%6b%22%3e%27%29%3b'))
//]]>
</script>

こんな感じで、URLエンコードされた状態でHTMLが出力されます。


もどる