Ruby on Rails3でbutton_toタグでgetメソッドが使えない問題の解決

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★★★☆☆

Ruby on Rails3でbutton_toタグをリンクボタンとして利用しようとしたところ、getメソッドが利用できないことがわかりました。
button_toタグをカスタムして強引にgetメソッドで利用しようとしている記事をいくつか見つけましたが、その手法はあまりやりたくないのでやめました。

なぜなら、ボタンはリンクではないからです。
ボタンはあくまでアクションを行うものです。そして、リンクはページ遷移やナビゲーションで利用します。
とはいっても、リンクをボタンのように表示したいという事情もあります。

そこで、link_toタグとcssを利用してボタン風のリンクを作ることで解決しました。以下、やり方です。

buttn_toをlink_toにする

<%= button_to "画面遷移", next_path %>

↓

<%= link_to "画面遷移", next_path %>

リンクタグをspanタグで囲みます。

<span><%= link_to "画面遷移", profile_path %></span>

ボタン風のcssを作成します。ボタンデザインはTwitter Bootstrapを利用すると便利です。
ただし、全てを適用すると、全体のデザインまで変更されてしまうので、.btnだけ抜き出し、自前のcssにコピーします。

.btn{display:inline-block;*display:inline;margin-bottom:0;*margin-left:.3em;font-size:13px;line-height:18px;*line-height:20px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:#f5f5f5;*background-color:#e6e6e6;background-image:-ms-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(top,#fff,#e6e6e6);background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-repeat:repeat-x;border:1px solid #ccc;*border:0;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);filter:progid:dximagetransform.microsoft.gradient(enabled=false);*zoom:1;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{background-color:#e6e6e6;*background-color:#d9d9d9}.btn:active,.btn.active{background-color:#ccc \9}.btn:first-child{*margin-left:0}.btn:hover{color:#333;text-decoration:none;background-color:#e6e6e6;*background-color:#d9d9d9;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-ms-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.active,.btn:active{background-color:#e6e6e6;background-color:#d9d9d9 \9;background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}

spanに適用します

<span class="btn" ><%= link_to "画面遷移", next_path %></span>

以上で完了です。あとは好みに応じてカスタマイズします。リンクのクリック範囲を広げる場合は以下のようにします。

.btn a {
  display:block;
  padding: 8px 10px 8px;
}

paddingを使うのがコツです。文字だけだとクリック範囲が狭いので、UI向上のためになるべく適用するべきです。

以上です。buttonでリンクの作成がおすすめ出来ない理由は以下の参考サイトなどを読んでください。

参考サイト

• リンクとボタンの使い分け
• aタグのクリック範囲を広げる
• Twitter Bootstrap公式

この記事がお役にたちましたらシェアをお願いします

Tweet