Tips – リストを横並びに

2021-03-16 / tau / コメントする

概要

デフォルトのHTML/CSSでは、リスト内の各要素(li)は縦に並べられ、各要素の先頭にマーカーが付される。

このスタイルを変更し、li要素を横に並べるスタイルを設定する。

HTML/CSS

HTML

以下のリストでulタグにクラスを指定し、スタイルを設定する。

<body>
  <ul class="menu">
    <li>新規投稿</li>
    <li>プロフィール</li>
    <li>設定</li>
    <li>ログアウト</li>
  </ul>
</body>

<body>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</body>

CSS

CSSの例は以下のとおり。

/* リセットCSS */
body, div, li, ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* リストのul要素全体のスタイル */
.menu {
  list-style-type: none;
  display: flex;
}
/* 個々のli要素のスタイル */
.menu li {
  margin: 10px;
  padding: 10px;
  width: 100px;
  background-color: #ccc;
  text-align: center;
}

/* リセットCSS */

body, div, li, ul {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* リストのul要素全体のスタイル */

.menu {

list-style-type: none;

display: flex;

}

/* 個々のli要素のスタイル */

.menu li {

margin: 10px;

padding: 10px;

width: 100px;

background-color: #ccc;

text-align: center;

}

冒頭のブロックは関係する要素のリセットCSS。

ulタグに設定したmenuクラスのスタイル

list-style-type: noneでリストのマーカー表示を抑止
display: flexは、この指定1つで子要素のボックス要素が横並びになる

menuクラスの下のli要素のスタイル

親のulでflexを指定しているので、個別要素としてのスタイルを設定
各liを等幅に設定し、背景色を指定している

Rails/SCSS

HTML

HTMLの内容は同じ。

SCSS

リセットCSSはreset.cssファイルとして切り分けている。

考え方はCSSと変わらず、子要素liをブロック内に入れ子にしている。

// リストの水平配置
.menu {
  list-style-type: none;
  display: flex;
  /* 個々のli要素のスタイル */
  li {
    margin: 10px;
    padding: 10px;
    width: 100px;
    background-color: #ccc;
    text-align: center;
  }
}

// リストの水平配置

.menu {

list-style-type: none;

display: flex;

/* 個々のli要素のスタイル */

li {

margin: 10px;

padding: 10px;

width: 100px;

background-color: #ccc;

text-align: center;

}

Tips – アンカーをボタン風に

2021-03-16 / tau / コメントする

概要

アンカー要素(a)にスタイルを適用して、ボタンの様な形にする。

HTML/CSS

HTML

HTMLではa要素をdivタグで囲んでクラス定義している。

<body>
  <div class="button_like_anchor">
    <a href="#">ボタンのようなアンカー</a>
  </div>
</body>

<body>

<a href="#">ボタンのようなアンカー</a>

</div>

</body>

CSS

CSSの例は以下のとおり。

/* 関係要素のスタイルのリセット */
a, body, div {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* body要素の背景色を設定 */
body {
  background-color: #e8e8e8;
}

/* ボタン風でラップしたアンカーのスタイル */
.button_like_anchor a {
  display: inline-block;
  box-sizing: border-box;
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid #000;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  background-color: #a0a0a0;
}
/* アンカー上に */
.button_like_anchor a:hover {
  background-color: #acacac;
  cursor: pointer;

/* 関係要素のスタイルのリセット */

a, body, div {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* body要素の背景色を設定 */

body {

background-color: #e8e8e8;

}

/* ボタン風でラップしたアンカーのスタイル */

.button_like_anchor a {

display: inline-block;

box-sizing: border-box;

margin: 10px;

padding: 8px 12px;

border: 1px solid #000;

border-radius: 5px;

text-decoration: none;

color: white;

background-color: #a0a0a0;

}

/* アンカー上に */

.button_like_anchor a:hover {

background-color: #acacac;

cursor: pointer;

前段のブロックで関係要素のスタイルをリセットし、bodyの背景色をセットしている。

アンカーのスタイル設定については以下のとおり。

.button_like_anchorクラスの中のa要素のスタイル

marginやpaddingの設定のためにdisplay: inline-blockを指定
box-sizingの設定はここでは影響しないが、サイズ指定してボタンを並べるときなどに関係
border-radiusで角を丸くしている
text-decoration: noneとcolor設定でデフォルトのアンカーの装飾を変更

Hover時の変化

元の背景をbackground-colorで設定
疑似クラスhoverでカーソルが領域に入った時のスタイルを設定
- 背景色を少し明るくしている
- cursorでカーソル形状を変更(デフォルトがpointerのため、ここでは影響しない)

Rails/SCSS

html.erb

Railsではアンカータグをヘルパーで実装している。

<div class="button_like_anchor">
  <%= link_to('ボタンのようなアンカー', '#') %>
</div>

<%= link_to('ボタンのようなアンカー', '#') %>

</div>

SCSS

リセットCSSはreset.cssファイルとして切り分けている。

また、疑似クラスhoverの記述をSCSSに合わせて変更している。

// body要素の背景色を設定
body {
  background-color: #e8e8e8;
}

// ボタン風でラップしたアンカーのスタイル
.button_like_anchor a {
  display: inline-block;
  box-sizing: border-box;
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid #000;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  background-color: #a0a0a0;
  // Hover時のスタイル変化
  &:hover {
    background-color: #acacac;
    cursor: pointer;
  }
}

// body要素の背景色を設定

body {

background-color: #e8e8e8;

}

// ボタン風でラップしたアンカーのスタイル

.button_like_anchor a {

display: inline-block;

box-sizing: border-box;

margin: 10px;

padding: 8px 12px;

border: 1px solid #000;

border-radius: 5px;

text-decoration: none;

color: white;

background-color: #a0a0a0;

// Hover時のスタイル変化

&:hover {

background-color: #acacac;

cursor: pointer;

}

CSS – リセットCSS

2021-03-16 / tau / コメントする

概要

ブラウザーによってデフォルトで設定されているスタイルをリセットしてシンプルにするためのCSS。

リセットに加えて単純のスタイルを設定するものもある。

各種リセットCSS

Eric Meyer’s “Reset CSS” 2.0

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

HTML5 Doctor CSS Reset

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

100

101

102

html5doctor.com Reset Stylesheet

v1.6.1

Last Updated: 2010-09-17

Author: Richard Clark - http://richclarkdesign.com

Twitter: @rich_clark

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body {

line-height:1;

}

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

display:block;

}

nav ul {

list-style:none;

}

blockquote, q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:'';

content:none;

}

a {

margin:0;

padding:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

/* change colours to suit your needs */

ins {

background-color:#ff9;

color:#000;

text-decoration:none;

}

/* change colours to suit your needs */

mark {

background-color:#ff9;

color:#000;

font-style:italic;

font-weight:bold;

}

del {

text-decoration: line-through;

}

abbr[title], dfn[title] {

border-bottom:1px dotted;

cursor:help;

}

table {

border-collapse:collapse;

border-spacing:0;

}

/* change border colour to suit your needs */

hr {

display:block;

height:1px;

border:0;

border-top:1px solid #cccccc;

margin:1em 0;

padding:0;

}

input, select {

vertical-align:middle;

}

Yahoo! (YUI 3) Reset CSS

/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}

ol,
ul {
	list-style:none;
}

caption,
th {
	text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,
q:after {
	content:'';
}
abbr,
acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

/**

* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)

* http://cssreset.com

* http://yuilibrary.com/license/

TODO will need to remove settings on HTML since we can't namespace it.

TODO with the prefix, should I group by selector or property for weight savings?

html{

color:#000;

background:#FFF;

}

TODO remove settings on BODY since we can't namespace it.

TODO test putting a class on HEAD.

- Fails on FF.

body,

div,

dl,

dt,

dd,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

pre,

code,

form,

fieldset,

legend,

input,

textarea,

blockquote,

th,

td {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset,

img {

border:0;

}

TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...

address,

caption,

cite,

code,

dfn,

em,

strong,

th,

var {

font-style:normal;

font-weight:normal;

}

ol,

ul {

list-style:none;

}

caption,

th {

text-align:left;

}

h1,

h2,

h3,

h4,

h5,

h6 {

font-size:100%;

font-weight:normal;

}

q:before,

q:after {

content:'';

}

abbr,

acronym {

border:0;

font-variant:normal;

}

/* to preserve line-height and selector appearance */

sup {

vertical-align:text-top;

}

sub {

vertical-align:text-bottom;

}

input,

textarea,

select {

font-family:inherit;

font-size:inherit;

font-weight:inherit;

}

/*to enable resizing for IE*/

input,

textarea,

select {

*font-size:100%;

}

/*because legend doesn't inherit in IE */

legend {

color:#000;

}

/* YUI CSS Detection Stamp */

#yui3-css-stamp.cssreset { display: none; }

その他

Normalize.css

A Modern CSS Reset

Rails – スタイル設定

2021-03-15 / tau / コメントする

概要

Railsのプロジェクトにおけるスタイルシートの場所、スタイル設定について整理する。

デフォルトの状態

プロジェクト生成直後、app/assets/stylesheets/ディレクトリーにapplication.cssが生成され、以下の2行が記述されている。これらの行はディレクティブと呼ばれ、それぞれの意味については後述。

 *= require_tree .
 *= require_self

1 2	= require_tree . = require_self

この段階でRailsの”Yay! You’re on Rails!”のページのソースを見ると、HTMLに直接styleタグが書かれている。

コントローラーとスタイルファイルの関係

以下のように2つのアクションを含むコントローラーを3つ生成する(出力は省略)。

[vagrant@vagrant dummy_app]$ rails generate controller fruits orange grape
[vagrant@vagrant dummy_app]$ rails generate controller vesitables beets carrots
[vagrant@vagrant dummy_app]$ rails generate controller meats pork beef

[vagrant@vagrant dummy_app]$ rails generate controller fruits orange grape

[vagrant@vagrant dummy_app]$ rails generate controller vesitables beets carrots

[vagrant@vagrant dummy_app]$ rails generate controller meats pork beef

その結果、コントローラー・ビューファイルとともに、app/assets/stylesheetsディレクトリーに3つのscssファイルが生成される。

[vagrant@vagrant dummy_app]$ ls app/assets/stylesheets/
application.css  fruits.scss  meats.scss  vesitables.scss

1 2	[vagrant@vagrant dummy_app]$ ls app/assets/stylesheets/ application.css fruits.scss meats.scss vesitables.scss

これら3つのscssファイルはコメントのみの空の内容。

// Place all the styles related to the fruits controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the fruits controller here.

// They will automatically be included in application.css.

// You can use Sass (SCSS) here: http://sass-lang.com/

ここでorangeビューファイルを表示させてみる。

localhost:3000/fruits/orange

表示されたページのソースのうちスタイルシートの読み込みに関する行を抜き出すと以下のとおり。

<link rel="stylesheet" media="all" href="/assets/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" />

以下のことがわかる

applicationのほか、新たに生成されたfruits, vesitables, meatsに関するスタイルシートが全て読み込まれる
スタイルシートはcss拡張子を持つ
ファイル名の本体は、コントローラー名.self-ダイジェストの形式
URLクエリーパラメーターを持つ(body=1)
スタイルが読み込まれる順番は、application.cssが最後で、その前に他のファイルが辞書順で読み込まれる

これらのファイルは元のscssファイルからcssにコンパイルされた結果で、ファイルの内容のダイジェストが元のファイル名に付加されている。

この場合、application.cssと3つのscss全てのスタイルが適用される。たとえばいずれかのcss/scssファイルに* { color: red; }と記述するとfruits/orangeページの文字の色が赤くなる。

require_selfとapplication.css

無指定でもapplication.cssは読み込まれる

application.cssの以下の2行を削除し、何も指定されていない状態にする。

 *= require_tree .
 *= require_self

1 2	= require_tree . = require_self

この状態でorangeページを表示させてソースを見ると、application.cssの読み込みだけ残っている。

<link rel="stylesheet" media="all" href="/assets/application.self-34004ed1a95199bac37fb11583f3acbb08d69e689d5c114362d79071d479a29f.css?body=1" data-turbolinks-track="reload" />

1	<link rel="stylesheet" media="all" href="/assets/application.self-34004ed1a95199bac37fb11583f3acbb08d69e689d5c114362d79071d479a29f.css?body=1" data-turbolinks-track="reload" />

require_selfの意味？

application.cssの2行の記述のうち*= require_tree .の行を削除し、ページを表示させてソースを見てみる。

<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

1	<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

*= require_selfの行に対応してapplication.cssのファイルが読み込まれているが、そもそもなにも指定しなくてもこの行は生成されていた。

次に*= require_selfの方を削除し*= require_tree .を残した結果を見てみる。無指定の時と同じく、ここでもapplication.cssが読み込まれている。

<link rel="stylesheet" media="all" href="/assets/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

読み込み順の制御は可能

require_treeとrequire_selfの順番を逆にしてみる

 *= require_self
 *= require_tree .

1 2	= require_self = require_tree .

そうすると、application.cssが最初に読み込まれるようになった。

<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />

ディレクティブ

require_tree

stylesheetsディレクtリーの構成を以下の様に変更する。

d:stylesheets
- f:meats.scss
- d:crops
  - f:vesitables.scss
  - d:fruits
    - f:fruits.scss

この状態でapplication.cssが初期設定のとき、ページを表示させてもスタイルファイルの読み込みは変わらない。

require_tree .はカレントディレクトリー以下のすべてのディレクトリをたどりながらすべてのファイルをCSSに含める。

次にapplication.cssの内容を以下の様に変更する。

 *= require_tree ./crops

1	*= require_tree ./crops

この結果、指定したcropsディレクトリー以下のファイルが再帰的に読み込まれる(application.cssは読み込まれている)。

 <link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

require_directory

require_directoryは、指定したディレクトリー下のファイルのみをCSSに含める。サブディレクトリー以下は無視される、

 *= require_directory ./crops

1	*= require_directory ./crops

この結果は、cropsディレクトリー下のvesitables.cssファイルのみが読み込まれる(application.cssは読み込まれている)。

<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

require ファイル

requireディレクティブにファイル名を指定して、特定のファイルのみを読み込める。

 *= require ./crops/fruits/fruits.css

1	*= require ./crops/fruits/fruits.css

上記の指定で、HTMLファイルにはfruits.cssのみが読み込まれる(application.cssは読み込まれている)。

<link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

Rails – 基礎的なルーティング

2021-03-15 / tau / コメントする

概要

GETやPOSTなどのリクエストがあったときconfig/routes.rbの内容に従って各コードにルーティングされる。

このルーティングファイルの書き方を整理する。

前提

以下のような構成のアプリケーションを考える。

コントローラー：pages_controller.rb
- アクション：top
- ビュー：top.html.erb
コントローラー：users
- アクション：sign_up、sign_in
- ビュー：sign_up.html.erb、sign_in.html.erb

デフォルトのroutes.rb

設定と動作

ルーティングファイルはconfig/routes.rbにある。コントローラー生成直後のファイルの内容は以下のとおり。

Rails.application.routes.draw do
  get 'users/sign_in'

  get 'users/sign_up'

  get 'pages/top'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Rails.application.routes.draw do

get 'users/sign_in'

get 'users/sign_up'

get 'pages/top'

# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

end

初期状態では、GETメソッドで各ビューファイルがリクエストされたとき、ディレクトリー構成に従ってファイルを探すようルーティングされる。

たとえばブラウザーでhttp://localhost:3000/pages/topと入力するとpagesディレクトリー下のtop.html.erbが表示される。

このページに他のページからヘルパーでリンクを張る場合は以下の様に書く。

<%= link_to 'トップ', '/pages/top %>

ルーティング

ルーティングの設定状態はrails routesコマンドで確認できる。

[vagrant@vagrant ex_bbs]$ rails routes
       Prefix Verb URI Pattern              Controller#Action
users_sign_in GET  /users/sign_in(.:format) users#sign_in
users_sign_up GET  /users/sign_up(.:format) users#sign_up
    pages_top GET  /pages/top(.:format)     pages#top

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

users_sign_in GET /users/sign_in(.:format) users#sign_in

users_sign_up GET /users/sign_up(.:format) users#sign_up

pages_top GET /pages/top(.:format) pages#top

Prefixの列はリンクのエイリアスに関する表示で、ヘルパー中でプレフィックスに'_path'を付けた名前でリンク先を表せる。

たとえばtop.html.erb中に以下の行を追加するとリンクが表示され、クリックするとsign_in.html.erbページに遷移する。

<%= link_to('サインイン', users_sign_in_path) %>

まとめ

ルーティング設定で各アクションを呼ぶためのURLを設定できる
URLでルーティングする場合は文字列とする
Prefixと_pathを組み合わせたエイリアスでもルーティングができ、その場合はコロンなしで書く

ルーティングの設定変更

設定と動作

コントローラー生成時のルーティングを変更して、それぞれのページがアプリケーションルートから直接呼び出せるようにする(たとえばlocalhost:3000/topなど)。

Rails.application.routes.draw do
  get '/top', to: 'pages#top'

  get '/sign_up', to: 'users#sign_up'

  get '/sign_in', to: 'users#sign_in'
end

Rails.application.routes.draw do

get '/top', to: 'pages#top'

get '/sign_up', to: 'users#sign_up'

get '/sign_in', to: 'users#sign_in'

end

3つのルーティングとも同じ方法で指定している。

メソッド 'URL', to: 'コントローラー#アクション'

これでそれぞれのURL指定’/top’などに簡略化され、GETリクエストに対して対応するアクションが実行される。

この場合、トップページに以下のようなURL指定のリンクを追加すると、クリック時にサインインページに遷移する。

<%= link_to('サインイン', '/sign_in') %>

ルーティング

ルーティングの一覧は以下のとおりで、Prefixの列も簡略化されている。

[vagrant@vagrant ex_bbs]$ rails routes
 Prefix Verb URI Pattern        Controller#Action
    top GET  /top(.:format)     pages#top
sign_up GET  /sign_up(.:format) users#sign_up
sign_in GET  /sign_in(.:format) users#sign_in

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

top GET /top(.:format) pages#top

sign_up GET /sign_up(.:format) users#sign_up

sign_in GET /sign_in(.:format) users#sign_in

Prefixも変更されているので、top.html.erb中に以下の行を追加するとリンクが表示され、クリックするとsign_in.html.erbページに遷移する。

<%= link_to('サインイン', sign_in_path) %>￥

まとめ

ルーティングの, to: 'controller#action'によって、設定したURLから指定したアクションにルーティングできる
カンマ、toキー(to:)、'コントローラー#アクション'の文字列

ルーティングの名前

設定と動作

routes.rbのsign_inの行に, as:を追加して以下の様に変更する。

get '/sign_in', to: 'users#sign_in', as: :sign_in_page

この場合、リンク先としてsign_in_page_pathを指定してルーティングできるようになる。

ルーティング

このときのルーティングは以下の様になっている。

[vagrant@vagrant ex_bbs]$ rails routes
      Prefix Verb URI Pattern        Controller#Action
         top GET  /top(.:format)     pages#top
     sign_up GET  /sign_up(.:format) users#sign_up
sign_in_page GET  /sign_in(.:format) users#sign_in

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

top GET /top(.:format) pages#top

sign_up GET /sign_up(.:format) users#sign_up

sign_in_page GET /sign_in(.:format) users#sign_in

この場合、linkt_toから呼び出す名前はsign_in_page_pathになり、従前のsign_in_pathを使うとエラーになる。

つまり、as:で指定された内容で元のPrefixがオーバーライドされ、以後はその内容の名前かURLで指定しなければならない。

まとめ

ルーティングの名前を', as: :name'で設定できる
設定はカンマ、asキー(as:)、名前シンボル
名前を設定すると、Prefixがそれに置き換えられる

Rails – 例題 – コントローラー・ビューを準備する

2021-03-14 / tau / コメントする

概要

Railsの例題・掲示板の第1段階のためのコントローラーとビューを生成する。

コントローラー・ビューの生成

プロジェクトディレクトリー下で、2つのコントローラー、pagesとusersを生成する。

pagesコントローラーとビュー

生成コマンド

pagesコントローラーには1つのアクションtopを定義する。

rails generate controller pages top

[vagrant@vagrant ex_bbs]$ rails generate controller pages top
Running via Spring preloader in process 793
      create  app/controllers/pages_controller.rb
       route  get 'pages/top'
      invoke  erb
      create    app/views/pages
      create    app/views/pages/top.html.erb
      invoke  test_unit
      create    test/controllers/pages_controller_test.rb
      invoke  helper
      create    app/helpers/pages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/pages.coffee
      invoke    scss
      create      app/assets/stylesheets/pages.scss

[vagrant@vagrant ex_bbs]$ rails generate controller pages top

Running via Spring preloader in process 793

create app/controllers/pages_controller.rb

route get 'pages/top'

invoke erb

create app/views/pages

create app/views/pages/top.html.erb

invoke test_unit

create test/controllers/pages_controller_test.rb

invoke helper

create app/helpers/pages_helper.rb

invoke test_unit

invoke assets

invoke coffee

create app/assets/javascripts/pages.coffee

invoke scss

create app/assets/stylesheets/pages.scss

コントローラー

上のコマンドによって、コントローラーファイルpages_controller.rb、ビューファイルtop.html.erbの2つのファイルが生成される。

app/controllers/pages_controller.rb

topアクションに対応する空のメソッドが定義されている。

class PagesController < ApplicationController
  def top
  end
end

class PagesController < ApplicationController

def top

end

ビュー

app/views/pages/top.html.erb

コントローラーと同名のディレクトリーがviewsディレクトリーに、アクションと同名のビューファイルがそのディレクトリーにつくられる。ビューファイルにはプレースホルダーの表示が書かれている。

<h1>Pages#top</h1>
<p>Find me in app/views/pages/top.html.erb</p>

1 2	<h1>Pages#top</h1> <p>Find me in app/views/pages/top.html.erb</p>

usersコントローラーとビュー

生成コマンド

usersコントローラーには2つのアクションsign_up、sign_inを定義する。

[vagrant@vagrant ex_bbs]$ rails generate controller users sign_up sign_in
Running via Spring preloader in process 825
      create  app/controllers/users_controller.rb
       route  get 'users/sign_in'
       route  get 'users/sign_up'
      invoke  erb
      create    app/views/users
      create    app/views/users/sign_up.html.erb
      create    app/views/users/sign_in.html.erb
      invoke  test_unit
      create    test/controllers/users_controller_test.rb
      invoke  helper
      create    app/helpers/users_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/users.coffee
      invoke    scss
      create      app/assets/stylesheets/users.scss

[vagrant@vagrant ex_bbs]$ rails generate controller users sign_up sign_in

Running via Spring preloader in process 825

create app/controllers/users_controller.rb

route get 'users/sign_in'

route get 'users/sign_up'

invoke erb

create app/views/users

create app/views/users/sign_up.html.erb

create app/views/users/sign_in.html.erb

invoke test_unit

create test/controllers/users_controller_test.rb

invoke helper

create app/helpers/users_helper.rb

invoke test_unit

invoke assets

invoke coffee

create app/assets/javascripts/users.coffee

invoke scss

create app/assets/stylesheets/users.scss

コントローラー

上のコマンドの結果、1つのコントローラーファイルusers_controller.rbと2つのビューファイルsign_up.html.erb、sign_in.html.erbが生成される。

app/controllers/users_controller.rb

2つのアクションに対応する空のメソッドが定義されている。

class UsersController < ApplicationController
  def sign_up
  end

  def sign_in
  end
end

class UsersController < ApplicationController

def sign_up

end

def sign_in

end

ビュー

コントローラーと同名(users)のディレクトリーがviewsディレクトリーの下につくられ、2つのビューファイルが生成される。

app/views/users/sign_up.html.erb

<h1>Users#sign_up</h1>
<p>Find me in app/views/users/sign_up.html.erb</p>

1 2	<h1>Users#sign_up</h1> <p>Find me in app/views/users/sign_up.html.erb</p>

app/view/users/sign_in.html.erb

<h1>Users#sign_in</h1>
<p>Find me in app/views/users/sign_in.html.erb</p>

1 2	<h1>Users#sign_in</h1> <p>Find me in app/views/users/sign_in.html.erb</p>

ルーティングの設定

基礎的なルーティングに従ってルーティングを設定していく。

デフォルトの設定

コントローラー・ビュー生成後のルーティングはconfig/routes.rbに書かれている。

Rails.application.routes.draw do
  get 'users/sign_in'

  get 'users/sign_up'

  get 'pages/top'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Rails.application.routes.draw do

get 'users/sign_in'

get 'users/sign_up'

get 'pages/top'

# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

end

初期状態では、GETメソッドで各ビューファイルがリクエストされたとき、ディレクトリー構成に従ってファイルを探すようルーティングされる。

たとえばブラウザーでhttp://localhost:3000/pages/topと入力するとpagesディレクトリー下のtop.html.erbが表示される。

ルーティングの設定変更

コントローラー生成時のルーティングを変更する。

ビューファイルのディレクトリー構成によらず、URLで/top、/sign_up、/sign_inと指定してアクションが呼ばれるようにする
..._pathのリンク名を定義する

変更後のroutes.rbは以下のとおり。

Rails.application.routes.draw do
  get '/top', to: 'pages#top', as: :top

  get '/sign_up', to: 'users#sign_up', as: :sign_up

  get '/sign_in', to: 'users#sign_in', as: :sign_in
end

Rails.application.routes.draw do

get '/top', to: 'pages#top', as: :top

get '/sign_up', to: 'users#sign_up', as: :sign_up

get '/sign_in', to: 'users#sign_in', as: :sign_in

end

Rails – 例題 – 掲示板

2021-03-14 / tau / コメントする

概要

Railsの流れを例題にまとめる。

題材として掲示板を選ぶ。

第1段階

BBSのユーザー登録、サインイン／サインアウト、エラー表示を実装する。

ここでは以下の事項を含む。

プロジェクトの開始、主なファイル配置
基礎的なコントロール、ビュー、ルーティング
データベースの基本操作
フォーム入力、バリデーション、パスワード暗号化
モデルによるデータベースの操作
セッション管理、アクセス制御

第1段階の内容

第2段階

サインインしたユーザーによる、プロフィールページの閲覧・編集、コメントの投稿・削除、画像ファイルの添付を実装する。

ここでは以下の事項を含む。

ユーザーに応じたページの表示・編集
リレーションを持つテーブルの設定・操作
リソースによる操作
画像ファイルのアップロード

第2段階の内容

Rails – form_withとモデルの使い方

2021-03-13 / tau / コメントする

概要

form系ヘルパーではフォームの入力がparams変数にセットされるが、一般には以下の様な流れで入力パラメーターを利用する。

form_with/form_forで読み込んだパラメーターをモデルにセットする
モデルへのパラメーターのセットは、慣習的にprivateのメソッドを準備して、それを介する
各パラメーターは、モデルインスタンスのプロパティーとして参照・利用

モデルによるフォームデータの取得も参照。

例示

基本構造

流れ

トップページに入力フォームを表示
- /top
- app/controllers/pages_controller#top
- app/views/pages/top.html.erb
フォーム入力をpagesコントローラーのinputアクションへ送信
- app/controllers/pages_controller#input
inputアクションでフォーム入力をUserモデルインスタンスに格納して表示

入力フォーム

form_withによる以下のようなフォームを例にする。フォームビルダーのtext_fieldとpassword_fieldに入力された値が送信される。

<%= form_with(model: @user, url: input_path) do |form| %>
  <%= form.text_field(:name, placeholder: "名前を入力") %>
  <%= form.password_field(:password, placeholder: "パスワードを入力") %>
  <%= form.submit("送信") %>
<% end %>

<%= form_with(model: @user, url: input_path) do |form| %>

<%= form.text_field(:name, placeholder: "名前を入力") %>

<%= form.password_field(:password, placeholder: "パスワードを入力") %>

<%= form.submit("送信") %>

<% end %>

注意点

form_withはデフォルトでajaxによるフォーム送信となり、ページ全体がレンダリングされない。HTMLとして送信してレンダリングするには、パラメーターにlocal: trueを指定する。

<%= form_with(url:/model: ***, local: true) %>

モデルとデータベース

データを扱うモデルは以下で生成し、マイグレートしてテーブルを作成しておく

[vagrant@vagrant testapp]$ rails generate model user name:string password:string

1	[vagrant@vagrant testapp]$ rails generate model user name:string password:string

テーブル

mysql> desc users;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| name       | varchar(255) | YES  |     | NULL    |                |
| password   | varchar(255) | YES  |     | NULL    |                |
| created_at | datetime     | NO   |     | NULL    |                |
| updated_at | datetime     | NO   |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)

mysql> desc users;

+------------+--------------+------+-----+---------+----------------+

+------------+--------------+------+-----+---------+----------------+

| id | bigint(20) | NO | PRI | NULL | auto_increment |

+------------+--------------+------+-----+---------+----------------+

5 rows in set (0.00 sec)

コントローラー

以下の枠組みでコントローラーを生成。ビューのform_withでモデルを使うため、Userインスタンスを生成している。

class PagesController < ApplicationController
  def top
    @user = User.new
  end

  def input
  # 入力時の処理
  end
end

class PagesController < ApplicationController

def top

@user = User.new

end

def input

# 入力時の処理

end

ルーティング

アプリケーション起動時にtopページを表示
入力POST時にinputアクションへルーティング

Rails.application.routes.draw do
  root to: 'pages#top', as: :top
  post 'input', to: 'pages#input', as: :input
end

Rails.application.routes.draw do

root to: 'pages#top', as: :top

post 'input', to: 'pages#input', as: :input

end

入力データのモデルへのセット

コントローラーに以下に様に追記。

class PagesController < ApplicationController
  def top
    @user = User.new
  end

  def input
    puts "---------- form input ----------"
    user = User.new(user_params)
    p user
    p user.name
    p user.password
    redirect_to top_path and return
  end

  private
  def user_params
    params.require(:user).permit(:name, :password)
  end
end

class PagesController < ApplicationController

def top

@user = User.new

end

def input

puts "---------- form input ----------"

user = User.new(user_params)

p user

p user.name

p user.password

redirect_to top_path and return

end

private

def user_params

params.require(:user).permit(:name, :password)

end

要点は次のとおり。

パラメーターを引数にしてモデルインスタンスを与える。

変数 = モデルクラス.new(モデル名_params)

引数はモデルに与えるparamsを返すメソッドで、慣習としてメソッド名の付け方、praivate宣言、requireとpremitによるパラメーター取得が定まっている。

params.require(:モデル名).permit(:要素名, ...)

モデルにパラメーターがセットされた後は、要素名と同じモデルのプロパティーで値を取得。

コンソールの出力部分は以下のとおり

Started POST "/input" for 10.0.2.2 at 2021-03-13 09:47:19 +0900
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#input as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"o3M9kpQpW10kA+lAocHDdvsgFf3BdIgutcqGaapRBVqkuAu3eu0j5k6jhZHEbU44n43Y81cuicBjL0UeuLrFyA==", "user"=>{"name"=>"NAME", "password"=>"[FILTERED]"}, "commit"=>"送信"}
---------- form input ----------
#<User id: nil, name: "NAME", password: "PASSWORD", created_at: nil, updated_at: nil>
"NAME"
"PASSWORD"
Redirected to http://localhost:3000/
Completed 200 OK in 3ms (ActiveRecord: 0.0ms)

Started POST "/input" for 10.0.2.2 at 2021-03-13 09:47:19 +0900

Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

Processing by PagesController#input as JS

Parameters: {"utf8"=>"✓", "authenticity_token"=>"o3M9kpQpW10kA+lAocHDdvsgFf3BdIgutcqGaapRBVqkuAu3eu0j5k6jhZHEbU44n43Y81cuicBjL0UeuLrFyA==", "user"=>{"name"=>"NAME", "password"=>"[FILTERED]"}, "commit"=>"送信"}

---------- form input ----------

#<User id: nil, name: "NAME", password: "PASSWORD", created_at: nil, updated_at: nil>

"NAME"

"PASSWORD"

Redirected to http://localhost:3000/

Completed 200 OK in 3ms (ActiveRecord: 0.0ms)

require/permitメソッド

フォームの入力をモデルにセットする際、require～permitでパラメーターを指定している。

たとえば悪意のあるユーザーによってPOSTされる要素が追加された場合でも、必要なパラメーターのみを参照・変更することができる。

そして上述のように、一般的にはrequire～permitのメソッドチェーンをprivateメソッドでラップして使う。

Rails – form関係ヘルパーの基本

2021-03-11 / tau / コメントする

概要

form系のヘルパーの基本的な機能・挙動について整理してみた。

form系の新旧4つのヘルパーの動作についてまとめた
モデルを介して複数のパラメーターを扱うform_forとform_withのオーソドックスな使い方については、最後の「パラメーターを一括で扱う」にまとめた。

各formヘルパーの関係は

form_tag、form_for、form_withはHTMLのformタグを生成するRailsのヘルパー
Rails 5.1より前はform_tagとform_for
Rails 5.1からform_withが導入され、form_tagとform_forは非推奨に

form_tagとform_forについては

form_tagはブロック内にtext_field_tagなどtag系のヘルパーを持つことを想定
データベースと紐づいたモデルを扱う場合はform_for、モデルを介さずにフォームのデータのみやりとりする場合はform_tagを使用

form_withについては

form_withはform_tagの機能とform_forの機能を1つで使い分け

form_tag

動作

form_tagはフォームブロックの各要素の値を直接ハッシュで取り出すため、モデルは介在しない。

form_tagではアクションへのパスを指定し、アクションで各要素の値を参照する
各要素の値は1次元のハッシュparamsに格納されている
要素の値は要素のname属性をキーとして参照

コード間の流れ

app/views/top.html.erb

form_tagヘルパーの引数に、POSTを送るアクションへのパスを指定
- パス指定にはroutes.rbで設定するエイリアスを使っている
各要素ヘルパーの第1引数でid/name属性の値をシンボルで定義

<%= form_tag(from_form_tag_path) do %>
  <%= text_field_tag(:param_text, nil, placeholder: "テキスト入力") %>
  <%= password_field_tag(:param_pass, nil, placeholder: "パスワード入力") %>
  <%= submit_tag("送信") %>
<% end %>

<%= form_tag(from_form_tag_path) do %>

<%= text_field_tag(:param_text, nil, placeholder: "テキスト入力") %>

<%= password_field_tag(:param_pass, nil, placeholder: "パスワード入力") %>

<%= submit_tag("送信") %>

<% end %>

config/routes.rb

form_tagからのPOSTを受け取るアクションへのルートを設定
URLにエイリアスを使っていて、それをアクションに紐づけている

Rails.application.routes.draw do
  root to: 'pages#top', as: :top
  post 'from_form_tag', to: 'pages#form_tag_process', as: :from_form_tag
end

Rails.application.routes.draw do

root to: 'pages#top', as: :top

post 'from_form_tag', to: 'pages#form_tag_process', as: :from_form_tag

end

app/controllers/pages_controller.rb

ルーティングの結果呼ばれたアクション内で、フォームの要素から送られた値を処理
要素の値はparams[キーのシンボル]で取り出す

class PagesController < ApplicationController
  def top
  end

  def form_tag_process
    puts "----- form_params -----"
    p params
    p params[:param_text]
    p params[:param_pass]
    redirect_to top_path and return
  end
end

class PagesController < ApplicationController

def top

end

def form_tag_process

puts "----- form_params -----"

p params

p params[:param_text]

p params[:param_pass]

redirect_to top_path and return

end

コンソール出力

4行目でPOSTで送られるparams全体が表示されている
6行目でparamsを表示させており、4行目と同じ内容
7～8行目は個別の要素の値をキーを使って参照

Started POST "/from_form_tag" for 10.0.2.2 at 2021-03-10 23:33:14 +0900
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#form_tag_process as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"r2MLrmxMn/q+ox6XCSu6snB8SMU7qDF9ePvsLcYdNmkVTDt6HQuVnO3ZLRvQXCbhR9TPBIkSHnZzK/841Xf9Bw==", "param_text"=>"TEXT", "param_pass"=>"PASSWORD", "commit"=>"送信"}
----- form_params -----
<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"r2MLrmxMn/q+ox6XCSu6snB8SMU7qDF9ePvsLcYdNmkVTDt6HQuVnO3ZLRvQXCbhR9TPBIkSHnZzK/841Xf9Bw==", "param_text"=>"TEXT", "param_pass"=>"PASSWORD", "commit"=>"送信", "controller"=>"pages", "action"=>"form_tag_process"} permitted: false>
"TEXT"
"PASSWORD"
Redirected to http://localhost:3000/
Completed 302 Found in 1ms (ActiveRecord: 0.0ms)

Started POST "/from_form_tag" for 10.0.2.2 at 2021-03-10 23:33:14 +0900

Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

Processing by PagesController#form_tag_process as HTML

Parameters: {"utf8"=>"✓", "authenticity_token"=>"r2MLrmxMn/q+ox6XCSu6snB8SMU7qDF9ePvsLcYdNmkVTDt6HQuVnO3ZLRvQXCbhR9TPBIkSHnZzK/841Xf9Bw==", "param_text"=>"TEXT", "param_pass"=>"PASSWORD", "commit"=>"送信"}

----- form_params -----

<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"r2MLrmxMn/q+ox6XCSu6snB8SMU7qDF9ePvsLcYdNmkVTDt6HQuVnO3ZLRvQXCbhR9TPBIkSHnZzK/841Xf9Bw==", "param_text"=>"TEXT", "param_pass"=>"PASSWORD", "commit"=>"送信", "controller"=>"pages", "action"=>"form_tag_process"} permitted: false>

"TEXT"

"PASSWORD"

Redirected to http://localhost:3000/

Completed 302 Found in 1ms (ActiveRecord: 0.0ms)

form_for

動作

form_forでは第1引数にモデルのインスタンスを指定
- モデルのインスタンスはコントローラーでインスタンス変数として準備
form_forでPOSTされた各要素の値はハッシュparams[モデル名のシンボル]に格納される
- 要素の値を取り出すには以下のハッシュを参照
- params[モデル名のシンボル][要素名のシンボル]
ここでは第2引数のURLでPOST先のアクションを指定している

コード間の流れ

より具体的な実装については、モデルによるフォームデータの取得を参照。

app/views/top.html.erb

form_forの第1引数にモデルのインスタンスを指定
- インスタンスはコントローラーで生成
- 第2に引数のurl:で指定したパスにPOST
form_forの構文は以下のとおり
- form_for(モデル, オプション群) do |フォームビルダー|
各要素の値はtext_fieldなどフォームビルダーのメソッドで要素名を指定して取得する

<%= form_for(@record, url: from_form_for_path) do |form| %>
  <%= form.text_field(:param_text, placeholder: "テキストを入力") %>
  <%= form.password_field(:param_pass, placeholder: "パスワードを入力") %>
  <%= form.submit("送信") %>
<% end %>

<%= form_for(@record, url: from_form_for_path) do |form| %>

<%= form.text_field(:param_text, placeholder: "テキストを入力") %>

<%= form.password_field(:param_pass, placeholder: "パスワードを入力") %>

<%= form.submit("送信") %>

<% end %>

config/routes.rb

form_tagからのPOSTを受け取るアクションへのルートを設定
ここではurl:で指定したエイリアスからアクションに紐づけている

Rails.application.routes.draw do
  root to: 'pages#top', as: :top
  post 'from_form_for', to: 'pages#form_for_process', as: :from_form_for
end

Rails.application.routes.draw do

root to: 'pages#top', as: :top

post 'from_form_for', to: 'pages#form_for_process', as: :from_form_for

end

app/controllers/pages_controller.rb

ルーティングの結果呼ばれたアクション内で、フォームの要素から送られたデータを確認
各要素の値はparams[モデル名のシンボル]にハッシュとしてまとめられている
個別の要素の値はその中で要素名をキーとしてとりだせる
- params[モデル名のシンボル][要素名のシンボル]

class PagesController < ApplicationController
  def top
    @record = Record.new
  end

  def form_for_process
    puts "----- form_params -----"
    p params[:record]
    p params[:record][:param_text]
    p params[:record][:param_pass]
    redirect_to top_path and return
  end
end

class PagesController < ApplicationController

def top

@record = Record.new

end

def form_for_process

puts "----- form_params -----"

p params[:record]

p params[:record][:param_text]

p params[:record][:param_pass]

redirect_to top_path and return

end

なお上の例ではform_forの引数に与えるモデルインスタンス(@user)を最初に生成しているが、コントローラーの中ではこれを使わず、ローカルな変数(user)を使っている。

コンソール出力

4行目中、"record" => {"param_text" => "TEXT", ...}が各要素のデータ
6行目に全要素のハッシュ、7～8行目に個別の要素の値が表示されている

Started POST "/from_form_for" for 10.0.2.2 at 2021-03-10 23:22:22 +0900
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#form_for_process as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"kxRom4t1qFU20HznmSM8ydT7b9rqD9c9GNclGgakhBopO1hP+jKiM2WqT2tAVKCa41PoG1i1+DYTBzYPFc5PdA==", "record"=>{"param_text"=>"TEXT", "param_pass"=>"PASSWORD"}, "commit"=>"送信"}
----- form_params -----
<ActionController::Parameters {"param_text"=>"TEXT", "param_pass"=>"PASSWORD"} permitted: false>
"TEXT"
"PASSWORD"
Redirected to http://localhost:3000/
Completed 302 Found in 5ms (ActiveRecord: 0.0ms)

Started POST "/from_form_for" for 10.0.2.2 at 2021-03-10 23:22:22 +0900

Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

Processing by PagesController#form_for_process as HTML

Parameters: {"utf8"=>"✓", "authenticity_token"=>"kxRom4t1qFU20HznmSM8ydT7b9rqD9c9GNclGgakhBopO1hP+jKiM2WqT2tAVKCa41PoG1i1+DYTBzYPFc5PdA==", "record"=>{"param_text"=>"TEXT", "param_pass"=>"PASSWORD"}, "commit"=>"送信"}

----- form_params -----

<ActionController::Parameters {"param_text"=>"TEXT", "param_pass"=>"PASSWORD"} permitted: false>

"TEXT"

"PASSWORD"

Redirected to http://localhost:3000/

Completed 302 Found in 5ms (ActiveRecord: 0.0ms)

form_with (データベースなし)

動作

動作の内容はform_tagと同じ
そのためビューにおいてform_withの引数としてURLを指定(url: パス)

注意点

<%= form_with(url: 'URL', local: true) do |f| %>

コード間の流れ

ビューでの書き方以外はform_tagと同じ流れ

app/views/top.html.erb

form_withの引数にURLを指定(url: パス)
モデルが介在しないform_tagと同じ動作をさせる書き方
各要素はフォームビルダーのメソッドで書いている

<%= form_with(url: from_form_with_non_db_path) do |form| %>
  <%= form.text_field(:param_text, placeholder: "テキスト入力") %>
  <%= form.password_field(:param_pass, placeholder: "パスワード入力") %>
  <%= form.submit("送信") %>
<% end %>

<%= form_with(url: from_form_with_non_db_path) do |form| %>

<%= form.text_field(:param_text, placeholder: "テキスト入力") %>

<%= form.password_field(:param_pass, placeholder: "パスワード入力") %>

<%= form.submit("送信") %>

<% end %>

config/routes.rb

Rails.application.routes.draw do
  root to: 'pages#top', as: :top
  post 'from_form_with_non_db', to: 'pages#form_with_non_db_process', as: :from_form_with_non_db
end

Rails.application.routes.draw do

root to: 'pages#top', as: :top

post 'from_form_with_non_db', to: 'pages#form_with_non_db_process', as: :from_form_with_non_db

end

app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def top
  end

  def form_with_non_db_process
    puts "----- form_with (non DB) -----"
    p params
    p params[:param_text]
    p params[:param_pass]
    redirect_to top_path and return
  end
end

class PagesController < ApplicationController

def top

end

def form_with_non_db_process

puts "----- form_with (non DB) -----"

p params

p params[:param_text]

p params[:param_pass]

redirect_to top_path and return

end

コンソール出力

Started POST "/from_form_with_non_db" for 10.0.2.2 at 2021-03-10 23:44:49 +0900
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#form_with_non_db_process as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"lwT+bvSyq9SN/mYrripqw1w5BTs7j41fJAa391FIyHstK866hfWhst6EVad3XfaQa5GC+ok1olQv1qTiQiIDFQ==", "param_text"=>"TEXT", "param_pass"=>"PASSWORD", "commit"=>"送信"}
----- form_with (non DB) -----
<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"lwT+bvSyq9SN/mYrripqw1w5BTs7j41fJAa391FIyHstK866hfWhst6EVad3XfaQa5GC+ok1olQv1qTiQiIDFQ==", "param_text"=>"TEXT", "param_pass"=>"PASSWORD", "commit"=>"送信", "controller"=>"pages", "action"=>"form_with_non_db_process"} permitted: false>
"TEXT"
"PASSWORD"
Redirected to http://localhost:3000/
Completed 200 OK in 3ms (ActiveRecord: 0.0ms)

Started POST "/from_form_with_non_db" for 10.0.2.2 at 2021-03-10 23:44:49 +0900

Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

Processing by PagesController#form_with_non_db_process as JS

Parameters: {"utf8"=>"✓", "authenticity_token"=>"lwT+bvSyq9SN/mYrripqw1w5BTs7j41fJAa391FIyHstK866hfWhst6EVad3XfaQa5GC+ok1olQv1qTiQiIDFQ==", "param_text"=>"TEXT", "param_pass"=>"PASSWORD", "commit"=>"送信"}

----- form_with (non DB) -----

<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"lwT+bvSyq9SN/mYrripqw1w5BTs7j41fJAa391FIyHstK866hfWhst6EVad3XfaQa5GC+ok1olQv1qTiQiIDFQ==", "param_text"=>"TEXT", "param_pass"=>"PASSWORD", "commit"=>"送信", "controller"=>"pages", "action"=>"form_with_non_db_process"} permitted: false>

"TEXT"

"PASSWORD"

Redirected to http://localhost:3000/

Completed 200 OK in 3ms (ActiveRecord: 0.0ms)

form_with (データベースあり)

より具体的な実装については、モデルによるフォームデータの取得を参照。

動作

動作の内容はform_forと同じ
そのためにビューにおいて引数にデータベースと紐づいたモデルを指定(model: モデルインスタンス)
ここでは第2引数のURLでPOST先のアクションを指定している

<%= form_with(model: 'model', url: 'URL', local: true) do |f| %>

コード間の流れ

app/views/top.html.erb

form_withの引数にモデルのインスタンスを指定している
- model: モデルインスタンス名で指定
- モデルのインスタンスはコントローラーで生成
モデルを介在したform_withと同じ動作をさせる書き方
各要素はフォームビルダーのメソッドで書いている

<%= form_with(model: @record, url: from_form_with_db_path) do |form| %>
  <%= form.text_field(:param_text, placeholder: "テキストを入力") %>
  <%= form.password_field(:param_pass, placeholder: "パスワードを入力") %>
  <%= form.submit("送信") %>
<% end %>

<%= form_with(model: @record, url: from_form_with_db_path) do |form| %>

<%= form.text_field(:param_text, placeholder: "テキストを入力") %>

<%= form.password_field(:param_pass, placeholder: "パスワードを入力") %>

<%= form.submit("送信") %>

<% end %>

config/routes.rb

Rails.application.routes.draw do
  root to: 'pages#top', as: :top
  post 'from_form_with_db', to: 'pages#form_with_db_process', as: :from_form_with_db
end

Rails.application.routes.draw do

root to: 'pages#top', as: :top

post 'from_form_with_db', to: 'pages#form_with_db_process', as: :from_form_with_db

end

app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def top
    @record = Record.new
  end

  def form_with_db_process
    puts "----- form_with (DB) -----"
    p params[:record]
    p params[:record][:param_text]
    p params[:record][:param_pass]
    redirect_to top_path and return
  end
end

class PagesController < ApplicationController

def top

@record = Record.new

end

def form_with_db_process

puts "----- form_with (DB) -----"

p params[:record]

p params[:record][:param_text]

p params[:record][:param_pass]

redirect_to top_path and return

end

コンソール出力

Started POST "/from_form_with_db" for 10.0.2.2 at 2021-03-10 23:51:21 +0900
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#form_with_db_process as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"JsiSAIuM5phTduwLwkuv5x05G9KyYbHNkeX1WJ5lUYmc56LU+svs/gAM34cbPDO0KpGcEwDbnsaaNeZNjQ+a5w==", "record"=>{"param_text"=>"TEXT", "param_pass"=>"PASSWORD"}, "commit"=>"送信"}
----- form_with (non DB) -----
<ActionController::Parameters {"param_text"=>"TEXT", "param_pass"=>"PASSWORD"} permitted: false>
"TEXT"
"PASSWORD"
Redirected to http://localhost:3000/
Completed 200 OK in 1ms (ActiveRecord: 0.0ms)

Started POST "/from_form_with_db" for 10.0.2.2 at 2021-03-10 23:51:21 +0900

Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

Processing by PagesController#form_with_db_process as JS

Parameters: {"utf8"=>"✓", "authenticity_token"=>"JsiSAIuM5phTduwLwkuv5x05G9KyYbHNkeX1WJ5lUYmc56LU+svs/gAM34cbPDO0KpGcEwDbnsaaNeZNjQ+a5w==", "record"=>{"param_text"=>"TEXT", "param_pass"=>"PASSWORD"}, "commit"=>"送信"}

----- form_with (non DB) -----

<ActionController::Parameters {"param_text"=>"TEXT", "param_pass"=>"PASSWORD"} permitted: false>

"TEXT"

"PASSWORD"

Redirected to http://localhost:3000/

Completed 200 OK in 1ms (ActiveRecord: 0.0ms)

Vagrant/AmazonLinux2 – Railsインストール

2021-03-10 / tau / コメントする

概要

VagrantのAmazonLinux2仮想環境にrbenv/Rubyをインストール後、Railsをインストールした記録。

ホスト：Windows10
ゲスト：Vagrant + VirtualBox + bento/amazonlinux-2

Railsの最新版ではなく、オリジナルの環境に併せて特定のバージョンを指定してインストールした。

Railsに影響する機能の停止

SELinux

もともとSELinuxは無効状態だった。

[vagrant@vagrant ~]$ getenforce
Disabled

1 2	[vagrant@vagrant ~]$ getenforce Disabled

firewalld

そもそもfirewalldはセットされていなかった。

[vagrant@vagrant ~]$ systemctl status firewalld
Unit firewalld.service could not be found.

1 2	[vagrant@vagrant ~]$ systemctl status firewalld Unit firewalld.service could not be found.

Railsのインストール

一応、gemで使用できるRailsの確認。使用可能なRailsはない。

[vagrant@vagrant ~]$ gem list rails

*** LOCAL GEMS ***

[vagrant@vagrant ~]$ gem list rails

*** LOCAL GEMS ***

gemでRailsのバージョン5.1.7を指定してインストール。

[vagrant@vagrant ~]$ gem i -v 5.1.7
railsFetching concurrent-ruby-1.1.8.gem
Fetching thread_safe-0.3.6.gem
Fetching rack-2.2.3.gem
.....
Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, irack, rack-test, racc, nokogiri, crass, loofah, rails-html-sanitizer, rails-dom-testing, builder, erubi, actionview, actionpack, activemodel, arel, activerecord, globalid, activejob, mini_mime, mail, actionmailer, nio4r, websocket-extensions, websocket-driver, actioncable, thor, method_source, railties, sprockets, sprockets-rails, rails after 81 seconds
35 gems installed

[vagrant@vagrant ~]$ gem i -v 5.1.7

railsFetching concurrent-ruby-1.1.8.gem

Fetching thread_safe-0.3.6.gem

Fetching rack-2.2.3.gem

.....

Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, irack, rack-test, racc, nokogiri, crass, loofah, rails-html-sanitizer, rails-dom-testing, builder, erubi, actionview, actionpack, activemodel, arel, activerecord, globalid, activejob, mini_mime, mail, actionmailer, nio4r, websocket-extensions, websocket-driver, actioncable, thor, method_source, railties, sprockets, sprockets-rails, rails after 81 seconds

35 gems installed

再度使用可能なRailsを探して、インストールされていることを確認する。

[vagrant@vagrant ~]$ gem list rails

*** LOCAL GEMS ***

rails (5.1.7)
rails-dom-testing (2.0.3)
rails-html-sanitizer (1.3.0)
sprockets-rails (3.2.2)

[vagrant@vagrant ~]$ gem list rails

*** LOCAL GEMS ***

rails (5.1.7)

rails-dom-testing (2.0.3)

rails-html-sanitizer (1.3.0)

sprockets-rails (3.2.2)

Railsサーバーの稼働

エラー～JavaScriptランタイムがない

テスト用のプロジェクトを生成してRailsサーバーを起動しようとしたところ、エラーになった。

[vagrant@vagrant test_app]$ rails s
Traceback (most recent call last):
        36: from bin/rails:3:in `<main>'
        35: from bin/rails:3:in `load'
.....
/home/vagrant/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/execjs-2.7.0/lib/execjs/runtimes.rb:58:in `autodetect': Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

[vagrant@vagrant test_app]$ rails s

Traceback (most recent call last):

36: from bin/rails:3:in `<main>'

35: from bin/rails:3:in `load'

.....

/home/vagrant/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/execjs-2.7.0/lib/execjs/runtimes.rb:58:in `autodetect': Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

Node.jsでもよさそうなので、CentOS7と同じ手順でNode.jsをインストール。Rails6では最新安定版のNode.jsだと警告が出たのでダウングレード下が、Rails5では最新版では警告が出なかった。

[vagrant@vagrant test_app]$ nvm install stable
Downloading and installing node v15.11.0...
Downloading https://nodejs.org/dist/v15.11.0/node-v15.11.0-linux-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v15.11.0 (npm v7.6.0)
Creating default alias: default -> stable (-> v15.11.0)

[vagrant@vagrant test_app]$ nvm install stable

Downloading and installing node v15.11.0...

Downloading https://nodejs.org/dist/v15.11.0/node-v15.11.0-linux-x64.tar.xz...

######################################################################### 100.0%

Computing checksum with sha256sum

Checksums matched!

Now using node v15.11.0 (npm v7.6.0)

Creating default alias: default -> stable (-> v15.11.0)

ここまででrails serverの実行が可能になった。

ホストブラウザーからの接続

vagrantfileに以下の1行を記述

config.vm.network "forwarded_port", guest: 3000, host: 3000

テスト用のプロジェクトを生成してrails sを実行すると、「このサイトにアクセスできません」と弾かれる。

netstatで確認すると、ポート3000は開いている。

[vagrant@vagrant ~]$ netstat -an
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State
tcp        0      0 0.0.0.0:3306            0.0.0.0:*               LISTEN
tcp        0      0 0.0.0.0:111             0.0.0.0:*               LISTEN
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:3000          0.0.0.0:*               LISTEN
.....

[vagrant@vagrant ~]$ netstat -an

Active Internet connections (servers and established)

Proto Recv-Q Send-Q Local Address Foreign Address State

tcp 0 0 0.0.0.0:3306 0.0.0.0:* LISTEN

tcp 0 0 0.0.0.0:111 0.0.0.0:* LISTEN

tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN

tcp 0 0 127.0.0.1:3000 0.0.0.0:* LISTEN

.....

サーバー立ち上げのオプションを以下の様にして接続成功。

rails s -b 0.0.0.0

以前参考にしたサイトを再度確認すると、Rails4.2以降ではこの接続方法になるとのこと。オリジナルの環境ではrails sで十ていたが(エイリアス？)。

既存プロジェクトの実行

オリジナルの環境でつくったプロジェクトをダウンロードし、共有フォルダー経由で仮想環境に移して実行したところ、db:createでエラーが出た。

[vagrant@vagrant bbs]$ rails db:create
Could not find minitest-5.14.3 in any of the sources
Run `bundle install` to install missing gems.

[vagrant@vagrant bbs]$ rails db:create

Could not find minitest-5.14.3 in any of the sources

Run `bundle install` to install missing gems.

指示通りにbundle install。

[vagrant@vagrant bbs]$ bundle install
Warning: the running version of Bundler (1.17.2) is older than the version that created the lockfile (1.17.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
.....
Bundle complete! 16 Gemfile dependencies, 70 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

[vagrant@vagrant bbs]$ bundle install

Warning: the running version of Bundler (1.17.2) is older than the version that created the lockfile (1.17.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.

.....

Bundle complete! 16 Gemfile dependencies, 70 gems now installed.

Use `bundle info [gemname]` to see where a bundled gem is installed.

この後db:migrationは問題なく、これでアプリケーションがオリジナルの環境通りに実行できるようになった。

一方、仮想環境で作ったプロジェクトをオリジナルの環境にアップロードした場合、オリジナル側でbundle installが必要になったが、これで問題なく実行できた。