ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

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で遊ぼう　トップページの作成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

railsで遊ぼう　View

rubyのtimesメソッドや配列のeachメソッドのブロックを<% ~ %>で記述すると、表示を繰り返すことができ、楽になります。

/app/controllers/lesson_controller.rb

	def step10
		@items = { "フライパン" => 2680, "ワイングラス" => 2550,
			"ペッパーミル" => 4515, "ピーラー" => 945 }
	end

/app/views/lesson/step10.html.erb

<table border="1" cellpadding="4">
<% @items.each do |key, val| %>
	<tr>
	<th><%= key %></th>
	<td align="right"><%= number_with_delimiter(val) %>円</td>
	</tr>
<% end %>
</table>

%e7%84%a1%e9%a1%8c

railsで遊ぼう　action and template

まず、アプリケーションにLessonControllerを追加しましょう。

C:\rails\asa>rails g controller lesson
      create  app/controllers/lesson_controller.rb
      invoke  erb
      create    app/views/lesson
      invoke  test_unit
      create    test/controllers/lesson_controller_test.rb
      invoke  helper
      create    app/helpers/lesson_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/lesson.coffee
      invoke    scss
      create      app/assets/stylesheets/lesson.scss

続いて、ルートで、LessonControllerのアクションを呼び出せるようにします。
/app/config/routes.rb

Rails.application.routes.draw do
root 'top#index'
get "about" => "top#about", as: "about"
get "/lesson/:action(/:name)" => "lesson"
end

続いて、パラメーターの設定です。
/app/controllers/lesson_controller.rb

class LessonController < ApplicationController
	def step1
	render text: "hello, #{params[:name]}san"
end
end

ブラウザのパスをしたのいずれかにすると、
localhost:3000/lesson/step1/sato
localhost:3000/lesson/step1?name=sato
%e7%84%a1%e9%a1%8c

ま、phpのgetですね。

railsで遊ぼう　routing

railsでは、リクエストされたurlのパスから特定のコントローラとアクションを選ぶことをroutingといいます。

では、早速アプリケーションにアクションを追加してみましょう。
/config/routes.rb

Rails.application.routes.draw do
root 'top#index'
get "about" => "top#about", as: "about"
end

topControllerにaboutのメソッドを追加します。
/app/controllers/top_controller.rb

class TopController < ApplicationController
  def index
  	@message = "Hello, rails"
  	@txtmessage = "what's up?"
  end

  def about
  end
end

viewのフォルダに、about.html.erbを作成し、htmlを書いていきます。
/app/views/top/about.html.erb

<% @page_title = "このサイトについて" %>
<h1><%= @page_title %></h1>

<p>morning gloryは、1999年に結成された草野球チームです。毎週土曜日の早朝に練習することから、morning gloryというチーム名になりました。主な活動拠点は、多摩川河川敷グラウンドです。</p>

localhostの/aboutを開くと表示されます。
%e7%84%a1%e9%a1%8c

実際の開発では、リソースベースのルーティングを使うことがほとんどです。

rubyで遊ぼう　継承とミックスイン

サブクラスを作成する場合は、「class サブクラス名 < 親クラス名」とします。また、superは親クラスの同名のメソッドを呼び出すものです。早速見てみましょう。

class Robot
	def initialize(name)
		@name = name
		@x = @y = 0
	end

	def move(x, y)
		@x += x; @y += y
	end

	def to_s
		“#{@name}: #{@x},#{@y}”
	end
end

class FlyingRobot < Robot
	def initialize(name)
		super
		@z = 0
	end

	def move(x, y, z)
		super(x, y)
		@z += z
	end

	def to_s
		super + ",#{@z}"
	end
end

robo1 = Robot.new("ロボ1号")
puts robo1
robo1.move(10, 5)
puts robo1
robo2 = FlyingRobot.new("飛行ロボ")
puts robo2
robo2.move(5, 5, 30)
puts robo2

C:\rails>ruby test.rb
ロボ1号: 0,0
ロボ1号: 10,5
飛行ロボ: 0,0,0
飛行ロボ: 5,5,30

手間を省略できますね♪
その他に、モジュールというものがあります。クラスのように、メソッドを記述します。
クラスの中にモジュールを取り込むことをミックスインといいます。
しかし、モジュールは親クラスにはなれず、親クラスを持つこともできませんが、ミックスインはできます。rubyは単一継承のため、複数の親クラスを持つことはできませんが、複数のモジュールを取り込むことができます。

module Radar
	def distance_to(other)
		Math.sqrt((self.x - other.x) **2 + (self.y - other.y) ** 2)
	end
end

class Robot
	include Radar
	attr_accessor :name, :x, :y

	def initialize(name)
		@name = name
		@x = @y = 0
	end

	def move(x, y)
		@x += x; @y += y
	end
end

robo1 = Robot.new("ロボ1号")
robo2 = Robot.new("ロボ2号")
robo2.move(12, 35)
puts "距離は　#{robo1.distance_to(robo2)}です。"

C:\rails>ruby test.rb
距離は　37.0です。

なるほどね～。

ruby Sinatra