Rails6のactive adminでお知らせ投稿機能を実装

Rails6のactive adminでお知らせ投稿機能を実装

Rails6のactive adminでお知らせ投稿機能を実装する。

前提条件として、rails6でrails newしていて、何かしらのページをブラウザで確認できる状態かつ、active adminの導入は完了済みであること。

僕の場合だと、homeコントローラーの中にindex.html.erbができている状態なので、そこに追加します。

完成形

完成としては、下記の画像の様なお知らせ機能の実装になります。

Rails6お知らせ機能完成形

なお、会員登録機能は関係ありません。

ベルのマークとお知らせ一覧の表示のみの実装です。

active adminの管理画面に項目を追加

まずは、投稿機能(Post)モデルをgenerateし、migrationを実行します。

$ rails g model Post title:string contents:text
$ rails db:migrate

migrationができたら、000000_creat_posts.rbを編集します。

ここでは、お知らせ機能に必要なタイトルと内容を投稿したいので、:title:contentsとしています。

class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :contents
      t.timestamps
    end
  end
end

次に、rails g active_admin:resource コマンドでモデル名を渡すことにより、active adminにそのモデルに対する管理ページを作成することができます。

$ rails g active_admin:resource Post

これで、管理画面にPostの項目が追加できました。(まだ管理画面では確認しない)

管理画面でタイトルなど(パラメーター)を追加

app/admin/posts.rb に permit_params を追加する必要があります。

今回の場合だと、簡単なお知らせ機能の実装がしたいので、パラメーターに必要なのは、タイトルと内容になりますよね。

ActiveAdmin.register Post do
  permit_params :title, :contents

  # Postのカラムに管理画面に表示したい項目を記述
  index do
    column :id
    column "タイトル", :title
    column "内容", :cnotents
    column "作成日時", :created_at
    column "更新日時", :updated_at
    actions
  end

  # 投稿フォームいタイトルと内容を入力できる容認する
  form do |f|
    f.inputs do
      f.input :title
      f.input :contents
    end
    f.actions
  end
end

ブラウザ側(view)にも表示させる

あとは、投稿した内容をブラウザにも反映させれば完了です。

viewsファイルのどこでもいいので、下記を記述。(僕の場合はindex.html.erb

<div class="post">
  <% @posts.first(3).each do |post| %>
    <div class="post-body">
      <h2 class="post-title"><%= post.title %></h2>
      <p class="post-text"><%= post.contents %></p>
      <p class="post-time"><small><%= post.created_at.strftime('%Y.%m.%d') %></small></p>
    </div>
  <% end %>
</div>

<% @posts.first(3).each do |post| %>で3件までの表示にしています。

viewsファイルのコントローラー(僕の場合、home_controller.rb)に下記を記述。

def index
    @posts = Post.all.order(created_at: :desc)
  end
  private
    def set_post
      @post = Post.find(params[:id])
    end

これで終わり。