Rails – 基礎的なフォーム

概要

フォームとのパラメーターのやりとりのみを確認する。

  • 既存のビューにフォーム関係のタグを書き、新たなアクションに送信する
  • 既存のコントローラーにそのアクションを追加し、フォームからのデータをパラメータとして受け取る
  • 受け取ったパラメーターをフォームを書いた既存のビューに渡してレンダリング
  • フォーム関連のタグをヘルパーに置き換える

元になる枠組み

  • プロジェクト:demo_app
  • コントローラー:demo_contents
  • アクション:top_page
  • ビュー:top_page.html.erb

STEP-1~form_tag

ビューファイルへのフォームの記述

top_page.html.erbに以下の内容を記述。

上記のform_tagは、submitされた内容を指定したアクションにpostするformタグを生成する。

ただし直接formタグを書くと”invalid authenticity token”エラーになる。

コントローラーにアクション追加

フォームからPOSTで送られる内容を受けるアクションを、コントローラにメソッドとして追加する。

ルーティングの追加

config/routes.rbファイルに、POSTに対するアクションメソッドへのルーティングを追加する。

アクションの確認

ルートページにフォームが表示され、テキストボックスにメモを入力して送信ボタンを押すと、Railsサーバーにデータが送られている様子が表示される。

STEP-2~params

params変数の確認

  • フォームからsubmitされたときのフォーム要素の値は、params変数に格納される
  • params変数はハッシュで、フォーム要素のname属性で指定した内容がキーになる

確認のため、demo_contentsコントローラーのpost_memoアクションに1行追加する。

ここでテキストボックスにメモを入力して送信すると、Railsサーバーにその内容が表示される。

params変数のHTMLへの反映

上記のpost_memoアクションの内容を以下の様に変更する。

  • viewから参照可能な@memoにフォームから受け取ったparams[:memo]の内容をセット
  • トップページへのレンダリングとreturn

@変数はクラスのインスタンス変数で、これをアクションとビューで共有できる。

またビューファイルtop_page.html.erbに以下の様に追記する。コントローラーでセットされた@memoの内容をHTMLで表示させている。

この結果、送信ボタンを押すと入力したメモの内容がtop_pageに表示されるようになる。

STEP-3~フォームヘルパー

フォーム内の要素を、以下の様にフォームヘルパー関数に書き換える。

さらにformヘルパーはhiddenタイプのinputタグを追加するが、これはCSRF対策のため

上記のlabel_tagtext_field_tagsubmit_tagはそれぞれ対応するタグに変換される~フォームヘルパー(旧)

form_tagヘルパーのまとめ

フォーム全体

  • form_tag…endヘルパーでフォーム全体を囲む
  • form_tagではポスト先のURLを指定する
  • ポスト先のURLはroutes.rbでポスト先アクションにルーティングしておく

フォーム内のヘルパー

  • label、inputタグに置き換えられるヘルパーの多くは、第1引数にname属性に対応する引数をとる
  • この名前引数には、一般にシンボルがあてられる

受信側での扱い

  • 受信側ではparamsというハッシュにフォームからの受信結果が入れられる
  • 受信のためにルーティングされたアクション内で、このparamsを参照する
  • paramsのキーに、フォームでname属性に指定したシンボルを使って値を読み出す

 

Rails – フォームヘルパー(旧)

共通事項

名前の指定

タグのid/nameやラベルのforに指定する識別子の指定方法に、文字列とシンボルの2種類がある。

text_field_tag(:name)
text_field_tag("name")

いずれも生成されるタグはid/nameに文字列が設定される。

<input type="text" id="name" name="name">

基本系

form_tag

form_tagfomタグを生成する(Railsdoc)。

form_tag(action [option/HTML_attr/event]) do
end

アクションを指定

メソッドを指定

multipart指定

 

submit_tag

submit_taginputタグのtype="submit"を生成する(Railsdoc)。

submit_tag([button_name , option/HTML_attr/event])

ボタン名を指定:第1引数はボタン名

無効化

POST中の表示の指定

label_tag

label_tagはフォーム要素と関連付けられたラベルタグを生成する(Railsdoc)。

label_tag(id&name [, contents [, HTML_attr or event])

識別子と内容を指定

テキスト入力系

text_field_tag

text_field_taginputタグのtype="text"を生成する(Railsdoc)。

text_field_tag(id&name [, value, option/HTML_attr/event])

識別子のみ指定:第1引数がidとnameにセットされる

値を指定:第2引数がvalueの値になる

識別子とプレースホルダーを指定

クラス指定

 

Vagrant – Atomを使う

方法1~共有フォルダ-

共有フォルダにあるファイルをホスト側のAtomで開く。

ただし、Railsのファイルを編集している場合、いったんRailsサーバーを立ち上げなおさないと内容が反映されないという症状が出た。

方法2~AtomからFTP接続

remote-ftpのインストール

AtomにFTP接続用のパッケージをインストールして接続する。

手順

  1. File → Settings→Installからremote-ftpを検索してインストール
  2. AtomからホストのVirtualBoxの仮想マシンフォルダーを開く(C:\vagrant\centos7)
  3. Packages→Remote FTP → Create SFTP config file
  4. Atomで開いた.ftpconfigファイルの内容を編集

.ftpconfigファイルの編集

.ftpconfigファイルの編集に必要な情報は、コンソールからvagrant ssh-configコマンドで表示させる。

この情報に基づいて.ftpconfigを編集。

接続

  1. Packages→RemoteFTP→Toggle
  2. Remoteタブ表示
  3. Connectボタンをクリック

トラブル

ERBファイル

Railsのerbファイルに色がつかない。config.csonを編集してみたが効果がなかった。

原因はtree-sitter parserのバグが考えられ、以下で対処。

  1. Settings→Coreの”Use Tree Sitter Parsers”のチェックを外す
  2. 再起動→チェックが外れているという警告は無視

 

Rails – ルーティング

ルーティングファイルの役割

RailsがユーザーのブラウザーからGETやPOSTなどのリクエストを受け取ると、まずルーティングファイルを参照する。

ルーティングファイルには、リクエストの種類、リクエストのターゲットURL、ターゲットURLに対応するコントローラーとアクションが記述されている。

その内容に従って必要なコントローラーが呼び出されて処理を行った後、ユーザー側へレンダリングされた内容が返される。

ファイルの位置とファイル名

ルーティングファイル(routes.rb)は、プロジェクト生成時にconfigディレクトリー下に生成される。

config/routes.rb

ファイルの内容

アクションを指定してコントローラーを生成すると、routes.rbにそのアクションへのルーティングを記述した1行が追加される。

たとえばコントローラーとしてdemo_contents、そのアクションとしてtop_pageを指定して生成すると以下のような内容でルーティングの記述が追加される。

一方、アクションを指定せずにコントローラーだけ指定して生成すると、route.rbへの追加は行われない。

基本的なルーティングの書き方

URL指定

以下の3つの記述は全て等価で、ブラウザーからURLをlocalhost:3000/demo_contents/top_pageと指定してGETリクエストしたとき、demo_contentsコントローラーのtop_pageアクションが実行される。

2つ目と3つ目の記述法では、URLに他の表現を設定することが可能。

以下の例ではlocalhost:3000/fooを指定した時に、demo_contentsコントローラーのtop_pageアクションが実行される。

ルートページの指定

ルートページとして特定のコントローラー・アクションを設定するときは、以下の様に記述する。

項設定すると、localhost:3000のようにブラウザーからリクエストするとdemo_contentstop_pageアクションが実行される。

基礎的なルーティング

rails routesによるルーティングの確認、to:によるURLの置き換え、as:による名前付けなどの基礎的な事項は以下にまとめた。

基礎的なルーティング

RESTful

今後

 

Rails – コントローラー/ビュー~ページの作成

概要

プロジェクト生成直後などに、コントローラーとアクションを生成してページをつくり、確認する。

生成時

  • コントローラーファイルが生成される
  • アクションに対してビューファイルが生成される
  • リクエストに対するコントローラーとアクションのルーティングが定義される

実行時

  • ユーザー側のブラウザー/クライアントからGETなどのリクエストでページが要求される
  • リクエストはプロジェクトのroutes.rbファイルの内容に従ってコントローラークラスのアクションメソッドに送られる
  • アクションメソッドは必要な内容を実行し、ビューファイルをレンダリング
  • レンダリングされたページがコントローラーを介してクライアントに送られる

手順

ディレクトリーの移動

プロジェクトディレクトリーに移動する。

cd project_name

コントローラーとアクションの生成

以下のコマンドでコンローラーを作成する。アクションを指定しない時はaction_nameを省略してもよい。

rails generate controller controller_name action_name 

プロジェクトディレクトリー下に以下のファイルが作成される。

  • app/controllers/controller_name_controller.rb
  • app/views/controller_name/action_name.html.erb
  • app/assets/stylesheets/controller_name.scss

コントローラーファイル

ファイルの位置とファイル名

app/controllers下のファイルにコントローラーのクラスが定義される。

クラスファイル名はスネークケース末尾に'_controller'がつけられる。拡張子は.rb

  • controller_name_controller.rb

ファイルの内容

ファイル内容はクラス定義で、コントローラーとアクションを指定して生成した場合、以下が定義されている。

  • コントローラークラス
    • コントローラークラスはApplicationControllerクラスを継承
    • クラス名はパスカルケースで、末尾に'_Controller'がつけられる
      • ControllerNameController
  • アクションメソッド
    • コントローラークラスのメソッドとして定義される
    • アクション名はスネークケース
      • action_name

後からアクションを追加する場合、コントロールクラスのメソッドとして追加し、ルーティングを設定する。

ビューファイル

ファイルの位置とファイル名

app/viewsディレクトリーの下にコントローラー名と同じフォルダーが作成され、その下にアクション名と同じ名前のスネークケースでアクションメソッドが定義される。拡張子は.html.erb

app/views/demo_contents/top_page.html.erb

ファイルの内容

コントローラー追加直後のビューファイルの内容はシンプルで、コントローラー#ビューの表示がH1要素で、その場所がp要素で書かれている。

後からアクションを追加する場合、アクション名と同じファイル名でhtml.erbファイルを作成し、その内容にHTMLを書いていく。

スタイルシート

ファイルの位置とファイル名

コントローラーを生成すると、アプリケーション固有のスタイルシートがapp/assets/stylesheetsにつくられる。ファイル名はコントローラーと同じスネークケースで拡張子は.scss

app/assets/stylesheets/controller_name.scss

拡張子からわかるように、スタイルシートはSCSSで書くことを想定している。

ファイルの内容

ファイルの内容はコメントのみで、ゼロからスタイルを指定するようになっている。

参照:Railsにおけるスタイルシートの設定

ルーティングファイル

ファイルの位置とファイル名

ルーティングファイルはconfigディレクトリー下のroutes.rbファイル。

config/routes.rb

ファイルの内容

コントローラーが生成されるのに合わせて、routes.rbに1行追加される。

この場合、ブラウザー側からは以下のURLでアクセスするとアクションメソッドで指定したページが表示される。

localhost:3000/controller_name/action_name

参照:Railsにおけるルーティング基礎的なルーティング

確認

ここでプロジェクトディレクトリー下でRailsサーバーを立ち上げる

rails s -b 0.0.0.0

その後ホストのブラウザーで以下のURLを直に入力すると、シンプルなページが表示される。

localhost:3000/controller_name/action_name

ページの削除

コントローラーの削除は以下のコマンドで実行。

rails destroy controller controller_name

このコマンドでコントローラーファイルやビューファイルなどはきれいに削除されるが、routes.rbの記述だけは残るため別途削除する必要がある。

実行例

コントローラーとアクションの生成

demo_appというプロジェクトを作成した後、demo_contentsというコントローラーとその下のtop_pageというアクションを定義する。

コントローラーファイル

ファイルの位置と名前

app/controllersディレクトリーの下に以下のファイルが生成される。

demo_contents_controller.rb

ファイル名はスネークケースで、コントローラー名の後ろに_controllersが付加される。拡張子は.rb

ファイルの内容

パスカルケースでコントローラークラスの空の定義が生成される。この場合はdemo_contentsからDemoContentsControllerクラスが定義され、メソッド名はスネークケースでtop_pageとなっている。

ビューファイル

新たに作成されたapp/views/demo_contentsディレクトリーに、アクションに対応したビューファイルが生成されている。

この場合、ディレクトリー名がコントローラー名demo_contents、ビューファイル名がアクション名に基づいてtest_page.html.erbとなっている。

ファイルの内容はシンプルなHTML。

  • H1要素でコントローラークラス名とアクション名(DemoContents#top_page)を表示
  • p要素でビューファイルのパスを表示(app/views/demo_contents/top_page.html.erb)

スタイルシート

app/assets/stylesheets/に作成されたスタイルシート(demo_contents.scss)の内容を確認してみる。コメントのみの空の内容なのが確認できる。

ルーティングファイル

config/routes.rbを確認すると1行追加されている。

 

以下のURLでアクションで設定されたページが表示される。

localhost:3000/demo_contents/top_page

表示結果は以下のとおりシンプル。

Rails – プロジェクトの生成と確認

概要

Railsのプロジェクトの開始は、おおむね次の手順による。

  1. プロジェクトファイル群の生成
  2. タイムゾーン設定
  3. MySQLサーバー起動
  4. Railsサーバー起動

ここまででRailsが準備したデフォルトのページが表示される。

手順

プロジェクトファイル群の作成

コマンドラインで以下を実行。RailsはデフォルトでSQLiteを使うので、MySQLを使うためにはプロジェクト生成時に指定する。

rails new project_name -d mysql
rails new project_name --database=mysql

project_nameでディレクトリーが作られ、その下にサブディレクトリ―やファイル群が作成される

タイムゾーンの設定

project_name/config/application.rbファイルを開く

以下の2行をclass Application...endの間、config.load_defaultsの下に追加

database.ymlの編集

MySQLをデータベースに指定しているので、config/database.ymlの編集が必要になる。

最低限、データベースのユーザー名とパスワードをdevelopmentブロックに設定。

MySQLサーバーの起動

以下のコマンドでMySQLサーバーを起動する。

sudo systemctl start mysqld

稼働状況の確認は以下のコマンド。

systemctl status mysqld

Railsサーバーの起動

プロジェクトディレクトリーに移動する。

cd project_name

サーバー起動のコマンドを実行する。

rails s

Rails 6の場合は以下。

rails s -b 0.0.0.0

確認

この段階でホスト側のブラウザーで以下のURLからRailsのデフォルト画面が表示されることを確認。

localhost:3000

ファイル配置

ディレクトリー・ファイルの配置

プロジェクトの削除

  1. データベースを作成している場合、データベースが不要なら削除
    • rails db:drop
    • ただしMySQLレベルでデータベースが一切削除されてしまうので注意
  2. プロジェクトファイル群を削除
    • rm -rf project_name

実行例

実行例概要

demo_appという名前のプロジェクトを生成して結果を確認する。

最初はデータベースを設定せず、MySQLサーバーも起動しない。

プロジェクト生成

database.ymlの修正

config/database.ymlの内容を修正。

  • defaultブロック
    • データベースがmysql2であることを確認
    • usernamepasswordを設定
  • developmentブロック
    • database:はとりあえずコメントアウト
  • testブロック・productionブロック
    • とりあえず全てコメントアウト

最低限の構成は以下のとおり。

Railsサーバー起動

接続確認

ホストのブラウザーからlocalhost:3000に接続し、デフォルト画面を確認。

 

Rails – ファイル配置

Railsバージョン

Rails 6.1.3

ファイル配置

ディレクトリー

.git
  • branches
  • hooks
  • info
  • objects
  • refs
  • HEAD
  • config
  • description
app
  • assets
    • config
    • images
    • stylesheets
  • channels
    • application_cable
      • channel.rb
      • connection.rb
  • controllers
    • concerns
      • .keep
    • application_controller.rb
    • コントローラー名_controller.rb
  • helpers
    • application_helper.rb
    • コントローラー名_helper.rb
  • jobs
    • application_job.rb
  • mailers
    • application_mailer.rb
  • models
    • concerns
      • .keep
    • application_record.rb
  • views
    • layouts
      • application.html.erb
      • mailer.html.erb
      • mailer.text.erb
    • コントローラー名
      • アクション名.html.erb
bin
  • bundle
  • rails
  • rake
  • setup
  • spring
  • webpack
  • webpack-dev-server
  • yarn
config
  • envitonments
    • development.rb
    • production.rb
    • test.rb
  • initializers
    • application_controller_renderer.rb
    • assets.rb
    • backtrace_silencers.rb
    • content_security_policy.rb
    • cookies_serializer.rb
    • filter_parameter_logging.rb
    • inflections.rb
    • mime_types.rb
    • permissions_policy.rb
    • wrap_parameters.rb
  • locales
    • en.yml
  • webpack
    • development.js
    • environment.js
    • production.js
    • test.js
  • application.rb
  • boot.rb
  • cable.yml
  • credentials.yml.enc
  • database.yml
  • environment.rb
  • master.key
  • puma.rb
  • routes.rb
  • spring.rb
  • storage.yma
  • webpacker.yml
db
  • seeds.rb
lib
  • assets
  • tasks
log
  • .keep
  • development.log
node_modules
  • 多数のライブリーディレクトリー
public
  • packs
    • js
  • 404.html
  • 422.html
  • 500.html
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png
  • favicon.ico
  • robots.txt
storage
  • .keep
test
  • channels
  • controllers
  • fixtures
  • helpers
  • integration
  • mailers
  • models
  • system
  • test_helper.rb
tmp
vendor
  • .keep

ファイル

  • .browserslistrc
  • .gitattributes
  • .gitignore
  • .ruby-version
  • Gemfile
  • Gemfile.lock
  • README.md
  • Rakefile
  • babel.config.js
  • config.ru
  • package.json
  • postcss.config.js
  • yarn.lock

Rails – erbのコメントアウト

概要

Railsで生成される.html.erbファイル中のスクリプト部分のコメントアウトについて。

たとえば以下のコードをコメントアウトする場合。

<!– —>は使えない

HTMLのコメントアウトでは実行を抑止できない。

#~1行コメント

Rubyの#で1行をコメントアウトできる。HTMLソース中には表示されない。

スクリプトタグの中でコメントアウトする場合、既存の<%の後ろに#を追加。

スクリプトタグの外でコメントアウトする場合、先頭に<%#を追加。この場合は最初に%>が現れるまでの内容がコメントになるので、末尾に%>を追加しなくてもよい。コメントアウトを戻すときも先頭の<%#だけを削除。

=begin…=end~複数行コメント

Rubyの=begin...=endによる複数行コメントを使う。=begin=endとも行頭になければならない。

ファイルの末尾でエラーが出ることがあり、見栄え・打ち込みやすさの点からあまりよろしくない。

<% if false %>…<% end %>

falseで実行されないifクローズで該当する部分を囲む方法。

直感的にコメントだと認識し難いのが難点。

空のメソッドで囲む方法

共通で参照可能な場所に以下のような関数を定義する。

そしてコメントアウトしたい部分を関数で囲む。

 

Vagrant/CentOS7 – Railsのインストール

概要

Vagrant + VirtualBox + CentOSの環境にRuby、MySQLをインストール後、Railsをインストールするのにいろいろと躓きながら進めた記録。

構成

  • Vagrant : 2.2.14
  • VirtualBox : 6.1.18
  • Box : bento/CentOS-7.7
  • mysql : Ver 8.0.23 for Linux on x86_64
  • Ruby : ruby 3.0.0p0
  • Rails : Rails 6.1.3

インストール概略

階層が下のものは今回必要になったもの。

  • SELinux、firewalldの停止
  • Railsインストール
    • sasscインストール
      • g++インストール
    • mysql-develインストール
      • Node.jsインストール
  • Railsサーバー実行
    • webpackerインストール
      • Node.jsインストール(再掲)
      • Yarnインストール

利用手順

アプリケーション生成

sqlite3がデフォルトで未インストールではエラーが出るため、コマンドラインでmysqlを指定。

  • rails new app_name -d mysql
  • rails new app_name --database=mysql

database.ymlの修正

データベースを使わない場合は、development、test、productionの各database:をコメントアウト/削除。

Railsサーバー起動

アプリケーションディレクトリー内で以下を実行。

rails s -b 0.0.0.0

ブラウザから以下でアクセス。

localhost:3000

Railsに影響する機能の停止

Railsをインストール・稼働させるにあたって、Railsに影響を与える機能を停止させる。

SELinux

アクセス制御機能のSELinuxのステータスがEnforsingの場合にはPermissiveになるよう設定する。

firewalld

ファイアーウォール・サービスfirewalldが有効の場合は無効化する。

Railsのインストール

Rails本体のインストール

インストール後のバージョン確認。

エラー1~アプリ生成時~sassc

sasscパッケージがない

Railsインストール後にアプリケーションを生成しようとすると、sasscインストール時にエラーとなる。

sasscインストール時にg++がない

メッセージに従ってsasscをインストールしようとするとエラーになる。g++がないのが原因らしい。

参考サイト:centos7でsassc 2.0.0 with native extensionsのインストールに失敗

gcc-c++はあるようだが・・・

インストールしてみる。

sasscのインストール成功

gcc-c++をインストールしてみると、無事sasscがインストールできた。

エラー2~アプリ生成時~sqlite3

sqlite3エラー

再度アプリケーションを生成すると、まだsqlite3に関するエラーが残っている。使いたいのはmysql。

mysql-develのインストール

mysqlを使いたいので、mysql-develの存在を確認。

yum list | grep mysql-devl

存在しない場合はインストール。

Node.jsがないというエラー

生成時にエラーが発生したアプリケーションをいったん削除し、データベースにmysqlを指定してアプリケーションを生成。

railsサーバー起動でもエラー

webpackerエラー

ここでいったんrails sでサーバーを起動すると、webpackerの設定ファイルがないというエラー。

webpackerインストールエラー

webpackerインストール時の”Please run rails webpacker:install”に従ってインストールしようとすると、ここでも”Node.jsがない”というエラーが出てサーバーが起動しない。

Node.jsのインストール

アプリケーション生成時、Railsサーバー実行時に共通してNode.jsに関するエラーが出ているので、Node.jsをインストール

当初、最新版のv15.10.0をインストールした。

再度webpackerインストールでエラー

再度webpackerをインストールしようとすると、Node.jsの警告とYarnに関するエラーが出てストップ。

Node.jsのダウングレード

Node.jsの警告も気持ち悪いので、ダウングレード。

ダウングレードしたNode.jsを使用。

ここで再度webpackerをインストールしようとすると、まだ”Yarnがインストールされていない”というエラーが残っている。

Yarnのインストール

npmでYarnをインストールする。

参考:Yarn公式サイト

webpackerインストール

Node.jsとYarnがそろったので、webpackerがインストールできた。

Railsサーバー起動・接続

vagrantfile設定

vagrantfileには以下の1行を設定している。

サーバー起動・接続

ここでrails sでサーバーを起動するが、ブラウザーがつながらない。

参考サイト(Rails4.2:Vagrant上の仮想マシンで起動したRailsにホストのブラウザからアクセス出来ない)のおかげで、Railsサーバーを以下で立ち上げるとよいことが分かった。

この状態で、ホストのブラウザーからlocalhost:3000でつながった。

アプリケーション生成~成功

ここで再度アプリケーションを生成して成功。

viなどでdatabase.ymlを修正。

Railsサーバー起動。

ホストのブラウザーからlocalhost:3000で接続。

Linux – Node.jsのインストール

概要

Vagrant + VirtualBox + CentOS7でRailsをインストールする際にNode.jsが必要になったのでインストール。

参考サイト:CentOS 7 Node.js のインストール手順 (yum を利用)

準備~nvmのインストール

nvmはNode.jsのバージョン管理ツール。Gitでnvmをクローン。

インストール可能なNode.jsの確認

インストール可能なNode.jsのバージョンを確認。

インストール

最新の安定板のインストール

nvm install stableで最新の安定板がインストールされる。

指定バージョンのインストール

RailsではNode.jsが必要となるが、最新バージョンだとunstableだと警告が出ることがある。Node.jsのバージョンを下げるときは、バージョンを指定してインストール。

指定バージョンの使用

デフォルトバージョン以外のNode.jsを使うときは以下のコマンド。

nvm use *.*.*

インストール済のNode.jsの確認

デフォルト・バージョンの変更

デフォルトバージョンの変更は以下のコマンド。

nvm alias default *.*.*

上記を実行しただけでは反映されない。

再起動することでデフォルト設定が反映される。

指定したバージョンの削除

以下のコマンドでバージョンを指定して削除。

nvm uninstall *.*.*

確認。