Month: October 2016

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

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で遊ぼう　クラスメソッド

クラス自体に特定の機能を持たせるには、クラスメソッドを作ります。クラスメソッドは、クラス名.メソッド名　のように呼び出します。
railsでは、データベースのテーブル全体を対象にするメソッドをクラスメソッドとして用意しています。

それでは、例を見てみましょう。

class Robot
	def initialize(name, x, y)
		@name = name
		@x = x; @y = y
	end
	def to_s
		"#{@name}: #{@x},#{@y}"
	end

	def self.load(fname)
		robots = []
		File.open(fname, encoding: "utf-8") do |f|
			f.each_line do |line|
				cols = line.chomp.split(/\t/)
				robots << new(cols[0], cols[1].to_i, cols[2].to_i)
			end
		end
		robots
	end
end

robots = Robot.load("test.txt")
robots.each{|robo| puts robo }

test.txt

ロボ1号	83	14
ロボ2号	5	51
ロボ3号	78	66

コマンド

C:\rails>ruby test.rb
ロボ1号: 83,14
ロボ2号: 5,51
ロボ3号: 78,66

rubyで遊ぼう　アクセサメソッド

オブジェクト内のデータにアクセスする際には、メソッドを書かなければなりません。

読み出し用のメソッド　attr_reader
書き込み用のメソッド　attr_writer

それでは、例を見てみましょう。

class Robot
	attr_reader :name
	attr_accessor :score

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

robo1 = Robot.new("ロボ1号")
robo2 = Robot.new("ロボ2号")
robo2.score = 90
puts robo1.name, robo1.score
puts robo2.name, robo2.score

C:\rails>ruby test.rb
ロボ1号
10
ロボ2号
90

rubyで遊ぼう　クラス

newメソッドを呼び出すと、インスタンス.initialize(name)が実行されます。

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

robo1 = Robot.new("ロボ1号")
robo2 = Robot.new("ロボ2号")
puts robo1
robo2.move(10, 20)
puts robo2

C:\rails>ruby test.rb
ロボ1号: 0,0
ロボ2号: 10,20

おなじみメソッド制限です。
public:メソッドはどこからでも呼び出せる
private:同じクラス、サブクラス内のメソッドの中だけで呼び出せる

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

	def move(x, y)
		@x += x; @y += y
		crash if @x < -100 || @x > 100 || @y < -100 || @y > 100
	end

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

	private
	def crash
		puts "ズコーン！"
	end
end

robo1 = Robot.new("ロボ1号")
puts robo1
robo1.move(20, 20)
puts robo1
robo1.move(40, 40)
puts robo1
robo1.move(50, 20)
puts robo1
robo1.crash

C:\rails>ruby test.rb
ロボ1号: 0,0
ロボ1号: 20,20
ロボ1号: 60,60
ズコーン！
ロボ1号: 110,80
test.rb:30:in `
': private method `crash' called for # (NoMethodError)