Rails – link_toの動的なスタイル

2021-04-02 / tau / コメントする

概要

Railsのヘルパーでクラスを動的に変更する方法。<%...%>を入れ子にすることができないが、文字列内の変数展開を使えば、変数の内容をクラスに設定できる。

コントローラー

コントローラーでインスタンス変数の配列を定義し、その内容によってlink_toのスタイルを変更する。

class PagesController < ApplicationController
  def link_to_style
    @items = ["使用可能", "使用不可", "使用可能"]
  end
end

class PagesController < ApplicationController

def link_to_style

@items = ["使用可能", "使用不可", "使用可能"]

end

ビュー

インスタンス変数の配列の各要素を取り出しながら、

変数availabilityにenabled/disabledを設定
link_toのclass設定で変数availabilityを文字列展開

<main>
  <% @items.each do |item| %>
    <% availability = (item == "使用可能" ? "enabled" : "disabled") %>
    <p>
      <%= item %>：
      <%= link_to "#", class: "#{availability}" do %>
        ◆◆◆
      <% end %>
    </p>
  <% end %>
</main>

<main>

<% @items.each do |item| %>

<% availability = (item == "使用可能" ? "enabled" : "disabled") %>

<p>

<%= item %>：

<%= link_to "#", class: "#{availability}" do %>

◆◆◆

<% end %>

</p>

<% end %>

</main>

この結果、HTMLソースは以下の様になる。

<main>
  <p>
    使用可能：
    <a class="enabled" href="#">◆◆◆</a>
  </p>
  <p>
    使用不可：
    <a class="disabled" href="#">◆◆◆</a>
  </p>
  <p>
    使用可能：
    <a class="enabled" href="#">◆◆◆</a>
  </p>
</main>

<main>

<p>

使用可能：

</p>

<p>

使用不可：

</p>

<p>

使用可能：

</p>

</main>

スタイル

クラスに設定されるenabled/disabledに対してスタイルを設定する

main {
  margin: 20px;
  font-size: 20px;
  p {
    margin-top: 10px;
    .enabled {
      color: #008800;
    }
    .disabled {
      color: #aabbaa;
      pointer-events: none;
    }
  }
}

main {

margin: 20px;

font-size: 20px;

p {

margin-top: 10px;

.enabled {

color: #008800;

}

.disabled {

color: #aabbaa;

pointer-events: none;

}

実行結果

disableを設定したリンクの色が薄くなっている。また、このリンクを無効にしたので、クリックしてもコンソールに反応が出ない。

Rails – 掲示板 – 新規投稿機能

2021-04-02 / tau / コメントする

概要

新規投稿ページの枠組みをつくったので、これに投稿機能を実装する。

掲示板の第2段階へ

準備

投稿画像ディレクトリー

投稿画像ファイル保存用のディレクトリーを作成する。

public/post_images

ビュー

新規投稿のnewビューは再掲。

<div class="new_post">
  <h1>新規記事投稿</h1>
  <div class="contents">
    <%= form_with(model: @post, url: '/posts', local: true) do |f| %>
      <h2>メッセージ入力</h2>
      <div class="field">
        <%= f.text_area(:message, class: "message") %>
      </div>
      <h2>画像アップロード</h2>
      <div class="field">
        <%= f.file_field(:upload_file) %>
      </div>
      <button>登録する</button>
    <% end %>
  </div>
</div>

<h1>新規記事投稿</h1>

<%= form_with(model: @post, url: '/posts', local: true) do |f| %>

<h2>メッセージ入力</h2>

<%= f.text_area(:message, class: "message") %>

</div>

<h2>画像アップロード</h2>

<%= f.file_field(:upload_file) %>

</div>

<% end %>

</div>

コントローラー

post_paramsヘルパー

ビューのフォームからパラメーターを受け取る際のヘルパーで、コントローラーで扱うパラメーターを許可している。

:upload_fileは直接保存しないので含めていない。

class PostsController < ApplicationController

  .....

  def post_params
    params.require(:post).permit(:message)
  end
end

class PostsController < ApplicationController

.....

def post_params

params.require(:post).permit(:message)

end

createアクション

フォーム入力を受けて投稿記事を生成・保存する本体。ファイルのアップロードについてはこちらを参照。

記事を投稿したユーザーをデータベースから拾っている(L7)
メッセージか画像かどちらかがあれば投稿できる(L10-13)

app/controllers/posts_controllers.rb

class PostsController < ApplicationController

  .....

  def create
    # 記事を投稿したユーザーをDBから取得
    @user = User.find(user_in_session.id)
    # フォーム入力されたアップロードファイルを取得
    upload_file = params[:post][:upload_file]
    # メッセージと画像ファイルの両方がないとエラー
    if post_params[:message].blank? && upload_file.nil?
      flash[:danger] = "メッセージか画像か少なくともどちらかを入れてください"
      redirect_to new_post_path and return
    end

    # Postオブジェクトを生成
    @post = Post.new(post_params.merge(user_id: @user.id))

    # 画像ファイルが選択された場合
    if upload_file
      # アップロードファイルのファイルタイプが妥当かどうか検証
      case upload_file.content_type
      when "image/jpeg"
        extention = ".jpg"
      when "image/png"
        extention = ".png"
      else
        flash.now[:danger] = "JPEGかPINGの画像ファイルを指定してください"
        render new_post_path and return
      end

      # 保存する画像ファイル名をランダム文字列に
      upload_file_name = random_string(20) + extention
      # 投稿画像を保存するディレクトリー
      upload_dir = Rails.root.join("public", "post_images")
      # アップロードする投稿画像ファイルのフルパス
      upload_file_path = upload_dir + upload_file_name
      # アップロードファイルの書き込み
      File.binwrite(upload_file_path, upload_file.read)

      # 生成済みのPostオブジェクトに従属させてPostImageオブジェクトを生成
      if !@post.post_images.build(post_id: @post.id, file_name: upload_file_name)
        flash[:danger] = "投稿画像が保存できませんでした"
        redirect_to new_post_path and return
      end
    end

    # エラーがなければPostオブジェクトをデータベースに保存
    if @post.save
      redirect_to top_path and return
    else
      flash.now[:danger] = "投稿メッセージが保存できませんでした"
      redirect_to new_post_path and return
    end
  end

  .....

end

class PostsController < ApplicationController

.....

def create

# 記事を投稿したユーザーをDBから取得

@user = User.find(user_in_session.id)

# フォーム入力されたアップロードファイルを取得

upload_file = params[:post][:upload_file]

# メッセージと画像ファイルの両方がないとエラー

if post_params[:message].blank? && upload_file.nil?

flash[:danger] = "メッセージか画像か少なくともどちらかを入れてください"

redirect_to new_post_path and return

end

# Postオブジェクトを生成

@post = Post.new(post_params.merge(user_id: @user.id))

# 画像ファイルが選択された場合

if upload_file

# アップロードファイルのファイルタイプが妥当かどうか検証

case upload_file.content_type

when "image/jpeg"

extention = ".jpg"

when "image/png"

extention = ".png"

else

flash.now[:danger] = "JPEGかPINGの画像ファイルを指定してください"

render new_post_path and return

end

# 保存する画像ファイル名をランダム文字列に

upload_file_name = random_string(20) + extention

# 投稿画像を保存するディレクトリー

upload_dir = Rails.root.join("public", "post_images")

# アップロードする投稿画像ファイルのフルパス

upload_file_path = upload_dir + upload_file_name

# アップロードファイルの書き込み

File.binwrite(upload_file_path, upload_file.read)

# 生成済みのPostオブジェクトに従属させてPostImageオブジェクトを生成

if !@post.post_images.build(post_id: @post.id, file_name: upload_file_name)

flash[:danger] = "投稿画像が保存できませんでした"

redirect_to new_post_path and return

end

# エラーがなければPostオブジェクトをデータベースに保存

if @post.save

redirect_to top_path and return

else

flash.now[:danger] = "投稿メッセージが保存できませんでした"

redirect_to new_post_path and return

end

.....

end

メッセージと画像、メッセージのみ、画像のみの投稿後のデータベースの例は以下のとおり。

mysql> SELECT id, user_id, message FROM posts;
+----+---------+-------------------------------------------+
| id | user_id | message                                   |
+----+---------+-------------------------------------------+
|  1 |       1 | こんにちは                                |
|  2 |       2 | よろしく。
メッセージだけ。              |
|  3 |       3 |                                           |
+----+---------+-------------------------------------------+
3 rows in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;
+----+---------+--------------------------+
| id | post_id | file_name                |
+----+---------+--------------------------+
|  1 |       1 | Z579R0dXcpxF6BZqqmN8.jpg |
|  2 |       3 | qFpkBIPhopF5JBhLluoY.jpg |
+----+---------+--------------------------+
2 rows in set (0.00 sec)

mysql> SELECT id, user_id, message FROM posts;

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

| id | user_id | message |

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

| 1 | 1 | こんにちは |

| 2 | 2 | よろしく。

メッセージだけ。 |

| 3 | 3 | |

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

3 rows in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;

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

| id | post_id | file_name |

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

| 1 | 1 | Z579R0dXcpxF6BZqqmN8.jpg |

| 2 | 3 | qFpkBIPhopF5JBhLluoY.jpg |

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

2 rows in set (0.00 sec)

Rails – バリデーターのカスタマイズ

2021-04-01 / tau / コメントする

概要

モデルの検証を行うバリデーターを自作するのにいくつかの方法がある。

バリデーションメソッドをモデルで定義
ActiveModel::Validatorのサブクラスを定義
ActiveModel::EachValidatorのサブクラスを定義

バリデーションメソッド

検証したいモデルの中でカスタムメソッドを定義し、validate(単数形)でメソッドを呼び出す。

以下のコードは、:name属性と:email属性を持つUserモデルをカスタムメソッドにより検証する例。

class User < ApplicationRecord
  validate :name_or_email_presents

  def name_or_email_presents
    message = "Either name or email must present"
    errors.add(:name, message) unless name.present? || email.present?
  end
end

class User < ApplicationRecord

validate :name_or_email_presents

def name_or_email_presents

message = "Either name or email must present"

errors.add(:name, message) unless name.present? || email.present?

end

カスタムメソッドname_or_email_presentsを定義
メソッドでは、:nameと:emailの両方とも空の場合にエラーを追加
モデルでvalidateによってメソッドをコールバックとして追加(validateは単数形)

ActiveModel::Validator

ActiveModel::EachValidator

Rails – 掲示板 – 新規投稿ページ

2021-04-01 / tau / コメントする

概要

サインインユーザーによる新規記事投稿のページを実装していく。

サインインユーザーがメニューアイコンをクリックして新規投稿ページへ
- 新規投稿ページでは、メッセージを入力、画像ファイルを指定
- サインインしていないユーザーに対してはアクセス制限
ここではresourcesによるRails標準のルーティングを使う
コントローラーはPostsController.rb

掲示板の第2段階へ

ルーティング

コントローラーに対応したpostsについてresourcesでルーティングを設定する。

config/routes.rb

Rails.application.routes.draw do

  .....

  resources :posts
end

Rails.application.routes.draw do

.....

resources :posts

end

resourcesにより設定されたルーティングは以下のとおり。

rails routes

[vagrant@vagrant ex_bbs]$ rails routes
         Prefix Verb   URI Pattern               Controller#Action
           root GET    /                         pages#top
            top GET    /top(.:format)            pages#top
        sign_up GET    /sign_up(.:format)        users#sign_up
        sign_in GET    /sign_in(.:format)        users#sign_in
       sign_out GET    /sign_out(.:format)       users#sign_out
sign_up_process POST   /sign_up(.:format)        users#sign_up_process
sign_in_process POST   /sign_in(.:format)        users#sign_in_process
        profile GET    /profile/:id(.:format)    users#show
      edit_user GET    /users/:id/edit(.:format) users#edit
    update_user PATCH  /users/:id/edit(.:format) users#update
          posts GET    /posts(.:format)          posts#index
                POST   /posts(.:format)          posts#create
       new_post GET    /posts/new(.:format)      posts#new
      edit_post GET    /posts/:id/edit(.:format) posts#edit
           post GET    /posts/:id(.:format)      posts#show
                PATCH  /posts/:id(.:format)      posts#update
                PUT    /posts/:id(.:format)      posts#update
                DELETE /posts/:id(.:format)      posts#destroy

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

root GET / pages#top

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

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

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

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

sign_up_process POST /sign_up(.:format) users#sign_up_process

sign_in_process POST /sign_in(.:format) users#sign_in_process

profile GET /profile/:id(.:format) users#show

edit_user GET /users/:id/edit(.:format) users#edit

update_user PATCH /users/:id/edit(.:format) users#update

posts GET /posts(.:format) posts#index

POST /posts(.:format) posts#create

new_post GET /posts/new(.:format) posts#new

edit_post GET /posts/:id/edit(.:format) posts#edit

post GET /posts/:id(.:format) posts#show

PATCH /posts/:id(.:format) posts#update

PUT /posts/:id(.:format) posts#update

DELETE /posts/:id(.:format) posts#destroy

コントローラー

PostControllerコントローラーを生成する。アクションについては、生成後のコントローラーファイルを編集することとして、ここでは枠組みだけを生成。

rails generate controller posts

[vagrant@vagrant ex_bbs]$ rails generate controller posts
Running via Spring preloader in process 28111
      create  app/controllers/posts_controller.rb
      invoke  erb
      create    app/views/posts
      invoke  test_unit
      create    test/controllers/posts_controller_test.rb
      invoke  helper
      create    app/helpers/posts_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/posts.coffee
      invoke    scss
      create      app/assets/stylesheets/posts.scss

[vagrant@vagrant ex_bbs]$ rails generate controller posts

Running via Spring preloader in process 28111

create app/controllers/posts_controller.rb

invoke erb

create app/views/posts

invoke test_unit

create test/controllers/posts_controller_test.rb

invoke helper

create app/helpers/posts_helper.rb

invoke test_unit

invoke assets

invoke coffee

create app/assets/javascripts/posts.coffee

invoke scss

create app/assets/stylesheets/posts.scss

生成されたコントローラーファイルにアクションを追加。

new
- 他画面から遷移して投稿画面をレンダリング
- ビューで扱うモデルはPostなので、@postにUserのインスタンスをいれておく
create
- 投稿画面からのPOSTにより処理が渡され、投稿記事の新規作成処理を行う

またアクション実行前にauthorizeをコールバック登録し、アクセス制限をかけている。

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  before_action :authorize

  def new
    @user = User.new
  end

  def create
  end
end

class PostsController < ApplicationController

before_action :authorize

def new

@user = User.new

end

def create

end

ビュー

newアクションによりレンダリングされるページのコード。

メッセージ入力用のtext_areaとファイル選択用のfile_field、送信用のボタンを配置する。

views/posts/new.html.erb

<div class="new_post">
  <h1>新規記事投稿</h1>
  <div class="contents">
    <%= form_with(model: @post, url: '/posts', local: true) do |f| %>
      <h2>メッセージ入力</h2>
      <div class="field">
        <%= f.text_area(:message, class: "message") %>
      </div>
      <h2>画像アップロード</h2>
      <div class="field">
        <%= f.file_field(:upload_file) %>
      </div>
      <button>登録する</button>
    <% end %>
  </div>
</div>

<h1>新規記事投稿</h1>

<%= form_with(model: @post, url: '/posts', local: true) do |f| %>

<h2>メッセージ入力</h2>

<%= f.text_area(:message, class: "message") %>

</div>

<h2>画像アップロード</h2>

<%= f.file_field(:upload_file) %>

</div>

<% end %>

</div>

スタイル

ビューに対する最低限のスタイルを設定。

app/assests/stylesheets/posts.scss

// new.html.erb
.new_post {
  margin: 0 auto;
  width: 600px;
  height: 100%;
  background-color: white;
  h1 {
    margin: 0 auto;
    padding: 40px 0 30px 0;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .contents {
    h2 {
      margin: 30px 20px 0 10px;
      font-size: 15px;
    }
    .field {
      margin: 10px 20px 0 auto;
      width: 500px;
    }
    .message {
      background-color: red;
      width: 100%;
      height: 100px;
      background-color: #f8f8f8;
    }
    button {
      display: block;
      margin: 20px auto;
    }
  }
}

// new.html.erb

.new_post {

margin: 0 auto;

width: 600px;

height: 100%;

background-color: white;

h1 {

margin: 0 auto;

padding: 40px 0 30px 0;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.contents {

h2 {

margin: 30px 20px 0 10px;

font-size: 15px;

}

.field {

margin: 10px 20px 0 auto;

width: 500px;

}

.message {

background-color: red;

width: 100%;

height: 100px;

background-color: #f8f8f8;

}

button {

display: block;

margin: 20px auto;

}

リンク設定

サインインユーザー用ヘッダーメニューのアイコンから記事投稿ページへのリンクを設定。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  .....

  <body>
    .....
    <header>
      .....
      <!-- ヘッダーメニュ -->
      <ul class="header_menu">
        .....
        <!-- 記事投稿 -->
        <li>
          <%= link_to(new_post_path) do %>
            <i class="fas fa-arrow-circle-up icon" title="記事投稿"></i>
          <% end %>
        </li>
        .....
      </ul>
    </header>

    .....
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

.....

.....

.....

<li>

<%= link_to(new_post_path) do %>

<% end %>

</li>

.....

</ul>

</header>

.....

</body>

</html>

TauStation

月別: 2021年4月

Rails – link_toの動的なスタイル

概要

コントローラー

ビュー

スタイル

実行結果

Rails – 掲示板 – 新規投稿機能

概要

準備

投稿画像ディレクトリー

ビュー

コントローラー

post_paramsヘルパー

createアクション

Rails – バリデーターのカスタマイズ

概要

バリデーションメソッド

ActiveModel::Validator

ActiveModel::EachValidator

Rails – 掲示板 – 新規投稿ページ

概要

ルーティング

コントローラー

ビュー

スタイル

リンク設定