2012年6月28日木曜日

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でリンクの作成がおすすめ出来ない理由は以下の参考サイトなどを読んでください。

参考サイト

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

このエントリーをはてなブックマークに追加

2012年6月27日水曜日

Ruby on Rails3で文字列中のURLにリンクを追加する

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

難易度★☆☆☆☆

Ruby on Rails3で文字列中のURLにリンクを追加する場合は、rails_autolinkというgemを利用します。
Rails 3.1になるまでは、auto_linkというヘルパーメソッドを利用していたらしいです。(知らないけどw)。でも3.1からは廃止になったので、gemでrails_autolinkかRinkuのどちらかを利用します。

僕の環境は3.2なので、rails_autolinkを使いました。3.2でRinkuだとsimple_formatと一緒に使うと不具合があるようです。

rails_autolinkの導入

アプリケーションフォルダ配下のGemfileに以下を追記します。


vi Gemfile

gem "rails_autolink", "~> 1.0.9"

保存したらbundleインストールします。


bundle install

以上で準備OKです。
あとはviewで以下のように変更します。

変更前
<%= simple_format obj.text  %>

↓

変更後
<%= auto_link(simple_format(obj.text), :html => { :target => "_blank" }) %>

これで文字列中にリンクがあれば、リンクタグが追加されます。
簡単で便利なので、重宝すると思います。
以上です。

参考サイト

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

このエントリーをはてなブックマークに追加

2012年6月17日日曜日

Ruby on Rails3ではじめるRspec

今回のプロジェクトではRspecでテストコードを書こうと思って調べてみました。

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★☆☆☆

ここでは、railsのプロジェクトを作成する時に、rspecを利用することを前提にプロジェクトの作成をしていることを想定しています。
それ以外の場合は、デフォルトで用意されるUnit::Test周りでエラーが発生するみたいなので、テスト周りの設定を変更してから次の作業を行ってください。

Gemfileに記述

まずGemfileを開きます。


vi Gemfile

ファイルに以下を記述します


group :test, :development do
  gem "rspec-rails", "~> 2.4"
end

Gemfileを保存したらbundle installでgemを最新にします。

gemを最新にしたら以下のコマンドを入力します。


rails generate rspec:install

.rspec, spec_helper.rbが作成されます。
以上で準備完了です。

Modelのテストを記述

さて、ではModelのテストを記述しましょう。UserというModelがあるとします。
spec/models/user_spec.rbのファイルを作成します。内容は以下のように記述します。


# coding : utf-8
require 'spec_helper'

# emailバリーデーションテスト
describe User, "validate_email? methods" do

  it "should be validate_type VALIDATE_TYPE_SIGN_IN" do
    user = User.new
    user.validate_type = User::VALIDATE_TYPE_SIGN_IN
    user.validate_email?.should be_true
  end

end

RSpecは「プログラムの振舞 (behaviour)」を記述するためのドメイン特化言語 (DomainSpecific Language:DSL) を提供するフレームワーク」です。
まったくさわったことのない人にはなんのことかさっぱりだと思います。そういう人はここを一読する必要があります。

内容を記述したら、テストを実行します。


rspec spec/models/user_spec.rb

↓

Finished in 0.27 seconds
1 examples, 0 failures

0 failuresなので成功です。失敗した場合は、エラー内容が詳細に表示されます。
あとはひたすらテストコードを記述していくだけです。他にもテストを便利にする色々なツールがあるようですが、とりあえずここまでです。

それにしても、最初はrailsの覚えることの多さを批判していましたが、結局は色々なツールを併用するようになってしまいました。

もう少し学習コストが低くなってほしいものですね。

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

このエントリーをはてなブックマークに追加

postgresの基本知識

Herokuでpostgresをよく使うようになったので、開発でよく使う基本操作をまとめてみました。

データベースの一覧を表示する


psql -l

データベースの一覧を表示した時、template0,template1というデータベースが表示されるはずです。 これらはテンプレートデータベースと呼ばれるものです。
これらのデータベースは、作成した覚えがないからと削除してはいけません。

これらのデータベースを操作する場合は、テンプレートデータベースの内容をしっかり理解してから変更してください。

データベースを作成する


createdb データベース名

例えばデータベース「company1」を作成する場合は、createdb company1と記述します。
デフォルトでは、新しいデータベースは標準システムデータベース template1 を複製することによって作成されます。

ユーザーを指定してデータベースを作成する


createdb データベース名 -O ユーザー名

例えばデータベース「saiyajin」をユーザー「vegeta」で作成する場合は、createdb saiyajin -O vegetaと記述します。
-0 [オーナー名]でデータベースの所有者となるユーザーを指定します。

データベースにアクセスする


psql -U username database

例えばデータベース「company1」にスーパーユーザー「super」でアクセスする場合は、psql -U super company1と記述します。

テーブルの一覧を表示する


\d

データベースに接続後、上記のコマンドを打ち込みます。

テーブルのカラム情報を表示する


\d テーブル名

例えば「employee」テーブルの情報を確認する場合は、\d employeeとします。

ユーザーを作成する


createuser ユーザー名

例えば新規ユーザー「goku」を作成する場合は、create user gokuとします。

作成したユーザーの情報はpg_shadowテーブルで確認することができます。
接続するデータベースはどれでも構いません。select * from pg_shadowを発行します。

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

このエントリーをはてなブックマークに追加

2012年6月16日土曜日

Ruby on Rails3でlink_toでAjax処理

rails3でlink_toタグを使ってAjaxを利用する場合のメモ書きです。

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

難易度★★★☆☆

rail3でajax処理をおこなう時に一番困ったのが、ググるとremote_functionタグを使ったやり方が多かったことです。
この機能はrail2.Xまでは一般的だったらしい(知らないけど)のですが、remote_functionタグはrails3では利用できません。

色々と調査したのですが、rails3ではjqueryを使ってajax処理を行うのがよいみたいです。以下に実装してみました。

jqueryの導入

アプリケーションフォルダ配下のGemfileにjqueryの記述を追記します。


vi Gemfile

gem 'jquery-rails'

保存したらjqueryファイルをインストールします。


bundle install

rails generate jquery:install

上記のコマンドでjqueryのファイルがpublicフォルダにinstallされます。
[jquery_ujs.js],[jquery.js],[jquery.min.js]がありますが、最初に読み込むファイルはjquery_ujs.jsにする必要があります。

なので、デフォルトで読み込まれるJavaScriptファイルを設定するためにconfig/application.rbを編集します。


config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs)

これで読み込めるようになります。あとはviewでファイルを読み込めるようにします。


<%= javascript_include_tag :defaults %>

これでjqueryが利用できるようになります。
application.jsファイルにサンプル関数でalert("hello ruby jquery")とでも記述して動作を確認してください。
動作しない場合は、pathの設定やファイルの名前をよく調べてみましょう。

link_toの設定

続いてリンクを作成します。viewにlink_toタグを記述します。


<%= link_to "リンク名称", {}, :onclick=> "test(1);return false;" %>

上記のようにタグを記述すると、以下のようなhtmlタグが出力されます。


<a href="/home/main" onclick="test(1);return false;">リンク名称</a>

hrefの内容は無視して構いません。重要なのはonclickの内容です。上記では、リンククリック時に関数test()が呼び出されます。
というわけでtest関数に処理の内容を記述します。

ajax処理を利用した関数

では、上記で設定した関数testを記述しましょう。
関数はなるべくjsファイルに記述しましょう。


function test(test_id) {
  $.ajax({
        url: "/home/test", 
        type: "POST", 
        data: 'test_id=' + test_id + '&authenticity_token=' + $('#authenticity_token').val(),
        success: function(data) {

        },
        error: function() {
          alert("通信エラーが発生しました。時間をおいてもう一度操作をおこなってください。") 
        }
   })
}

url:コントローラーとメソッドを指定しています。上記の例ではHomeControllerのtestメソッドが呼び出されます。
type:データの送信方法。POSTを指定してます。
data:HomeControllerのtestメソッドに送るパラメーターです。authenticity_tokenはhidden_tagを利用して埋め込んで取得します。
これを送らないとエラーになるので注意してください。

さて次はrails側の処理を記述します。

コントローラーの処理とjs.erbファイルとrbファイルの作成

関数を記述したら次はrailsのコントローラーの処理を記述します。
/home/testなのでHomeControllerにtestメソッドを記述します。


  def test
    // something
  end
  

このメソッドを通過後、test.js.erbが呼び出されます。
test.erbではなく、test.js.erbファイルであることに注意してください。
中身は行いたい内容によって変化しますが、idタグを設定して内容を書き換えるのが一般的でしょう。


$('#test_id').html("<%= escape_javascript(@test_name) %>");
$('#test_id2').html("<%= escape_javascript(render :partial => 'test_data_list') %>");
  

更新コンテンツの生成は、部分テンプレートにコードを記述しましょう。
.js.erbファイルにはページ更新のためだけのコードを上記のように記載しましょう。
上記の例だと、_test_data_list.erbが部分テンプレートになります。

終わりに

rails3とjqueryの相性はなかなか良いと思います。
ただ、ある程度jqueryの知識がないと処理が書けないのは苦しいところです。
coffeeScriptとかで記述している人もいるし、この編の覚えることの多さと敷居の高さはrailsに今後づっとつきまとう課題でしょうね。

こんな感じです。でわ

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

このエントリーをはてなブックマークに追加

2012年6月12日火曜日

Ruby on Rails3でラジオボタンとラベルを生成する


rails3でラジオボタンを利用する場合のメモ書きです。

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

難易度★☆☆☆☆

まずは基本的なこととして、ラジオボタンを使用する場合は、labelタグも一緒に使うことを理解しておきましょう。

なぜなら、ラベルを設定することで、ラベルをクリックしてもラジオボタンをチェックしたのと同じ効果をもたせることができます。
これはユーザーの操作性を大きく向上させるので必ずやっておくべきです。

ラジオボタンとラベルの記述とフォーム作成


ラジオボタンを利用する場合はフォームに関連づける場合がほとんどでしょう。ということでviewには以下のように記述します。

<%= form_for @user do |f| %>
  <label><%= f.radio_button :sex, "1" %> 男</label>
  <label><%= f.radio_button :sex, "2" %> 女</label>
  <label><%= f.radio_button :sex, "3" %> 秘密</label>
<% end %>

ここではuserモデルを関連づけてます。

:sexはプロパティです。@userオブジェクトのsex属性と関連づけてます。

""で囲んでいる箇所はvalueの値です。

ラベルはradio_buttonタグを囲んで利用します。

上記の場合、コントローラー側での値の取得はparams[:user][:sex]になります。

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

このエントリーをはてなブックマークに追加
Related Posts Plugin for WordPress, Blogger...