Rails学習【フォームヘルパー】【レイアウト】

フォーム作成に使われる<%= %>タグ

・<form>タグの作成

form_tag(controller: コントローラー名, action: アクション名)

このタグで送信先のコントローラーとアクションを指定

 

・入力フィールド

<%= text_field_tag("input1") %>

 

・送信ボタン

<%= submit_tag("Click") %>

 

・フォームの終了

<% end %>

終了のタグにはイコールがつかない

 

Bootstrap独自のクラスを指定してフォームを作りたい場合

<%= text_field_tag( ID ,デフォルト値, ・・属性の設定・・) %>

 

 

【レイアウト】

(app)-(views)-(layouts)にテンプレートが格納されている

 

Rails学習【ビュー3】

■フォームの送信

パラメータによる値の送信はプログラム内からアクセスする場合には便利だが、

ユーザーから入力してもらう場合はフォームを利用するといい。

<例>

#index.html.erbを書き換える

<h1 class="display-4"><%= @title %></h1>
<p><%= @msg %></p>
<form method="POST" action="/hello/index">
<input type="text" class="form-control"
name="input1" value="<%= @value %>">
<input type="submit" class="btn btn-primary">
</form>
 
シンプルな入力フィールドと送信ボタン
送信先は/helloにPOST送信する形
それぞれのclassに設定した"form-control"と"btn btn-primaryはBootstrapのクラス。
 
GET方式=誰がどこからアクセスしても同じ表示
POST方式=その時一度限りのアクセスによる表示
 
・GETとPOSTで処理を分ける
先述のindex.html.erbは/helloで表示したフォームをそのまま/helloにPOST送信している。
(GET)なのか、(POST)なのかをチェックして処理を分けていく
<例>
#HelloControlクラスを修正する
class HelloController < ApplicationController
 
 def index
  if request.post? then
   @title = 'Result'
   @msg = 'you typed: ' + params['input1'] + '.'
   @value = params['input1']
  else
   @title = 'Index'
   @msg = 'type text...'
   @value = ''
  end
 end

end
 
requestはwebブラウザからサーバーへ送られた情報をまとめたオブジェクト
どういう形でアクセスされたのか細かい情報が入っている
post?はPOST送信したかを示すメソッド
この結果を元に処理を分けていく
 
Railsではクエリーパラメーターでもフォーム送信でも送られてきた値は全てparamsに入っている
 
・ルーティング設定
<例>
#routes.rbを書き換える
Rails.application.routes.draw do
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
get 'hello/index'
get 'hello', to: 'hello#index'
get 'hello/orther'
post 'hello', to: 'hello#index'
post 'hello/index'
end
 
CSRF対策
外部からの攻撃の対策。フォームの送信はフォームそのものから送信しなくても処理できてしまうが、Railsにはフォーム利用に特別な機能を設けている
<例>CSRF対策を通過させる
#hello_controller.rbを書き換える
class HelloController < ApplicationController
protect_from_forgery
 
def index
if request.post? then
@title = 'Result'
@msg = 'you typed: ' + params['input1'] + '.'
@value = params['input1']
else
@title = 'Index'
@msg = 'type text...'
@value = ''
end
end

end
 

Rails学習【ビュー2】

■テンプレートに値を表示する

テンプレートの利点はRuby側から(コントローラー側から)表示を操作できる。

<例>

#HelloControllerクラス(hello_controller.rb)を書き換える

class HelloController < ApplicationController
 
 def index
  @title = "View Sample"
  @msg = "コントローラーに用意した値です。"
 end
 
end
 
変数の前の@はインスタンス変数を意味する
クラスのインスタンス(クラスを元にして作られたオブジェクト)の中で常に値を保持している変数
 
・テンプレートを修正する
<例>
#index.html.erbを書き換える
<h1 class="display-4"><%= @title %></h1>
<p><%= @msg %></p>
 
<%= ○○ %>タグは、Rubyを実行して値を書き出す特殊なタグ
 
■リダイレクトとパラメータ送付
リダイレクト=あるアクションから別のアクションへ処理を転送すること
aのアクションにアクセスしたら必要な処理をしてbのアクションへ自動的に移動するなど
<例>
#ortherアクションを作り、そのままindexアクションにリダイレクト
(indexへ直接アクセスと、ortherからリダイレクトでindexへ直接アクセスした時で表示を変える)
#hello_controller.rbを書き換える
class HelloController < ApplicationController
 
 def index
  if params['msg'] != nil then
   @title = params['msg']
  else
   @title = 'index'
 end
 @msg = 'this is redirect sample...'
end

def orther
  redirect_to action: :index, params: {'msg': 'from orther page'}
end
 
end
 
・redirect_toメソッド
redirect_to action: アクション名, params:{.....ハッシュ.....}
actionというオプションでリダイレクト先でのアクションを指定
他のコントローラーのアクションに移動したい場合は、『controller: コントローラー名』という引数も用意できる
 
上記のindex側の処理はmsgというパラメータが送られてきたら@titleに決まった値を返すように記述
 
・routes.rbの修正
新しいアクションを作成したら、ルート情報を追加する
get 'hello/orther'
 
ルート情報の追加で、HelloControllerクラスのortherメソッドが利用できるようになる
 
実際にlocalhost:3000に【/hello】【/hello/orther】で接続テスト
#表示が変わる
 
 
 
 

Rails概要【ビュー】

webページの本格的な表示にはRuby言語だけでは限界

→HTMLなど書いてデザインする(RubyのERBという技術を使う)

 

appフォルダの中のviewsというフォルダがあり、その中にコントローラー名のビューテンプレートを保管するフォルダを作る。

前回のHelloControllerクラスに用意したindexアクションメソッドのテンプレートを作る。

テンプレートファイルは【アクション.hrml.erb】

※今回の場合は、index.html.erb

〔記述例〕

<h1 class="display-4">Index page</h1>
<p>this is sample page.</p>
通常のHTMLは<head><body>で構成されていくが、Railsのテンプレートにはページ全体のレイアウトを行う機能がある為、実際に画面表示される部分(body部分)の記述だけでOK。
※classにdisplay-4という値を設定しているが、bootstrapというフレームワークのため
 
スタイルシートも同時に作成
assetsフォルダ-nostylesheetsフォルダの中にhello.scssが作成されている(コントローラー作成時に自動作成済み)
RailsAppは名前からHelloというコントローラーではhello.scssというスタイルシートを自動で利用するので、個別にロードしたりしなくてもOK
 
※デザインセンスに自信がなくても大丈夫
Railsで利用するためにCDN(Content Delivery Network)のリンクを追加する(<link>タグで埋め込む)
※埋め込み先は(views)¥(layouts)¥(application.html.erb)
すでに記述があるが、<body>部分にタグを追加して、<body>タグを書き換える
<body class="container">
 
ここまでやったら、HelloControllerクラス(hello_controller.rb)と修正して、indexメソッドでテンプレートが利用できるようにする。
独自にレンダリング等の記述がなければ、該当のアクションに対応するテンプレートを読み込んでレンダリングし表示してくれる。
 
 
 
 

Rails概要【コントローラー】

$ raila new アプリ名

これをRubyで実行するとフォルダが作られる

※今回はわかりやすくするためにDesktopにディレクトリを指定して作業開始

 

様々なフォルダ・ファイルが作成されるが、重要なのは

【app】アプリの本体が格納

 【config】細かな設定を実行するところ

 

 【app】の中はこれだけ知っていればではなく、全て覚える必要あり。中でも

(models)データベースアクセスのパーツ

(views)画面表示のパーツ

(controllers)プログラム制御のパーツ

RailsMVCフレームワーク、上記のイニシャル

 

(controllers)

$ rails generate controller hello

#「hello」というコントローラーの作成 実行前にディレクトリはRailsAppに移動しておく

 

Visual Studio Code(VSC)で開く

※command + O でエクスプローラー起動

 

 

class コントローラークラス名 < ApplicationController

 ## 内容記述 ##

end

 

初期の(hello_controller.rb)では、HelloControllerというクラスを作成しているだけ。

コントローラーのクラスは【ApplicationController】を継承して作るのが基本

 

 内容にはindexなどのアクションメソッドを記述していく

 

〔例〕

def index

 render plain:" ----------"

end

#後述される値をレンダリングする

# plain:---はテキストデータとして扱うということを示す

 

Railsでのアクションメソッドの呼び出し

http//ドメイン/コントローラー名/アクション名

 

実際にweb上に表示するにはルーティング設定が必要。

#config内のroutes.rbに記述

 

Rails.application.routes.draw do

 --ルーティング情報--

end

 

routes.rbにはgetメソッドを使う

基本 get 'コントローラー/アクション'

 

手動 get 'hello(アドレス)' to: 'hello(コントローラー)#index(アクション)'

# http://localhost:3000/helloというアドレスにアクセスしたら、HelloControllerクラスのindexメソッドを呼び出す

 

htmlを出力するにはmsgという変数にソースコードをテキストとして保管

 render html : msg

上記で呼び出し

 

HTMLのタグは外部攻撃に対して対策している為、自動的にエスケープ文字へ変換して表記される

→ render html : msg.html_safe

と記述するとHTMLタグとして表示される。

 

クエリーパラメータ

外から(コントローラーにアクセスする前からの)値を受け取って表示する 

 http://アクセスするアドレス?名前=値$名前=値&.......

 

コントローラーで内容を作っていく

 

プログラミング学習

以前から細々と続けている学習の備忘録としてブログ作成

 

RubyRuby on Railsをメインに独学

数ヶ月、仕事やら何やらバタバタしてた疎かになっていたけど、また継続して勉強を進めていく

 

システムアップデート

Rails、6.0〜になってたの知らなかった。。

さっそくアップデートしてローカルサーバーで起動したらエラー。

すぐさまQiitaで検索、ありがたいことに同じようなエラーが出た方の記事で無事解決

環境構築してたらあっという間に時間が過ぎる

 

バージョンチェック

$ ruby -v

$ rails -v

 

ローカル環境起動

$ rails s

※終了はctl + c

ブラウザでhttp://localhost:3000/にアクセスで確認

 

超基本的なことを記述して頭を整理

 

progateで一通りやったところで中断してしまってたから基本をおさらいして、まずはアプリ作ってみよう