【HowTo】Simple Calendar/カレンダーをお手軽に導入してみる（投稿機能付き）

9037 ワード
Gem Rails Simplecalendar Rails テキストリンク

現在、個人アプリを作成しており、その中の機能として「トレーニングメモ機能」を実装することにしました。
スクールではカリキュラムになかった内容であったため、自身で色々と調べて実装したので、備忘録として記事にします。
皆様の実装に少しでも役立てていただければ、幸いです。

本記事該当Github:　https://github.com/Tatsu88-Tokyo/BulkFriends2

実装に向けての考え

今回、「トレーニングメモ機能」を実装するにあたり、以下のことを考えました。
-　筋トレをする上で記録をつけることは、モチベーション維持に繋がる。
-　記録をつけるのであれば、日付別に記録をする必要がある。
-　その記録を閲覧するときはできるだけ見やすい方がベター。

以上の考えから、今回の「トレーニングメモ機能はカレンダーを使用して、日付ごとに記録をつけられるようにすることを目標としました。
そこで、色々と調べた結果、今回はgemの「simple_calendar」を使用した実装をすることとしました。
以下にて、実装方法などを記載していきます。

実装イメージ

まず、今回実装するイメージを以下にて説明します。
今回、実装する機能は以下のようになってます。
1.カレンダーの表示
2.カレンダーへの投稿・削除・編集

1.カレンダー全体感+投稿内容詳細+投稿アクション

2.カレンダーへの投稿

事前準備

gem導入

まず、今回の実装に当たって必須となるgemを導入します。

gemfile
gem 'simple_calendar', '~> 2.0'
#記載完了次第、Bundle installを忘れずに。

コントローラ/モデル準備

続いて、今回使用するコントローラを作成します。

ターミナル
$ rails g controller trainings

モデルも作成します。

ターミナル
rails g model training

その後、マイグレーションファイルにて、今回の仕様に合わせてテーブルを作成します。

migrationfile
class CreateTrainings < ActiveRecord::Migration[5.2]
  def change
    create_table :trainings do |t|
      t.string :title
      t.text :content
      t.date :start_time
      t.references :user, foreign_key: true

      t.timestamps
    end
  end
end
ターミナル
$ rails db:migrate

コントローラとモデルの作成が完了しました。
以上で必要なファイルなどの準備ができましたので、コントローラなどを編集していきましょう。

モデル編集

まず、作成したモデルに今回の仕様に合わせて記述します。
こちらは先ほどのMigration fileに合わせて記載していきます。

training.rb
class Training < ApplicationRecord
  belongs_to :user

  validates :title, presence: true
  validates :start_time, presence: true
end

ユーザーモデルも関連しているので、忘れずに。

user.rb(一部抜粋)
class User < ApplicationRecord
 has_many : trainings
end

コントローラ編集

続いて、コントローラを編集します。

training_controller
class TrainingsController < ApplicationController
  before_action :set_user
  def index
    @trainings = current_user.trainings
  end

  def show
    @training = current_user.trainings.find(params[:id])
  end

  def new
    @trainings = current_user.trainings
  end

  def edit
    @training = current_user.trainings.find(params[:id])
  end

  def update
    @training = current_user.trainings.find(params[:id])
    @training.update(update_params)
    redirect_to trainings_path(@user.id)
  end

  def create
    @training = current_user.trainings.new(training_memo)
    if @training.save
      redirect_to trainings_path(@user.id)
    else
      redirect_to new_training_path
    end
  end

  def destroy
    @trainings = current_user.trainings.find(params[:id])
    @trainings.destroy
    redirect_to trainings_path(@user.id)
  end


  private
  def training_memo
    params.permit(:start_time,:title, :content,:user_id)
  end

  def set_user
    @user = User.find(params[:id])
  end

  def update_params
    params.require(:training).permit(:start_time,:title, :content,:user_id)
  end
end

View編集(indexのみ）

それではViewの編集をしていきます。
全てのViewを記事内に記載するとボリュームが多くなってしまうため、割愛します。
*editやdestroy向けのファイルに関して気になる方は、この記事の冒頭にある当方のGithubからご参照いただけますと幸いです。
今回のカレンダーを作成するにあたり、簡単かつ見栄えをよくするために"simple calendar"にて準備されているviewファイルをダウンロードします。

ターミナル
$ rails g simple_calendar:views
#=>以下のファイルが生成されます。
   app/views/simple_calendar
   app/views/simple_calendar/_calendar.html.erb
   app/views/simple_calendar/_month_calendar.html.erb
   app/views/simple_calendar/_week_calendar.html.erb

上記で作成したファイルを使用するために、cssファイルに以下のように記載いたします。

css
*= require simple_calendar

今回はマンスリーカレンダーを使用したかったので、Readmeに従って以下をベースに記載をします。
(ウィークリーカレンダーなど使用したい方はReadme参照ください)

Readme(SimpleCalendar)
<%= month_calendar events: @meetings do |date, meetings| %>
  <%= date %>
  <% meetings.each do |meeting| %>
    <div>
      <%= meeting.name %>
    </div>
  <% end %>
<% end %>

自身のファイルにあてはめます。

view
=render "home/header_login"
.trainings
  =link_to "記録する", new_training_path ,class:"training-edit"
  = month_calendar events: @trainings do |date,trainings|
    = date.day
    - trainings.each do |training|
      =link_to training.title,training_path(training.id)

以上でviewの編集は完了です。

routing編集

最後にルーティングを編集します。
今回はユーザーとリンクさせるためにユーザーの記述にネスティングすることで実装しました。

route.rb(一部抜粋)
resources :user, only: [:show, :edit, :update]do
  resources :trainings

以上で、カレンダーを使用した”トレーニングメモ”機能が実装できました！
gemを使用することで簡単にカレンダー機能を実装できますね。

参照

Github Simple calendar
https://github.com/excid3/simple_calendar

【rails】simple_calendarを使ってカレンダーつきのブログ機能を作ってみた。
https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0

simple calendarを使ってカレンダーを導入する
https://ywatanab.hatenablog.com/entry/2018/10/26/144038

以上となります。最後までご覧いただき、ありがとうございました！
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。