Category: ruby / rails / rspec

bundle install

[vagrant@localhost ruby3]$ bundle install
Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/.
Using json 1.8.3
Installing multi_xml 0.5.5
Installing rack 1.6.4
Installing tilt 2.0.2
Using bundler 1.13.6
Installing httparty 0.13.7
Using rack-protection 1.5.3
Using sinatra 1.4.7
Bundle complete! 3 Gemfile dependencies, 8 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
Post-install message from httparty:
When you HTTParty, you must party hard!

get '/product' do
	...
	@products = []
	LOCATIONS.each do |location|
	 @product.push DATA.select { |product| product['location'] == location }.sample
end

<% @product.each do |product| %>
<a href='/products/location<%= product&#91;location&#93; %>'>
<div class='product'>
	<div class='thumb'>
		<img src='<%= product&#91;'url'&#93; %>'>
	</div>
	<div class='caption'>
		<%= product&#91;'location'&#93; != 'us' ? product&#91;'location'&#93;.capitalize : product&#91;'location'&#93;.upcase %>
		</div>
	</div>
</a>
<% end %>

get '/products/location/:location' do
	DATA = HTTParty.get('https://fomotograph-api.udacity.com/products.json')['photos']
	@products = DATA.select{ |product| product['location'] == params[:location]}
	erb "<!DOCTYPE html>..."
end


get '/products/:id' do
	DATA = HTTPartyp.get('https://hogehoge/products.json')['photos']
	@product = DATA.select{ |prod| prod['id'] == params[:id].to_i }.first
	erb "<!DOCTYPE html> ..."
end	

class Product

	url = 'https://fomotograph-api.com/product.json'
	DATA = HTTParty.get(url)['photos']
end

require 'HTTParty'
require 'json'

class Product

	url = 'https://fomotograph-api.com/product.json'
	DATA = HTTParty.get(url)['photos']

	def initialize(product_data = {})
	@id = product_data['id']
	@title = product_data['title']
	@location = product_data['location']
	@summary = product_data['summary']
	@url = product_data['url']
	@price = product_data['price']
	end

	def self.all
		DATA.map { |product| new(product) }
	end

	def self.sample_locations
		@products = []
		LOCATIONS.each do |location|
		@products.push self.all.select { |product| product.location == location }.sample_locations
		end
		return @product
	end

	def self.find_by_location(location)
		self.all.select { |product| product.location == location }
	end
end
{
	"id"=>27, "title"=>"worlds end", "summary"=>"travel tothe end ...",
	"location"=>"scotland", "price"=>37, "url"=>"/images/scotland/worlds-end.jpg"
}

controller

get '/products' do
	@products = Product.all
	erb :products
end

rpsecによるリファクタリング

require 'calc'

RSpec.describe "A calc" do
  before do
    @calc = Calc.new
  end
  it "given 2 and 3, returns 5" do
    expect(@calc.add(2, 3)).to eq(5)
  end
  it "given 5 and 8, returns 13" do
    expect(@calc.add(5, 8)).to eq(13)
  end
end
class Calc
  def add(a, b)
    a + b # 仮実装
  end
end
[vagrant@localhost rspec]$ rspec
..

Finished in 0.00235 seconds (files took 0.11087 seconds to load)
2 examples, 0 failures

describeはcontextを書き換えることも可能。また、コマンドラインはrspec -fdとしても使われる。

pendding

require 'calc'

RSpec.describe Calc do
  describe "when normal mode" do
  it "given 2 and 3, returns 5" do
    calc = Cal.new
    expect(calc.add(2, 3)).to eq(5)
  end
  describe "when graph mode" do
  it "draws graph" do
  end
end

matcher:https://www.relishapp.com/rspec/rspec-expectations/docs/built-in-matchers

    expect(calc.add(2, 3)).to eq(5) #matcher
    expect(calc.add(2, 3)).not_to eq(5) #matcher
    expect(calc.add(2, 3)).to be true #matcher
    expect(calc.add(2, 3)).to be false #matcher
    expect(calc.add(2, 3)).to be > 10 #matcher
    expect(calc.add(2, 3)).to be_between(1, 10).include #matcher
    expect(calc).to respond_to(:add) #matcher
    expect(calc.add(2, 3).integer?).to be true

subject

require 'calc'

RSpec.describe Calc do
  subject(:calc){ Calc.new }
  it {
    # calc = Calc.new
    expect(calc.add(2, 3)).to eq(5)
  }
end

let

context "tax 5%" do
    let(:tax){ 0.05 }
    it { expect(calc.price(100, tax)).to eq(105)}
  end
  context "tax 8%" do
    let(:tax){ 0.08 }
    it { expect(calc.price(100, tax)).to eq(108)}
  end

message expectation

class Calc

  def initialize(logger)
    @logger = logger
  end

  def add(a, b)
    @logger.log
    a + b
  end

end

rspecによるBDD

rspec install

[vagrant@localhost rspec]$ gem install rspec
[vagrant@localhost rspec]$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-linux]
[vagrant@localhost rspec]$ rspec -v
3.5.4

TDD/BDD　開発サイクル
1.失敗するテストを書く(Red)
2.最小限のコードを書いてテストをパスさせる(Green)
3.リファクタリング

initフォルダの作成

[vagrant@localhost rspec]$ rspec --init
  create   .rspec
  create   spec/spec_helper.rb

テストファイルは〇〇_spec.rbとし、specフォルダの中に書きます。

1.ミスするコード

RSpec.describe "A calc" do
  it "given 2 and 3, return 5" do
    calc = Calc.new
    epect(calc.add(2, 3)).to eq(5)
  end
end

[vagrant@localhost rspec]$ rspec
F

Failures:

  1) A calc given 2 and 3, return 5
     Failure/Error: calc = Calc.new

     NameError:
       uninitialized constant Calc
     # ./spec/calc_spec.rb:3:in `block (2 levels) in '

Finished in 0.00317 seconds (files took 0.32741 seconds to load)
1 example, 1 failure

Failed examples:

rspec ./spec/calc_spec.rb:2 # A calc given 2 and 3, return 5

2.パスするコードを作成

class Calc
  def add(a, b)
    5 # 仮実装
  end
end

require 'calc'

RSpec.describe "A calc" do
  it "given 2 and 3, returns 5" do
    calc = Calc.new
    expect(calc.add(2, 3)).to eq(5)
  end
end

実行

[vagrant@localhost rspec]$ rspec
.

Finished in 0.00095 seconds (files took 0.10059 seconds to load)
1 example, 0 failures

ruby Sinatra 掲示板(bbs)

掲示板の作成です。DBにSQlite3、Deleteにjqueryを使っています。

C:/rails/sinatra/main.rb

require 'sinatra'
require 'sinatra/reloader'
require 'active_record'

ActiveRecord::Base.establish_connection(
	"adapter" => "sqlite3",
	"database" => "./bbs.db"
)

helpers do
	include Rack::Utils
	alias_method :h, :escape_html
end

class Comment < ActiveRecord::Base
end

get '/'  do
	@comments = Comment.order("id desc").all
		erb :index
end

post '/new'  do
	Comment.create({:body => params[:body]})
	redirect '/'
end

post '/delete'  do
	Comment.find(params[:id]).destroy
end

C:/rails/sinatra/views/index.erb

<!DOCTYPE>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>BBS</title>
</head>
<body>
<h1>BBS</h1>
<ul>
	<% @comments.each do |comment| %>
	<li data-id="<%= comment.id %>">
	<%= h comment.body %>
		<span class="deleteCmd" style="cursor:pointer;color:blue">[x]</span>
	</li>
	<% end %>
</ul>
	<h2>Add New</h2>
	<form method="post" action="/new">
		<input type="text" name="body"><input type="submit" value="post!">

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script>
		$('.deleteCmd').click(function(){
			var el = $(this).parent();
			if (confirm('are you sure to delete?')){
				$.post('/delete', {
					id: el.data('id')
				}, function(){
					el.fadeOut(800);
				});
			}
		})
		</script>
</body>
</html>

C:/rails/sinatra/import.sql

create table comments (
 id integer primary key,
 body text
);

ブラウザで確認してみてください。
bbs

ruby Sinatra

sinatraはrubyのフレームワークで、簡単にwebアプリケーションを作ることができます。

shinatra

まずは、rubyのバージョンから

C:\rails\sinatra>ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x64-mingw32]

C:\rails\sinatra>gem -v
2.5.1

C:\rails\sinatra>gem list activerecord

*** LOCAL GEMS ***

activerecord (5.0.0.1, 4.2.7.1)

C:\rails\sinatra>gem list sqlite3

*** LOCAL GEMS ***

sqlite3 (1.3.12 x64-mingw32)

そして、gem。sinatra-contribは、サーバー再起動を手間を省くために、インストールします。

C:\rails\sinatra>gem list sinatra

*** LOCAL GEMS ***

sinatra (1.4.7)
sinatra-contrib (1.4.7)

インストールしたら、早速、ファイルを作成して、ローカル環境(http://localhost:4567/)でテストしてみましょう。
C:/rails/sinatra/main.rb

require 'sinatra'
require 'sinatra/reloader'

get '/'  do
	erb :index
end

C:/rails/sinatra/views/index.erb

<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sinatra</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>

ブラウザで確認します。
%e7%84%a1%e9%a1%8c

railsで遊ぼう　application.html.erbエラー

新規にファイルを作った際に、window環境で、
application.html.erb に関して
「ActionView::Template::Error (TypeError: オブジェクトでサポートされていないプロパティまたはメソッドです。」と表示されることがあります。

/hoge/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

この場合、line7, 8 の’application’を’default’に変更すると、エラーが消えます。

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'default', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'default', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

参考:stack overflow:ProgramError

railsで遊ぼう　bcrypt-rubyのインストール

Gemパッケージのbrypt-rubyを使うために、Gemfileのコメントを外して、

# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7', require: 'bcrypt'

bcrypt-rubyをインストールしたところ、

gem install bcrypt -v '3.1.11'　

マイグレーションスクリプト作成時に、エラー発生。

C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/bcrypt-3.1.11-x64-mingw32/lib/bcrypt.rb:16:in `require': cannot load such file -- bcrypt_ext (LoadError)

その場合は、bcryptをインストールし直せば、エラーが解消されるはずです。

C:\rails\asa>gem uninstall bcrypt-ruby

C:\rails\asa>gem install bcrypt --platform=ruby
Fetching: bcrypt-3.1.11.gem (100%)
Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Successfully installed bcrypt-3.1.11
Parsing documentation for bcrypt-3.1.11
Installing ri documentation for bcrypt-3.1.11
Done installing documentation for bcrypt after 1 seconds
1 gem installed

参考：
Bcrypt 3.1.11 – Cannot load file on Windows

railsで遊ぼう　トップページの作成2 CSS

Cssは、app/assets/stylessheetsで管理しています。
慣れないうちは、ゼロからおこしていくのはきついですが、dreamweaverなどを参考に。

/app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
*/

/* ページ全体 */
body {
  background-color: white;
  color: black;
  margin: 0; padding: 0;
  font-family: Meiryo, sans-serif;
}

/* リンク */
a:link { color: #00c; }
a:visited { color: #a08; }
a:hover { color: #ccf; }
a img { border: none; }

/* ブロック要素 */
p, h1, h2, h3, table, ul {
  margin: 0 0 1em;
}

/* 全体の枠 */
div#container {
  margin: 0 auto;
  padding-top: 5px;
  width: 780px;
}

/* 左の枠（コンテンツを入れる） */
div#content {
  float: left;
  width: 530px;
  padding: 10px 10px 10px 0;
}

/* 右の枠（サイドバーを入れる） */
div#sidebar {
  float: left;
  width: 230px;
  background-color: #e8ffff;
  padding: 5px;
  font-size: 86%;
}

/* ヘッダー */
div#header {
  border-top: 4px solid #6bb;
}

/* フッター */
div#footer {
  clear: both;
  font: 11px Verdana;
  color: #888;
  padding: 8px 0;
  border-top: 4px solid #6bb;
  text-align: center;
}

/* メニューバー */
div.menubar {
  padding: 2px;
  background-color: #000;
  color: #ccc;
  font-size: 80%;
  padding: 8px 16px;
}

/* メニューバーのリンク */
div.menubar a { text-decoration: none; }

/* メニューバーのリンク（未訪問） */
div.menubar a:link { color: #ccc; }

/* メニューバーのリンク（訪問済） */
div.menubar a:visited { color: #ecc; }

/* メニューバーのリンク（マウスを合わせたとき） */
div.menubar a:hover {
  color: #f88;
  text-decoration: underline;
}

/* メニューバーのリンク（現在のページ） */
div.menubar span {
  color: #ff8;
  font-weight: bold;
}

/* メインコンテンツ */
div#content h1 {
  color: #88c;
  font-weight: normal;
  font-size: 150%;
  border-bottom: 2px solid #88c;
  margin-bottom: 0.5em;
}

div#content h2 {
  color: #99d;
  font-weight: bold;
  font-size: 120%;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #ccf;
}

div#content p, div#content ul {
  font-size: 90%;
  line-height: 1.5;
}

/* サイドバー */
table#login_form td {
  font-size: 12px;
}

div#sidebar h2 {
  color: #080;
  font-weight: bold;
  border-bottom: 1px dotted #080;
  margin-bottom: 0.5em;
  font-size: 100%;
}

div#sidebar ul {
  padding-left: 1em;
  list-style-type: none;
}

div#sidebar li {
  margin-bottom: 0.3em;
}

では、ブラウザで確認してみましょう。
%e7%84%a1%e9%a1%8c

railsで遊ぼう　トップページの作成1

ページの上部に置くヘッダーや、ページの左右に置くサイドバーなどは、「_menu_bar.html.erb」のように「_」をファイル名の前につけます。

続いて、ページ構成をhtmlに書いていきます。
/app/views/layouts/application/html.erb

<!DOCTYPE html>
<html>
<head>
  <title><%= page_title %></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<div id="container">
	<div id="header">
	<%= render "shared/header" %>
	</div>
	<div id="content">
<%= yield %>
	</div>
	<div id="sidebar">
	<%= render "shared/sidebar" %>
	</div>
	<div id="footer">
	<%= render "shared/footer" %>
	</div>
</div>

</body>
</html>

app/viewsフォルダの下に、sharedの空フォルダを作成し、上記の通り、_header.html.erb、_sidebar.html.erb、_login_form.html.erb、_footer.html.erbを作成してい行きます。また、ヘルパーメソッドmenu_link_toをapplication_helper.rbにも記載します。
/app/veiws/shared/_header.html.erb

<%= image_tag("logo.gif", size: "272x48", alt: "Morning Glory") %>

<div class="menubar">
<%= menu_link_to "TOP", root_path %> &nbsp;|&nbsp;
<%= menu_link_to "ニュース", "#" %> &nbsp;|&nbsp;
<%= menu_link_to "ブログ", "#" %> &nbsp;|&nbsp;
<%= menu_link_to "会員名簿", "#" %> &nbsp;|&nbsp;
<%= menu_link_to "管理ページ", "#" %> &nbsp;|&nbsp;
</div>

/app/veiws/shared/_shidebar.html.erb

<%= render "shared/login_form" %>

<h2>最新ニュース</h2>
<ul>
	<% 5.times do |i| %>
	<li><%= link_to "ニュースの見出し", "#" %></li>
	<% end %>
</ul>
<h2>会員のブログ</h2>
<ul>
	<% 5.times do |i| %>
	<li><%= link_to "ブログの見出し", "#" %></li>
	<% end %>
</ul>

/app/veiws/shared/_login_form.html.erb

<h2>ログイン</h2>
<table id="login_form">
	<tr>
		<td align="right">ユーザー名：</td>
		<td><input type="text" size="16" style="width: 120px"></td>
	</tr>
	<tr>
		<td align="right">パスワード：</td>
		<td><input type="password" size="16" style="width: 120px" /></td>
	</tr>
	<tr>
		<td colspan="2" align="center">
		<input type="submit" value="ログイン" /></td>
	</tr>
</table>

/app/veiws/shared/_footer.html.erb

<%= link_to "このサイトについて", about_path %> |
Copyright(c) <%= link_to "hoge hoge", "http://www.hogehoge.co.jp/" %>
2016

/app/helpers/application_helper.rb

	def menu_link_to(text, path)
		link_to_unless_current(text, path){ content_tag(:span, text)}
	end

続いて、トップページにダミーテキストを入れます。
/app/views/top/index.html.erb

<% 5.times do |x| %>
<h2>見出し</h2>
<p>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
<%= link_to "もっと読む", "#" %></p>
<% end %>

/app/controllers/top_controller.rb

class TopController < ApplicationController
  def index
  end

  def about
  end
end

骨格が出来たので、あとはcssでデザインしていきます。

railsで遊ぼう　h1をインクルードするtitleタグの切り替え

まず、レイアウトテンプレートのtitleタグの箇所を　page_title　のインクルードに書き換えましょう。

/app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title><%= page_title %></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

続いて、ヘルパーメソッドで、先ほどの　page_title　を作ります。
/app/helpers/application_helper.rb

module ApplicationHelper
	def page_title
		title = "Morning Glory"
		title = @page_title + " - " + title if @page_title
		title
	end
end

これで、トップと、ディレクトリ下のタイトルタグが自動的に切り替わります。
%e7%84%a1%e9%a1%8c